Skip to content

Commit 7641bff

Browse files
rvsiarvsia
authored
Merge pull request #434 from data-driven-forms/v2.1
release V2.1
2 parents 9cd85b8 + 6166bc0 commit 7641bff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1824
-179
lines changed

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const camelToSnake = (string) => {
88

99
module.exports = {
1010
presets: ["@babel/preset-env", "@babel/preset-react"],
11-
plugins: ["@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties" ],
11+
plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties" ],
1212
env: {
1313
cjs: {
1414
plugins: [

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
}
3838
},
3939
"devDependencies": {
40+
"@babel/plugin-transform-runtime": "^7.9.0",
4041
"@khala/commit-analyzer-wildcard": "^2.4.1",
4142
"@khala/npm-release-monorepo": "^2.4.1",
4243
"@khala/wildcard-release-notes": "^2.4.1",

‎packages/mui-component-mapper/demo/index.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable */
22
import React from "react";
33
import ReactDOM from "react-dom";
4-
import FormRenderer from '@data-driven-forms/react-form-renderer';
4+
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
55

66
import Grid from '@material-ui/core/Grid';
77
import { componentMapper, FormTemplate } from '../src'
@@ -15,6 +15,16 @@ const theme = createMuiTheme({
1515
useNextVariants: true,
1616
},
1717
});
18+
19+
const compositeMapper = {
20+
...componentMapper,
21+
[componentTypes.SWITCH]: {
22+
component: componentMapper[componentTypes.SWITCH],
23+
FormControlLabelProps: {
24+
labelPlacement: 'end'
25+
}
26+
}
27+
}
1828

1929

2030
const App = () => (
@@ -31,7 +41,7 @@ const App = () => (
3141
<Grid item xs={12}>
3242
<FormRenderer
3343
onSubmit={console.log}
34-
componentMapper={componentMapper}
44+
componentMapper={compositeMapper}
3545
FormTemplate={props => <FormTemplate {...props} />}
3646
schema={demoSchema}
3747
onCancel={() => console.log('canceling')}

‎packages/mui-component-mapper/src/common/form-field-grid.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,27 @@ import PropTypes from 'prop-types';
33

44
import { Grid } from '@material-ui/core';
55
import { makeStyles } from '@material-ui/core/styles';
6+
import clsx from 'clsx';
67

78
const useFinalFormFieldStyles = makeStyles({
89
grid: {
910
position: 'relative'
1011
}
1112
});
1213

13-
const FormFieldGrid = ({ children, ...props }) => {
14+
const FormFieldGrid = ({ children, className, ...props }) => {
1415
const classes = useFinalFormFieldStyles();
1516

1617
return (
17-
<Grid xs={12} item style={{ marginBottom: 16, padding: 0 }} className={classes.grid} {...props}>
18+
<Grid xs={12} item className={clsx(classes.grid, className)} {...props}>
1819
{children}
1920
</Grid>
2021
);
2122
};
2223

2324
FormFieldGrid.propTypes = {
24-
children: PropTypes.node
25+
children: PropTypes.node,
26+
className: PropTypes.string
2527
};
2628

2729
export default FormFieldGrid;

‎packages/mui-component-mapper/src/common/multiple-choice-list.js

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
import React from 'react';
1+
import React, { createContext, useContext } from 'react';
22
import PropTypes from 'prop-types';
33

44
import { Grid, Checkbox, FormControlLabel, FormLabel, FormGroup, FormControl, FormHelperText } from '@material-ui/core';
55

66
import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
77
import { validationError } from './helpers';
88

9-
const FinalCheckbox = ({ isDisabled, label, ...props }) => (
10-
<FormControlLabel
11-
control={
12-
<Checkbox {...props} disabled={isDisabled}>
13-
{label}
14-
</Checkbox>
15-
}
16-
label={label}
17-
/>
18-
);
9+
const CheckboxContext = createContext({});
10+
11+
const FinalCheckbox = ({ label, isDisabled: _isDisabled, ...rest }) => {
12+
const {
13+
FormControlLabelProps,
14+
CheckboxProps,
15+
props: { isRequired, isReadOnly, helperText, validate, isDisabled, ...props }
16+
} = useContext(CheckboxContext);
17+
return (
18+
<FormControlLabel
19+
{...FormControlLabelProps}
20+
control={
21+
<Checkbox {...rest} {...props} {...CheckboxProps} disabled={isDisabled}>
22+
{label}
23+
</Checkbox>
24+
}
25+
label={label}
26+
/>
27+
);
28+
};
1929

2030
FinalCheckbox.propTypes = {
2131
isDisabled: PropTypes.bool,
@@ -24,13 +34,13 @@ FinalCheckbox.propTypes = {
2434

2535
const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText, description }) => {
2636
const invalid = validationError(meta, validateOnMount);
27-
37+
const { FormFieldGridProps, FormControlProps, FormLabelProps, FormGroupProps, FormHelperTextProps } = useContext(CheckboxContext);
2838
return (
29-
<Grid container>
30-
<FormControl required={isRequired} error={!!invalid} component="fieldset">
31-
<FormLabel>{label}</FormLabel>
32-
<FormGroup>{children}</FormGroup>
33-
{(invalid || helperText || description) && <FormHelperText>{invalid || helperText || description}</FormHelperText>}
39+
<Grid container {...FormFieldGridProps}>
40+
<FormControl required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
41+
<FormLabel {...FormLabelProps}>{label}</FormLabel>
42+
<FormGroup {...FormGroupProps}>{children}</FormGroup>
43+
{(invalid || helperText || description) && <FormHelperText {...FormHelperTextProps}>{invalid || helperText || description}</FormHelperText>}
3444
</FormControl>
3545
</Grid>
3646
);
@@ -40,12 +50,43 @@ Wrapper.propTypes = {
4050
...wrapperProps
4151
};
4252

43-
const MultipleChoiceList = (props) => <MultipleChoiceListCommon {...props} Wrapper={Wrapper} Checkbox={FinalCheckbox} />;
53+
const MultipleChoiceList = ({
54+
FormControlProps,
55+
FormLabelProps,
56+
FormGroupProps,
57+
FormHelperTextProps,
58+
FormFieldGridProps,
59+
FormControlLabelProps,
60+
CheckboxProps,
61+
...props
62+
}) => (
63+
<CheckboxContext.Provider
64+
value={{ FormControlProps, FormLabelProps, FormGroupProps, FormHelperTextProps, FormFieldGridProps, FormControlLabelProps, CheckboxProps, props }}
65+
>
66+
<MultipleChoiceListCommon {...props} Wrapper={Wrapper} Checkbox={FinalCheckbox} />
67+
</CheckboxContext.Provider>
68+
);
4469

4570
MultipleChoiceList.propTypes = {
4671
input: PropTypes.shape({
4772
name: PropTypes.string.isRequired
48-
})
73+
}),
74+
FormFieldGridProps: PropTypes.object,
75+
FormControlProps: PropTypes.object,
76+
FormGroupProps: PropTypes.object,
77+
FormControlLabelProps: PropTypes.object,
78+
CheckboxProps: PropTypes.object,
79+
FormLabelProps: PropTypes.object,
80+
FormHelperTextProps: PropTypes.object
81+
};
82+
MultipleChoiceList.defaultProps = {
83+
FormFieldGridProps: {},
84+
FormControlProps: {},
85+
FormGroupProps: {},
86+
FormControlLabelProps: {},
87+
CheckboxProps: {},
88+
FormLabelProps: {},
89+
FormHelperTextProps: {}
4990
};
5091

5192
export default MultipleChoiceList;

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

Lines changed: 48 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,55 @@ import MultipleChoiceList from '../common/multiple-choice-list';
99
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
1010

1111
export const SingleCheckbox = (props) => {
12-
const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi({
12+
const {
13+
input,
14+
isReadOnly,
15+
isDisabled,
16+
isRequired,
17+
label,
18+
helperText,
19+
description,
20+
validateOnMount,
21+
meta,
22+
FormFieldGridProps,
23+
FormControlProps,
24+
FormGroupProps,
25+
FormControlLabelProps,
26+
CheckboxProps,
27+
FormLabelProps,
28+
FormHelperTextProps,
29+
inputProps,
30+
...rest
31+
} = useFieldApi({
1332
...props,
1433
type: 'checkbox'
1534
});
1635
const invalid = validationError(meta, validateOnMount);
1736
const text = invalid || helperText || description;
1837

1938
return (
20-
<FormFieldGrid>
21-
<FormControl required={isRequired} error={!!invalid} component="fieldset">
22-
<FormGroup>
39+
<FormFieldGrid {...FormFieldGridProps}>
40+
<FormControl required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
41+
<FormGroup {...FormGroupProps}>
2342
<FormControlLabel
43+
{...FormControlLabelProps}
2444
control={
2545
<MUICheckbox
2646
{...input}
47+
{...CheckboxProps}
2748
disabled={isDisabled || isReadOnly}
2849
value={input.name}
2950
inputProps={{
30-
readOnly: isReadOnly
51+
readOnly: isReadOnly,
52+
...inputProps
3153
}}
54+
{...rest}
3255
/>
3356
}
3457
disabled={isDisabled || isReadOnly}
35-
label={<FormLabel>{label}</FormLabel>}
58+
label={<FormLabel {...FormLabelProps}>{label}</FormLabel>}
3659
/>
37-
{(invalid || text) && <FormHelperText>{invalid || text}</FormHelperText>}
60+
{(invalid || text) && <FormHelperText {...FormHelperTextProps}>{invalid || text}</FormHelperText>}
3861
</FormGroup>
3962
</FormControl>
4063
</FormFieldGrid>
@@ -50,7 +73,24 @@ SingleCheckbox.propTypes = {
5073
label: PropTypes.node,
5174
helperText: PropTypes.node,
5275
description: PropTypes.node,
53-
validateOnMount: PropTypes.bool
76+
validateOnMount: PropTypes.bool,
77+
FormFieldGridProps: PropTypes.object,
78+
FormControlProps: PropTypes.object,
79+
FormGroupProps: PropTypes.object,
80+
FormControlLabelProps: PropTypes.object,
81+
CheckboxProps: PropTypes.object,
82+
FormLabelProps: PropTypes.object,
83+
FormHelperTextProps: PropTypes.object
84+
};
85+
86+
SingleCheckbox.defaultProps = {
87+
FormFieldGridProps: {},
88+
FormControlProps: {},
89+
FormGroupProps: {},
90+
FormControlLabelProps: {},
91+
CheckboxProps: {},
92+
FormLabelProps: {},
93+
FormHelperTextProps: {}
5494
};
5595

5696
const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,16 @@ const DatePicker = (props) => {
2020
description,
2121
validateOnMount,
2222
meta,
23-
locale = 'en'
23+
locale = 'en',
24+
FormFieldGridProps,
25+
MuiPickersUtilsProviderProps,
26+
DatePickerProps
2427
} = useFieldApi(props);
2528
const invalid = validationError(meta, validateOnMount);
2629

2730
return (
28-
<FormFieldGrid>
29-
<MuiPickersUtilsProvider locale={locale} utils={MomentUtils}>
31+
<FormFieldGrid {...FormFieldGridProps}>
32+
<MuiPickersUtilsProvider locale={locale} utils={MomentUtils} {...MuiPickersUtilsProviderProps}>
3033
<MUIDatePicker
3134
fullWidth
3235
margin="normal"
@@ -39,6 +42,7 @@ const DatePicker = (props) => {
3942
readOnly={isReadOnly}
4043
{...input}
4144
value={input.value || null}
45+
{...DatePickerProps}
4246
/>
4347
</MuiPickersUtilsProvider>
4448
</FormFieldGrid>
@@ -56,7 +60,16 @@ DatePicker.propTypes = {
5660
helperText: PropTypes.node,
5761
validateOnMount: PropTypes.bool,
5862
locale: PropTypes.string,
59-
description: PropTypes.node
63+
description: PropTypes.node,
64+
FormFieldGridProps: PropTypes.object,
65+
MuiPickersUtilsProviderProps: PropTypes.object,
66+
DatePickerProps: PropTypes.object
67+
};
68+
69+
DatePicker.defaultProps = {
70+
FormFieldGridProps: {},
71+
MuiPickersUtilsProviderProps: {},
72+
DatePickerProps: {}
6073
};
6174

6275
export default DatePicker;

0 commit comments

Comments
 (0)