Skip to content

Commit 64e2ee4

Browse files
heath-freenomeheath-freenome
authored
Implemented the GridTemplate for all themes (#4491)
* Implemented the GridTemplate for all themes - In all themes except `@rjsf/core`: - Implemented the `GridTemplate` using the theme specific grid, adding them to the `templates` in the Registry - In `@rjsf/core` cleaned up the documentation for the already implemented `GridTemplate` - In `@rjsf/mui` switched to using the `Grid2` component instead of the deprecated `Grid` - Updated the `CHANGELOG_V6.md` accordingly * - Fixed the styling for the `mui` `ObjectFieldTemplate` * - Fixed the MUI snapshots
1 parent ffe154b commit 64e2ee4

File tree

26 files changed

+1603
-3096
lines changed

26 files changed

+1603
-3096
lines changed

‎CHANGELOG_v6.md

+7
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,21 @@ should change the heading of the (upcoming) version to include a major version b
2121

2222
- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
2323
- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
24+
- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
2425

2526
## @rjsf/chakra-ui
2627

2728
- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
2829
- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
30+
- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
2931

3032
## @rjsf/core
3133

3234
- BREAKING CHANGE: Updated `ArrayField` to provide the `buttonsProps` to the `ArrayFieldItemTemplateType`
3335
- Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function
3436
- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
3537
- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
38+
- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
3639

3740
## @rjsf/fluent-ui
3841

@@ -42,16 +45,20 @@ should change the heading of the (upcoming) version to include a major version b
4245

4346
- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
4447
- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
48+
- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
4549

4650
## @rjsf/mui
4751

4852
- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
4953
- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
54+
- Updated the theme to use `Grid2` instead of the deprecated `Grid`
55+
- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
5056

5157
## @rjsf/semantic-ui
5258

5359
- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
5460
- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
61+
- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
5562

5663
## @rjsf/utils
5764

‎packages/antd/src/templates/GridTemplate/index.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Col, Row } from 'antd';
2+
import { GridTemplateProps } from '@rjsf/utils';
3+
4+
/** Renders a `GridTemplate` for antd, which is expecting the column sizing information coming in via the
5+
* extra props provided by the caller, which are spread directly on the `Row`/`Col`.
6+
*
7+
* @param props - The GridTemplateProps, including the extra props containing the antd grid positioning details
8+
*/
9+
export default function GridTemplate(props: GridTemplateProps) {
10+
const { children, column, ...rest } = props;
11+
if (column) {
12+
return <Col {...rest}>{children}</Col>;
13+
}
14+
return <Row {...rest}>{children}</Row>;
15+
}

‎packages/antd/src/templates/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ErrorList from './ErrorList';
88
import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
99
import FieldErrorTemplate from './FieldErrorTemplate';
1010
import FieldTemplate from './FieldTemplate';
11+
import GridTemplate from './GridTemplate';
1112
import ObjectFieldTemplate from './ObjectFieldTemplate';
1213
import SubmitButton from './SubmitButton';
1314
import TitleField from './TitleField';
@@ -34,6 +35,7 @@ export function generateTemplates<
3435
ErrorListTemplate: ErrorList,
3536
FieldErrorTemplate,
3637
FieldTemplate,
38+
GridTemplate,
3739
ObjectFieldTemplate,
3840
TitleFieldTemplate: TitleField,
3941
WrapIfAdditionalTemplate,

‎packages/chakra-ui/src/GridTemplate/GridTemplate.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Grid, GridItem } from '@chakra-ui/react';
2+
import { GridTemplateProps } from '@rjsf/utils';
3+
4+
/** Renders a `GridTemplate` for chakra-ui, which is expecting the column sizing information coming in via the
5+
* extra props provided by the caller, which are spread directly on the `Grid`/`GridItem`.
6+
*
7+
* @param props - The GridTemplateProps, including the extra props containing the chakra-ui grid positioning details
8+
*/
9+
export default function GridTemplate(props: GridTemplateProps) {
10+
const { children, column, ...rest } = props;
11+
if (column) {
12+
return <GridItem {...rest}>{children}</GridItem>;
13+
}
14+
return <Grid {...rest}>{children}</Grid>;
15+
}

‎packages/chakra-ui/src/GridTemplate/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './GridTemplate';
2+
export * from './GridTemplate';

‎packages/chakra-ui/src/Templates/Templates.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
88
import FieldErrorTemplate from '../FieldErrorTemplate';
99
import FieldHelpTemplate from '../FieldHelpTemplate';
1010
import FieldTemplate from '../FieldTemplate';
11+
import GridTemplate from '../GridTemplate';
1112
import ObjectFieldTemplate from '../ObjectFieldTemplate';
1213
import SubmitButton from '../SubmitButton';
1314
import TitleField from '../TitleField';
@@ -36,6 +37,7 @@ export function generateTemplates<
3637
FieldErrorTemplate,
3738
FieldHelpTemplate,
3839
FieldTemplate,
40+
GridTemplate,
3941
ObjectFieldTemplate,
4042
TitleFieldTemplate: TitleField,
4143
WrapIfAdditionalTemplate,

