@jsonforms/material-renderers 3.3.0 → 3.4.0-alpha.1

package/lib/jsonforms-react-material.esm.js

@@ -7,16 +7,21 @@ import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import { ErrorOutline, Add, ArrowUpward, ArrowDownward, Delete, Close, ExpandMore } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import { styled } from '@mui/material/styles';
+import AddIcon from '@mui/icons-material/Add';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import merge from 'lodash/merge';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
 import debounce from 'lodash/debounce';
+import Close from '@mui/icons-material/Close';
 import map from 'lodash/map';
-import AddIcon from '@mui/icons-material/Add';
 import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
     const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
@@ -107,14 +112,14 @@ const StyledBadge = styled$1(Badge)(({ theme }) => ({
 const ValidationIcon = ({ errorMessages, id }) => {
     return (React.createElement(Tooltip, { id: id, title: errorMessages },
         React.createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
-            React.createElement(ErrorOutline, { color: 'inherit' }))));
+            React.createElement(ErrorOutlineIcon, { color: 'inherit' }))));
 };
 
 const fixedCellSmall = {
     paddingLeft: 0,
     paddingRight: 0,
 };
-const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, description, path, addItem, schema, enabled, translations, rootSchema, }) {
+const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, description, path, addItem, schema, enabled, translations, rootSchema, disableAdd, }) {
     return (React.createElement(TableRow, null,
         React.createElement(NoBorderTableCell, { colSpan: numColumns },
             React.createElement(Stack, null,
@@ -124,10 +129,10 @@ const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, labe
                     React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
                         React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
                 description && React.createElement(FormHelperText, null, description))),
-        enabled ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
+        enabled && !disableAdd ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
                 React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema, rootSchema)), size: 'large' },
-                    React.createElement(Add, null))))) : null));
+                    React.createElement(AddIcon, null))))) : null));
 });
 
 const styles = {
@@ -217,7 +222,7 @@ const NonEmptyCell = (ownProps) => {
     const isValid = isEmpty(emptyCellProps.errors);
     return React.createElement(NonEmptyCellComponent, { ...emptyCellProps, isValid: isValid });
 };
-const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path, translations, }) => {
+const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path, translations, disableRemove, }) => {
     const moveUp = useMemo(() => moveUpCreator(path, rowIndex), [moveUpCreator, path, rowIndex]);
     const moveDown = useMemo(() => moveDownCreator(path, rowIndex), [moveDownCreator, path, rowIndex]);
     return (React.createElement(TableRow, { key: childPath, hover: true },
@@ -233,13 +238,13 @@ const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, m
                         React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
                             React.createElement(IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
                                 React.createElement(ArrowDownward, null)))))) : null,
-                React.createElement(Grid, { item: true },
+                !disableRemove ? (React.createElement(Grid, { item: true },
                     React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                         React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
-                            React.createElement(Delete, null))))))) : null));
+                            React.createElement(DeleteIcon, null))))) : null))) : null));
 };
 const NonEmptyRow = React.memo(NonEmptyRowComponent);
