-
Notifications
You must be signed in to change notification settings - Fork 356
/
Copy pathdata-driven-form.jsx
112 lines (102 loc) · 3.03 KB
/
data-driven-form.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import {
validators,
componentTypes,
validatorTypes,
useFormApi,
useFieldApi,
FieldArray,
FormSpy,
FormRenderer,
} from '@data-driven-forms/react-form-renderer';
import { FormTemplate } from '@data-driven-forms/carbon-component-mapper';
import { connect } from 'react-redux';
import defaultComponentMapper from './mappers/componentMapper';
import SpyField from './spy-field';
validators.messages = {
...validators.messages,
required: __('Required'),
};
const defaultLabels = {
submitLabel: __('Save'),
resetLabel: __('Reset'),
cancelLabel: __('Cancel'),
};
// This is a wrapper around the passed onSubmit function that filters out the values from the form
// data that don't have corresponding fields in the declared form schema.
const submitWrapper = (fn) => (values, formOptions, ...args) => {
// Get a list of all fields declared in the schema
const fields = formOptions.getRegisteredFields();
const filteredValues = fields.reduce((obj, field) => (_.has(values, field) ? _.set(obj, field, _.get(values, field)) : obj), {});
// For compatibility, we're passing all the other arguments as well
return fn(filteredValues, formOptions, ...args);
};
const MiqFormRenderer = ({
className,
componentMapper,
buttonsLabels,
disableSubmit,
canReset,
showFormControls,
schema: { fields, ...schema },
initialize,
onSubmit,
...props
}) => {
const { current: MiqFormTemplate } = useRef((props) => (
<FormTemplate
{...props}
disableSubmit={disableSubmit}
canReset={canReset}
showFormControls={showFormControls}
formWrapperProps={{ className }}
{...defaultLabels}
{...buttonsLabels}
/>
));
return (
<FormRenderer
componentMapper={{ ...componentMapper, 'spy-field': SpyField }}
FormTemplate={MiqFormTemplate}
schema={{ fields: [...fields, { component: 'spy-field', name: 'spy-field', initialize }], ...schema }}
onSubmit={submitWrapper(onSubmit)}
onReset={() => add_flash(__('All changes have been reset'), 'warn')}
{...props}
/>
);
};
MiqFormRenderer.propTypes = {
className: PropTypes.string,
buttonsLabels: PropTypes.shape({
submitLabel: PropTypes.string,
resetLabel: PropTypes.string,
cancelLabel: PropTypes.string,
}),
componentMapper: PropTypes.any,
schema: PropTypes.shape({
fields: PropTypes.arrayOf(PropTypes.any),
}),
disableSubmit: PropTypes.arrayOf(PropTypes.string),
canReset: PropTypes.bool,
showFormControls: PropTypes.bool,
initialize: PropTypes.func,
onSubmit: PropTypes.func,
};
MiqFormRenderer.defaultProps = {
className: 'form-react',
buttonsLabels: {},
componentMapper: defaultComponentMapper,
schema: {
fields: [],
},
disableSubmit: ['pristine', 'invalid'],
canReset: false,
showFormControls: true,
initialize: undefined,
onSubmit: () => undefined,
};
export {
componentTypes, validatorTypes, useFormApi, useFieldApi, FieldArray, FormSpy,
};
export default connect()(MiqFormRenderer);