‎packages/core/src/components/templates/GridTemplate.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { GridTemplateProps } from '@rjsf/utils';
22

3-
/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column
4-
* information coming in via the `className` prop.
3+
/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column information coming in via the `className`
4+
* prop. Also spreads all the other props provided by the user directly on the div.
55
*
6-
* @param props - The GridTemplateProps, including the expected className for
7-
* the bootstrap 3 grid behavior
6+
* @param props - The GridTemplateProps, including the expected className for the bootstrap 3 grid behavior
87
*/
98
export default function GridTemplate(props: GridTemplateProps) {
10-
const { children, overrides, column, className, ...rest } = props;
9+
const { children, column, className, ...rest } = props;
1110
const classNames = column ? className : `row ${className}`;
1211
return (
1312
<div className={classNames} {...rest}>

‎packages/fluentui-rc/src/GridTemplate/GridTemplate.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Flex } from '@fluentui/react-migration-v0-v9';
2+
import { GridTemplateProps } from '@rjsf/utils';
3+
4+
/** Renders a `GridTemplate` for fluentui-rc, which is expecting the column sizing information coming in via the
5+
* extra props provided by the caller, which are spread directly on the `Flex`.
6+
*
7+
* @param props - The GridTemplateProps, including the extra props containing the fluentui-rc grid positioning details
8+
*/
9+
export default function GridTemplate(props: GridTemplateProps) {
10+
const { children, column, ...rest } = props;
11+
return <Flex {...rest}>{children}</Flex>;
12+
}

‎packages/fluentui-rc/src/GridTemplate/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './GridTemplate';
2+
export * from './GridTemplate';

‎packages/fluentui-rc/src/Templates/Templates.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
88
import FieldErrorTemplate from '../FieldErrorTemplate';
99
import FieldHelpTemplate from '../FieldHelpTemplate';
1010
import FieldTemplate from '../FieldTemplate';
11+
import GridTemplate from '../GridTemplate';
1112
import ObjectFieldTemplate from '../ObjectFieldTemplate';
1213
import SubmitButton from '../SubmitButton';
1314
import TitleField from '../TitleField';
@@ -36,6 +37,7 @@ export function generateTemplates<
3637
FieldErrorTemplate,
3738
FieldHelpTemplate,
3839
FieldTemplate,
40+
GridTemplate,
3941
ObjectFieldTemplate,
4042
TitleFieldTemplate: TitleField,
4143
WrapIfAdditionalTemplate,

‎packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CSSProperties } from 'react';
22
import Box from '@mui/material/Box';
3-
import Grid from '@mui/material/Grid';
3+
import Grid2 from '@mui/material/Grid2';
44
import Paper from '@mui/material/Paper';
55
import {
66
ArrayFieldTemplateItemType,
@@ -35,19 +35,19 @@ export default function ArrayFieldItemTemplate<
3535
minWidth: 0,
3636
};
3737
return (
38-
<Grid container={true} alignItems='center'>
39-
<Grid item={true} xs style={{ overflow: 'auto' }}>
38+
<Grid2 container={true} alignItems='center'>
39+
<Grid2 size='auto' style={{ overflow: 'auto' }}>
4040
<Box mb={2}>
4141
<Paper elevation={2}>
4242
<Box p={2}>{children}</Box>
4343
</Paper>
4444
</Box>
45-
</Grid>
45+
</Grid2>
4646
{hasToolbar && (
47-
<Grid item={true}>
47+
<Grid2>
4848
<ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
49-
</Grid>
49+
</Grid2>
5050
)}
51-
</Grid>
51+
</Grid2>
5252
);
5353
}

‎packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Box from '@mui/material/Box';
2-
import Grid from '@mui/material/Grid';
2+
import Grid2 from '@mui/material/Grid2';
33
import Paper from '@mui/material/Paper';
44
import {
55
getTemplate,
@@ -66,8 +66,8 @@ export default function ArrayFieldTemplate<
6666
<ArrayFieldItemTemplate key={key} {...itemProps} />
6767
))}
6868
{canAdd && (
69-
<Grid container justifyContent='flex-end'>
70-
<Grid item={true}>
69+
<Grid2 container justifyContent='flex-end'>
70+
<Grid2>
7171
<Box mt={2}>
7272
<AddButton
7373
id={buttonId<T>(idSchema, 'add')}
@@ -78,8 +78,8 @@ export default function ArrayFieldTemplate<
7878
registry={registry}
7979
/>
8080
</Box>
81-
</Grid>
82-
</Grid>
81+
</Grid2>
82+
</Grid2>
8383
)}
8484
</Box>
8585
</Paper>

