@jsonforms/material-renderers 3.0.0-rc.0 → 3.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/globals.html +4 -4
- package/lib/jsonforms-react-material.cjs.js +26 -11
- package/lib/jsonforms-react-material.cjs.js.map +1 -1
- package/lib/jsonforms-react-material.esm.js +21 -6
- package/lib/jsonforms-react-material.esm.js.map +1 -1
- package/package.json +9 -9
- package/src/additional/MaterialListWithDetailRenderer.tsx +4 -0
- package/src/controls/MaterialDateControl.tsx +7 -6
- package/src/controls/MaterialDateTimeControl.tsx +9 -7
- package/src/controls/MaterialRadioGroup.tsx +1 -1
- package/src/controls/MaterialTimeControl.tsx +7 -6
- package/stats.html +1 -1
- package/test/renderers/MaterialDateTimeControl.test.tsx +2 -2
- package/test/renderers/MaterialTimeControl.test.tsx +1 -1
|
@@ -19,8 +19,8 @@ import customParsing from 'dayjs/plugin/customParseFormat';
|
|
|
19
19
|
import debounce from 'lodash/debounce';
|
|
20
20
|
import Close from '@mui/icons-material/Close';
|
|
21
21
|
import map from 'lodash/map';
|
|
22
|
-
import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/
|
|
23
|
-
import AdapterDayjs from '@mui/
|
|
22
|
+
import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
|
|
23
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
24
24
|
import get from 'lodash/get';
|
|
25
25
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
26
26
|
import Input$1 from '@mui/material/Input';
|
|
@@ -574,6 +574,9 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, err
|
|
|
574
574
|
const handleCreateDefaultValue = useCallback(() => createDefaultValue(schema), [createDefaultValue]);
|
|
575
575
|
const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
|
|
576
576
|
const appliedUiSchemaOptions = merge({}, config, uischema.options);
|
|
577
|
+
React.useEffect(() => {
|
|
578
|
+
setSelectedIndex(undefined);
|
|
579
|
+
}, [schema]);
|
|
577
580
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
578
581
|
React.createElement(ArrayLayoutToolbar, { label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
|
|
579
582
|
React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
|
|
@@ -697,7 +700,11 @@ const MaterialDateControl = (props) => {
|
|
|
697
700
|
const valueInInputFormat = value ? value.format(format) : '';
|
|
698
701
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
699
702
|
React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
|
|
700
|
-
React.createElement(DatePicker, { label: label, value: value,
|
|
703
|
+
React.createElement(DatePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, componentsProps: {
|
|
704
|
+
actionBar: {
|
|
705
|
+
actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
|
|
706
|
+
}
|
|
707
|
+
}, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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: {
|
|
701
708
|
...params.inputProps,
|
|
702
709
|
type: 'text',
|
|
703
710
|
}, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
|
|
@@ -727,7 +734,11 @@ const MaterialDateTimeControl = (props) => {
|
|
|
727
734
|
const valueInInputFormat = value ? value.format(format) : '';
|
|
728
735
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
729
736
|
React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
|
|
730
|
-
React.createElement(DateTimePicker, { label: label, value: value,
|
|
737
|
+
React.createElement(DateTimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
|
|
738
|
+
actionBar: {
|
|
739
|
+
actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
|
|
740
|
+
}
|
|
741
|
+
}, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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: {
|
|
731
742
|
...params.inputProps,
|
|
732
743
|
type: 'text',
|
|
733
744
|
}, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
|
|
@@ -757,7 +768,11 @@ const MaterialTimeControl = (props) => {
|
|
|
757
768
|
const valueInInputFormat = value ? value.format(format) : '';
|
|
758
769
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
759
770
|
React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
|
|
760
|
-
React.createElement(TimePicker, { label: label, value: value,
|
|
771
|
+
React.createElement(TimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
|
|
772
|
+
actionBar: {
|
|
773
|
+
actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
|
|
774
|
+
}
|
|
775
|
+
}, renderInput: params => (React.createElement(ResettableTextField, Object.assign({}, 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: {
|
|
761
776
|
...params.inputProps,
|
|
762
777
|
type: 'text'
|
|
763
778
|
}, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
|
|
@@ -812,7 +827,7 @@ const MaterialRadioGroup = (props) => {
|
|
|
812
827
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
813
828
|
React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
|
|
814
829
|
React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
|
|
815
|
-
React.createElement(RadioGroup, { value: props.data, onChange: onChange, row: true }, options.map(option => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })))),
|
|
830
|
+
React.createElement(RadioGroup, { value: props.data ?? '', onChange: onChange, row: true }, options.map(option => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })))),
|
|
816
831
|
React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
|
|
817
832
|
};
|
|
818
833
|
|