@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.
- package/lib/jsonforms-react-material.cjs.js +72 -47
- package/lib/jsonforms-react-material.cjs.js.map +1 -1
- package/lib/jsonforms-react-material.esm.js +66 -53
- package/lib/jsonforms-react-material.esm.js.map +1 -1
- package/lib/util/datejs.d.ts +1 -17
- package/package.json +12 -12
- package/src/controls/MaterialAnyOfStringOrEnumControl.tsx +3 -1
- package/src/controls/MaterialDateControl.tsx +27 -41
- package/src/controls/MaterialDateTimeControl.tsx +27 -41
- package/src/controls/MaterialTimeControl.tsx +27 -42
- package/src/util/datejs.tsx +2 -62
- package/src/util/index.ts +4 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useCallback, useMemo, Fragment,
|
|
1
|
+
import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
|
|
2
2
|
import { Hidden, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Autocomplete, TextField, Checkbox, Input, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
|
|
3
3
|
import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
|
|
4
4
|
import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
|
|
@@ -317,13 +317,13 @@ const MuiCheckbox = React.memo(function MuiCheckbox(props) {
|
|
|
317
317
|
});
|
|
318
318
|
|
|
319
319
|
dayjs.extend(customParsing);
|
|
320
|
-
const createOnChangeHandler = (path, handleChange, saveFormat) => (time
|
|
320
|
+
const createOnChangeHandler = (path, handleChange, saveFormat) => (time) => {
|
|
321
321
|
if (!time) {
|
|
322
322
|
handleChange(path, undefined);
|
|
323
323
|
return;
|
|
324
324
|
}
|
|
325
325
|
const result = dayjs(time).format(saveFormat);
|
|
326
|
-
handleChange(path, result
|
|
326
|
+
handleChange(path, result);
|
|
327
327
|
};
|
|
328
328
|
const getData = (data, saveFormat) => {
|
|
329
329
|
if (!data) {
|
|
@@ -335,30 +335,6 @@ const getData = (data, saveFormat) => {
|
|
|
335
335
|
}
|
|
336
336
|
return dayjsData;
|
|
337
337
|
};
|
|
338
|
-
const ResettableTextField = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
|
|
339
|
-
const value = useRef({
|
|
340
|
-
lastInput: inputProps?.value,
|
|
341
|
-
toShow: inputProps?.value,
|
|
342
|
-
});
|
|
343
|
-
if (!focused) {
|
|
344
|
-
if (!dayjsValueIsValid) {
|
|
345
|
-
value.current.toShow =
|
|
346
|
-
typeof rawValue === 'string' ||
|
|
347
|
-
rawValue === null ||
|
|
348
|
-
rawValue === undefined
|
|
349
|
-
? rawValue
|
|
350
|
-
: JSON.stringify(rawValue);
|
|
351
|
-
}
|
|
352
|
-
else {
|
|
353
|
-
value.current.toShow = valueInInputFormat;
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
if (focused && inputProps?.value !== value.current.lastInput) {
|
|
357
|
-
value.current.lastInput = inputProps?.value;
|
|
358
|
-
value.current.toShow = inputProps?.value;
|
|
359
|
-
}
|
|
360
|
-
return (React.createElement(TextField, Object.assign({}, props, { inputProps: { ...inputProps, value: value.current.toShow || '' } })));
|
|
361
|
-
};
|
|
362
338
|
|
|
363
339
|
const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
|
|
364
340
|
return elements.map((child, index) => (React.createElement(Grid, { item: true, key: `${path}-${index}`, xs: true },
|
|
@@ -699,7 +675,8 @@ const hasEnumAndText = (schemas) => {
|
|
|
699
675
|
const wrongType = remainingSchemas.find((s) => s.type && s.type !== 'string');
|
|
700
676
|
return enumSchema && stringSchema && !wrongType;
|
|
701
677
|
};
|
|
702
|
-
const simpleAnyOf = and(uiTypeIs('Control'), schemaMatches((schema) =>
|
|
678
|
+
const simpleAnyOf = and(uiTypeIs('Control'), schemaMatches((schema) => Object.prototype.hasOwnProperty.call(schema, 'anyOf') &&
|
|
679
|
+
hasEnumAndText(schema.anyOf)));
|
|
703
680
|
const materialAnyOfStringOrEnumControlTester = rankWith(5, simpleAnyOf);
|
|
704
681
|
var MaterialAnyOfStringOrEnumControl$1 = withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);
|
|
705
682
|
|
|
@@ -800,17 +777,29 @@ const MaterialDateControl = (props) => {
|
|
|
800
777
|
const secondFormHelperText = showDescription && !isValid ? errors : null;
|
|
801
778
|
const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
|
|
802
779
|
const value = getData(data, saveFormat);
|
|
803
|
-
const valueInInputFormat = value ? value.format(format) : '';
|
|
804
780
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
805
781
|
React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
|
|
806
|
-
React.createElement(DatePicker, { label: label, value: value, onChange: onChange,
|
|
807
|
-
actionBar: {
|
|
808
|
-
actions:
|
|
782
|
+
React.createElement(DatePicker, { label: label, value: value, onChange: onChange, format: format, views: views, disabled: !enabled, slotProps: {
|
|
783
|
+
actionBar: ({ wrapperVariant }) => ({
|
|
784
|
+
actions: wrapperVariant === 'desktop'
|
|
785
|
+
? []
|
|
786
|
+
: ['clear', 'cancel', 'accept'],
|
|
787
|
+
}),
|
|
788
|
+
textField: {
|
|
789
|
+
id: id + '-input',
|
|
790
|
+
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
|
|
791
|
+
autoFocus: appliedUiSchemaOptions.focus,
|
|
792
|
+
error: !isValid,
|
|
793
|
+
fullWidth: !appliedUiSchemaOptions.trim,
|
|
794
|
+
inputProps: {
|
|
795
|
+
type: 'text',
|
|
796
|
+
},
|
|
797
|
+
InputLabelProps: data ? { shrink: true } : undefined,
|
|
798
|
+
onFocus: onFocus,
|
|
799
|
+
onBlur: onBlur,
|
|
800
|
+
variant: 'standard',
|
|
809
801
|
},
|
|
810
|
-
}
|
|
811
|
-
...params.inputProps,
|
|
812
|
-
type: 'text',
|
|
813
|
-
}, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
|
|
802
|
+
} }),
|
|
814
803
|
React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
|
|
815
804
|
React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
|
|
816
805
|
};
|
|
@@ -839,17 +828,29 @@ const MaterialDateTimeControl = (props) => {
|
|
|
839
828
|
const secondFormHelperText = showDescription && !isValid ? errors : null;
|
|
840
829
|
const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
|
|
841
830
|
const value = getData(data, saveFormat);
|
|
842
|
-
const valueInInputFormat = value ? value.format(format) : '';
|
|
843
831
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
844
832
|
React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
|
|
845
|
-
React.createElement(DateTimePicker, { label: label, value: value, onChange: onChange,
|
|
846
|
-
actionBar: {
|
|
847
|
-
actions:
|
|
833
|
+
React.createElement(DateTimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
|
|
834
|
+
actionBar: ({ wrapperVariant }) => ({
|
|
835
|
+
actions: wrapperVariant === 'desktop'
|
|
836
|
+
? []
|
|
837
|
+
: ['clear', 'cancel', 'accept'],
|
|
838
|
+
}),
|
|
839
|
+
textField: {
|
|
840
|
+
id: id + '-input',
|
|
841
|
+
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
|
|
842
|
+
autoFocus: appliedUiSchemaOptions.focus,
|
|
843
|
+
error: !isValid,
|
|
844
|
+
fullWidth: !appliedUiSchemaOptions.trim,
|
|
845
|
+
inputProps: {
|
|
846
|
+
type: 'text',
|
|
847
|
+
},
|
|
848
|
+
InputLabelProps: data ? { shrink: true } : undefined,
|
|
849
|
+
onFocus: onFocus,
|
|
850
|
+
onBlur: onBlur,
|
|
851
|
+
variant: 'standard',
|
|
848
852
|
},
|
|
849
|
-
}
|
|
850
|
-
...params.inputProps,
|
|
851
|
-
type: 'text',
|
|
852
|
-
}, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
|
|
853
|
+
} }),
|
|
853
854
|
React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
|
|
854
855
|
React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
|
|
855
856
|
};
|
|
@@ -978,17 +979,29 @@ const MaterialTimeControl = (props) => {
|
|
|
978
979
|
const secondFormHelperText = showDescription && !isValid ? errors : null;
|
|
979
980
|
const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
|
|
980
981
|
const value = getData(data, saveFormat);
|
|
981
|
-
const valueInInputFormat = value ? value.format(format) : '';
|
|
982
982
|
return (React.createElement(Hidden, { xsUp: !visible },
|
|
983
983
|
React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
|
|
984
|
-
React.createElement(TimePicker, { label: label, value: value, onChange: onChange,
|
|
985
|
-
actionBar: {
|
|
986
|
-
actions:
|
|
984
|
+
React.createElement(TimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
|
|
985
|
+
actionBar: ({ wrapperVariant }) => ({
|
|
986
|
+
actions: wrapperVariant === 'desktop'
|
|
987
|
+
? []
|
|
988
|
+
: ['clear', 'cancel', 'accept'],
|
|
989
|
+
}),
|
|
990
|
+
textField: {
|
|
991
|
+
id: id + '-input',
|
|
992
|
+
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
|
|
993
|
+
autoFocus: appliedUiSchemaOptions.focus,
|
|
994
|
+
error: !isValid,
|
|
995
|
+
fullWidth: !appliedUiSchemaOptions.trim,
|
|
996
|
+
inputProps: {
|
|
997
|
+
type: 'text',
|
|
998
|
+
},
|
|
999
|
+
InputLabelProps: data ? { shrink: true } : undefined,
|
|
1000
|
+
onFocus: onFocus,
|
|
1001
|
+
onBlur: onBlur,
|
|
1002
|
+
variant: 'standard',
|
|
987
1003
|
},
|
|
988
|
-
}
|
|
989
|
-
...params.inputProps,
|
|
990
|
-
type: 'text',
|
|
991
|
-
}, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
|
|
1004
|
+
} }),
|
|
992
1005
|
React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
|
|
993
1006
|
React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
|
|
994
1007
|
};
|
|
@@ -1419,5 +1432,5 @@ const Unwrapped = {
|
|
|
1419
1432
|
...UnwrappedLayouts,
|
|
1420
1433
|
};
|
|
1421
1434
|
|
|
1422
|
-
export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow,
|
|
1435
|
+
export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow, Unwrapped, createOnChangeHandler, ctxDispatchToExpandPanelProps, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialLabelRendererTester, materialListWithDetailTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, withAjvProps, withContextToExpandPanelProps, withJsonFormsExpandPanelProps };
|
|
1423
1436
|
//# sourceMappingURL=jsonforms-react-material.esm.js.map
|