‎packages/mui/src/GridTemplate/GridTemplate.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Grid2 from '@mui/material/Grid2';
2+
import { GridTemplateProps } from '@rjsf/utils';
3+
4+
/** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the
5+
* extra props provided by the caller, which are spread directly on the `Grid2`.
6+
*
7+
* @param props - The GridTemplateProps, including the extra props containing the mui grid positioning details
8+
*/
9+
export default function GridTemplate(props: GridTemplateProps) {
10+
const { children, column, ...rest } = props;
11+
return (
12+
<Grid2 container={!column} {...rest}>
13+
{children}
14+
</Grid2>
15+
);
16+
}

‎packages/mui/src/GridTemplate/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './GridTemplate';
2+
export * from './GridTemplate';

‎packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Grid from '@mui/material/Grid';
1+
import Grid2 from '@mui/material/Grid2';
22
import {
33
FormContextType,
44
ObjectFieldTemplateProps,
@@ -69,21 +69,21 @@ export default function ObjectFieldTemplate<
6969
registry={registry}
7070
/>
7171
)}
72-
<Grid container={true} spacing={2} style={{ marginTop: '10px' }}>
72+
<Grid2 container={true} spacing={2} style={{ marginTop: '10px' }}>
7373
{properties.map((element, index) =>
74-
// Remove the <Grid> if the inner element is hidden as the <Grid>
74+
// Remove the <Grid2> if the inner element is hidden as the <Grid2>
7575
// itself would otherwise still take up space.
7676
element.hidden ? (
7777
element.content
7878
) : (
79-
<Grid item={true} xs={12} key={index} style={{ marginBottom: '10px' }}>
79+
<Grid2 size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }}>
8080
{element.content}
81-
</Grid>
81+
</Grid2>
8282
)
8383
)}
8484
{canExpand<T, S, F>(schema, uiSchema, formData) && (
85-
<Grid container justifyContent='flex-end'>
86-
<Grid item={true}>
85+
<Grid2 container justifyContent='flex-end'>
86+
<Grid2>
8787
<AddButton
8888
id={buttonId<T>(idSchema, 'add')}
8989
className='object-property-expand'
@@ -92,10 +92,10 @@ export default function ObjectFieldTemplate<
9292
uiSchema={uiSchema}
9393
registry={registry}
9494
/>
95-
</Grid>
96-
</Grid>
95+
</Grid2>
96+
</Grid2>
9797
)}
98-
</Grid>
98+
</Grid2>
9999
</>
100100
);
101101
}

‎packages/mui/src/Templates/Templates.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
1010
import FieldErrorTemplate from '../FieldErrorTemplate';
1111
import FieldHelpTemplate from '../FieldHelpTemplate';
1212
import FieldTemplate from '../FieldTemplate';
13+
import GridTemplate from '../GridTemplate';
1314
import ObjectFieldTemplate from '../ObjectFieldTemplate';
1415
import SubmitButton from '../SubmitButton';
1516
import TitleField from '../TitleField';
@@ -37,6 +38,7 @@ export function generateTemplates<
3738
FieldErrorTemplate,
3839
FieldHelpTemplate,
3940
FieldTemplate,
41+
GridTemplate,
4042
ObjectFieldTemplate,
4143
TitleFieldTemplate: TitleField,
4244
WrapIfAdditionalTemplate,

‎packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CSSProperties, FocusEvent } from 'react';
2-
import Grid from '@mui/material/Grid';
2+
import Grid2 from '@mui/material/Grid2';
33
import TextField from '@mui/material/TextField';
44
import {
55
ADDITIONAL_PROPERTY_FLAG,
@@ -59,8 +59,8 @@ export default function WrapIfAdditionalTemplate<
5959
const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
6060

6161
return (
62-
<Grid container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
63-
<Grid item xs>
62+
<Grid2 container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
63+
<Grid2 size='auto'>
6464
<TextField
6565
fullWidth={true}
6666
required={required}
@@ -72,11 +72,9 @@ export default function WrapIfAdditionalTemplate<
7272
onBlur={!readonly ? handleBlur : undefined}
7373
type='text'
7474
/>
75-
</Grid>
76-
<Grid item={true} xs>
77-
{children}
78-
</Grid>
79-
<Grid item={true}>
75+
</Grid2>
76+
<Grid2 size='auto'>{children}</Grid2>
77+
<Grid2>
8078
<RemoveButton
8179
id={buttonId<T>(id, 'remove')}
8280
className='array-item-remove'
@@ -87,7 +85,7 @@ export default function WrapIfAdditionalTemplate<
8785
uiSchema={uiSchema}
8886
registry={registry}
8987
/>
90-
</Grid>
91-
</Grid>
88+
</Grid2>
89+
</Grid2>
9290
);
9391
}

0 commit comments

Comments
 (0)