Skip to content

Commit bc7d1de

Browse files
rvsiarvsia
committed
Add documentation for field arrays
1 parent c505247 commit bc7d1de

File tree

8 files changed

+239
-13
lines changed

8 files changed

+239
-13
lines changed

‎packages/react-renderer-demo/src/app/pages/component-example/field-array.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
3+
import ComponentText from '@docs/components/component-example-text';
4+
import useComponentExample from '../../src/hooks/use-component-example';
5+
6+
import Pf4FieldArray from '@data-driven-forms/pf4-component-mapper/dist/cjs/field-array';
7+
import MuiFieldArray from '@data-driven-forms/mui-component-mapper/dist/cjs/field-array';
8+
import Pf4TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
9+
import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
10+
11+
const mappers = {
12+
pf4: {
13+
[componentTypes.FIELD_ARRAY]: Pf4FieldArray,
14+
[componentTypes.TEXT_FIELD]: Pf4TextField
15+
},
16+
pf3: {
17+
[componentTypes.FIELD_ARRAY]: () => <h2>Not implemented</h2>,
18+
[componentTypes.TEXT_FIELD]: () => <h2>Not implemented</h2>
19+
},
20+
mui: {
21+
[componentTypes.FIELD_ARRAY]: MuiFieldArray,
22+
[componentTypes.TEXT_FIELD]: MuiTextField
23+
}
24+
};
25+
26+
export default () => {
27+
const [component, baseStructure, activeMapper] = useComponentExample();
28+
return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
29+
};

