Skip to content

Commit dafb849

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #977 from rvsia/allowMUIFieldArrayCustomization
feat(mui): allow customization for field array
2 parents 794300d + 3d1ec61 commit dafb849

File tree

3 files changed

+142
-21
lines changed

3 files changed

+142
-21
lines changed

‎packages/mui-component-mapper/src/files/field-array.d.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactNode } from "react";
22
import { FieldArrayField } from "@data-driven-forms/react-form-renderer";
3-
import { FormControlProps, GridProps } from "@material-ui/core";
3+
import { FormControlProps, GridProps, ButtonProps, FormHelperTextProps, TypographyProps } from "@material-ui/core";
44

55
export interface FieldArrayButtonLabels {
66
add?: ReactNode;
@@ -18,6 +18,22 @@ export interface FieldArrayProps {
1818
FormControlProps?: FormControlProps;
1919
FormFieldGridProps?: GridProps;
2020
buttonLabels?: FieldArrayButtonLabels;
21+
GridContainerProps: GridProps;
22+
HeaderGridProps: GridProps;
23+
HeaderProps: TypographyProps;
24+
UndoButtonProps: ButtonProps;
25+
RedoButtonProps: ButtonProps;
26+
AddButtonProps: ButtonProps;
27+
DescriptionGridProps: GridProps;
28+
DescriptionProps: TypographyProps;
29+
BodyGridProps: GridProps;
30+
NoItemsProps: TypographyProps;
31+
FormHelperTextGridProps: GridProps;
32+
FormHelperTextProps: FormHelperTextProps;
33+
FieldContainerProps: GridProps;
34+
FieldGroupGridProps: GridProps;
35+
RemoveButtonGridProps: GridProps;
36+
RemoveButtonProps: ButtonProps;
2137
}
2238

2339
declare const FieldArray: React.ComponentType<FieldArrayProps>;

‎packages/mui-component-mapper/src/files/field-array.js

Lines changed: 104 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,19 @@ const useFielArrayStyles = makeStyles({
3636
}
3737
});
3838

39-
const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems, removeLabel }) => {
39+
const ArrayItem = ({
40+
fields,
41+
fieldIndex,
42+
name,
43+
remove,
44+
length,
45+
minItems,
46+
removeLabel,
47+
FieldContainerProps,
48+
FieldGroupGridProps,
49+
RemoveButtonGridProps,
50+
RemoveButtonProps
51+
}) => {
4052
const { renderForm } = useFormApi();
4153
const classes = useFielArrayStyles();
4254

@@ -46,14 +58,14 @@ const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems, removeL
4658
});
4759

