@jsonforms/material-renderers 3.1.0-alpha.2 → 3.1.0-beta.0

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.
Files changed (12) hide show
  1. package/lib/jsonforms-react-material.cjs.js +72 -47
  2. package/lib/jsonforms-react-material.cjs.js.map +1 -1
  3. package/lib/jsonforms-react-material.esm.js +66 -53
  4. package/lib/jsonforms-react-material.esm.js.map +1 -1
  5. package/lib/util/datejs.d.ts +1 -17
  6. package/package.json +12 -12
  7. package/src/controls/MaterialAnyOfStringOrEnumControl.tsx +3 -1
  8. package/src/controls/MaterialDateControl.tsx +27 -41
  9. package/src/controls/MaterialDateTimeControl.tsx +27 -41
  10. package/src/controls/MaterialTimeControl.tsx +27 -42
  11. package/src/util/datejs.tsx +2 -62
  12. package/src/util/index.ts +4 -4
package/lib/jsonforms-react-material.cjs.js CHANGED
@@ -429,13 +429,13 @@ var MuiCheckbox = React__default["default"].memo(function MuiCheckbox(props) {
429
429
 
430
430
  dayjs__default["default"].extend(customParsing__default["default"]);
431
431
  var createOnChangeHandler = function (path, handleChange, saveFormat) {
432
- return function (time, textInputValue) {
432
+ return function (time) {
433
433
  if (!time) {
434
434
  handleChange(path, undefined);
435
435
  return;
436
436
  }
437
437
  var result = dayjs__default["default"](time).format(saveFormat);
438
- handleChange(path, result === 'Invalid Date' ? textInputValue : result);
438
+ handleChange(path, result);
439
439
  };
440
440
  };
441
441
  var getData = function (data, saveFormat) {
@@ -448,31 +448,6 @@ var getData = function (data, saveFormat) {
448
448
  }
449
449
  return dayjsData;
450
450
  };
451
- var ResettableTextField = function (_a) {
452
- var rawValue = _a.rawValue, dayjsValueIsValid = _a.dayjsValueIsValid, valueInInputFormat = _a.valueInInputFormat, focused = _a.focused, inputProps = _a.inputProps, props = __rest(_a, ["rawValue", "dayjsValueIsValid", "valueInInputFormat", "focused", "inputProps"]);
453
- var value = React.useRef({
454
- lastInput: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
455
- toShow: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
456
- });
457
- if (!focused) {
458
- if (!dayjsValueIsValid) {
459
- value.current.toShow =
460
- typeof rawValue === 'string' ||
461
- rawValue === null ||
462
- rawValue === undefined
463
- ? rawValue
464
- : JSON.stringify(rawValue);
465
- }
466
- else {
467
- value.current.toShow = valueInInputFormat;
468
- }
469
- }
470
- if (focused && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== value.current.lastInput) {
471
- value.current.lastInput = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
472
- value.current.toShow = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
473
- }
474
- return (React__default["default"].createElement(material.TextField, __assign({}, props, { inputProps: __assign(__assign({}, inputProps), { value: value.current.toShow || '' }) })));
475
- };
476
451
 
477
452
  var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
478
453
  return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: path + "-" + index, xs: true },
@@ -857,7 +832,10 @@ var hasEnumAndText = function (schemas) {
857
832
  var wrongType = remainingSchemas.find(function (s) { return s.type && s.type !== 'string'; });
858
833
  return enumSchema && stringSchema && !wrongType;
859
834
  };
860
- var simpleAnyOf = core.and(core.uiTypeIs('Control'), core.schemaMatches(function (schema) { return schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf); }));
835
+ var simpleAnyOf = core.and(core.uiTypeIs('Control'), core.schemaMatches(function (schema) {
836
+ return Object.prototype.hasOwnProperty.call(schema, 'anyOf') &&
837
+ hasEnumAndText(schema.anyOf);
838
+ }));
861
839
  var materialAnyOfStringOrEnumControlTester = core.rankWith(5, simpleAnyOf);
862
840
  var MaterialAnyOfStringOrEnumControl$1 = react.withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);
863
841
 
