Skip to content

Commit f128f78

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #385 from rvsia/refactorWrapper
[V2] refactor(renderer): refactor render single field
2 parents 47b198b + e985ad8 commit f128f78

File tree

6 files changed

+2620
-3218
lines changed

6 files changed

+2620
-3218
lines changed

‎packages/pf3-component-mapper/src/tests/__snapshots__/input-addon.test.js.snap

Lines changed: 1226 additions & 1659 deletions
Large diffs are not rendered by default.

‎packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap

Lines changed: 1059 additions & 1134 deletions
Large diffs are not rendered by default.

‎packages/react-form-renderer/src/form-renderer/field-wrapper.js

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎packages/react-form-renderer/src/form-renderer/render-form.js

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import React, { Fragment, useContext } from 'react';
1+
import React, { useContext } from 'react';
22
import PropTypes from 'prop-types';
33
import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-templates';
44
import { dataTypeValidator } from '../validators';
55
import RendererContext from '../components/renderer-context';
66
import Condition from './condition';
77
import { memoize } from '../validators/helpers';
8-
import FieldWrapper from './field-wrapper';
8+
import componentTypes from '../components/component-types';
9+
import composeValidators from '../components/compose-validators';
10+
import convertInitialValue from './convert-initial-value';
11+
12+
const assignSpecialType = (componentType) => ([componentTypes.CHECKBOX, componentTypes.RADIO].includes(componentType) ? componentType : undefined);
913

1014
const FormFieldHideWrapper = ({ hideField, children }) => (hideField ? <div hidden>{children}</div> : children);
1115