4860
return (
49-
<Grid container spacing={3}>
50-
<Grid item xs={12}>
61+
<Grid container spacing={3} {...FieldContainerProps}>
62+
<Grid item xs={12} {...FieldGroupGridProps}>
5163
<Grid container spacing={3}>
5264
{renderForm([editedFields])}
5365
</Grid>
5466
</Grid>
55-
<Grid item xs={12} className={classes.buttonsToEnd}>
56-
<Button color="secondary" onClick={() => remove(fieldIndex)} disabled={length <= minItems}>
67+
<Grid item xs={12} className={classes.buttonsToEnd} {...RemoveButtonGridProps}>
68+
<Button color="secondary" onClick={() => remove(fieldIndex)} disabled={length <= minItems} {...RemoveButtonProps}>
5769
{removeLabel}
5870
</Button>
5971
</Grid>
@@ -68,7 +80,18 @@ ArrayItem.propTypes = {
6880
remove: PropTypes.func.isRequired,
6981
length: PropTypes.number,
7082
minItems: PropTypes.number,
71-
removeLabel: PropTypes.node.isRequired
83+
removeLabel: PropTypes.node.isRequired,
84+
FieldContainerProps: PropTypes.object,
85+
FieldGroupGridProps: PropTypes.object,
86+
RemoveButtonGridProps: PropTypes.object,
87+
RemoveButtonProps: PropTypes.object
88+
};
89+
90+
ArrayItem.defaultProps = {
91+
FieldContainerProps: {},
92+
FieldGroupGridProps: {},
93+
RemoveButtonGridProps: {},
94+
RemoveButtonProps: {}
7295
};
7396

7497
const defaultButtonLabels = {
@@ -122,6 +145,22 @@ const DynamicArray = ({ ...props }) => {
122145
FormFieldGridProps,
123146
FormControlProps,
124147
buttonLabels,
148+
GridContainerProps,
149+
HeaderGridProps,
150+
HeaderProps,
151+
UndoButtonProps,
152+
RedoButtonProps,
153+
AddButtonProps,
154+
DescriptionGridProps,
155+
DescriptionProps,
156+
BodyGridProps,
157+
NoItemsProps,
158+
FormHelperTextGridProps,
159+
FormHelperTextProps,
160+
FieldContainerProps,
161+
FieldGroupGridProps,
162+
RemoveButtonGridProps,
163+
RemoveButtonProps,
125164
...rest
126165
} = useFieldApi(props);
127166
const [state, dispatch] = useReducer(reducer, initialState);
@@ -167,31 +206,40 @@ const DynamicArray = ({ ...props }) => {
167206
};
168207

169208
return (
170-
<Grid container spacing={3}>
171-
<Grid item xs={12} className={classes.header}>
209+
<Grid container spacing={3} {...GridContainerProps}>
210+
<Grid item xs={12} className={classes.header} {...HeaderGridProps}>
172211
{label && (
173-
<Typography variant="h6" className={classes.label}>
212+
<Typography variant="h6" className={classes.label} {...HeaderProps}>
174213
{label}
175214
</Typography>
176215
)}
177-
<IconButton color="primary" aria-label="undo" component="span" disabled={state.index === 0} onClick={undo}>
216+
<IconButton color="primary" aria-label="undo" component="span" disabled={state.index === 0} onClick={undo} {...UndoButtonProps}>
178217
<UndoIcon />
179218
</IconButton>
180-
<IconButton color="primary" aria-label="redo" component="span" disabled={state.index === state.history.length} onClick={redo}>
219+
<IconButton
220+
color="primary"
221+
aria-label="redo"
222+
component="span"
223+
disabled={state.index === state.history.length}
224+
onClick={redo}
225+
{...RedoButtonProps}
226+
>
181227
<RedoIcon />
182228
</IconButton>
183-
<Button color="primary" onClick={pushWrapper} disabled={value.length >= maxItems}>
229+
<Button color="primary" onClick={pushWrapper} disabled={value.length >= maxItems} {...AddButtonProps}>
184230
{combinedButtonLabels.add}
185231
</Button>
186232
</Grid>
187233
{description && (
188-
<Grid item xs={12}>
189-
<Typography variant="subtitle1">{description}</Typography>
234+
<Grid item xs={12} {...DescriptionGridProps}>
235+
<Typography variant="subtitle1" {...DescriptionProps}>
236+
{description}
237+
</Typography>
190238
</Grid>
191239
)}
192-
<Grid item xs={12}>
240+
<Grid item xs={12} {...BodyGridProps}>
193241
{value.length <= 0 ? (
194-
<Typography variant="body1" gutterBottom className={classes.centerText}>
242+
<Typography variant="body1" gutterBottom className={classes.centerText} {...NoItemsProps}>
195243
{noItemsMessage}
196244
</Typography>
197245
) : (
@@ -205,13 +253,17 @@ const DynamicArray = ({ ...props }) => {
205253
length={value.length}
206254
minItems={minItems}
207255
removeLabel={combinedButtonLabels.remove}
256+
FieldContainerProps={FieldContainerProps}
257+
FieldGroupGridProps={FieldGroupGridProps}
258+
RemoveButtonGridProps={RemoveButtonGridProps}
259+
RemoveButtonProps={RemoveButtonProps}
208260
/>
209261
))
210262
)}
211263
</Grid>
212264
{(isError || submitError) && (
213-
<Grid item xs={12}>
214-
<FormHelperText>{error || submitError}</FormHelperText>
265+
<Grid item xs={12} {...FormHelperTextGridProps}>
266+
<FormHelperText {...FormHelperTextProps}>{error || submitError}</FormHelperText>
215267
</Grid>
216268
)}
217269
</Grid>
@@ -233,15 +285,47 @@ DynamicArray.propTypes = {
233285
noItemsMessage: PropTypes.node,
234286
FormControlProps: PropTypes.object,
235287
FormFieldGridProps: PropTypes.object,
236-
buttonLabels: PropTypes.object
288+
buttonLabels: PropTypes.object,
289+
GridContainerProps: PropTypes.object,
290+
HeaderGridProps: PropTypes.object,
291+
HeaderProps: PropTypes.object,
292+
UndoButtonProps: PropTypes.object,
293+
RedoButtonProps: PropTypes.object,
294+
AddButtonProps: PropTypes.object,
295+
DescriptionGridProps: PropTypes.object,
296+
DescriptionProps: PropTypes.object,
297+
BodyGridProps: PropTypes.object,
298+
NoItemsProps: PropTypes.object,
299+
FormHelperTextGridProps: PropTypes.object,
300+
FormHelperTextProps: PropTypes.object,
301+
FieldContainerProps: PropTypes.object,
302+
FieldGroupGridProps: PropTypes.object,
303+
RemoveButtonGridProps: PropTypes.object,
304+
RemoveButtonProps: PropTypes.object
237305
};
238306

239307
DynamicArray.defaultProps = {
240308
maxItems: Infinity,
241309
minItems: 0,
242310
noItemsMessage: 'No items added',
243311
FormControlProps: {},
244-
FormFieldGridProps: {}
312+
FormFieldGridProps: {},
313+
GridContainerProps: {},
314+
HeaderGridProps: {},
315+
HeaderProps: {},
316+
UndoButtonProps: {},
317+
RedoButtonProps: {},
318+
AddButtonProps: {},
319+
DescriptionGridProps: {},
320+
DescriptionProps: {},
321+
BodyGridProps: {},
322+
NoItemsProps: {},
323+
FormHelperTextGridProps: {},
324+
FormHelperTextProps: {},
325+
FieldContainerProps: {},
326+
FieldGroupGridProps: {},
327+
RemoveButtonGridProps: {},
328+
RemoveButtonProps: {}
245329
};
246330

247331
export default DynamicArray;

‎packages/react-renderer-demo/src/doc-components/examples-texts/mui/field-array.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,24 @@ const fields = [
4747
## Custom component
4848

4949
To implement a custom component, please take a look [here](/components/field-array).
50+
51+
### Composite props
52+
53+
|name|type|default|target component|
54+
|----|----|-------|----------------|
55+
|GridContainerProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
56+
|HeaderGridProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
57+
|HeaderProps|`{}`|[Typography](https://material-ui.com/api/typography/)|
58+
|UndoButtonProps|`{}`|[Button](https://material-ui.com/api/button/)|
59+
|RedoButtonProps|`{}`|[Button](https://material-ui.com/api/button/)|
60+
|AddButtonProps|`{}`|[Button](https://material-ui.com/api/button/)|
61+
|DescriptionGridProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
62+
|DescriptionProps|`{}`|[Typography](https://material-ui.com/api/typography/)|
63+
|BodyGridProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
64+
|NoItemsProps|`{}`|[Typography](https://material-ui.com/api/typography/)|
65+
|FormHelperTextGridProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
66+
|FormHelperTextProps|`{}`|[FormHelperText](https://material-ui.com/api/form-helper-text/)|
67+
|FieldContainerProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
68+
|FieldGroupGridProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
69+
|RemoveButtonGridProps|`{}`|[Grid](https://material-ui.com/api/grid/)|
70+
|RemoveButtonProps|`{}`|[Button](https://material-ui.com/api/button/)|

0 commit comments

Comments
 (0)