Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate @mui/x-date-pickers to v6 #2139

Merged
merged 6 commits into from Jun 5, 2023
Merged

Migrate @mui/x-date-pickers to v6 #2139

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bfc4aa8
Upgrade @mui/x-date-pickers to v6
sebastianfrey May 23, 2023
676ba4f
Upgrade @mui/material and @mui/icons-material
sebastianfrey May 23, 2023
d6c2790
Migrate date and time pickers of @jsonforms/material-renderes to @mui…
sebastianfrey May 23, 2023
3c72aac
Fix Rollup build for material renderers demo
sebastianfrey May 30, 2023
a3ae022
Remove unused variable inputRef
sebastianfrey May 30, 2023
931cd66
Remove unnecessary helper interface
sebastianfrey Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
306 changes: 164 additions & 142 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/examples-react/package.json
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@
"@jsonforms/core": "^3.1.0-alpha.3",
"@jsonforms/examples": "^3.1.0-alpha.3",
"@jsonforms/react": "^3.1.0-alpha.3",
"@mui/material": "~5.2.2",
"@mui/material": "~5.13.0",
"@types/react-highlight": "^0.12.5",
"@types/react-tabs": "^2.3.3",
"highlight.js": "^11.3.1",
Expand Down
12 changes: 6 additions & 6 deletions packages/material-renderers/package.json
View file
Open in desktop
Expand Up @@ -84,18 +84,18 @@
"@emotion/styled": "^11.3.0",
"@jsonforms/core": "3.1.0-alpha.3",
"@jsonforms/react": "3.1.0-alpha.3",
"@mui/icons-material": "~5.2.2",
"@mui/material": "~5.2.2",
"@mui/x-date-pickers": "^5.0.0-beta.5"
"@mui/icons-material": "~5.11.16",
"@mui/material": "~5.13.0",
"@mui/x-date-pickers": "^6.0.0"
},
"devDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@jsonforms/core": "^3.1.0-alpha.3",
"@jsonforms/react": "^3.1.0-alpha.3",
"@mui/icons-material": "~5.2.0",
"@mui/material": "~5.2.2",
"@mui/x-date-pickers": "^5.0.0-beta.5",
"@mui/icons-material": "~5.11.16",
"@mui/material": "~5.13.0",
"@mui/x-date-pickers": "^6.5.0",
"@rollup/plugin-commonjs": "^23.0.3",
"@rollup/plugin-json": "^5.0.2",
"@rollup/plugin-node-resolve": "^15.0.1",
Expand Down
34 changes: 34 additions & 0 deletions packages/material-renderers/rollup.example.config.js
View file
Open in desktop
Expand Up @@ -6,6 +6,39 @@ import copy from 'rollup-plugin-copy';
import css from 'rollup-plugin-import-css';
import typescript from 'rollup-plugin-typescript2';

// This little plugin mitigates Rollup's lack of support for pre-built CommonJS dependencies with
// default exports.
// For mor details see here: https://github.com/eclipsesource/jsonforms/pull/2139
function cjsCompatPlugin() {
return {
name: 'cjs-compat-plugin',
transform(code, id) {
// ignore all packages which are not @mui/utils
if (
!/@mui\/utils.*.js$/.test(id) ||
id.includes('@mui/utils/node_modules')
) {
return code;
}

// try to extract the commonjs namespace variable
const moduleName = code.match(
/(?<module>[a-zA-Z0-9_$]*).default = _default;/
)?.groups?.module;

if (!moduleName || !code.includes(`return ${moduleName};`)) {
return code;
}

// return default export instead of namespace
return code.replace(
`return ${moduleName}`,
`return ${moduleName}.default`
);
},
};
}

