@jsonforms/material-renderers
Version:
Material Renderer Set for JSON Forms
740 lines (702 loc) • 132 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var core = require('@jsonforms/core');
var react = require('@jsonforms/react');
var material = require('@mui/material');
var omit = require('lodash/omit');
var isEmpty = require('lodash/isEmpty');
var union = require('lodash/union');
var startCase = require('lodash/startCase');
var range = require('lodash/range');
var DeleteIcon = require('@mui/icons-material/Delete');
var ArrowDownward = require('@mui/icons-material/ArrowDownward');
var ArrowUpward = require('@mui/icons-material/ArrowUpward');
var styles$1 = require('@mui/material/styles');
var AddIcon = require('@mui/icons-material/Add');
var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
var merge = require('lodash/merge');
var dayjs = require('dayjs');
var customParsing = require('dayjs/plugin/customParseFormat');
var debounce = require('lodash/debounce');
var Close = require('@mui/icons-material/Close');
var map = require('lodash/map');
var xDatePickers = require('@mui/x-date-pickers');
var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
var union__default = /*#__PURE__*/_interopDefaultLegacy(union);
var startCase__default = /*#__PURE__*/_interopDefaultLegacy(startCase);
var range__default = /*#__PURE__*/_interopDefaultLegacy(range);
var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
var ArrowDownward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownward);
var ArrowUpward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpward);
var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
var ErrorOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorOutlineIcon);
var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
var customParsing__default = /*#__PURE__*/_interopDefaultLegacy(customParsing);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var MaterialAllOfRenderer = function (_a) {
var schema = _a.schema, rootSchema = _a.rootSchema, visible = _a.visible, renderers = _a.renderers, cells = _a.cells, path = _a.path, uischemas = _a.uischemas, uischema = _a.uischema;
var delegateUISchema = core.findMatchingUISchema(uischemas)(schema, uischema.scope, path);
if (!visible) {
return null;
}
if (delegateUISchema) {
return (React__default["default"].createElement(react.JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells }));
}
var allOfRenderInfos = core.createCombinatorRenderInfos(schema.allOf, rootSchema, 'allOf', uischema, path, uischemas);
return (React__default["default"].createElement(React__default["default"].Fragment, null, allOfRenderInfos.map(function (allOfRenderInfo, allOfIndex) { return (React__default["default"].createElement(react.JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })); })));
};
var materialAllOfControlTester = core.rankWith(3, core.isAllOfControl);
var MaterialAllOfRenderer$1 = react.withJsonFormsAllOfProps(MaterialAllOfRenderer);
var CombinatorProperties = (function (_super) {
__extends(CombinatorProperties, _super);
function CombinatorProperties() {
return _super !== null && _super.apply(this, arguments) || this;
}
CombinatorProperties.prototype.render = function () {
var _a = this.props, schema = _a.schema, combinatorKeyword = _a.combinatorKeyword, path = _a.path, rootSchema = _a.rootSchema;
var otherProps = omit__default["default"](schema, combinatorKeyword);
var foundUISchema = core.Generate.uiSchema(otherProps, 'VerticalLayout', undefined, rootSchema);
var isLayoutWithElements = false;
if (foundUISchema !== null && core.isLayout(foundUISchema)) {
isLayoutWithElements = foundUISchema.elements.length > 0;
}
if (isLayoutWithElements) {
return (React__default["default"].createElement(react.JsonFormsDispatch, { schema: otherProps, path: path, uischema: foundUISchema }));
}
return null;
};
return CombinatorProperties;
}(React__default["default"].Component));
var TabSwitchConfirmDialog = function (_a) {
var open = _a.open, handleClose = _a.handleClose, confirm = _a.confirm, cancel = _a.cancel, id = _a.id;
return (React__default["default"].createElement(material.Dialog, { open: open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title', "aria-describedby": 'alert-dialog-description' },
React__default["default"].createElement(material.DialogTitle, { id: 'alert-dialog-title' }, 'Clear form?'),
React__default["default"].createElement(material.DialogContent, null,
React__default["default"].createElement(material.DialogContentText, { id: 'alert-dialog-description' }, "Your data will be cleared if you navigate away from this tab. Do you want to proceed?")),
React__default["default"].createElement(material.DialogActions, null,
React__default["default"].createElement(material.Button, { onClick: cancel, color: 'primary' }, "No"),
React__default["default"].createElement(material.Button, { onClick: confirm, color: 'primary', autoFocus: true, id: "".concat(id, "-confirm-yes") }, "Yes"))));
};
var MaterialAnyOfRenderer = function (_a) {
var handleChange = _a.handleChange, schema = _a.schema, rootSchema = _a.rootSchema, indexOfFittingSchema = _a.indexOfFittingSchema, visible = _a.visible, path = _a.path, renderers = _a.renderers, cells = _a.cells, uischema = _a.uischema, uischemas = _a.uischemas, id = _a.id, data = _a.data;
var _b = React.useState(indexOfFittingSchema || 0), selectedAnyOf = _b[0], setSelectedAnyOf = _b[1];
var _c = React.useState(false), confirmDialogOpen = _c[0], setConfirmDialogOpen = _c[1];
var _d = React.useState(0), newSelectedIndex = _d[0], setNewSelectedIndex = _d[1];
var handleClose = React.useCallback(function () { return setConfirmDialogOpen(false); }, [setConfirmDialogOpen]);
var handleTabChange = React.useCallback(function (_event, newIndex) {
if (isEmpty__default["default"](data) ||
typeof data ===
typeof core.createDefaultValue(anyOfRenderInfos[newIndex].schema, rootSchema)) {
setSelectedAnyOf(newIndex);
}
else {
setNewSelectedIndex(newIndex);
setConfirmDialogOpen(true);
}
}, [setConfirmDialogOpen, setSelectedAnyOf, data]);
var openNewTab = function (newIndex) {
handleChange(path, core.createDefaultValue(anyOfRenderInfos[newIndex].schema, rootSchema));
setSelectedAnyOf(newIndex);
};
var confirm = React.useCallback(function () {
openNewTab(newSelectedIndex);
setConfirmDialogOpen(false);
}, [handleChange, core.createDefaultValue, newSelectedIndex]);
var anyOf = 'anyOf';
var anyOfRenderInfos = core.createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
if (!visible) {
return null;
}
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path, rootSchema: rootSchema }),
React__default["default"].createElement(material.Tabs, { value: selectedAnyOf, onChange: handleTabChange }, anyOfRenderInfos.map(function (anyOfRenderInfo) { return (React__default["default"].createElement(material.Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })); })),
anyOfRenderInfos.map(function (anyOfRenderInfo, anyOfIndex) {
return selectedAnyOf === anyOfIndex && (React__default["default"].createElement(react.JsonFormsDispatch, { key: anyOfIndex, schema: anyOfRenderInfo.schema, uischema: anyOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }));
}),
React__default["default"].createElement(TabSwitchConfirmDialog, { cancel: handleClose, confirm: confirm, id: 'anyOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
};
var materialAnyOfControlTester = core.rankWith(3, core.isAnyOfControl);
var MaterialAnyOfRenderer$1 = react.withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
var StyledTableCell = styles$1.styled(material.TableCell)({
borderBottom: 'none',
});
var NoBorderTableCell = function (_a) {
var children = _a.children, otherProps = __rest(_a, ["children"]);
return (React__default["default"].createElement(StyledTableCell, __assign({}, otherProps), children));
};
var StyledBadge = material.styled(material.Badge)(function (_a) {
var theme = _a.theme;
return ({
color: theme.palette.error.main,
});
});
var ValidationIcon = function (_a) {
var errorMessages = _a.errorMessages, id = _a.id;
return (React__default["default"].createElement(material.Tooltip, { id: id, title: errorMessages },
React__default["default"].createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
React__default["default"].createElement(ErrorOutlineIcon__default["default"], { color: 'inherit' }))));
};
var fixedCellSmall = {
paddingLeft: 0,
paddingRight: 0,
};
var TableToolbar = React__default["default"].memo(function TableToolbar(_a) {
var numColumns = _a.numColumns, errors = _a.errors, label = _a.label, description = _a.description, path = _a.path, addItem = _a.addItem, schema = _a.schema, enabled = _a.enabled, translations = _a.translations, rootSchema = _a.rootSchema, disableAdd = _a.disableAdd;
return (React__default["default"].createElement(material.TableRow, null,
React__default["default"].createElement(NoBorderTableCell, { colSpan: numColumns },
React__default["default"].createElement(material.Stack, null,
React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
React__default["default"].createElement(material.Grid, { item: true },
React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
description && React__default["default"].createElement(material.FormHelperText, null, description))),
enabled && !disableAdd ? (React__default["default"].createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
React__default["default"].createElement(material.IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, core.createDefaultValue(schema, rootSchema)), size: 'large' },
React__default["default"].createElement(AddIcon__default["default"], null))))) : null));
});
var styles = {
fixedCell: {
width: '150px',
height: '50px',
paddingLeft: 0,
paddingRight: 0,
textAlign: 'center',
},
fixedCellSmall: {
width: '50px',
height: '50px',
paddingLeft: 0,
paddingRight: 0,
textAlign: 'center',
},
};
var generateCells = function (Cell, schema, rowPath, enabled, cells) {
if (schema.type === 'object') {
return getValidColumnProps(schema).map(function (prop) {
var _a, _b, _c;
var cellPath = core.Paths.compose(rowPath, prop);
var props = {
propName: prop,
schema: schema,
title: (_c = (_b = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[prop]) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : startCase__default["default"](prop),
rowPath: rowPath,
cellPath: cellPath,
enabled: enabled,
cells: cells,
};
return React__default["default"].createElement(Cell, __assign({ key: cellPath }, props));
});
}
else {
var props = {
schema: schema,
rowPath: rowPath,
cellPath: rowPath,
enabled: enabled,
};
return React__default["default"].createElement(Cell, __assign({ key: rowPath }, props));
}
};
var getValidColumnProps = function (scopedSchema) {
if (scopedSchema.type === 'object' &&
typeof scopedSchema.properties === 'object') {
return Object.keys(scopedSchema.properties).filter(function (prop) { return scopedSchema.properties[prop].type !== 'array'; });
}
return [''];
};
var EmptyTable = function (_a) {
var numColumns = _a.numColumns, translations = _a.translations;
return (React__default["default"].createElement(material.TableRow, null,
React__default["default"].createElement(NoBorderTableCell, { colSpan: numColumns },
React__default["default"].createElement(material.Typography, { align: 'center' }, translations.noDataMessage))));
};
var TableHeaderCell = React__default["default"].memo(function TableHeaderCell(_a) {
var title = _a.title;
return React__default["default"].createElement(material.TableCell, null, title);
});
var ctxToNonEmptyCellProps = function (ctx, ownProps) {
var path = ownProps.rowPath +
(ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
var errors = core.formatErrorMessage(union__default["default"](core.errorAt(path, ownProps.schema)(ctx.core).map(function (error) { return error.message; })));
return {
rowPath: ownProps.rowPath,
propName: ownProps.propName,
schema: ownProps.schema,
rootSchema: ctx.core.schema,
errors: errors,
path: path,
enabled: ownProps.enabled,
cells: ownProps.cells || ctx.cells,
renderers: ownProps.renderers || ctx.renderers,
};
};
var controlWithoutLabel = function (scope) { return ({
type: 'Control',
scope: scope,
label: false,
}); };
var NonEmptyCellComponent = React__default["default"].memo(function NonEmptyCellComponent(_a) {
var path = _a.path, propName = _a.propName, schema = _a.schema, rootSchema = _a.rootSchema, errors = _a.errors, enabled = _a.enabled, renderers = _a.renderers, cells = _a.cells, isValid = _a.isValid;
return (React__default["default"].createElement(NoBorderTableCell, null,
schema.properties ? (React__default["default"].createElement(react.DispatchCell, { schema: core.Resolve.schema(schema, "#/properties/".concat(core.encode(propName)), rootSchema), uischema: controlWithoutLabel("#/properties/".concat(core.encode(propName))), path: path, enabled: enabled, renderers: renderers, cells: cells })) : (React__default["default"].createElement(react.DispatchCell, { schema: schema, uischema: controlWithoutLabel('#'), path: path, enabled: enabled, renderers: renderers, cells: cells })),
React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid && errors)));
});
var NonEmptyCell = function (ownProps) {
var ctx = react.useJsonForms();
var emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
var isValid = isEmpty__default["default"](emptyCellProps.errors);
return React__default["default"].createElement(NonEmptyCellComponent, __assign({}, emptyCellProps, { isValid: isValid }));
};
var NonEmptyRowComponent = function (_a) {
var childPath = _a.childPath, schema = _a.schema, rowIndex = _a.rowIndex, openDeleteDialog = _a.openDeleteDialog, moveUpCreator = _a.moveUpCreator, moveDownCreator = _a.moveDownCreator, enableUp = _a.enableUp, enableDown = _a.enableDown, showSortButtons = _a.showSortButtons, enabled = _a.enabled, cells = _a.cells, path = _a.path, translations = _a.translations, disableRemove = _a.disableRemove;
var moveUp = React.useMemo(function () { return moveUpCreator(path, rowIndex); }, [moveUpCreator, path, rowIndex]);
var moveDown = React.useMemo(function () { return moveDownCreator(path, rowIndex); }, [moveDownCreator, path, rowIndex]);
return (React__default["default"].createElement(material.TableRow, { key: childPath, hover: true },
generateCells(NonEmptyCell, schema, childPath, enabled, cells),
enabled ? (React__default["default"].createElement(NoBorderTableCell, { style: showSortButtons ? styles.fixedCell : styles.fixedCellSmall },
React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
showSortButtons ? (React__default["default"].createElement(React.Fragment, null,
React__default["default"].createElement(material.Grid, { item: true },
React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
React__default["default"].createElement(material.IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
React__default["default"].createElement(ArrowUpward__default["default"], null)))),
React__default["default"].createElement(material.Grid, { item: true },
React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
React__default["default"].createElement(material.IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
React__default["default"].createElement(ArrowDownward__default["default"], null)))))) : null,
!disableRemove ? (React__default["default"].createElement(material.Grid, { item: true },
React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: function () { return openDeleteDialog(childPath, rowIndex); }, size: 'large' },
React__default["default"].createElement(DeleteIcon__default["default"], null))))) : null))) : null));
};
var NonEmptyRow = React__default["default"].memo(NonEmptyRowComponent);
var TableRows = function (_a) {
var data = _a.data, path = _a.path, schema = _a.schema, openDeleteDialog = _a.openDeleteDialog, moveUp = _a.moveUp, moveDown = _a.moveDown, uischema = _a.uischema, config = _a.config, enabled = _a.enabled, cells = _a.cells, translations = _a.translations, disableRemove = _a.disableRemove;
var isEmptyTable = data === 0;
if (isEmptyTable) {
return (React__default["default"].createElement(EmptyTable, { numColumns: getValidColumnProps(schema).length + 1, translations: translations }));
}
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
return (React__default["default"].createElement(React__default["default"].Fragment, null, range__default["default"](data).map(function (index) {
var childPath = core.Paths.compose(path, "".concat(index));
return (React__default["default"].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, disableRemove: disableRemove }));
})));
};
var MaterialTableControl = (function (_super) {
__extends(MaterialTableControl, _super);
function MaterialTableControl() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.addItem = function (path, value) { return _this.props.addItem(path, value); };
return _this;
}
MaterialTableControl.prototype.render = function () {
var _a = this.props, label = _a.label, description = _a.description, path = _a.path, schema = _a.schema, rootSchema = _a.rootSchema, uischema = _a.uischema, errors = _a.errors, openDeleteDialog = _a.openDeleteDialog, visible = _a.visible, enabled = _a.enabled, cells = _a.cells, translations = _a.translations, disableAdd = _a.disableAdd, disableRemove = _a.disableRemove, config = _a.config;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
var doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
var controlElement = uischema;
var isObjectSchema = schema.type === 'object';
var headerCells = isObjectSchema
? generateCells(TableHeaderCell, schema, path, enabled, cells)
: undefined;
if (!visible) {
return null;
}
return (React__default["default"].createElement(material.Table, null,
React__default["default"].createElement(material.TableHead, null,
React__default["default"].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__default["default"].createElement(material.TableRow, null,
headerCells,
enabled ? React__default["default"].createElement(material.TableCell, null) : null))),
React__default["default"].createElement(material.TableBody, null,
React__default["default"].createElement(TableRows, __assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props, { disableRemove: doDisableRemove })))));
};
return MaterialTableControl;
}(React__default["default"].Component));
var DeleteDialog = React__default["default"].memo(function DeleteDialog(_a) {
var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm, onCancel = _a.onCancel, title = _a.title, message = _a.message, acceptText = _a.acceptText, declineText = _a.declineText;
return (React__default["default"].createElement(material.Dialog, { open: open, keepMounted: true, onClose: onClose, "aria-labelledby": 'alert-dialog-confirmdelete-title', "aria-describedby": 'alert-dialog-confirmdelete-description' },
React__default["default"].createElement(material.DialogTitle, { id: 'alert-dialog-confirmdelete-title' }, title),
React__default["default"].createElement(material.DialogContent, null,
React__default["default"].createElement(material.DialogContentText, { id: 'alert-dialog-confirmdelete-description' }, message)),
React__default["default"].createElement(material.DialogActions, null,
React__default["default"].createElement(material.Button, { onClick: onCancel, color: 'primary' }, declineText),
React__default["default"].createElement(material.Button, { onClick: onConfirm, color: 'primary' }, acceptText))));
});
var MaterialArrayControlRenderer = function (props) {
var _a = React.useState(false), open = _a[0], setOpen = _a[1];
var _b = React.useState(undefined), path = _b[0], setPath = _b[1];
var _c = React.useState(undefined), rowData = _c[0], setRowData = _c[1];
var removeItems = props.removeItems, visible = props.visible, translations = props.translations;
var openDeleteDialog = React.useCallback(function (p, rowIndex) {
setOpen(true);
setPath(p);
setRowData(rowIndex);
}, [setOpen, setPath, setRowData]);
var deleteCancel = React.useCallback(function () { return setOpen(false); }, [setOpen]);
var deleteConfirm = React.useCallback(function () {
var p = path.substring(0, path.lastIndexOf('.'));
removeItems(p, [rowData])();
setOpen(false);
}, [setOpen, path, rowData]);
var deleteClose = React.useCallback(function () { return setOpen(false); }, [setOpen]);
if (!visible) {
return null;
}
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(MaterialTableControl, __assign({}, props, { openDeleteDialog: openDeleteDialog, translations: translations })),
React__default["default"].createElement(DeleteDialog, { open: open, onCancel: deleteCancel, onConfirm: deleteConfirm, onClose: deleteClose, acceptText: translations.deleteDialogAccept, declineText: translations.deleteDialogDecline, title: translations.deleteDialogTitle, message: translations.deleteDialogMessage })));
};
var materialArrayControlTester = core.rankWith(3, core.or(core.isObjectArrayControl, core.isPrimitiveArrayControl));
var MaterialArrayControlRenderer$1 = react.withJsonFormsArrayLayoutProps(react.withTranslateProps(react.withArrayTranslationProps(MaterialArrayControlRenderer)));
var useFocus = function () {
var _a = React.useState(false), focused = _a[0], setFocused = _a[1];
var onFocus = React.useCallback(function () { return setFocused(true); }, []);
var onBlur = React.useCallback(function () { return setFocused(false); }, []);
return [focused, onFocus, onBlur];
};
var MuiAutocomplete = function (props) {
var _a;
var description = props.description, errors = props.errors, visible = props.visible, required = props.required, label = props.label, data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, getOptionLabel = props.getOptionLabel, renderOption = props.renderOption, filterOptions = props.filterOptions, isValid = props.isValid;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var _b = React__default["default"].useState(data !== null && data !== void 0 ? data : ''), inputValue = _b[0], setInputValue = _b[1];
var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
var findOption = (_a = options.find(function (o) { return o.value === data; })) !== null && _a !== void 0 ? _a : null;
var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
var firstFormHelperText = showDescription
? description
: !isValid
? errors
: null;
var secondFormHelperText = showDescription && !isValid ? errors : null;
if (!visible) {
return null;
}
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(material.Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: function (_event, newValue) {
handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
}, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
setInputValue(newInputValue);
}, autoHighlight: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, renderInput: function (params) {
return (React__default["default"].createElement(material.TextField, __assign({ label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id, required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
}, renderOption: renderOption, filterOptions: filterOptions }),
React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
};
var MuiCheckbox = React__default["default"].memo(function MuiCheckbox(props) {
var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, inputProps = props.inputProps;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var inputPropsMerged = merge__default["default"]({}, inputProps, {
autoFocus: !!appliedUiSchemaOptions.focus,
});
var checked = !!data;
return (React__default["default"].createElement(material.Checkbox, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
});
dayjs__default["default"].extend(customParsing__default["default"]);
var createOnChangeHandler = function (path, handleChange, saveFormat) {
return function (value) {
if (!value) {
handleChange(path, undefined);
}
else if (value.toString() !== 'Invalid Date') {
var formatedDate = formatDate(value, saveFormat);
handleChange(path, formatedDate);
}
};
};
var createOnBlurHandler = function (path, handleChange, format, saveFormat, rerenderChild, onBlur) {
return function (e) {
var date = dayjs__default["default"](e.target.value, format);
var formatedDate = formatDate(date, saveFormat);
if (formatedDate.toString() === 'Invalid Date') {
handleChange(path, undefined);
rerenderChild();
}
else {
handleChange(path, formatedDate);
}
onBlur();
};
};
var formatDate = function (date, saveFormat) {
var formatedDate = date.format(saveFormat);
var indexOfYear = saveFormat.indexOf('YYYY');
if (date.year() < 1000 && indexOfYear !== -1) {
var stringUpToYear = formatedDate.slice(0, indexOfYear);
var stringFromYear = formatedDate.slice(indexOfYear);
if (date.year() >= 100) {
formatedDate = [stringUpToYear, 0, stringFromYear].join('');
}
else if (date.year() >= 10) {
formatedDate = [stringUpToYear, 0, 0, stringFromYear].join('');
}
else if (date.year() >= 1) {
formatedDate = [stringUpToYear, 0, 0, 0, stringFromYear].join('');
}
}
return formatedDate;
};
var getData = function (data, saveFormat) {
if (!data) {
return null;
}
var dayjsData = dayjs__default["default"](data, saveFormat);
if (dayjsData.toString() === 'Invalid Date') {
return null;
}
return dayjsData;
};
var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: "".concat(path, "-").concat(index), xs: true },
React__default["default"].createElement(react.JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))); });
};
var MaterialLayoutRendererComponent = function (_a) {
var visible = _a.visible, elements = _a.elements, schema = _a.schema, path = _a.path, enabled = _a.enabled, direction = _a.direction, renderers = _a.renderers, cells = _a.cells;
if (isEmpty__default["default"](elements) || !visible) {
return null;
}
else {
return (React__default["default"].createElement(material.Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, renderLayoutElements(elements, schema, path, enabled, renderers, cells)));
}
};
var MaterialLayoutRenderer = React__default["default"].memo(MaterialLayoutRendererComponent);
var withAjvProps = function (Component) {
return function WithAjvProps(props) {
var ctx = react.useJsonForms();
var ajv = core.getAjv({ jsonforms: __assign({}, ctx) });
return React__default["default"].createElement(Component, __assign({}, props, { ajv: ajv }));
};
};
var variantToInput = {
standard: material.Input,
filled: material.FilledInput,
outlined: material.OutlinedInput,
};
var defaultInputVariant = 'outlined';
function useInputVariant() {
var _a = material.useThemeProps({
props: {},
name: 'MuiTextField',
}).variant, variant = _a === void 0 ? defaultInputVariant : _a;
return variant;
}
function useInputComponent() {
var _a;
var variant = useInputVariant();
return (_a = variantToInput[variant]) !== null && _a !== void 0 ? _a : variantToInput[defaultInputVariant];
}
var eventToValue$3 = function (ev) { return ev.target.value; };
var useDebouncedChange = function (handleChange, defaultValue, data, path, eventToValueFunction, timeout, flushOnBlur, focused) {
if (eventToValueFunction === void 0) { eventToValueFunction = eventToValue$3; }
if (timeout === void 0) { timeout = 300; }
if (flushOnBlur === void 0) { flushOnBlur = false; }
if (focused === void 0) { focused = false; }
var _a = React.useState(data !== null && data !== void 0 ? data : defaultValue), input = _a[0], setInput = _a[1];
React.useEffect(function () {
setInput(data !== null && data !== void 0 ? data : defaultValue);
}, [data]);
var debouncedUpdate = React.useCallback(debounce__default["default"](function (newValue) { return handleChange(path, newValue); }, timeout), [handleChange, path, timeout]);
React.useEffect(function () {
if (!focused && flushOnBlur) {
debouncedUpdate.flush();
}
}, [focused, flushOnBlur, debouncedUpdate]);
var onChange = React.useCallback(function (ev) {
var newValue = eventToValueFunction(ev);
setInput(newValue !== null && newValue !== void 0 ? newValue : defaultValue);
debouncedUpdate(newValue);
}, [debouncedUpdate, eventToValueFunction]);
var onClear = React.useCallback(function () {
setInput(defaultValue);
handleChange(path, undefined);
}, [defaultValue, handleChange, path]);
return [input, onChange, onClear];
};
var i18nDefaults = {
'enum.none': 'None',
};
var toNumber$1 = function (value) {
return value === '' ? undefined : parseInt(value, 10);
};
var eventToValue$2 = function (ev) { return toNumber$1(ev.target.value); };
var MuiInputInteger = React__default["default"].memo(function MuiInputInteger(props) {
var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
var InputComponent = useInputComponent();
var inputProps = { step: '1' };
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var _b = useDebouncedChange(handleChange, '', data, path, eventToValue$2, undefined, true, focused), inputValue = _b[0], onChange = _b[1];
return (React__default["default"].createElement(InputComponent, { label: label, type: 'number', value: inputValue, onFocus: onFocus, onBlur: onBlur, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
});
var toNumber = function (value) {
return value === '' ? undefined : parseFloat(value);
};
var eventToValue$1 = function (ev) { return toNumber(ev.target.value); };
var MuiInputNumber = React__default["default"].memo(function MuiInputNumber(props) {
var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
var InputComponent = useInputComponent();
var inputProps = { step: '0.1' };
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var _b = useDebouncedChange(handleChange, '', data, path, eventToValue$1, undefined, true, focused), inputValue = _b[0], onChange = _b[1];
return (React__default["default"].createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, onFocus: onFocus, onBlur: onBlur, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true, error: !isValid }));
});
var MuiInputNumberFormat = React__default["default"].memo(function MuiInputNumberFormat(props) {
var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
var className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, config = props.config, label = props.label;
var InputComponent = useInputComponent();
var maxLength = schema.maxLength;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var inputProps;
if (appliedUiSchemaOptions.restrict) {
inputProps = { maxLength: maxLength };
}
else {
inputProps = {};
}
var formattedNumber = props.toFormatted(props.data);
var validStringNumber = React.useCallback(function (ev) { return props.fromFormatted(ev.currentTarget.value); }, [props.fromFormatted]);
var _b = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber, undefined, true, focused), inputValue = _b[0], onChange = _b[1];
return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputValue, onChange: onChange, onFocus: onFocus, onBlur: onBlur, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
});
var eventToValue = function (ev) {
return ev.target.value === '' ? undefined : ev.target.value;
};
var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
var _a, _b, _c;
var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
var _e = React.useState(false), showAdornment = _e[0], setShowAdornment = _e[1];
var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, muiInputProps = props.muiInputProps, label = props.label, inputComponent = props.inputComponent;
var InputComponent = useInputComponent();
var maxLength = schema.maxLength;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var inputProps;
if (appliedUiSchemaOptions.restrict) {
inputProps = { maxLength: maxLength };
}
else {
inputProps = {};
}
inputProps = merge__default["default"](inputProps, muiInputProps);
if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
inputProps.size = maxLength;
}
var _f = useDebouncedChange(handleChange, '', data, path, eventToValue, undefined, true, focused), inputText = _f[0], onChange = _f[1], onClear = _f[2];
var onPointerEnter = function () { return setShowAdornment(true); };
var onPointerLeave = function () { return setShowAdornment(false); };
var theme = material.useTheme();
var closeStyle = {
background: ((_c = (_b = (_a = theme.jsonforms) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.delete) === null || _c === void 0 ? void 0 : _c.background) ||
theme.palette.background.default,
borderRadius: '50%',
};
return (React__default["default"].createElement(InputComponent, { label: label, type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text', value: inputText, onChange: onChange, className: className, onBlur: onBlur, onFocus: onFocus, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, endAdornment: React__default["default"].createElement(material.InputAdornment, { position: 'end', style: {
display: !showAdornment || !enabled || data === undefined
? 'none'
: 'flex',
position: 'absolute',
right: 0,
} },
React__default["default"].createElement(material.IconButton, { "aria-label": 'Clear input field', onClick: onClear, size: 'large' },
React__default["default"].createElement(Close__default["default"], { style: closeStyle }))), inputComponent: inputComponent }));
});
var MuiInputTime = React__default["default"].memo(function MuiInputTime(props) {
var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
var InputComponent = useInputComponent();
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var _a = useDebouncedChange(handleChange, '', data, path), inputValue = _a[0], onChange = _a[1];
return (React__default["default"].createElement(InputComponent, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true, error: !isValid }));
});
var MuiSelect = React__default["default"].memo(function MuiSelect(props) {
var data = props.data, className = props.className, id = props.id, enabled = props.enabled, schema = props.schema, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, label = props.label, t = props.t, multiple = props.multiple;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var noneOptionLabel = React.useMemo(function () { return t('enum.none', i18nDefaults['enum.none'], { schema: schema, uischema: uischema, path: path }); }, [t, schema, uischema, path]);
return (React__default["default"].createElement(material.Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value || undefined); }, fullWidth: true, multiple: multiple || false, error: !isValid }, [
React__default["default"].createElement(material.MenuItem, { value: '', key: 'jsonforms.enum.none' },
React__default["default"].createElement("em", null, noneOptionLabel)),
].concat(options.map(function (optionValue) { return (React__default["default"].createElement(material.MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label)); }))));
});
var MuiToggle = React__default["default"].memo(function MuiToggle(props) {
var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, inputProps = props.inputProps;
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
var inputPropsMerged = merge__default["default"]({}, inputProps, {
autoFocus: !!appliedUiSchemaOptions.focus,
});
var checked = !!data;
return (React__default["default"].createElement(material.Switch, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
});
var MaterialEnumArrayRenderer = function (_a) {
var config = _a.config, id = _a.id, schema = _a.schema, visible = _a.visible, errors = _a.errors, description = _a.description, label = _a.label, required = _a.required, path = _a.path, options = _a.options, data = _a.data, addItem = _a.addItem, removeItem = _a.removeItem; _a.handleChange; var otherProps = __rest(_a, ["config", "id", "schema", "visible", "errors", "description", "label", "required", "path", "options", "data", "addItem", "removeItem", "handleChange"]);
var _b = useFocus(), focused = _b[0], onFocus = _b[1], onBlur = _b[2];
var isValid = errors.length === 0;
var appliedUiSchemaOptions = merge__default["default"]({}, config, otherProps.uischema.options);
var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
if (!visible) {
return null;
}
return (React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedU