Skip to content

Commit 7430acf

Browse files
rvsiarvsia
committed
feat(mui): allow customization for field array
1 parent 8c343df commit 7430acf

File tree

2 files changed

+104
-20
lines changed

2 files changed

+104
-20
lines changed

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

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

39-
const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems, removeLabel }) => {
39+
const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems, removeLabel, FieldContainerProps, FieldGroupGridProps, RemoveButtonGridProps, RemoveButtonProps }) => {
4040
const { renderForm } = useFormApi();
4141
const classes = useFielArrayStyles();
4242

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

4848
return (
49-
<Grid container spacing={3}>
50-
<Grid item xs={12}>
49+
<Grid container spacing={3} {...FieldContainerProps}>
50+
<Grid item xs={12} {...FieldGroupGridProps}>
5151
<Grid container spacing={3}>
5252
{renderForm([editedFields])}
5353
</Grid>
5454
</Grid>
55-
<Grid item xs={12} className={classes.buttonsToEnd}>
56-
<Button color="secondary" onClick={() => remove(fieldIndex)} disabled={length <= minItems}>
55+
<Grid item xs={12} className={classes.buttonsToEnd} {...RemoveButtonGridProps}>
56+
<Button color="secondary" onClick={() => remove(fieldIndex)} disabled={length <= minItems} {...RemoveButtonProps}>
5757
{removeLabel}
5858
</Button>
5959
</Grid>
@@ -68,7 +68,18 @@ ArrayItem.propTypes = {
6868
remove: PropTypes.func.isRequired,
6969
length: PropTypes.number,
7070
minItems: PropTypes.number,
71-
removeLabel: PropTypes.node.isRequired
71+
removeLabel: PropTypes.node.isRequired,
72+
FieldContainerProps: PropTypes.object,
73+
FieldGroupGridProps: PropTypes.object,
74+
RemoveButtonGridProps: PropTypes.object,
75+
RemoveButtonProps: PropTypes.object
76+
};
77+
78+
ArrayItem.defaultProps = {
79+
FieldContainerProps: {},
80+
FieldGroupGridProps: {},
81+
RemoveButtonGridProps: {},
82+
RemoveButtonProps: {}
7283
};
7384

7485
const defaultButtonLabels = {
@@ -122,6 +133,22 @@ const DynamicArray = ({ ...props }) => {
122133
FormFieldGridProps,
123134
FormControlProps,
124135
buttonLabels,
136+
GridContainerProps,
137+
HeaderGridProps,
138+
HeaderProps,
139+
UndoButtonProps,
140+
RedoButtonProps,
141+
AddButtonProps,
142+
DescriptionGridProps,
143+
DescriptionProps,
144+
BodyGridProps,
145+
NoItemsProps,
146+
FormHelperTextGridProps,
147+
FormHelperTextProps,
148+
FieldContainerProps,
149+
FieldGroupGridProps,
150+
RemoveButtonGridProps,
151+
RemoveButtonProps,
125152
...rest
126153
} = useFieldApi(props);
127154
const [state, dispatch] = useReducer(reducer, initialState);
@@ -167,31 +194,31 @@ const DynamicArray = ({ ...props }) => {
167194
};
168195

169196
return (
170-
<Grid container spacing={3}>
171-
<Grid item xs={12} className={classes.header}>
197+
<Grid container spacing={3} {...GridContainerProps}>
198+
<Grid item xs={12} className={classes.header} {...HeaderGridProps}>
172199
{label && (
173-
<Typography variant="h6" className={classes.label}>
200+
<Typography variant="h6" className={classes.label} {...HeaderProps}>
174201
{label}
175202
</Typography>
176203
)}
177-
<IconButton color="primary" aria-label="undo" component="span" disabled={state.index === 0} onClick={undo}>
204+
<IconButton color="primary" aria-label="undo" component="span" disabled={state.index === 0} onClick={undo} {...UndoButtonProps}>
178205
<UndoIcon />
179206
</IconButton>
180-
<IconButton color="primary" aria-label="redo" component="span" disabled={state.index === state.history.length} onClick={redo}>
207+
<IconButton color="primary" aria-label="redo" component="span" disabled={state.index === state.history.length} onClick={redo} {...RedoButtonProps}>
181208
<RedoIcon />
182209
</IconButton>
183-
<Button color="primary" onClick={pushWrapper} disabled={value.length >= maxItems}>
210+
<Button color="primary" onClick={pushWrapper} disabled={value.length >= maxItems} {...AddButtonProps}>
184211
{combinedButtonLabels.add}
185212
</Button>
186213
</Grid>
187214
{description && (
188-
<Grid item xs={12}>
189-
<Typography variant="subtitle1">{description}</Typography>
215+
<Grid item xs={12} {...DescriptionGridProps}>
216+
<Typography variant="subtitle1" {...DescriptionProps}>{description}</Typography>
190217
</Grid>
191218
)}
192-
<Grid item xs={12}>
219+
<Grid item xs={12} {...BodyGridProps}>
193220
{value.length <= 0 ? (
194-
<Typography variant="body1" gutterBottom className={classes.centerText}>
221+
<Typography variant="body1" gutterBottom className={classes.centerText} {...NoItemsProps}>
195222
{noItemsMessage}
196223
</Typography>
197224
) : (
@@ -205,13 +232,17 @@ const DynamicArray = ({ ...props }) => {
205232
length={value.length}
206233
minItems={minItems}
207234
removeLabel={combinedButtonLabels.remove}
235+
FieldContainerProps={FieldContainerProps}
236+
FieldGroupGridProps={FieldGroupGridProps}
237+
RemoveButtonGridProps={RemoveButtonGridProps}
238+
RemoveButtonProps={RemoveButtonProps}
208239
/>
209240
))
210241
)}
211242
</Grid>
212243
{(isError || submitError) && (
213-
<Grid item xs={12}>
214-
<FormHelperText>{error || submitError}</FormHelperText>
244+
<Grid item xs={12} {...FormHelperTextGridProps}>
245+
<FormHelperText {...FormHelperTextProps}>{error || submitError}</FormHelperText>
215246
</Grid>
216247
)}
217248
</Grid>
@@ -233,15 +264,47 @@ DynamicArray.propTypes = {
233264
noItemsMessage: PropTypes.node,
234265
FormControlProps: PropTypes.object,
235266
FormFieldGridProps: PropTypes.object,
236-
buttonLabels: PropTypes.object
267+
buttonLabels: PropTypes.object,
268+
GridContainerProps: PropTypes.object,
269+
HeaderGridProps: PropTypes.object,
270+
HeaderProps: PropTypes.object,
271+
UndoButtonProps: PropTypes.object,
272+
RedoButtonProps: PropTypes.object,
273+
AddButtonProps: PropTypes.object,
274+
DescriptionGridProps: PropTypes.object,
275+
DescriptionProps: PropTypes.object,
276+
BodyGridProps: PropTypes.object,
277+
NoItemsProps: PropTypes.object,
278+
FormHelperTextGridProps: PropTypes.object,
279+
FormHelperTextProps: PropTypes.object,
280+
FieldContainerProps: PropTypes.object,
281+
FieldGroupGridProps: PropTypes.object,
282+
RemoveButtonGridProps: PropTypes.object,
283+
RemoveButtonProps: PropTypes.object
237284
};
238285

239286
DynamicArray.defaultProps = {
240287
maxItems: Infinity,
241288
minItems: 0,
242289
noItemsMessage: 'No items added',
243290
FormControlProps: {},
244-
FormFieldGridProps: {}
291+
FormFieldGridProps: {},
292+
GridContainerProps: {},
293+
HeaderGridProps: {},
294+
HeaderProps: {},
295+
UndoButtonProps: {},
296+
RedoButtonProps: {},
297+
AddButtonProps: {},
298+
DescriptionGridProps: {},
299+
DescriptionProps: {},
300+
BodyGridProps: {},
301+
NoItemsProps: {},
302+
FormHelperTextGridProps: {},
303+
FormHelperTextProps: {},
304+
FieldContainerProps: {},
305+
FieldGroupGridProps: {},
306+
RemoveButtonGridProps: {},
307+
RemoveButtonProps: {}
245308
};
246309

247310
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)