‎packages/react-renderer-demo/src/app/pages/renderer/dynamic-fields.md

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,13 @@ EXACT_LENGTH: ({threshold})
6565
```
6666

6767

68-
# PF4 implementation
69-
70-
PF4 component mapper provides an experimental implementation of PF4 field arrays.
71-
72-
|Prop|Type|Description|
73-
|:---|:--:|----------:|
74-
|label|`node`|Label of the array.|
75-
|description|`node`|Description of the array.|
76-
|fields|`array`|A group of fields, which are being added to the array.|
77-
|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
78-
|minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
79-
|maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
80-
|noItemsMessage|`node`|A message which is shown, when there are no items in the array.|
68+
# Implementation
69+
70+
PF4 and MUI component mapper provides an experimental implementation of field arrays.
71+
72+
[PF4 Field Array](/component-example/field-array?mapper=pf4)
73+
74+
[MUI Field Array](/component-example/field-array?mapper=mui)
8175

8276
<RawComponent source="field-array/pf4-demo" />
8377

‎packages/react-renderer-demo/src/app/src/components/navigation/examples-definitions.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import TabsText from './examples-texts/tabs';
44
import CustomComponentText from './examples-texts/custom-component';
55
import WizardText from './examples-texts/wizard';
66
import SelectText from './examples-texts/select';
7+
import FieldArray from './examples-texts/field-array';
78
import DualListSelect from './examples-texts/dual-list-select';
9+
import arraySchemaDDF from './field-array-schema';
810

911
const formGroupVariants = [
1012
{
@@ -495,6 +497,14 @@ Vestibulum vulputate inceptos himenaeos.`
495497
]
496498
}
497499
},
500+
{
501+
component: componentTypes.FIELD_ARRAY,
502+
link: componentTypes.FIELD_ARRAY,
503+
linkText: 'Field Array',
504+
ContentText: FieldArray,
505+
value: arraySchemaDDF,
506+
variants: []
507+
},
498508
{
499509
component: componentTypes.WIZARD,
500510
link: componentTypes.WIZARD,

‎packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/field-array.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import MuiFieldArray from '@docs/doc-components/mui-field-array.md';
3+
import PF4FieldArray from '@docs/doc-components/pf4-field-array.md';
4+
import PF3FieldArray from '@docs/doc-components/pf3-field-array.md';
5+
6+
import PropTypes from 'prop-types';
7+
8+
const DocFieldArray = ({ activeMapper }) =>
9+
activeMapper === 'mui' ? <MuiFieldArray /> : activeMapper === 'pf4' ? <PF4FieldArray /> : <PF3FieldArray />;
10+
11+
DocFieldArray.propTypes = {
12+
activeMapper: PropTypes.string
13+
};
14+
15+
export default DocFieldArray;

‎packages/react-renderer-demo/src/app/src/components/navigation/field-array-schema.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const arraySchemaDDF = {
2+
fields: [
3+
{
4+
component: 'field-array',
5+
name: 'nicePeople',
6+
label: 'Nice people',
7+
description: 'This allow you to add nice people to the list dynamically',
8+
defaultItem: { name: 'enter a name', lastName: 'enter a last name' },
9+
fields: [
10+
{
11+
component: 'text-field',
12+
name: 'name',
13+
label: 'Name',
14+
placeholder: 'Borek',
15+
isRequired: true,
16+
validate: [
17+
{
18+
type: 'required'
19+
}
20+
]
21+
},
22+
{
23+
component: 'text-field',
24+
name: 'lastName',
25+
label: 'Last Name',
26+
placeholder: 'Stavitel'
27+
}
28+
]
29+
},
30+
{
31+
component: 'field-array',
32+
name: 'minItems',
33+
label: 'A list with a minimal number of items',
34+
validate: [{ type: 'min-items', threshold: 3 }],
35+
fields: [
36+
{
37+
component: 'text-field',
38+
label: 'Item'
39+
}
40+
]
41+
},
42+
{
43+
component: 'field-array',
44+
name: 'number',
45+
initialValue: [1, 2, 3, 4],
46+
defaultItem: 5,
47+
label: 'Default value with initialValues set',
48+
fields: [
49+
{
50+
component: 'text-field',
51+
label: 'Item',
52+
type: 'number'
53+
}
54+
]
55+
},
56+
{
57+
component: 'field-array',
58+
name: 'minMax',
59+
minItems: 4,
60+
maxItems: 6,
61+
label: 'Min 4 item, max 6 items without validators',
62+
initialValue: [null, null, null, null],
63+
fields: [
64+
{
65+
component: 'text-field',
66+
isRequired: true,
67+
validate: [
68+
{
69+
type: 'required'
70+
}
71+
]
72+
}
73+
]
74+
}
75+
]
76+
};
77+
78+
export default arraySchemaDDF;

‎packages/react-renderer-demo/src/app/src/doc-components/mui-field-array.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
MUI component mapper provides an experimental implementation of PF4 field arrays.
2+
3+
**Props**
4+
5+
|Prop|Type|Description|
6+
|:---|:--:|----------:|
7+
|label|`node`|Label of the array.|
8+
|description|`node`|Description of the array.|
9+
|fields|`array`|A group of fields, which are being added to the array.|
10+
|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
11+
|minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
12+
|maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
13+
|noItemsMessage|`node`|A message which is shown, when there are no items in the array.|
14+
|buttonLabels|`object`|`{add: 'ADD', remove: 'REMOVE'}` sets labels of buttons.|
15+
16+
**Revert removal**
17+
18+
MUI field array allow users to revert latest removal actions.
19+
20+
**Naming**
21+
22+
Fields can contain names, then the value will be handled as array of objects.
23+
24+
```jsx
25+
const fields = [
26+
{ name: 'name', ... },
27+
{ name: 'lastname', ... }
28+
]
29+
30+
[
31+
{ name: value1.name, lastname: value1.lastname },
32+
{ name: value2.name, lastname: value2.lastname },
33+
...
34+
]
35+
```
36+
37+
Or you can put a single field with no name. In this case, values are stored as a simple array.
38+
39+
```jsx
40+
const fields = [
41+
{ component: 'text-field' }
42+
]
43+
44+
[ value1, value2, ... ]
45+
```
46+
47+
**Custom component**
48+
49+
To implement a custom component, please take a look [here](/renderer/dynamic-fields).

‎packages/react-renderer-demo/src/app/src/doc-components/pf3-field-array.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
PF3 component mapper does not provide field array component.
2+
3+
In case of need, please contact us or open a PR.
4+
5+
**Custom component**
6+
7+
To implement a custom component, please take a look [here](/renderer/dynamic-fields).

‎packages/react-renderer-demo/src/app/src/doc-components/pf4-field-array.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
PF4 component mapper provides an experimental implementation of PF4 field arrays.
2+
3+
**Props**
4+
5+
|Prop|Type|Description|
6+
|:---|:--:|----------:|
7+
|label|`node`|Label of the array.|
8+
|description|`node`|Description of the array.|
9+
|fields|`array`|A group of fields, which are being added to the array.|
10+
|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
11+
|minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
12+
|maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
13+
|noItemsMessage|`node`|A message which is shown, when there are no items in the array.|
14+
15+
**Naming**
16+
17+
Fields can contain names, then the value will be handled as array of objects.
18+
19+
```jsx
20+
const fields = [
21+
{ name: 'name', ... },
22+
{ name: 'lastname', ... }
23+
]
24+
25+
[
26+
{ name: value1.name, lastname: value1.lastname },
27+
{ name: value2.name, lastname: value2.lastname },
28+
...
29+
]
30+
```
31+
32+
Or you can put a single field with no name. In this case, values are stored as a simple array.
33+
34+
```jsx
35+
const fields = [
36+
{ component: 'text-field' }
37+
]
38+
39+
[ value1, value2, ... ]
40+
```
41+
42+
**Custom component**
43+
44+
To implement a custom component, please take a look [here](/renderer/dynamic-fields).

0 commit comments

Comments
 (0)