Skip to content

Commit 1521ac0

Browse files
rvsiarvsia
authored
Merge pull request #273 from data-driven-forms/deleted-value-prop
Cleared value prop
2 parents 83cff51 + 5d5dd50 commit 1521ac0

12 files changed

Lines changed: 220 additions & 25 deletions

File tree

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ exports[`FieldArray should render array field correctly 1`] = `
135135
"blur": [Function],
136136
"change": [Function],
137137
"clearOnUnmount": false,
138+
"clearedValue": undefined,
138139
"concat": [Function],
139140
"destroyOnUnregister": false,
140141
"focus": [Function],
@@ -196,6 +197,7 @@ exports[`FieldArray should render array field correctly 1`] = `
196197
"blur": [Function],
197198
"change": [Function],
198199
"clearOnUnmount": false,
200+
"clearedValue": undefined,
199201
"concat": [Function],
200202
"destroyOnUnregister": false,
201203
"focus": [Function],
@@ -251,6 +253,7 @@ exports[`FieldArray should render array field correctly 1`] = `
251253
"blur": [Function],
252254
"change": [Function],
253255
"clearOnUnmount": false,
256+
"clearedValue": undefined,
254257
"concat": [Function],
255258
"destroyOnUnregister": false,
256259
"focus": [Function],
@@ -307,6 +310,7 @@ exports[`FieldArray should render array field correctly 1`] = `
307310
"blur": [Function],
308311
"change": [Function],
309312
"clearOnUnmount": false,
313+
"clearedValue": undefined,
310314
"concat": [Function],
311315
"destroyOnUnregister": false,
312316
"focus": [Function],
@@ -400,6 +404,7 @@ exports[`FieldArray should render array field correctly 1`] = `
400404
"blur": [Function],
401405
"change": [Function],
402406
"clearOnUnmount": false,
407+
"clearedValue": undefined,
403408
"concat": [Function],
404409
"destroyOnUnregister": false,
405410
"focus": [Function],

‎packages/react-form-renderer/demo/index.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import ReactDOM from "react-dom";
44
import FormRenderer from '../src';
55
import layoutMapper from './layout-mapper';
66
import formFieldsMapper from './form-fields-mapper';
7-
import miqSchema from '../src/demo-schemas/miq-schemas/input';
87
import sandboxSchema from './sandbox'
9-
import { conditionalSchema, widgetSchema, uiWidgetSchema, arraySchema, uiArraySchema } from '../src/demo-schemas/mozilla-schemas';
108

119
const submitTest = (...args) => new Promise(resolve => {
1210
setTimeout(() => {
@@ -26,18 +24,21 @@ const FormButtons = props => {
2624
const App = () => (
2725
<div style={{ padding: 20 }}>
2826
<FormRenderer
27+
initialValues={{
28+
text_box_1: 'hue',
29+
text_box_3: 'initial'
30+
}}
31+
clearedValue={'bla'}
2932
layoutMapper={layoutMapper}
3033
formFieldsMapper={formFieldsMapper}
31-
onSubmit={submitTest}
34+
onSubmit={console.log}
3235
onCancel={console.log}
3336
canReset
3437
onReset={() => console.log('i am resseting')}
3538
schemaType="default"
3639
schema={sandboxSchema}
37-
uiSchema={uiArraySchema}
3840
buttonOrder={['cancel', 'reset', 'submit']}
3941
buttonClassName="Foo"
40-
onStateUpdate={console.log}
4142
renderFormButtons={FormButtons}
4243
/>
4344
</div>

‎packages/react-form-renderer/demo/sandbox.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const output = {
3636
label: 'Text Box 3',
3737
isRequired: true,
3838
component: components.TEXT_FIELD,
39+
clearedValue: 'override',
3940
validate: [
4041
{ type: validators.MIN_LENGTH, treshold: 12, message: 'bar' },
4142
],

‎packages/react-form-renderer/src/form-renderer/enhanced-on-change.js‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import isEmpty from 'lodash/isEmpty';
12
import { dataTypes } from '../constants';
23

34
/**
@@ -40,19 +41,40 @@ const convertType = (dataType, value) => ({
4041
[dataTypes.BOOLEAN]: castToBoolean(value),
4142
})[dataType] || value;
4243

44+
/**
45+
* Checks the value and returns undefined if its empty. Converst epmtry strings, arrays and objects.
46+
* If value is empty its overriden to undefined for further processing.
47+
* @param {Any} value Any JS variable to be check if is empty
48+
*/
49+
const checkEmpty = value => {
50+
if (typeof value === 'number') {
51+
return false;
52+
}
53+
54+
if (typeof value === 'string' && value.length > 0) {
55+
return false;
56+
}
57+
58+
if (!isEmpty(value)) {
59+
return false;
60+
}
61+
62+
return true;
63+
};
64+
4365
/**
4466
* Casts input value into selected data type
45-
* @param {FieldDataTypes} dataType intended data type of output value
46-
* @param {Function} onChange original function to be modified
47-
* @param {Any} value value to be type casted
48-
* @param {...any} args rest of orininal function arguments
4967
*/
50-
const enhancedOnChange = (dataType, onChange, value, ...args) => {
68+
const enhancedOnChange = ({ dataType, onChange, initial, clearedValue, dirty, ...rest }, value, ...args) => {
5169
const sanitizedValue = sanitizeValue(value);
52-
return onChange(
53-
Array.isArray(sanitizedValue)
54-
? sanitizedValue.map(item => convertType(dataType, sanitizeValue(item)))
55-
: convertType(dataType, sanitizedValue),
56-
...args);};
70+
const result = Array.isArray(sanitizedValue)
71+
? sanitizedValue.map(item => convertType(dataType, sanitizeValue(item)))
72+
: convertType(dataType, sanitizedValue);
73+
if (checkEmpty(result) && typeof initial !== 'undefined') {
74+
return onChange(clearedValue, ...args);
75+
}
76+
77+
return onChange(result, ...args);
78+
};
5779

5880
export default enhancedOnChange;

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

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,37 +21,58 @@ class FieldProvider extends Component{
2121

2222
render(){
2323
const { clearOnUnmount, component, render, dataType, children, ...props } = this.props;
24+
const fieldClearedValue = props.hasOwnProperty('clearedValue') ? props.clearedValue : props.formOptions.clearedValue;
25+
const { clearedValue, ...fieldProps } = props;
2426
if (component) {
2527
const FieldComponent = component;
26-
return <Field { ...props } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => (
28+
return <Field { ...fieldProps } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => (
2729
<FieldComponent
2830
{ ...fieldsProps }
2931
input={{
3032
...input,
31-
onChange: (...args) => enhancedOnChange(dataType, onChange, ...args),
33+
onChange: (...args) => {
34+
enhancedOnChange({
35+
...fieldsProps.meta,
36+
dataType,
37+
onChange,
38+
clearedValue: fieldClearedValue,
39+
}, ...args);
40+
},
3241
}}
3342
/>
3443
) } />;
3544
}
3645

3746
if (render) {
38-
return <Field { ...props } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => render({
47+
return <Field { ...fieldProps } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => render({
3948
...fieldsProps,
4049
input: {
4150
...input,
42-
onChange: (...args) => enhancedOnChange(dataType, onChange, ...args),
51+
onChange: (...args) =>
52+
enhancedOnChange({
53+
...fieldsProps.meta,
54+
dataType,
55+
onChange,
56+
clearedValue: fieldClearedValue,
57+
}, ...args),
4358
},
4459
}) } />;
4560
}
4661

4762
const ChildComponent = children;
4863
return (
49-
<Field { ...props }>
64+
<Field { ...fieldProps }>
5065
{ ({ input: { onChange, ...input }, ...fieldsProps }) =>
5166
Children.only(
5267
<ChildComponent
5368
{ ...fieldsProps }
54-
input={{ ...input, onChange: (...args) => enhancedOnChange(dataType, onChange, ...args) }}
69+
input={{ ...input, onChange: (...args) =>
70+
enhancedOnChange({
71+
...fieldsProps.meta,
72+
dataType,
73+
onChange,
74+
clearedValue: fieldClearedValue,
75+
}, ...args) }}
5576
/>
5677
) }
5778
</Field>
@@ -64,6 +85,7 @@ FieldProvider.propTypes = {
6485
clearOnUnmount: PropTypes.bool,
6586
change: PropTypes.func,
6687
getFieldState: PropTypes.func,
88+
clearedValue: PropTypes.any,
6789
}),
6890
component: PropTypes.oneOfType(PropTypes.node, PropTypes.element, PropTypes.func),
6991
render: PropTypes.func,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const FormRenderer = ({
4242
onStateUpdate,
4343
renderFormButtons,
4444
subscription,
45+
clearedValue,
4546
}) => {
4647
const inputSchema = schemaMapper(schemaType)(schema, uiSchema);
4748
let schemaError;
@@ -80,6 +81,7 @@ const FormRenderer = ({
8081
onCancel,
8182
getState,
8283
valid,
84+
clearedValue,
8385
submit,
8486
handleSubmit,
8587
reset,
@@ -139,6 +141,7 @@ FormRenderer.propTypes = {
139141
onStateUpdate: PropTypes.func,
140142
renderFormButtons: PropTypes.oneOfType([ PropTypes.node, PropTypes.element, PropTypes.func ]),
141143
subscription: PropTypes.shape({ [PropTypes.string]: PropTypes.bool }),
144+
clearedValue: PropTypes.any,
142145
};
143146

144147
FormRenderer.defaultProps = {

0 commit comments

Comments
 (0)