Skip to content

Commit 8dc9a70

Browse files
LukasBollLukasBoll
committed
Refactor(material): Replace Hidden component
Removes the deprecated hidden component and instead returns null if the hidden property is set. Closes #2107
1 parent bb7a255 commit 8dc9a70

21 files changed

+362
-323
lines changed

‎packages/material-renderers/src/additional/MaterialLabelRenderer.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
import React from 'react';
2626
import { LabelProps, RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
2727
import { withJsonFormsLabelProps } from '@jsonforms/react';
28-
import { Hidden, Typography } from '@mui/material';
28+
import { Typography } from '@mui/material';
2929

3030
/**
3131
* Default tester for a label.
@@ -40,11 +40,10 @@ export const materialLabelRendererTester: RankedTester = rankWith(
4040
* Default renderer for a label.
4141
*/
4242
export const MaterialLabelRenderer = ({ text, visible }: LabelProps) => {
43-
return (
44-
<Hidden xsUp={!visible}>
45-
<Typography variant='h6'>{text}</Typography>
46-
</Hidden>
47-
);
43+
if (!visible) {
44+
return null;
45+
}
46+
return <Typography variant='h6'>{text}</Typography>;
4847
};
4948

5049
export default withJsonFormsLabelProps(MaterialLabelRenderer);

‎packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import {
3838
JsonFormsDispatch,
3939
withJsonFormsArrayLayoutProps,
4040
} from '@jsonforms/react';
41-
import { Grid, Hidden, List, Typography } from '@mui/material';
41+
import { Grid, List, Typography } from '@mui/material';
4242
import map from 'lodash/map';
4343
import range from 'lodash/range';
4444
import React, { useCallback, useMemo, useState } from 'react';
@@ -105,8 +105,12 @@ export const MaterialListWithDetailRenderer = ({
105105
setSelectedIndex(undefined);
106106
}, [schema]);
107107

108+
if (!visible) {
109+
return null;
110+
}
111+
108112
return (
109-
<Hidden xsUp={!visible}>
113+
<div>
110114
<ArrayLayoutToolbar
111115
translations={translations}
112116
label={computeLabel(
@@ -158,7 +162,7 @@ export const MaterialListWithDetailRenderer = ({
158162
)}
159163
</Grid>
160164
</Grid>
161-
</Hidden>
165+
</div>
162166
);
163167
};
164168

‎packages/material-renderers/src/complex/MaterialAllOfRenderer.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
THE SOFTWARE.
2424
*/
2525
import React from 'react';
26-
import { Hidden } from '@mui/material';
2726

2827
import {
2928
createCombinatorRenderInfos,
@@ -51,17 +50,20 @@ export const MaterialAllOfRenderer = ({
5150
uischema.scope,
5251
path
5352
);
53+
54+
if (!visible) {
55+
return null;
56+
}
57+
5458
if (delegateUISchema) {
5559
return (
56-
<Hidden xsUp={!visible}>
57-
<JsonFormsDispatch
58-
schema={schema}
59-
uischema={delegateUISchema}
60-
path={path}
61-
renderers={renderers}
62-
cells={cells}
63-
/>
64-
</Hidden>
60+
<JsonFormsDispatch
61+
schema={schema}
62+
uischema={delegateUISchema}
63+
path={path}
64+
renderers={renderers}
65+
cells={cells}
66+
/>
6567
);
6668
}
6769
const allOfRenderInfos = createCombinatorRenderInfos(
@@ -74,7 +76,7 @@ export const MaterialAllOfRenderer = ({
7476
);
7577

7678
return (
77-
<Hidden xsUp={!visible}>
79+
<div>
7880
{allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (
7981
<JsonFormsDispatch
8082
key={allOfIndex}
@@ -85,7 +87,7 @@ export const MaterialAllOfRenderer = ({
8587
cells={cells}
8688
/>
8789
))}
88-
</Hidden>
90+
</div>
8991
);
9092
};
9193

‎packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
rankWith,
3535
} from '@jsonforms/core';
3636
import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
37-
import { Hidden, Tab, Tabs } from '@mui/material';
37+
import { Tab, Tabs } from '@mui/material';
3838
import CombinatorProperties from './CombinatorProperties';
3939
import isEmpty from 'lodash/isEmpty';
4040
import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
@@ -104,8 +104,12 @@ export const MaterialAnyOfRenderer = ({
104104
uischemas
105105
);
106106

107+
if (!visible) {
108+
return null;
109+
}
110+
107111
return (
108-
<Hidden xsUp={!visible}>
112+
<div>
109113
<CombinatorProperties
110114
schema={schema}
111115
combinatorKeyword={anyOf}
@@ -137,7 +141,7 @@ export const MaterialAnyOfRenderer = ({
137141
open={confirmDialogOpen}
138142
handleClose={handleClose}
139143
/>
140-
</Hidden>
144+
</div>
141145
);
142146
};
143147

‎packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import {
3333
} from '@jsonforms/core';
3434
import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
3535
import { MaterialTableControl } from './MaterialTableControl';
36-
import { Hidden } from '@mui/material';
3736
import { DeleteDialog } from './DeleteDialog';
3837

3938
export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
@@ -58,8 +57,12 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
5857
}, [setOpen, path, rowData]);
5958
const deleteClose = useCallback(() => setOpen(false), [setOpen]);
6059

60+
if (!visible) {
61+
return null;
62+
}
63+
6164
return (
62-
<Hidden xsUp={!visible}>
65+
<div>
6366
<MaterialTableControl {...props} openDeleteDialog={openDeleteDialog} />
6467
<DeleteDialog
6568
open={open}
@@ -71,7 +74,7 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
7174
title={props.translations.deleteDialogTitle}
7275
message={props.translations.deleteDialogMessage}
7376
/>
74-
</Hidden>
77+
</div>
7578
);
7679
};
7780

‎packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import {
2424
FormGroup,
2525
FormHelperText,
2626
FormLabel,
27-
Hidden,
2827
} from '@mui/material';
2928
import isEmpty from 'lodash/isEmpty';
3029
import React from 'react';
@@ -58,62 +57,64 @@ export const MaterialEnumArrayRenderer = ({
5857
appliedUiSchemaOptions.showUnfocusedDescription
5958
);
6059

60+
if (!visible) {
61+
return null;
62+
}
63+
6164
return (
62-
<Hidden xsUp={!visible}>
63-
<FormControl
64-
component='fieldset'
65-
fullWidth={!appliedUiSchemaOptions.trim}
66-
onFocus={onFocus}
67-
onBlur={onBlur}
65+
<FormControl
66+
component='fieldset'
67+
fullWidth={!appliedUiSchemaOptions.trim}
68+
onFocus={onFocus}
69+
onBlur={onBlur}
70+
>
71+
<FormLabel
72+
error={!isValid}
73+
component='legend'
74+
required={showAsRequired(
75+
required,
76+
appliedUiSchemaOptions.hideRequiredAsterisk
77+
)}
6878
>
69-
<FormLabel
70-
error={!isValid}
71-
component='legend'
72-
required={showAsRequired(
73-
required,
74-
appliedUiSchemaOptions.hideRequiredAsterisk
75-
)}
76-
>
77-
{label}
78-
</FormLabel>
79-
<FormGroup row>
80-
{options.map((option: any, index: number) => {
81-
const optionPath = Paths.compose(path, `${index}`);
82-
const checkboxValue = data?.includes(option.value)
83-
? option.value
84-
: undefined;
85-
return (
86-
<FormControlLabel
87-
id={id + '-label-' + option.value}
88-
key={option.value}
89-
control={
90-
<MuiCheckbox
91-
id={id + '-' + option.value}
92-
key={'checkbox-' + option.value}
93-
isValid={isEmpty(errors)}
94-
path={optionPath}
95-
handleChange={(_childPath, newValue) =>
96-
newValue
97-
? addItem(path, option.value)
98-
: removeItem(path, option.value)
99-
}
100-
data={checkboxValue}
101-
errors={errors}
102-
schema={schema}
103-
visible={visible}
104-
{...otherProps}
105-
/>
106-
}
107-
label={option.label}
108-
/>
109-
);
110-
})}
111-
</FormGroup>
112-
<FormHelperText error={!isValid}>
113-
{!isValid ? errors : showDescription ? description : null}
114-
</FormHelperText>
115-
</FormControl>
116-
</Hidden>
79+
{label}
80+
</FormLabel>
81+
<FormGroup row>
82+
{options.map((option: any, index: number) => {
83+
const optionPath = Paths.compose(path, `${index}`);
84+
const checkboxValue = data?.includes(option.value)
85+
? option.value
86+
: undefined;
87+
return (
88+
<FormControlLabel
89+
id={id + '-label-' + option.value}
90+
key={option.value}
91+
control={
92+
<MuiCheckbox
93+
id={id + '-' + option.value}
94+
key={'checkbox-' + option.value}
95+
isValid={isEmpty(errors)}
96+
path={optionPath}
97+
handleChange={(_childPath, newValue) =>
98+
newValue
99+
? addItem(path, option.value)
100+
: removeItem(path, option.value)
101+
}
102+
data={checkboxValue}
103+
errors={errors}
104+
schema={schema}
105+
visible={visible}
106+
{...otherProps}
107+
/>
108+
}
109+
label={option.label}
110+
/>
111+
);
112+
})}
113+
</FormGroup>
114+
<FormHelperText error={!isValid}>
115+
{!isValid ? errors : showDescription ? description : null}
116+
</FormHelperText>
117+
</FormControl>
117118
);
118119
};
119120

‎packages/material-renderers/src/complex/MaterialObjectRenderer.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ import {
3232
StatePropsOfControlWithDetail,
3333
} from '@jsonforms/core';
3434
import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
35-
import { Hidden } from '@mui/material';
3635
import React, { useMemo } from 'react';
3736

3837
export const MaterialObjectRenderer = ({
@@ -66,18 +65,21 @@ export const MaterialObjectRenderer = ({
6665
),
6766
[uischemas, schema, uischema.scope, path, label, uischema, rootSchema]
6867
);
68+
69+
if (!visible) {
70+
return null;
71+
}
72+
6973
return (
70-
<Hidden xsUp={!visible}>
71-
<JsonFormsDispatch
72-
visible={visible}
73-
enabled={enabled}
74-
schema={schema}
75-
uischema={detailUiSchema}
76-
path={path}
77-
renderers={renderers}
78-
cells={cells}
79-
/>
80-
</Hidden>
74+
<JsonFormsDispatch
75+
visible={visible}
76+
enabled={enabled}
77+
schema={schema}
78+
uischema={detailUiSchema}
79+
path={path}
80+
renderers={renderers}
81+
cells={cells}
82+
/>
8183
);
8284
};
8385

‎packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import {
3737
RankedTester,
3838
rankWith,
3939
} from '@jsonforms/core';
40-
import { Hidden, Tab, Tabs } from '@mui/material';
40+
import { Tab, Tabs } from '@mui/material';
4141
import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
4242
import CombinatorProperties from './CombinatorProperties';
4343

@@ -103,8 +103,12 @@ export const MaterialOneOfRenderer = ({
103103
[setConfirmDialogOpen, setSelectedIndex, data]
104104
);
105105

106+
if (!visible) {
107+
return null;
108+
}
109+
106110
return (
107-
<Hidden xsUp={!visible}>
111+
<div>
108112
<CombinatorProperties
109113
schema={schema}
110114
combinatorKeyword={'oneOf'}
@@ -136,7 +140,7 @@ export const MaterialOneOfRenderer = ({
136140
open={confirmDialogOpen}
137141
handleClose={handleClose}
138142
/>
139-
</Hidden>
143+
</div>
140144
);
141145
};
142146

0 commit comments

Comments
 (0)