@@ -27,29 +31,49 @@ FormConditionWrapper.propTypes = {
2731

2832
const prepareValidator = (validator, mapper) => (typeof validator === 'function' ? memoize(validator) : mapper[validator.type]({ ...validator }));
2933

30-
const getValidate = (validate, dataType, mapper) => ({
31-
validate: validate
34+
const getValidate = (validate, dataType, mapper) =>
35+
validate
3236
? [...validate.map((validator) => prepareValidator(validator, mapper)), dataType && dataTypeValidator(dataType)()]
33-
: [dataType && dataTypeValidator(dataType)()]
34-
});
37+
: [dataType && dataTypeValidator(dataType)()];
38+
39+
const prepareArrayValidator = (validation) => (value = []) => {
40+
if (!Array.isArray(value)) {
41+
return;
42+
}
43+
44+
const arrayValidator = composeValidators(validation);
45+
let result = arrayValidator(value && value.length > 0 ? value : undefined);
46+
if (typeof result === 'function') {
47+
result = result(value);
48+
}
49+
50+
return result;
51+
};
3552

3653
const SingleField = ({ component, condition, hideField, validate, ...rest }) => {
3754
const { componentMapper, validatorMapper } = useContext(RendererContext);
3855

56+
const validation = getValidate(validate, rest.dataType, validatorMapper);
57+
58+
const componentProps = {
59+
type: assignSpecialType(component),
60+
...rest,
61+
...(Object.prototype.hasOwnProperty.call(rest, 'initialValue') && Object.prototype.hasOwnProperty.call(rest, 'dataType')
62+
? { initialValue: convertInitialValue(rest.initialValue, rest.dataType) }
63+
: {}),
64+
...(componentTypes.FIELD_ARRAY === component
65+
? { arrayValidator: prepareArrayValidator(validation) }
66+
: { validate: composeValidators(validation) })
67+
};
68+
69+
const Component = componentMapper[component];
70+
3971
return (
40-
<Fragment key={rest.key || rest.name}>
41-
<FormConditionWrapper condition={condition}>
42-
<FormFieldHideWrapper hideField={hideField}>
43-
<FieldWrapper
44-
componentType={component}
45-
component={componentMapper[component]}
46-
name={rest.name || rest.key}
47-
{...rest}
48-
{...(validate || rest.dataType ? getValidate(validate, rest.dataType, validatorMapper) : {})}
49-
/>
50-
</FormFieldHideWrapper>
51-
</FormConditionWrapper>
52-
</Fragment>
72+
<FormConditionWrapper condition={condition}>
73+
<FormFieldHideWrapper hideField={hideField}>
74+
<Component {...componentProps} />
75+
</FormFieldHideWrapper>
76+
</FormConditionWrapper>
5377
);
5478
};
5579

@@ -58,7 +82,8 @@ SingleField.propTypes = {
5882
condition: PropTypes.object,
5983
hideField: PropTypes.bool,
6084
dataType: PropTypes.string,
61-
validate: PropTypes.array
85+
validate: PropTypes.arrayOf(PropTypes.func),
86+
initialValue: PropTypes.any
6287
};
6388

6489
const renderForm = (fields) => fields.map((field) => (Array.isArray(field) ? renderForm(field) : <SingleField key={field.name} {...field} />));

‎packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap

Lines changed: 49 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -134,29 +134,23 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
134134
<FormFieldHideWrapper
135135
hideField={false}
136136
>
137-
<FieldWrapper
138-
component={[Function]}
139-
componentType="text-field"
137+
<TextField
140138
name="component1"
139+
validate={[Function]}
141140
>
142-
<TextField
143-
name="component1"
144-
validate={[Function]}
141+
<div
142+
className="nested-item"
145143
>
146-
<div
147-
className="nested-item"
148-
>
149-
<input
150-
id="component1"
151-
name="component1"
152-
onBlur={[Function]}
153-
onChange={[Function]}
154-
onFocus={[Function]}
155-
value=""
156-
/>
157-
</div>
158-
</TextField>
159-
</FieldWrapper>
144+
<input
145+
id="component1"
146+
name="component1"
147+
onBlur={[Function]}
148+
onChange={[Function]}
149+
onFocus={[Function]}
150+
value=""
151+
/>
152+
</div>
153+
</TextField>
160154
</FormFieldHideWrapper>
161155
</FormConditionWrapper>
162156
</SingleField>
@@ -169,22 +163,16 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
169163
<FormFieldHideWrapper
170164
hideField={false}
171165
>
172-
<FieldWrapper
173-
component={[Function]}
174-
componentType="select"
166+
<Component
175167
name="secret"
168+
validate={[Function]}
176169
>
177-
<Component
178-
name="secret"
179-
validate={[Function]}
170+
<div
171+
className="nested-item"
180172
>
181-
<div
182-
className="nested-item"
183-
>
184-
Select field
185-
</div>
186-
</Component>
187-
</FieldWrapper>
173+
Select field
174+
</div>
175+
</Component>
188176
</FormFieldHideWrapper>
189177
</FormConditionWrapper>
190178
</SingleField>
@@ -367,31 +355,24 @@ exports[`<FormRenderer /> should render hidden field 1`] = `
367355
<FormFieldHideWrapper
368356
hideField={false}
369357
>
370-
<FieldWrapper
371-
component={[Function]}
372-
componentType="text-field"
358+
<TextField
373359
label="Visible"
374360
name="visible"
361+
validate={[Function]}
375362
>
376-
<TextField
377-
label="Visible"
378-
name="visible"
379-
validate={[Function]}
363+
<div
364+
className="nested-item"
380365
>
381-
<div
382-
className="nested-item"
383-
>
384-
<input
385-
id="visible"
386-
name="visible"
387-
onBlur={[Function]}
388-
onChange={[Function]}
389-
onFocus={[Function]}
390-
value=""
391-
/>
392-
</div>
393-
</TextField>
394-
</FieldWrapper>
366+
<input
367+
id="visible"
368+
name="visible"
369+
onBlur={[Function]}
370+
onChange={[Function]}
371+
onFocus={[Function]}
372+
value=""
373+
/>
374+
</div>
375+
</TextField>
395376
</FormFieldHideWrapper>
396377
</FormConditionWrapper>
397378
</SingleField>
@@ -409,31 +390,24 @@ exports[`<FormRenderer /> should render hidden field 1`] = `
409390
<div
410391
hidden={true}
411392
>
412-
<FieldWrapper
413-
component={[Function]}
414-
componentType="text-field"
393+
<TextField
415394
label="Hidden"
416395
name="hidden"
396+
validate={[Function]}
417397
>
418-
<TextField
419-
label="Hidden"
420-
name="hidden"
421-
validate={[Function]}
398+
<div
399+
className="nested-item"
422400
>
423-
<div
424-
className="nested-item"
425-
>
426-
<input
427-
id="hidden"
428-
name="hidden"
429-
onBlur={[Function]}
430-
onChange={[Function]}
431-
onFocus={[Function]}
432-
value=""
433-
/>
434-
</div>
435-
</TextField>
436-
</FieldWrapper>
401+
<input
402+
id="hidden"
403+
name="hidden"
404+
onBlur={[Function]}
405+
onChange={[Function]}
406+
onFocus={[Function]}
407+
value=""
408+
/>
409+
</div>
410+
</TextField>
437411
</div>
438412
</FormFieldHideWrapper>
439413
</FormConditionWrapper>

0 commit comments

Comments
 (0)