Skip to content

Commit 5d5d3b5

Browse files
sebastianfreysebastianfrey
authored
Update @mui/x-date-pickers to v6 and migrate renderers (#2139)
* Upgrade @mui/x-date-pickers to v6 * Upgrade @mui/material and @mui/icons-material * Migrate date and time pickers of @jsonforms/material-renderes to @mui/x-date-pickers v6 * Fix Rollup build for material renderers demo * Remove unused variable inputRef
1 parent b11f04c commit 5d5d3b5

File tree

13 files changed

+297
-420
lines changed

13 files changed

+297
-420
lines changed

‎package-lock.json‎

Lines changed: 164 additions & 142 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/examples-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@jsonforms/core": "^3.1.0-alpha.3",
77
"@jsonforms/examples": "^3.1.0-alpha.3",
88
"@jsonforms/react": "^3.1.0-alpha.3",
9-
"@mui/material": "~5.2.2",
9+
"@mui/material": "~5.13.0",
1010
"@types/react-highlight": "^0.12.5",
1111
"@types/react-tabs": "^2.3.3",
1212
"highlight.js": "^11.3.1",

‎packages/material-renderers/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,18 +84,18 @@
8484
"@emotion/styled": "^11.3.0",
8585
"@jsonforms/core": "3.1.0-alpha.3",
8686
"@jsonforms/react": "3.1.0-alpha.3",
87-
"@mui/icons-material": "~5.2.2",
88-
"@mui/material": "~5.2.2",
89-
"@mui/x-date-pickers": "^5.0.0-beta.5"
87+
"@mui/icons-material": "~5.11.16",
88+
"@mui/material": "~5.13.0",
89+
"@mui/x-date-pickers": "^6.0.0"
9090
},
9191
"devDependencies": {
9292
"@emotion/react": "^11.5.0",
9393
"@emotion/styled": "^11.3.0",
9494
"@jsonforms/core": "^3.1.0-alpha.3",
9595
"@jsonforms/react": "^3.1.0-alpha.3",
96-
"@mui/icons-material": "~5.2.0",
97-
"@mui/material": "~5.2.2",
98-
"@mui/x-date-pickers": "^5.0.0-beta.5",
96+
"@mui/icons-material": "~5.11.16",
97+
"@mui/material": "~5.13.0",
98+
"@mui/x-date-pickers": "^6.5.0",
9999
"@rollup/plugin-commonjs": "^23.0.3",
100100
"@rollup/plugin-json": "^5.0.2",
101101
"@rollup/plugin-node-resolve": "^15.0.1",

‎packages/material-renderers/rollup.example.config.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,39 @@ import copy from 'rollup-plugin-copy';
66
import css from 'rollup-plugin-import-css';
77
import typescript from 'rollup-plugin-typescript2';
88

9+
// This little plugin mitigates Rollup's lack of support for pre-built CommonJS dependencies with
10+
// default exports.
11+
// For mor details see here: https://github.com/eclipsesource/jsonforms/pull/2139
12+
function cjsCompatPlugin() {
13+
return {
14+
name: 'cjs-compat-plugin',
15+
transform(code, id) {
16+
// ignore all packages which are not @mui/utils
17+
if (
18+
!/@mui\/utils.*.js$/.test(id) ||
19+
id.includes('@mui/utils/node_modules')
20+
) {
21+
return code;
22+
}
23+
24+
// try to extract the commonjs namespace variable
25+
const moduleName = code.match(
26+
/(?<module>[a-zA-Z0-9_$]*).default = _default;/
27+
)?.groups?.module;
28+
29+
if (!moduleName || !code.includes(`return ${moduleName};`)) {
30+
return code;
31+
}
32+
33+
// return default export instead of namespace
34+
return code.replace(
35+
`return ${moduleName}`,
36+
`return ${moduleName}.default`
37+
);
38+
},
39+
};
40+
}
41+
942
/**
1043
* @type {import('rollup').RollupOptions}
1144
*/
@@ -34,6 +67,7 @@ const config = {
3467
},
3568
},
3669
}),
70+
cjsCompatPlugin(),
3771
copy({
3872
targets: [
3973
{

‎packages/material-renderers/src/controls/MaterialDateControl.tsx‎

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
/*
22
The MIT License
3-
3+
44
Copyright (c) 2017-2019 EclipseSource Munich
55
https://github.com/eclipsesource/jsonforms
6-
6+
77
Permission is hereby granted, free of charge, to any person obtaining a copy
88
of this software and associated documentation files (the "Software"), to deal
99
in the Software without restriction, including without limitation the rights
1010
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
1111
copies of the Software, and to permit persons to whom the Software is
1212
furnished to do so, subject to the following conditions:
13-
13+
1414
The above copyright notice and this permission notice shall be included in
1515
all copies or substantial portions of the Software.
16-
16+
1717
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1818
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1919
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -35,12 +35,7 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
3535
import { FormHelperText, Hidden } from '@mui/material';
3636
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
3737
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
38-
import {
39-
createOnChangeHandler,
40-
getData,
41-
ResettableTextField,
42-
useFocus,
43-
} from '../util';
38+
import { createOnChangeHandler, getData, useFocus } from '../util';
4439

4540
export const MaterialDateControl = (props: ControlProps) => {
4641
const [focused, onFocus, onBlur] = useFocus();
@@ -84,7 +79,6 @@ export const MaterialDateControl = (props: ControlProps) => {
8479
);
8580

8681
const value = getData(data, saveFormat);
87-
const valueInInputFormat = value ? value.format(format) : '';
8882

8983
return (
9084
<Hidden xsUp={!visible}>
@@ -93,40 +87,32 @@ export const MaterialDateControl = (props: ControlProps) => {
9387
label={label}
9488
value={value}
9589
onChange={onChange}
96-
inputFormat={format}
97-
disableMaskedInput
90+
format={format}
9891
views={views}
9992
disabled={!enabled}
100-
componentsProps={{
101-
actionBar: {
102-
actions: (variant) =>
103-
variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
93+
slotProps={{
94+
actionBar: ({ wrapperVariant }) => ({
95+
actions:
96+
wrapperVariant === 'desktop'
97+
? []
98+
: ['clear', 'cancel', 'accept'],
99+
}),
100+
textField: {
101+
id: id + '-input',
102+
required:
103+
required && !appliedUiSchemaOptions.hideRequiredAsterisk,
104+
autoFocus: appliedUiSchemaOptions.focus,
105+
error: !isValid,
106+
fullWidth: !appliedUiSchemaOptions.trim,
107+
inputProps: {
108+
type: 'text',
109+
},
110+
InputLabelProps: data ? { shrink: true } : undefined,
111+
onFocus: onFocus,
112+
onBlur: onBlur,
113+
variant: 'standard',
104114
},
105115
}}
106-
renderInput={(params) => (
107-
<ResettableTextField
108-
{...params}
109-
rawValue={data}
110-
dayjsValueIsValid={value !== null}
111-
valueInInputFormat={valueInInputFormat}
112-
focused={focused}
113-
id={id + '-input'}
114-
required={
115-
required && !appliedUiSchemaOptions.hideRequiredAsterisk
116-
}
117-
autoFocus={appliedUiSchemaOptions.focus}
118-
error={!isValid}
119-
fullWidth={!appliedUiSchemaOptions.trim}
120-
inputProps={{
121-
...params.inputProps,
122-
type: 'text',
123-
}}
124-
InputLabelProps={data ? { shrink: true } : undefined}
125-
onFocus={onFocus}
126-
onBlur={onBlur}
127-
variant={'standard'}
128-
/>
129-
)}
130116
/>
131117
<FormHelperText error={!isValid && !showDescription}>
132118
{firstFormHelperText}

‎packages/material-renderers/src/controls/MaterialDateTimeControl.tsx‎

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
/*
22
The MIT License
3-
3+
44
Copyright (c) 2017-2019 EclipseSource Munich
55
https://github.com/eclipsesource/jsonforms
6-
6+
77
Permission is hereby granted, free of charge, to any person obtaining a copy
88
of this software and associated documentation files (the "Software"), to deal
99
in the Software without restriction, including without limitation the rights
1010
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
1111
copies of the Software, and to permit persons to whom the Software is
1212
furnished to do so, subject to the following conditions:
13-
13+
1414
The above copyright notice and this permission notice shall be included in
1515
all copies or substantial portions of the Software.
16-
16+
1717
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1818
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1919
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -35,12 +35,7 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
3535
import { FormHelperText, Hidden } from '@mui/material';
3636
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
3737
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
38-
import {
39-
createOnChangeHandler,
40-
getData,
41-
ResettableTextField,
42-
useFocus,
43-
} from '../util';
38+
import { createOnChangeHandler, getData, useFocus } from '../util';
4439

4540
export const MaterialDateTimeControl = (props: ControlProps) => {
4641
const [focused, onFocus, onBlur] = useFocus();
@@ -91,7 +86,6 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
9186
);
9287

9388
const value = getData(data, saveFormat);
94-
const valueInInputFormat = value ? value.format(format) : '';
9589

9690
return (
9791
<Hidden xsUp={!visible}>
@@ -100,41 +94,33 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
10094
label={label}
10195
value={value}
10296
onChange={onChange}
103-
inputFormat={format}
104-
disableMaskedInput
97+
format={format}
10598
ampm={!!appliedUiSchemaOptions.ampm}
10699
views={views}
107100
disabled={!enabled}
108-
componentsProps={{
109-
actionBar: {
110-
actions: (variant) =>
111-
variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
101+
slotProps={{
102+
actionBar: ({ wrapperVariant }) => ({
103+
actions:
104+
wrapperVariant === 'desktop'
105+
? []
106+
: ['clear', 'cancel', 'accept'],
107+
}),
108+
textField: {
109+
id: id + '-input',
110+
required:
111+
required && !appliedUiSchemaOptions.hideRequiredAsterisk,
112+
autoFocus: appliedUiSchemaOptions.focus,
113+
error: !isValid,
114+
fullWidth: !appliedUiSchemaOptions.trim,
115+
inputProps: {
116+
type: 'text',
117+
},
118+
InputLabelProps: data ? { shrink: true } : undefined,
119+
onFocus: onFocus,
120+
onBlur: onBlur,
121+
variant: 'standard',
112122
},
113123
}}
114-
renderInput={(params) => (
115-
<ResettableTextField
116-
{...params}
117-
rawValue={data}
118-
dayjsValueIsValid={value !== null}
119-
valueInInputFormat={valueInInputFormat}
120-
focused={focused}
121-
id={id + '-input'}
122-
required={
123-
required && !appliedUiSchemaOptions.hideRequiredAsterisk
124-
}
125-
autoFocus={appliedUiSchemaOptions.focus}
126-
error={!isValid}
127-
fullWidth={!appliedUiSchemaOptions.trim}
128-
inputProps={{
129-
...params.inputProps,
130-
type: 'text',
131-
}}
132-
InputLabelProps={data ? { shrink: true } : undefined}
133-
onFocus={onFocus}
134-
onBlur={onBlur}
135-
variant={'standard'}
136-
/>
137-
)}
138124
/>
139125
<FormHelperText error={!isValid && !showDescription}>
140126
{firstFormHelperText}

0 commit comments

Comments
 (0)