@@ -961,16 +939,32 @@ var MaterialDateControl = function (props) {
961
939
  var secondFormHelperText = showDescription && !isValid ? errors : null;
962
940
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
963
941
  var value = getData(data, saveFormat);
964
- var valueInInputFormat = value ? value.format(format) : '';
965
942
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
966
943
  React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
967
- React__default["default"].createElement(xDatePickers.DatePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, componentsProps: {
968
- actionBar: {
969
- actions: function (variant) {
970
- return variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'];
944
+ React__default["default"].createElement(xDatePickers.DatePicker, { label: label, value: value, onChange: onChange, format: format, views: views, disabled: !enabled, slotProps: {
945
+ actionBar: function (_a) {
946
+ var wrapperVariant = _a.wrapperVariant;
947
+ return ({
948
+ actions: wrapperVariant === 'desktop'
949
+ ? []
950
+ : ['clear', 'cancel', 'accept'],
951
+ });
952
+ },
953
+ textField: {
954
+ id: id + '-input',
955
+ required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
956
+ autoFocus: appliedUiSchemaOptions.focus,
957
+ error: !isValid,
958
+ fullWidth: !appliedUiSchemaOptions.trim,
959
+ inputProps: {
960
+ type: 'text',
971
961
  },
962
+ InputLabelProps: data ? { shrink: true } : undefined,
963
+ onFocus: onFocus,
964
+ onBlur: onBlur,
965
+ variant: 'standard',
972
966
  },
973
- }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __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: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
967
+ } }),
974
968
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
975
969
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
976
970
  };
@@ -1000,16 +994,32 @@ var MaterialDateTimeControl = function (props) {
1000
994
  var secondFormHelperText = showDescription && !isValid ? errors : null;
1001
995
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
1002
996
  var value = getData(data, saveFormat);
1003
- var valueInInputFormat = value ? value.format(format) : '';
1004
997
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
1005
998
  React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1006
- React__default["default"].createElement(xDatePickers.DateTimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
1007
- actionBar: {
1008
- actions: function (variant) {
1009
- return variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'];
999
+ React__default["default"].createElement(xDatePickers.DateTimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
1000
+ actionBar: function (_a) {
1001
+ var wrapperVariant = _a.wrapperVariant;
1002
+ return ({
1003
+ actions: wrapperVariant === 'desktop'
1004
+ ? []
1005
+ : ['clear', 'cancel', 'accept'],
1006
+ });
1007
+ },
1008
+ textField: {
1009
+ id: id + '-input',
1010
+ required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1011
+ autoFocus: appliedUiSchemaOptions.focus,
1012
+ error: !isValid,
1013
+ fullWidth: !appliedUiSchemaOptions.trim,
1014
+ inputProps: {
1015
+ type: 'text',
1010
1016
  },
1017
+ InputLabelProps: data ? { shrink: true } : undefined,
1018
+ onFocus: onFocus,
1019
+ onBlur: onBlur,
1020
+ variant: 'standard',
1011
1021
  },
1012
- }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __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: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
1022
+ } }),
1013
1023
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1014
1024
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
1015
1025
  };
@@ -1141,16 +1151,32 @@ var MaterialTimeControl = function (props) {
1141
1151
  var secondFormHelperText = showDescription && !isValid ? errors : null;
1142
1152
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
1143
1153
  var value = getData(data, saveFormat);
1144
- var valueInInputFormat = value ? value.format(format) : '';
1145
1154
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
1146
1155
  React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1147
- React__default["default"].createElement(xDatePickers.TimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
1148
- actionBar: {
1149
- actions: function (variant) {
1150
- return variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'];
1156
+ React__default["default"].createElement(xDatePickers.TimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
1157
+ actionBar: function (_a) {
1158
+ var wrapperVariant = _a.wrapperVariant;
1159
+ return ({
1160
+ actions: wrapperVariant === 'desktop'
1161
+ ? []
1162
+ : ['clear', 'cancel', 'accept'],
1163
+ });
1164
+ },
1165
+ textField: {
1166
+ id: id + '-input',
1167
+ required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1168
+ autoFocus: appliedUiSchemaOptions.focus,
1169
+ error: !isValid,
1170
+ fullWidth: !appliedUiSchemaOptions.trim,
1171
+ inputProps: {
1172
+ type: 'text',
1151
1173
  },
1174
+ InputLabelProps: data ? { shrink: true } : undefined,
1175
+ onFocus: onFocus,
1176
+ onBlur: onBlur,
1177
+ variant: 'standard',
1152
1178
  },
1153
- }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __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: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
1179
+ } }),
1154
1180
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1155
1181
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
1156
1182
  };
@@ -1662,7 +1688,6 @@ exports.MuiSelect = MuiSelect;
1662
1688
  exports.MuiToggle = MuiToggle;
1663
1689
  exports.NoBorderTableCell = NoBorderTableCell;
1664
1690
  exports.NonEmptyRow = NonEmptyRow;
1665
- exports.ResettableTextField = ResettableTextField;
1666
1691
  exports.Unwrapped = Unwrapped;
1667
1692
  exports.createOnChangeHandler = createOnChangeHandler;
1668
1693
  exports.ctxDispatchToExpandPanelProps = ctxDispatchToExpandPanelProps;