-const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, }) => {
+const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, disableRemove, }) => {
     const isEmptyTable = data === 0;
     if (isEmptyTable) {
         return (React.createElement(EmptyTable, { numColumns: getValidColumnProps(schema).length + 1, translations: translations }));
@@ -248,7 +253,7 @@ const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uis
     return (React.createElement(React.Fragment, null, range(data).map((index) => {
         const childPath = Paths.compose(path, `${index}`);
         return (React.createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons ||
-                appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path, translations: translations }));
+                appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path, translations: translations, disableRemove: disableRemove }));
     })));
 };
 class MaterialTableControl extends React.Component {
@@ -257,7 +262,10 @@ class MaterialTableControl extends React.Component {
         this.addItem = (path, value) => this.props.addItem(path, value);
     }
     render() {
-        const { label, description, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells, translations, } = this.props;
+        const { label, description, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells, translations, disableAdd, disableRemove, config, } = this.props;
+        const appliedUiSchemaOptions = merge({}, config, uischema.options);
+        const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+        const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
         const controlElement = uischema;
         const isObjectSchema = schema.type === 'object';
         const headerCells = isObjectSchema
@@ -268,12 +276,12 @@ class MaterialTableControl extends React.Component {
         }
         return (React.createElement(Table, null,
             React.createElement(TableHead, null,
-                React.createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
+                React.createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations, disableAdd: doDisableAdd }),
                 isObjectSchema && (React.createElement(TableRow, null,
                     headerCells,
                     enabled ? React.createElement(TableCell, null) : null))),
             React.createElement(TableBody, null,
-                React.createElement(TableRows, { openDeleteDialog: openDeleteDialog, translations: translations, ...this.props }))));
+                React.createElement(TableRows, { openDeleteDialog: openDeleteDialog, translations: translations, ...this.props, disableRemove: doDisableRemove }))));
     }
 }
 
@@ -557,10 +565,10 @@ const MuiInputTime = React.memo(function MuiInputTime(props) {
 });
 
 const MuiSelect = React.memo(function MuiSelect(props) {
-    const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, label, t, } = props;
+    const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, label, t, multiple, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }), [t, schema, uischema, path]);
-    return (React.createElement(Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: (ev) => handleChange(path, ev.target.value || undefined), fullWidth: true }, [
+    return (React.createElement(Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: (ev) => handleChange(path, ev.target.value || undefined), fullWidth: true, multiple: multiple || false }, [
         React.createElement(MenuItem, { value: '', key: 'jsonforms.enum.none' },
             React.createElement("em", null, noneOptionLabel)),
     ].concat(options.map((optionValue) => (React.createElement(MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label))))));
@@ -675,7 +683,7 @@ const MaterialLabelRenderer = ({ text, visible }) => {
 };
 var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
 
-const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, description, errors, addItem, path, enabled, createDefault, translations, }) {
+const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, description, errors, addItem, path, enabled, createDefault, translations, disableAdd, }) {
     return (React.createElement(Toolbar, { disableGutters: true },
         React.createElement(Stack, null,
             React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
@@ -685,7 +693,7 @@ const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, descr
                             React.createElement(Typography, { variant: 'h6' }, label)),
                         React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
                             React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
-                enabled && (React.createElement(Grid, { item: true },
+                enabled && !disableAdd && (React.createElement(Grid, { item: true },
                     React.createElement(Grid, { container: true },
                         React.createElement(Grid, { item: true },
                             React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
@@ -694,19 +702,19 @@ const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, descr
             description && React.createElement(FormHelperText, null, description))));
 });
 
-const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handleSelect, removeItem, path, translations, }) => {
+const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handleSelect, removeItem, path, translations, disableRemove, }) => {
     return (React.createElement(ListItem, { button: true, selected: selected, onClick: handleSelect(index) },
         React.createElement(ListItemAvatar, null,
             React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
         React.createElement(ListItemText, { primary: childLabel }),
-        enabled && (React.createElement(ListItemSecondaryAction, null,
+        enabled && !disableRemove && (React.createElement(ListItemSecondaryAction, null,
             React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                 React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                    React.createElement(Delete, null)))))));
+                    React.createElement(DeleteIcon, null)))))));
 };
 var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
