Skip to content

Commit 1a1c619

Browse files
rvsiarvsia
committed
feat(mui): switch jss to styled
1 parent a1f2e1f commit 1a1c619

File tree

13 files changed

+274
-233
lines changed

13 files changed

+274
-233
lines changed

‎packages/mui-component-mapper/src/dual-list-select/dual-list-select.js

Lines changed: 111 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { styled } from '@mui/material/styles';
23
import PropTypes from 'prop-types';
34
import clsx from 'clsx';
45

@@ -23,37 +24,53 @@ import {
2324

2425
import SortIcon from '@mui/icons-material/ArrowUpward';
2526

26-
import makeStyles from '@mui/styles/makeStyles';
27-
2827
import DualListSelectCommon from '@data-driven-forms/common/dual-list-select';
2928

3029
import FormFieldGrid from '../form-field-grid/form-field-grid';
3130
import { validationError } from '../validation-error/validation-error';
3231

33-
const useStyles = makeStyles((theme) => ({
34-
allToLeftIcon: {
32+
const PREFIX = 'DualListSelectWrapper';
33+
34+
const classes = {
35+
allToLeftIcon: `${PREFIX}-allToLeftIcon`,
36+
upsideDown: `${PREFIX}-upsideDown`,
37+
list: `${PREFIX}-list`,
38+
button: `${PREFIX}-button`,
39+
buttonsGrid: `${PREFIX}-buttonsGrid`,
40+
filter: `${PREFIX}-filter`,
41+
toolbar: `${PREFIX}-toolbar`,
42+
};
43+
44+
const StyledDualListSelect = styled(FormFieldGrid)(({ theme }) => ({
45+
[`& .${classes.allToLeftIcon}`]: {
3546
transform: 'scaleX(-1)',
3647
},
37-
upsideDown: {
48+
49+
[`& .${classes.upsideDown}`]: {
3850
transform: 'scaleY(-1)',
3951
},
40-
list: {
52+
53+
[`& .${classes.list}`]: {
4154
height: 300,
4255
overflow: 'auto',
4356
},
44-
button: {
57+
58+
[`& .${classes.button}`]: {
4559
display: 'flex',
4660
justifyContent: 'center',
4761
margin: theme.spacing(0.5, 0),
4862
},
49-
buttonsGrid: {
63+
64+
[`& .${classes.buttonsGrid}`]: {
5065
height: '100%',
5166
alignContent: 'center',
5267
},
53-
filter: {
68+
69+
[`& .${classes.filter}`]: {
5470
width: '100%',
5571
},
56-
toolbar: {
72+
73+
[`& .${classes.toolbar}`]: {
5774
paddingLeft: 16,
5875
paddingRight: 16,
5976
},
@@ -74,60 +91,56 @@ const ListInternal = ({
7491
checkboxVariant,
7592
PaperProps,
7693
LeftPaperProps,
77-
}) => {
78-
const classes = useStyles();
79-
80-
return (
81-
<Paper {...PaperProps} {...LeftPaperProps} className={clsx(PaperProps && PaperProps.className, LeftPaperProps && LeftPaperProps.className)}>
82-
<List component="div" role="list" dense {...ListProps} className={clsx(classes.list, ListProps.className)}>
83-
{value.length < 1 && (
84-
<ListItem button disabled {...ListItemProps}>
85-
<ListItemText primary={filterValue ? filterValueText : noOptionsTitle} />
86-
</ListItem>
94+
}) => (
95+
<Paper {...PaperProps} {...LeftPaperProps} className={clsx(PaperProps && PaperProps.className, LeftPaperProps && LeftPaperProps.className)}>
96+
<List component="div" role="list" dense {...ListProps} className={clsx(classes.list, ListProps.className)}>
97+
{value.length < 1 && (
98+
<ListItem button disabled {...ListItemProps}>
99+
<ListItemText primary={filterValue ? filterValueText : noOptionsTitle} />
100+
</ListItem>
101+
)}
102+
{value.length > 0 &&
103+
value.map(
104+
({
105+
value,
106+
label,
107+
icon,
108+
isCheckbox,
109+
secondaryActions,
110+
ListItemProps: ListItemPropsItem,
111+
ListItemIconProps: ListItemIconPropsItem,
112+
ListItemTextProps: ListItemTextPropsItem,
113+
ListItemSecondaryActionProps: ListItemSecondaryActionPropsItem,
114+
}) => (
115+
<ListItem
116+
button
117+
key={value}
118+
selected={selectedValues.includes(value)}
119+
onClick={(e) => optionClick(isCheckbox || checkboxVariant ? { ...e, ctrlKey: true } : e, value)}
120+
{...ListItemProps}
121+
{...ListItemPropsItem}
122+
>
123+
{(icon || isCheckbox || checkboxVariant) && (
124+
<ListItemIcon {...ListItemIconProps} {...ListItemIconPropsItem}>
125+
{isCheckbox || checkboxVariant ? (
126+
<Checkbox edge="start" checked={selectedValues.includes(value)} tabIndex={-1} disableRipple />
127+
) : (
128+
icon
129+
)}
130+
</ListItemIcon>
131+
)}
132+
<ListItemText primary={label} {...ListItemTextProps} {...ListItemTextPropsItem} />
133+
{secondaryActions && (
134+
<ListItemSecondaryAction {...ListItemSecondaryActionProps} {...ListItemSecondaryActionPropsItem}>
135+
{secondaryActions}
136+
</ListItemSecondaryAction>
137+
)}
138+
</ListItem>
139+
)
87140
)}
88-
{value.length > 0 &&
89-
value.map(
90-
({
91-
value,
92-
label,
93-
icon,
94-
isCheckbox,
95-
secondaryActions,
96-
ListItemProps: ListItemPropsItem,
97-
ListItemIconProps: ListItemIconPropsItem,
98-
ListItemTextProps: ListItemTextPropsItem,
99-
ListItemSecondaryActionProps: ListItemSecondaryActionPropsItem,
100-
}) => (
101-
<ListItem
102-
button
103-
key={value}
104-
selected={selectedValues.includes(value)}
105-
onClick={(e) => optionClick(isCheckbox || checkboxVariant ? { ...e, ctrlKey: true } : e, value)}
106-
{...ListItemProps}
107-
{...ListItemPropsItem}
108-
>
109-
{(icon || isCheckbox || checkboxVariant) && (
110-
<ListItemIcon {...ListItemIconProps} {...ListItemIconPropsItem}>
111-
{isCheckbox || checkboxVariant ? (
112-
<Checkbox edge="start" checked={selectedValues.includes(value)} tabIndex={-1} disableRipple />
113-
) : (
114-
icon
115-
)}
116-
</ListItemIcon>
117-
)}
118-
<ListItemText primary={label} {...ListItemTextProps} {...ListItemTextPropsItem} />
119-
{secondaryActions && (
120-
<ListItemSecondaryAction {...ListItemSecondaryActionProps} {...ListItemSecondaryActionPropsItem}>
121-
{secondaryActions}
122-
</ListItemSecondaryAction>
123-
)}
124-
</ListItem>
125-
)
126-
)}
127-
</List>
128-
</Paper>
129-
);
130-
};
141+
</List>
142+
</Paper>
143+
);
131144

132145
ListInternal.propTypes = {
133146
value: PropTypes.arrayOf(
@@ -170,49 +183,41 @@ const ToolbarInternal = ({
170183
LeftSortIconButtonProps,
171184
filter,
172185
sortDesc,
173-
}) => {
174-
const classes = useStyles();
175-
176-
return (
177-
<Toolbar
178-
variant="dense"
179-
{...ToolbarProps}
180-
{...LeftToolbarProps}
181-
className={clsx(classes.toolbar, ToolbarProps && ToolbarProps.className, LeftToolbarProps && LeftToolbarProps.className)}
186+
}) => (
187+
<Toolbar
188+
variant="dense"
189+
{...ToolbarProps}
190+
{...LeftToolbarProps}
191+
className={clsx(classes.toolbar, ToolbarProps && ToolbarProps.className, LeftToolbarProps && LeftToolbarProps.className)}
192+
>
193+
<TextField
194+
edge="start"
195+
id="options-search"
196+
label={filterOptionsTitle}
197+
onChange={({ target: { value } }) => filterOptions(value)}
198+
value={filter}
199+
type="search"
200+
{...FilterFieldProps}
201+
{...LeftFilterFieldProps}
202+
className={clsx(classes.filter, FilterFieldProps && FilterFieldProps.className, LeftFilterFieldProps && LeftFilterFieldProps.className)}
203+
/>
204+
<IconButton
205+
aria-label="sort options"
206+
edge="end"
207+
onClick={sortOptions}
208+
color="inherit"
209+
{...SortIconButtonProps}
210+
{...LeftSortIconButtonProps}
211+
size="large"
182212
>
183-
<TextField
184-
edge="start"
185-
id="options-search"
186-
label={filterOptionsTitle}
187-
onChange={({ target: { value } }) => filterOptions(value)}
188-
value={filter}
189-
type="search"
190-
{...FilterFieldProps}
191-
{...LeftFilterFieldProps}
192-
className={clsx(classes.filter, FilterFieldProps && FilterFieldProps.className, LeftFilterFieldProps && LeftFilterFieldProps.className)}
213+
<SortIcon
214+
{...SortIconProps}
215+
{...LeftSortIconProps}
216+
className={clsx(!sortDesc && classes.upsideDown, SortIconProps && SortIconProps.className, LeftSortIconProps && LeftSortIconProps.className)}
193217
/>
194-
<IconButton
195-
aria-label="sort options"
196-
edge="end"
197-
onClick={sortOptions}
198-
color="inherit"
199-
{...SortIconButtonProps}
200-
{...LeftSortIconButtonProps}
201-
size="large"
202-
>
203-
<SortIcon
204-
{...SortIconProps}
205-
{...LeftSortIconProps}
206-
className={clsx(
207-
!sortDesc && classes.upsideDown,
208-
SortIconProps && SortIconProps.className,
209-
LeftSortIconProps && LeftSortIconProps.className
210-
)}
211-
/>
212-
</IconButton>
213-
</Toolbar>
214-
);
215-
};
218+
</IconButton>
219+
</Toolbar>
220+
);
216221

217222
ToolbarInternal.propTypes = {
218223
ToolbarProps: PropTypes.object,
@@ -322,12 +327,11 @@ const DualListSelect = ({
322327
LeftPaperProps,
323328
RightPaperProps,
324329
}) => {
325-
const classes = useStyles();
326330
const invalid = validationError(meta, validateOnMount);
327331
const text = invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description;
328332

329333
return (
330-
<FormFieldGrid {...FormFieldGridProps}>
334+
<StyledDualListSelect {...FormFieldGridProps}>
331335
<FormControl fullWidth required={isRequired} error={!!invalid} component="fieldset" {...FormControlProps}>
332336
<FormLabel component="legend" {...FormLabelProps}>
333337
{label}
@@ -508,7 +512,7 @@ const DualListSelect = ({
508512
</Grid>
509513
{text && <FormHelperText {...FormHelperTextProps}>{text}</FormHelperText>}
510514
</FormControl>
511-
</FormFieldGrid>
515+
</StyledDualListSelect>
512516
);
513517
};
514518

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { memo, useReducer } from 'react';
2+
import { styled } from '@mui/material/styles';
23
import PropTypes from 'prop-types';
34
import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
45
import isEqual from 'lodash/isEqual';
56

67
import { Grid, Button, Typography, FormControl, FormHelperText, IconButton } from '@mui/material';
78

8-
import makeStyles from '@mui/styles/makeStyles';
99
import RedoIcon from '@mui/icons-material/Redo';
1010
import UndoIcon from '@mui/icons-material/Undo';
1111

@@ -14,25 +14,36 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
1414
import FormFieldGrid from '../form-field-grid/form-field-grid';
1515
import clsx from 'clsx';
1616

17-
const useFielArrayStyles = makeStyles({
18-
formControl: {
17+
const PREFIX = 'DynamicArray';
18+
19+
const classes = {
20+
formControl: `${PREFIX}-formControl`,
21+
centerText: `${PREFIX}-centerText`,
22+
buttonsToEnd: `${PREFIX}-buttonsToEnd`,
23+
header: `${PREFIX}-header`,
24+
label: `${PREFIX}-label`,
25+
fieldArrayGroup: `${PREFIX}-fieldArrayGroup`,
26+
};
27+
28+
const StyledFormFieldGrid = styled(FormFieldGrid)({
29+
[`& .${classes.formControl}`]: {
1930
width: '100%',
2031
},
21-
centerText: {
32+
[`& .${classes.centerText}`]: {
2233
display: 'flex',
2334
justifyContent: 'center',
2435
},
25-
buttonsToEnd: {
36+
[`& .${classes.buttonsToEnd}`]: {
2637
display: 'flex',
2738
justifyContent: 'flex-end',
2839
},
29-
header: {
40+
[`& .${classes.header}`]: {
3041
display: 'flex',
3142
},
32-
label: {
43+
[`& .${classes.label}`]: {
3344
flexGrow: 1,
3445
},
35-
fieldArrayGroup: {
46+
[`&.${classes.fieldArrayGroup}`]: {
3647
marginBottom: 32,
3748
},
3849
});
@@ -52,7 +63,6 @@ const ArrayItem = memo(
5263
RemoveButtonProps,
5364
}) => {
5465
const { renderForm } = useFormApi();
55-
const classes = useFielArrayStyles();
5666

5767
const editedFields = fields.map((field, index) => {
5868
const computedName = field.name ? `${name}.${field.name}` : name;
@@ -174,13 +184,11 @@ const DynamicArray = ({ ...props }) => {
174184
...buttonLabels,
175185
};
176186

177-
const classes = useFielArrayStyles();
178-
179187
const { dirty, submitFailed, error, submitError } = meta;
180188
const isError = (dirty || submitFailed) && error && typeof error === 'string';
181189

182190
return (
183-
<FormFieldGrid {...FormFieldGridProps} className={clsx(classes.fieldArrayGroup, FormFieldGridProps.classname)}>
191+
<StyledFormFieldGrid {...FormFieldGridProps} className={clsx(classes.fieldArrayGroup, FormFieldGridProps.classname)}>
184192
<FormControl
185193
component="fieldset"
186194
error={isError || submitError}
@@ -284,7 +292,7 @@ const DynamicArray = ({ ...props }) => {
284292
}}
285293
</FieldArray>
286294
</FormControl>
287-
</FormFieldGrid>
295+
</StyledFormFieldGrid>
288296
);
289297
};
290298

0 commit comments

Comments
 (0)