Skip to content

Commit de722e5

Browse files
rvsiarvsia
committed
Update field array doc page
1 parent a556489 commit de722e5

File tree

2 files changed

+103
-97
lines changed

2 files changed

+103
-97
lines changed

‎packages/react-renderer-demo/src/app/pages/renderer/field-array.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ import ListOfContents from '../../src/helpers/list-of-contents';
1010

1111
# Field Array Provider
1212

13-
Simillarly to <RouterLink href='/renderer/field-provider'><Link href='/renderer/field-provider'>FieldProvider</Link></RouterLink> Data driven forms provide an option how to inlude <a href='https://github.com/final-form/react-final-form-arrays'>React Final Form Arrays</a> in your form.
13+
Simillarly to <RouterLink href='/renderer/field-provider'><Link href='/renderer/field-provider'>FieldProvider</Link></RouterLink> Data driven forms provide an option how to inlude <a href='https://github.com/final-form/react-final-form-arrays'>React Final Form Arrays</a> in your form. Please visit their documentation to learn about functionality.
1414

15-
<b>Please visit their documentation to learn about functionality.</b>
15+
## Using FieldArray
1616

17-
## Using FieldArrayProvider
17+
You have to just import `FieldArray` from Data Driven Forms.
1818

19-
Component mapped to `componentTypes.FIELD_ARRAY` (`field_array`) receives as a prop `FieldArrayProvider`. You can wrap your component into it and they you have an access to all functionallity.
19+
```jsx
20+
import { FieldArray } from '@data-driven-forms/react-form-renderer';
21+
```
2022

2123
<RawComponent source="field-array/form-fields-mapper" />
2224

‎packages/react-renderer-demo/src/app/src/doc-components/field-array/form-fields-mapper.js

Lines changed: 97 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,161 @@
1-
/* eslint react/prop-types: "off" */
1+
/* eslint-disable react/prop-types */
22
import React, { Fragment, useState } from 'react';
3-
import FormRender, { componentTypes, useFormApi, useFieldApi } from '@data-driven-forms/react-form-renderer';
3+
import FormRender, { componentTypes, useFormApi, useFieldApi, FieldArray } from '@data-driven-forms/react-form-renderer';
44

5-
// eslint-disable-next-line no-unused-vars
65
const wrapperStyles = {
76
padding: 16,
87
borderRadius: 4,
9-
fontFamily: 'Roboto',
8+
fontFamily: 'Roboto'
109
};
1110

12-
const getBackgroundColor = variant => ({
13-
primary: 'RebeccaPurple',
14-
add: 'LimeGreen',
15-
remove: '#FF4136',
16-
}[variant] || '#888');
11+
const getBackgroundColor = (variant) =>
12+
({
13+
primary: 'RebeccaPurple',
14+
add: 'LimeGreen',
15+
remove: '#FF4136'
16+
}[variant] || '#888');
1717

