Skip to content

Commit 1959042

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #857 from data-driven-forms/warning
Implement warning messages for mappers
2 parents 8027bbb + 3e06648 commit 1959042

39 files changed

+244
-68
lines changed

‎packages/ant-component-mapper/src/common/form-wrapper.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@ import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-temp
77

88
const AntForm = ({ label, children, isRequired, FormItemProps, meta, validateOnMount, helperText, description, hideLabel }) => {
99
const invalid = validationError(meta, validateOnMount);
10-
const help = invalid || helperText || description;
10+
const warning = (meta.touched || validateOnMount) && meta.warning;
11+
const help = invalid || warning || helperText || description;
1112

1213
return (
13-
<Form.Item validateStatus={!invalid ? '' : 'error'} help={help} label={!hideLabel && label} required={isRequired} {...FormItemProps}>
14+
<Form.Item
15+
validateStatus={!invalid ? (warning ? 'warning' : '') : 'error'}
16+
help={help}
17+
label={!hideLabel && label}
18+
required={isRequired}
19+
{...FormItemProps}
20+
>
1421
{children}
1522
</Form.Item>
1623
);

‎packages/ant-component-mapper/src/tests/components.test.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,29 @@ describe('formFields generated tests', () => {
103103
expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
104104
});
105105

106+
it('renders with warning', async () => {
107+
const errorField = {
108+
...field,
109+
validate: [{ type: validatorTypes.REQUIRED, warning: true }],
110+
useWarnings: true,
111+
validateOnMount: true
112+
};
113+
let wrapper;
114+
115+
await act(async () => {
116+
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
117+
});
118+
wrapper.update();
119+
120+
expect(
121+
wrapper
122+
.find('.ant-form-item-explain')
123+
.last()
124+
.text()
125+
).toEqual(errorText);
126+
expect(wrapper.find('.ant-form-item-has-warning').length).toBeGreaterThanOrEqual(1);
127+
});
128+
106129
it('renders with error and validateOnMount', async () => {
107130
const errorField = {
108131
...field,

‎packages/blueprint-component-mapper/src/files/form-group.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@ export const FormGroupInternal = ({
2222
}) => {
2323
const { required } = useContext(BlueprintContext);
2424

25-
const { error, touched } = meta;
25+
const { error, touched, warning } = meta;
2626
const showError = (validateOnMount || touched) && error;
27+
const showWarning = (validateOnMount || touched) && warning;
2728

28-
const text = showError ? error : helperText || description;
29+
const text = showError || showWarning || helperText || description;
2930

30-
const intent = showError && error && { intent: Intent.DANGER };
31+
const intent = (showError && { intent: Intent.DANGER }) || (showWarning && { intent: Intent.WARNING });
3132
const labelInfo = !hideLabel && isRequired && { labelInfo: required };
3233

3334
return (

‎packages/blueprint-component-mapper/src/tests/components.test.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
3+
import { act } from 'react-dom/test-utils';
34

45
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
56
import FormTemplate from '../files/form-template';
@@ -107,6 +108,29 @@ describe('formFields generated tests', () => {
107108
expect(wrapper.find('.bp3-intent-danger').length).toBeGreaterThanOrEqual(1);
108109
});
109110

111+
it('renders with warning', async () => {
112+
const errorField = {
113+
...field,
114+
validate: [{ type: validatorTypes.REQUIRED, warning: true }],
115+
useWarnings: true,
116+
validateOnMount: true
117+
};
118+
let wrapper;
119+
120+
await act(async () => {
121+
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
122+
});
123+
wrapper.update();
124+
125+
expect(
126+
wrapper
127+
.find('.bp3-form-helper-text')
128+
.last()
129+
.text()
130+
).toEqual(errorText);
131+
expect(wrapper.find('.bp3-intent-warning').length).toBeGreaterThanOrEqual(1);
132+
});
133+
110134
it('renders with helperText', () => {
111135
const helpertextField = {
112136
...field,

‎packages/carbon-component-mapper/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
3131
"@babel/preset-env": "^7.1.6",
3232
"@babel/preset-react": "^7.0.0",
33-
"@carbon/icons-react": "^10.18.0",
33+
"@carbon/icons-react": "^10.19.0",
3434
"@semantic-release/git": "^7.0.5",
3535
"@semantic-release/npm": "^5.1.1",
3636
"@types/carbon-components-react": "^7.10.9",
@@ -39,8 +39,8 @@
3939
"babel-jest": "^23.6.0",
4040
"babel-loader": "^8.0.4",
4141
"babel-plugin-lodash": "^3.3.4",
42-
"carbon-components": "^10.20.0",
43-
"carbon-components-react": "^7.20.0",
42+
"carbon-components": "^10.22.0",
43+
"carbon-components-react": "^7.22.0",
4444
"carbon-icons": "^7.0.7",
4545
"clsx": "^1.1.1",
4646
"css-loader": "^1.0.1",

‎packages/carbon-component-mapper/src/common/helper-text-block.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import PropTypes from 'prop-types';
33

44
import './helper-text-block.scss';
55

6-
const HelperTextBlock = ({ helperText, errorText }) => {
6+
const HelperTextBlock = ({ helperText, errorText, warnText }) => {
77
if (errorText) {
88
return <div className="bx--form-requirement ddorg__carbon-error-helper-text">{errorText}</div>;
99
}
1010

11+
if (warnText) {
12+
return <div className="bx--form-requirement ddorg__carbon-warning-helper-text">{warnText}</div>;
13+
}
14+
1115
if (helperText) {
1216
return <div className="bx--form__helper-text">{helperText}</div>;
1317
}
@@ -17,7 +21,8 @@ const HelperTextBlock = ({ helperText, errorText }) => {
1721

1822
HelperTextBlock.propTypes = {
1923
helperText: PropTypes.node,
20-
errorText: PropTypes.node
24+
errorText: PropTypes.node,
25+
warnText: PropTypes.node
2126
};
2227

2328
export default HelperTextBlock;

‎packages/carbon-component-mapper/src/files/checkbox.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,12 @@ const SingleCheckbox = (props) => {
3333

3434
const invalid = (meta.touched || validateOnMount) && meta.error;
3535

36+
const warnText = (meta.touched || validateOnMount) && meta.warning;
37+
3638
return (
3739
<div {...WrapperProps}>
3840
<CarbonCheckbox {...input} id={input.name} {...rest} />
39-
<HelperTextBlock helperText={helperText} errorText={invalid} />
41+
<HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
4042
</div>
4143
);
4244
};

‎packages/carbon-component-mapper/src/files/date-picker.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ const DatePicker = (props) => {
1111
const { input, datePickerType, meta, DatePickerProps, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
1212

1313
const invalid = (meta.touched || validateOnMount) && meta.error;
14+
const warnText = (meta.touched || validateOnMount) && meta.warning;
1415

1516
return (
1617
<div {...WrapperProps}>
1718
<CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
1819
<DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
1920
</CarbonDatePicker>
20-
<HelperTextBlock helperText={!invalid && helperText} />
21+
<HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
2122
</div>
2223
);
2324
};

‎packages/carbon-component-mapper/src/files/radio.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const Radio = (props) => {
1313
);
1414

1515
const invalid = (meta.touched || validateOnMount) && meta.error;
16+
const warnText = (meta.touched || validateOnMount) && meta.warning;
1617

1718
return (
1819
<FormGroup legendText={labelText} {...FormGroupProps}>
@@ -21,7 +22,7 @@ const Radio = (props) => {
2122
<RadioButton key={option.value} disabled={disabled} labelText={option.label} value={option.value} {...option} />
2223
))}
2324
</RadioButtonGroup>
24-
<HelperTextBlock helperText={helperText} errorText={invalid} />
25+
<HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
2526
</FormGroup>
2627
);
2728
};

‎packages/carbon-component-mapper/src/files/select.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ ClearedSelectSearchable.propTypes = {
221221
};
222222

223223
const Select = (props) => {
224-
const { isMulti, isSearchable, isClearable, loadOptions, input, meta, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
224+
const { isMulti, isSearchable, isClearable, loadOptions, input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
225225

226226
const [loadOptionsChangeCounter, setCounter] = useState(0);
227227

@@ -237,6 +237,7 @@ const Select = (props) => {
237237
isMulti && isSearchClear ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : isSearchClear ? ClearedSelectSearchable : ClearedSelect;
238238

239239
const invalidText = ((meta.touched || validateOnMount) && meta.error) || '';
240+
const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;
240241

241242
return (
242243
<DataDrivenSelect
@@ -248,6 +249,7 @@ const Select = (props) => {
248249
invalidText={invalidText}
249250
loadOptionsChangeCounter={loadOptionsChangeCounter}
250251
originalOnChange={multiOnChange(input, rest.simpleValue)}
252+
helperText={text}
251253
/>
252254
);
253255
};

0 commit comments

Comments
 (0)