/**
* @type {import('rollup').RollupOptions}
*/
Expand Down Expand Up @@ -34,6 +67,7 @@ const config = {
},
},
}),
cjsCompatPlugin(),
copy({
targets: [
{
Expand Down
63 changes: 27 additions & 36 deletions packages/material-renderers/src/controls/MaterialDateControl.tsx
View file
Open in desktop
@@ -1,19 +1,19 @@
/*
The MIT License

Copyright (c) 2017-2019 EclipseSource Munich
https://github.com/eclipsesource/jsonforms

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand All @@ -38,8 +38,8 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
createOnChangeHandler,
getData,
ResettableTextField,
useFocus,
PickersActionBarParams,
} from '../util';

export const MaterialDateControl = (props: ControlProps) => {
Expand Down Expand Up @@ -84,7 +84,6 @@ export const MaterialDateControl = (props: ControlProps) => {
);

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

return (
<Hidden xsUp={!visible}>
Expand All @@ -93,40 +92,32 @@ export const MaterialDateControl = (props: ControlProps) => {
label={label}
value={value}
onChange={onChange}
inputFormat={format}
disableMaskedInput
format={format}
views={views}
disabled={!enabled}
componentsProps={{
actionBar: {
actions: (variant) =>
variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
slotProps={{
actionBar: ({ wrapperVariant }: PickersActionBarParams) => ({
lucas-koehler marked this conversation as resolved.
Show resolved Hide resolved
actions:
wrapperVariant === 'desktop'
? []
: ['clear', 'cancel', 'accept'],
}),
textField: {
id: id + '-input',
required:
required && !appliedUiSchemaOptions.hideRequiredAsterisk,
autoFocus: appliedUiSchemaOptions.focus,
error: !isValid,
fullWidth: !appliedUiSchemaOptions.trim,
inputProps: {
type: 'text',
},
InputLabelProps: data ? { shrink: true } : undefined,
onFocus: onFocus,
onBlur: onBlur,
variant: 'standard',
},
}}
renderInput={(params) => (
<ResettableTextField
{...params}
rawValue={data}
dayjsValueIsValid={value !== null}
valueInInputFormat={valueInInputFormat}
focused={focused}
id={id + '-input'}
required={
required && !appliedUiSchemaOptions.hideRequiredAsterisk
}
autoFocus={appliedUiSchemaOptions.focus}
error={!isValid}
fullWidth={!appliedUiSchemaOptions.trim}
inputProps={{
...params.inputProps,
type: 'text',
}}
InputLabelProps={data ? { shrink: true } : undefined}
onFocus={onFocus}
onBlur={onBlur}
variant={'standard'}
/>
)}
/>
<FormHelperText error={!isValid && !showDescription}>
{firstFormHelperText}
Expand Down
63 changes: 27 additions & 36 deletions packages/material-renderers/src/controls/MaterialDateTimeControl.tsx
View file
Open in desktop
@@ -1,19 +1,19 @@
/*
The MIT License

Copyright (c) 2017-2019 EclipseSource Munich
https://github.com/eclipsesource/jsonforms

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand All @@ -38,7 +38,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
createOnChangeHandler,
getData,
ResettableTextField,
PickersActionBarParams,
useFocus,
} from '../util';

Expand Down Expand Up @@ -91,7 +91,6 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
);

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

return (
<Hidden xsUp={!visible}>
Expand All @@ -100,41 +99,33 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
label={label}
value={value}
onChange={onChange}
inputFormat={format}
disableMaskedInput
format={format}
ampm={!!appliedUiSchemaOptions.ampm}
views={views}
disabled={!enabled}
componentsProps={{
actionBar: {
actions: (variant) =>
variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
slotProps={{
actionBar: ({ wrapperVariant }: PickersActionBarParams) => ({
actions:
wrapperVariant === 'desktop'
? []
: ['clear', 'cancel', 'accept'],
}),
textField: {
id: id + '-input',
required:
required && !appliedUiSchemaOptions.hideRequiredAsterisk,
autoFocus: appliedUiSchemaOptions.focus,
error: !isValid,
fullWidth: !appliedUiSchemaOptions.trim,
inputProps: {
type: 'text',
},
InputLabelProps: data ? { shrink: true } : undefined,
onFocus: onFocus,
onBlur: onBlur,
variant: 'standard',
},
}}
renderInput={(params) => (
<ResettableTextField
{...params}
rawValue={data}
dayjsValueIsValid={value !== null}
valueInInputFormat={valueInInputFormat}
focused={focused}
id={id + '-input'}
required={
required && !appliedUiSchemaOptions.hideRequiredAsterisk
}
autoFocus={appliedUiSchemaOptions.focus}
error={!isValid}
fullWidth={!appliedUiSchemaOptions.trim}
inputProps={{
...params.inputProps,
type: 'text',
}}
InputLabelProps={data ? { shrink: true } : undefined}
onFocus={onFocus}
onBlur={onBlur}
variant={'standard'}
/>
)}
/>
<FormHelperText error={!isValid && !showDescription}>
{firstFormHelperText}
Expand Down
64 changes: 27 additions & 37 deletions packages/material-renderers/src/controls/MaterialTimeControl.tsx
View file
Open in desktop
@@ -1,19 +1,19 @@
/*
The MIT License

Copyright (c) 2017-2019 EclipseSource Munich
https://github.com/eclipsesource/jsonforms

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand All @@ -38,7 +38,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
createOnChangeHandler,
getData,
ResettableTextField,
PickersActionBarParams,
useFocus,
} from '../util';

Expand Down Expand Up @@ -86,50 +86,40 @@ export const MaterialTimeControl = (props: ControlProps) => {
);

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

return (
<Hidden xsUp={!visible}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
label={label}
value={value}
onChange={onChange}
inputFormat={format}
disableMaskedInput
format={format}
ampm={!!appliedUiSchemaOptions.ampm}
views={views}
disabled={!enabled}
componentsProps={{
actionBar: {
actions: (variant) =>
variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
slotProps={{
actionBar: ({ wrapperVariant }: PickersActionBarParams) => ({
actions:
wrapperVariant === 'desktop'
? []
: ['clear', 'cancel', 'accept'],
}),
textField: {
id: id + '-input',
required:
required && !appliedUiSchemaOptions.hideRequiredAsterisk,
autoFocus: appliedUiSchemaOptions.focus,
error: !isValid,
fullWidth: !appliedUiSchemaOptions.trim,
inputProps: {
type: 'text',
},
InputLabelProps: data ? { shrink: true } : undefined,
onFocus: onFocus,
onBlur: onBlur,
variant: 'standard',
},
}}
renderInput={(params) => (
<ResettableTextField
{...params}
rawValue={data}
dayjsValueIsValid={value !== null}
valueInInputFormat={valueInInputFormat}
focused={focused}
id={id + '-input'}
required={
required && !appliedUiSchemaOptions.hideRequiredAsterisk
}
autoFocus={appliedUiSchemaOptions.focus}
error={!isValid}
fullWidth={!appliedUiSchemaOptions.trim}
inputProps={{
...params.inputProps,
type: 'text',
}}
InputLabelProps={data ? { shrink: true } : undefined}
onFocus={onFocus}
onBlur={onBlur}
variant={'standard'}
/>
)}
/>
<FormHelperText error={!isValid && !showDescription}>
{firstFormHelperText}
Expand Down