18-
const getButtonStyle = variant => ({
18+
const getButtonStyle = (variant) => ({
1919
color: 'White',
2020
backgroundColor: getBackgroundColor(variant),
2121
padding: '8px 16px',
2222
borderRadius: 4,
2323
cursor: 'pointer',
2424
border: 'none',
25-
marginRight: 4,
25+
marginRight: 4
2626
});
2727

28-
const Button = ({ children, label, variant, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
28+
const Button = ({ children, label, variant, ...props }) => (
29+
<button style={getButtonStyle(variant)} {...props}>
30+
{label}
31+
</button>
32+
);
2933

3034
const TextField = (props) => {
31-
const {input, meta: { touched, error }, label, isRequired, ...rest} = useFieldApi(props)
35+
const {
36+
input,
37+
meta: { touched, error },
38+
label,
39+
isRequired,
40+
...rest
41+
} = useFieldApi(props);
3242
return (
33-
<div className={ `ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}` }>
34-
<label htmlFor={ input.name }>{ label }</label>
35-
<br />
36-
<input id={ input.name } { ...input } { ...rest } />
37-
{ touched && error && <p className="error-text">{ error }</p> }
38-
<br />
39-
</div>
40-
)};
41-
42-
const ArrayItem = ({
43-
fields,
44-
fieldIndex,
45-
name,
46-
remove,
47-
}) => {
43+
<div className={`ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}`}>
44+
<label htmlFor={input.name}>{label}</label>
45+
<br />
46+
<input id={input.name} {...input} {...rest} />
47+
{touched && error && <p className="error-text">{error}</p>}
48+
<br />
49+
</div>
50+
);
51+
};
52+
53+
const ArrayItem = ({ fields, fieldIndex, name, remove }) => {
4854
const { renderForm } = useFormApi();
4955
const editedFields = fields.map((field) => ({ ...field, name: `${name}.${field.name}` }));
5056

5157
return (
5258
<React.Fragment>
53-
{ renderForm(editedFields) }
59+
{renderForm(editedFields)}
5460
<br />
55-
<Button
56-
onClick={ () => remove(fieldIndex) }
57-
label="Remove"
58-
type="button"
59-
variant="remove"
60-
/>
61+
<Button onClick={() => remove(fieldIndex)} label="Remove" type="button" variant="remove" />
6162
<br />
6263
<br />
6364
<br />
6465
</React.Fragment>
6566
);
6667
};
6768

68-
const FieldArray = ({
69-
fieldKey,
70-
arrayValidator,
71-
title,
72-
description,
73-
fields,
74-
itemDefault,
75-
meta,
76-
FieldArrayProvider,
77-
...rest
78-
}) => {
69+
const FieldArrayCustom = (props) => {
70+
const { fieldKey, arrayValidator, title, description, fields, itemDefault, meta, ...rest } = useFieldApi(props);
7971
const { dirty, submitFailed, error } = meta;
8072
const isError = (dirty || submitFailed) && error && typeof error === 'string';
8173

8274
return (
83-
<FieldArrayProvider key={ fieldKey } name={ rest.input.name } validate={ arrayValidator }>
84-
{ (cosi) => (
75+
<FieldArray key={fieldKey} name={rest.input.name} validate={arrayValidator}>
76+
{(cosi) => (
8577
<Fragment>
86-
{ title && <h3>{ title }</h3> }
87-
{ description && <p>{ description }</p> }
88-
{ cosi.fields.map((name, index) => (
78+
{title && <h3>{title}</h3>}
79+
{description && <p>{description}</p>}
80+
{cosi.fields.map((name, index) => (
8981
<ArrayItem
90-
key={ `${name || fieldKey}-${index}` }
91-
fields={ fields }
92-
name={ name }
93-
fieldKey={ fieldKey }
94-
fieldIndex={ index }
95-
remove={ cosi.fields.remove }
96-
/>)) }
97-
{ isError && error }
82+
key={`${name || fieldKey}-${index}`}
83+
fields={fields}
84+
name={name}
85+
fieldKey={fieldKey}
86+
fieldIndex={index}
87+
remove={cosi.fields.remove}
88+
/>
89+
))}
90+
{isError && error}
9891
<br />
99-
<Button
100-
type="button"
101-
variant="add"
102-
onClick={ () => cosi.fields.push(itemDefault) }
103-
label="Add +"/>
92+
<Button type="button" variant="add" onClick={() => cosi.fields.push(itemDefault)} label="Add +" />
10493
<br />
10594
<br />
10695
</Fragment>
107-
) }
108-
</FieldArrayProvider>);
96+
)}
97+
</FieldArray>
98+
);
10999
};
110100

111101
const componentMapper = {
112102
[componentTypes.TEXT_FIELD]: TextField,
113-
[componentTypes.FIELD_ARRAY]: FieldArray,
103+
[componentTypes.FIELD_ARRAY]: FieldArrayCustom
104+
};
105+
106+
const FormTemplate = ({ formFields }) => {
107+
const { handleSubmit, valid } = useFormApi();
108+
109+
return (
110+
<form onSubmit={handleSubmit} style={wrapperStyles}>
111+
{formFields}
112+
<Button type="submit" label="Submit" variant="primary" disabled={!valid} />
113+
</form>
114+
);
114115
};
115116

116117
const FieldArrayProvider = () => {
117-
const [ values, setValues ] = useState(undefined);
118+
const [values, setValues] = useState(undefined);
118119

119120
const schema = {
120-
fields: [{
121-
component: componentTypes.FIELD_ARRAY,
122-
name: 'nice_people',
123-
fieldKey: 'field_array',
124-
title: 'Nice people',
125-
description: 'This allow you to add nice people to the list dynamically',
126-
itemDefault: { name: 'enter a name', lastName: 'enter a last name' },
127-
fields: [{
128-
component: componentTypes.TEXT_FIELD,
129-
name: 'name',
130-
label: 'Name',
131-
}, {
132-
component: componentTypes.TEXT_FIELD,
133-
name: 'lastName',
134-
label: 'Last Name',
135-
}],
136-
}],
121+
fields: [
122+
{
123+
component: componentTypes.FIELD_ARRAY,
124+
name: 'nice_people',
125+
fieldKey: 'field_array',
126+
title: 'Nice people',
127+
description: 'This allow you to add nice people to the list dynamically',
128+
itemDefault: { name: 'enter a name', lastName: 'enter a last name' },
129+
fields: [
130+
{
131+
component: componentTypes.TEXT_FIELD,
132+
name: 'name',
133+
label: 'Name'
134+
},
135+
{
136+
component: componentTypes.TEXT_FIELD,
137+
name: 'lastName',
138+
label: 'Last Name'
139+
}
140+
]
141+
}
142+
]
137143
};
138144

139145
const onSubmit = (values) => console.log(values);
140146

141147
return (
142148
<React.Fragment>
143149
<FormRender
144-
componentMapper={ componentMapper }
145-
FormTemplate={ () => null }
146-
schema={ schema }
147-
onSubmit={ onSubmit }
148-
onStateUpdate={ ({ values }) => setValues(values) }
150+
componentMapper={componentMapper}
151+
FormTemplate={FormTemplate}
152+
schema={schema}
153+
onSubmit={onSubmit}
154+
debug={({ values }) => setValues(values)}
149155
/>
150156
<div style={{ marginTop: 16 }}>
151157
<h3>Form values</h3>
152-
<pre>
153-
{ JSON.stringify(values, null, 2) }
154-
</pre>
158+
<pre>{JSON.stringify(values, null, 2)}</pre>
155159
</div>
156160
</React.Fragment>
157161
);

0 commit comments

Comments
 (0)