-const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }) => {
+const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, disableAdd, disableRemove, }) => {
     const [selectedIndex, setSelectedIndex] = useState(undefined);
     const handleRemoveItem = useCallback((p, value) => () => {
         removeItems(p, [value])();
@@ -721,6 +729,8 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
     const handleCreateDefaultValue = useCallback(() => createDefaultValue(schema, rootSchema), [createDefaultValue]);
     const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+    const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
     React.useEffect(() => {
         setSelectedIndex(undefined);
     }, [schema]);
@@ -728,10 +738,10 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
         return null;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
+        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue, disableAdd: doDisableAdd }),
         React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
             React.createElement(Grid, { item: true, xs: 3 },
-                React.createElement(List, null, data > 0 ? (map(range(data), (index) => (React.createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, uischema: foundUISchema, childLabelProp: appliedUiSchemaOptions.elementLabelProp, translations: translations })))) : (React.createElement("p", null, translations.noDataMessage)))),
+                React.createElement(List, null, data > 0 ? (map(range(data), (index) => (React.createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, uischema: foundUISchema, childLabelProp: appliedUiSchemaOptions.elementLabelProp, translations: translations, disableRemove: doDisableRemove })))) : (React.createElement("p", null, translations.noDataMessage)))),
             React.createElement(Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, translations.noSelection))))));
 };
 const materialListWithDetailTester = rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray));
@@ -1158,13 +1168,13 @@ const ExpandPanelRendererComponent = (props) => {
             removeId(labelHtmlId);
         };
     }, [labelHtmlId]);
-    const { enabled, childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config, translations, } = props;
+    const { enabled, childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config, translations, disableRemove, } = props;
     const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showSortButtons = appliedUiSchemaOptions.showSortButtons ||
         appliedUiSchemaOptions.showArrayLayoutSortButtons;
     return (React.createElement(Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
-        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMore, null) },
+        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null) },
             React.createElement(Grid, { container: true, alignItems: 'center' },
                 React.createElement(Grid, { item: true, xs: 7, md: 9 },
                     React.createElement(Grid, { container: true, alignItems: 'center' },
@@ -1185,10 +1195,10 @@ const ExpandPanelRendererComponent = (props) => {
                                         React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
                                             React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
                                                 React.createElement(ArrowDownward, null)))))) : (''),
-                                enabled && (React.createElement(Grid, { item: true },
+                                enabled && !disableRemove && (React.createElement(Grid, { item: true },
                                     React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                                         React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
-                                            React.createElement(Delete, null))))))))))),
+                                            React.createElement(DeleteIcon, null))))))))))),
         React.createElement(AccordionDetails, null,
             React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
@@ -1202,13 +1212,16 @@ const ctxDispatchToExpandPanelProps = (dispatch) => ({
                 .reverse()
                 .forEach((s) => array.splice(s, 1));
             return array;
-        }));
+        }, { type: 'REMOVE', indices: toDelete }));
     }, [dispatch]),
     moveUp: useCallback((path, toMove) => (event) => {
         event.stopPropagation();
         dispatch(update(path, (array) => {
             moveUp(array, toMove);
             return array;
+        }, {
+            type: 'MOVE',
+            moves: [{ from: toMove, to: toMove - 1 }],
         }));
     }, [dispatch]),
     moveDown: useCallback((path, toMove) => (event) => {
@@ -1216,6 +1229,9 @@ const ctxDispatchToExpandPanelProps = (dispatch) => ({
         dispatch(update(path, (array) => {
             moveDown(array, toMove);
             return array;
+        }, {
+            type: 'MOVE',
+            moves: [{ from: toMove, to: toMove + 1 }],
         }));
     }, [dispatch]),
 });
@@ -1351,12 +1367,14 @@ const MaterialArrayLayoutComponent = (props) => {
         setExpanded(expandedPanel ? panel : false);
     }, []);
     const isExpanded = (index) => expanded === composePaths(props.path, `${index}`);
-    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas, translations, description, } = props;
+    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas, translations, description, disableAdd, disableRemove, } = props;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
+    const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
+    const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
     return (React.createElement("div", null,
-        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
+        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue, disableAdd: doDisableAdd }),
         React.createElement("div", null, data > 0 ? (map(range(data), (index) => {
-            return (React.createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas, translations: translations }));
+            return (React.createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas, translations: translations, disableRemove: doDisableRemove }));
         })) : (React.createElement("p", null, translations.noDataMessage)))));
 };
 const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);