drf-react-by-schema 0.3.0 → 0.4.0

package/dist/components/DataGridBySchemaEditable.js

@@ -0,0 +1,565 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const moment_1 = __importDefault(require("moment"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+const Check_1 = __importDefault(require("@mui/icons-material/Check"));
+const Undo_1 = __importDefault(require("@mui/icons-material/Undo"));
+const Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
+const Alert_1 = __importDefault(require("@mui/material/Alert"));
+const styles_1 = require("../styles");
+const api_1 = require("../api");
+const utils_1 = require("../utils");
+const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
+const utils_2 = require("./DataGridBySchemaEditable/utils");
+const CustomToolbar_1 = require("./DataGridBySchemaEditable/CustomToolbar");
+const SelectEditInputCell_1 = require("./DataGridBySchemaEditable/SelectEditInputCell");
+const GridDecimalInput_1 = require("./DataGridBySchemaEditable/GridDecimalInput");
+const GridPatternInput_1 = require("./DataGridBySchemaEditable/GridPatternInput");
+const BooleanInputCell_1 = require("./DataGridBySchemaEditable/BooleanInputCell");
+const FooterToolbar_1 = require("./DataGridBySchemaEditable/FooterToolbar");
+const ConfirmDialog_1 = require("./DataGridBySchemaEditable/ConfirmDialog");
+const APIWrapperContext_1 = require("../context/APIWrapperContext");
+const stringMask = require('string-mask');
+;
+const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
+    var { schema, data, columns, model, fieldKey, labelKey = 'nome', index, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', stateToLink = {}, minWidth = 80, modelParent, modelParentId, customColumnOperations, customLinkDestination, LinkComponent, onProcessRow, onDataChange, isEditable = false, sx = { mr: 2 }, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows } = _a, other = __rest(_a, ["schema", "data", "columns", "model", "fieldKey", "labelKey", "index", "name", "indexField", "addExistingModel", "indexFieldMinWidth", "indexFieldBasePath", "stateToLink", "minWidth", "modelParent", "modelParentId", "customColumnOperations", "customLinkDestination", "LinkComponent", "onProcessRow", "onDataChange", "isEditable", "sx", "isAutoHeight", "defaultValues", "hideFooterPagination", "setVisibleRows"]);
+    const { serverEndPoint } = DRFReactBySchemaContext_1.DRFReactBySchemaContext
+        ? react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext)
+        : { serverEndPoint: null };
+    const apiContext = react_1.default.useContext(APIWrapperContext_1.APIWrapperContext);
+    const initialSnackBar = {
+        open: false,
+        msg: '',
+        severity: 'info'
+    };
+    const [snackBar, setSnackBar] = (0, react_1.useState)(initialSnackBar);
+    const [dataGrid, setDataGrid] = (0, react_1.useState)({ data: [] });
+    const [preparedColumns, setPreparedColumns] = (0, react_1.useState)(null);
+    const [dataGridLoading, setDataGridLoading] = (0, react_1.useState)(false);
+    const [rowModesModel, setRowModesModel] = (0, react_1.useState)({});
+    const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
+    const optionsAC = (0, react_1.useRef)(null);
+    const emptyItem = (0, react_1.useRef)({});
+    const yupValidationSchema = (0, react_1.useRef)(null);
+    const processingRow = (0, react_1.useRef)(null);
+    const idToRemove = (0, react_1.useRef)(null);
+    const visibleRows = (0, react_1.useRef)('');
+    const updateOptionsAC = () => __awaiter(void 0, void 0, void 0, function* () {
+        optionsAC.current = {};
+        for (const col of columns) {
+            if (!schema[col.field]) {
+                continue;
+            }
+            if (['field', 'nested object'].includes(schema[col.field].type) && !(col.field in optionsAC.current)) {
+                const options = yield (0, api_1.getAutoComplete)({ model: col.field, serverEndPoint });
+                if (options) {
+                    optionsAC.current[col.field] = options;
+                    continue;
+                }
+                console.log(`Couldn't load autocomplete options from '${col.field}'`);
+                continue;
+            }
+            if (schema[col.field].type === 'choice' && !(col.field in optionsAC.current)) {
+                optionsAC.current[col.field] = schema[col.field].choices;
+                continue;
+            }
+            if (col.field === indexField && addExistingModel && !optionsAC.current[col.field]) {
+                const options = yield (0, api_1.getAutoComplete)({ model: addExistingModel, serverEndPoint });
+                if (options) {
+                    optionsAC.current[col.field] = options;
+                    continue;
+                }
+                if (!(col.field in optionsAC.current)) {
+                    delete optionsAC.current[col.field];
+                }
+            }
+        }
+    });
+    const initColumns = () => {
+        let cols = [];
+        if (isEditable) {
+            cols.push({
+                field: 'actions',
+                headerName: '',
+                type: 'actions',
+                getActions: ({ id }) => {
+                    var _a;
+                    const isInEditMode = ((_a = rowModesModel[id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit;
+                    if (isInEditMode) {
+                        return [
+                            react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `save_${id}`, icon: react_1.default.createElement(Check_1.default, null), label: "Salvar", onClick: handleSaveClick(id), color: "success" }),
+                            react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `cancel_${id}`, icon: react_1.default.createElement(Undo_1.default, null), label: "Cancelar", onClick: handleCancelClick(id), color: "inherit" })
+                        ];
+                    }
+                    return [
+                        react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `edit_${id}`, icon: react_1.default.createElement(Edit_1.default, null), label: "Edit", onClick: handleEditClick(id), color: "inherit" }),
+                        react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error" })
+                    ];
+                }
+            });
+        }
+        cols = [...cols, ...columns];
+        cols = cols.map(col => {
+            if (!schema[col.field]) {
+                return col;
+            }
+            const isIndexField = (indexField !== '' && (col.field === indexField));
+            let column = col;
+            if (isIndexField) {
+                col.isIndexField = true;
+            }
+            column.editable = (isEditable) && (!schema[col.field].read_only || ['field', 'nested object'].includes(schema[col.field].type));
+            switch (schema[col.field].type) {
+                case 'date':
+                    column.type = 'date';
+                    column.valueFormatter = params => params.value
+                        ? (0, moment_1.default)(params.value).format('DD/MM/YYYY')
+                        : '';
+                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({ type: 'date' });
+                    break;
+                case 'datetime':
+                    column.type = 'dateTime';
+                    column.minWidth = 180;
+                    column.valueFormatter = params => params.value
+                        ? (0, moment_1.default)(params.value).format('DD/MM/YYYY HH:mm')
+                        : '';
+                    break;
+                case 'nested object':
+                    column.minWidth = 150;
+                    if (isEditable) {
+                        column.valueFormatter = params => {
+                            return (!params.value) ? '' : params.value.label;
+                        };
+                        column.filterable = false;
+                        column.sortComparator = (v1, v2, param1, param2) => {
+                            return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2);
+                        };
+                        column.renderEditCell = (params) => react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField }));
+                        break;
+                    }
+                    column.valueGetter = params => {
+                        return (!params.value) ? '' : params.value.label;
+                    };
+                    break;
+                case 'field':
+                    column.orderable = false;
+                    if (isEditable) {
+                        column.minWidth = 300;
+                        column.valueFormatter = params => {
+                            return (!params.value || !Array.isArray(params.value))
+                                ? ''
+                                : params.value.map(val => val.label).join(', ');
+                        };
+                        column.filterable = false;
+                        column.renderEditCell = (params) => react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField, multiple: true }));
+                        break;
+                    }
+                    column.valueGetter = params => {
+                        return (!params.value || !Array.isArray(params.value))
+                            ? ''
+                            : params.value.map(val => val.label).join(', ');
+                    };
+                    break;
+                case 'choice':
+                    if (isEditable) {
+                        column.minWidth = 150;
+                        column.valueFormatter = params => {
+                            return (!params.value) ? '' : params.value.display_name;
+                        };
+                        column.filterable = false;
+                        column.sortComparator = (v1, v2, param1, param2) => {
+                            return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.display_name, v2.display_name, param1, param2);
+                        };
+                        column.renderEditCell = (params) => react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField }));
+                        break;
+                    }
+                    column.valueGetter = params => {
+                        return (!params.value) ? '' : params.value.display_name;
+                    };
+                    break;
+                case 'boolean':
+                    if (isEditable) {
+                        column.valueFormatter = params => {
+                            return (params.value) ? 'Sim' : 'Não';
+                        };
+                        column.renderEditCell = (params) => react_1.default.createElement(BooleanInputCell_1.BooleanInputCell, Object.assign({}, params, { column: column }));
+                        break;
+                    }
+                    column.valueGetter = params => {
+                        return (params.value) ? 'Sim' : 'Não';
+                    };
+                    break;
+                case 'decimal':
+                case 'float':
+                    column.type = 'number';
+                    column.valueFormatter = params => {
+                        return (!params.value)
+                            ? ''
+                            : parseFloat(params.value).toLocaleString('pt-BR', {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2
+                            });
+                    };
+                    if (isEditable) {
+                        column.renderEditCell = (params) => react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, { column: column }));
+                    }
+                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({ type: 'float' });
+                    break;
+                case 'number':
+                case 'integer':
+                    column.type = 'number';
+                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({ type: 'number' });
+                    break;
+            }
+            if (indexFieldMinWidth && !column.minWidth) {
+                column.minWidth = (col.field === indexField) ? indexFieldMinWidth : minWidth;
+            }
+            if (indexField) {
+                if (col.field === indexField) {
+                    column.flex = 1;
+                    column.renderCell = params => {
+                        if (LinkComponent && customLinkDestination) {
+                            return (react_1.default.createElement(LinkComponent, { to: `${customLinkDestination(params)}`, state: stateToLink }, params.formattedValue));
+                        }
+                        if (!LinkComponent ||
+                            !indexFieldBasePath ||
+                            (['field', 'nested object'].includes(schema[col.field].type) &&
+                                (!params.row[col.field] || !params.row[col.field].id))) {
+                            return (react_1.default.createElement(react_1.default.Fragment, null, params.formattedValue));
+                        }
+                        const targetId = (['field', 'nested object'].includes(schema[col.field].type))
+                            ? params.row[col.field].id.toString()
+                            : params.row.id.toString();
+                        return (react_1.default.createElement(LinkComponent, { to: `${indexFieldBasePath}${targetId}`, state: stateToLink }, params.formattedValue));
+                    };
+                    if (isEditable &&
+                        optionsAC.current &&
+                        col.field in optionsAC.current &&
+                        addExistingModel) {
+                        column.renderEditCell = (params) => {
+                            if (!(0, utils_1.isTmpId)(params.id)) {
+                                return (react_1.default.createElement(x_data_grid_1.GridEditInputCell, Object.assign({}, params)));
+                            }
+                            return (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: true })));
+                        };
+                    }
+                }
+            }
+            // Custom column operations:
+            if (customColumnOperations) {
+                column = customColumnOperations(column);
+            }
+            // format numbers:
+            if (column.patternFormat) {
+                column.valueFormatter = params => {
+                    if (!params.value || typeof params.value !== 'string') {
+                        return params.value;
+                    }
+                    const formattedValue = new stringMask(column.patternFormat, {}).apply(params.value);
+                    return formattedValue;
+                };
+                if (isEditable) {
+                    column.renderEditCell = params => react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat }));
+                }
+            }
+            // Finally!
+            return column;
+        });
+        setPreparedColumns(cols);
+    };
+    const handleDialogClose = () => {
+        setDialogOpen(false);
+    };
+    const handleRowEditStart = (params, event) => {
+        event.defaultMuiPrevented = true;
+    };
+    const handleRowEditStop = (params, event) => {
+        event.defaultMuiPrevented = true;
+    };
+    const handleEditClick = (id) => () => {
+        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.Edit } }));
+    };
+    const handleSaveClick = (id) => () => {
+        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View } }));
+    };
+    const handleDeleteClick = (id) => () => {
+        idToRemove.current = id;
+        setDialogOpen(true);
+    };
+    const handleDeleteSave = () => {
+        if (idToRemove.current === null) {
+            setDialogOpen(false);
+            return;
+        }
+        const newData = dataGrid.data.filter(row => row.id !== idToRemove.current);
+        setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: newData }));
+        if (modelParent && modelParentId && apiContext) {
+            apiContext.onDeleteRelatedModel({
+                model: modelParent,
+                id: modelParentId,
+                relatedModel: model,
+                relatedModelId: idToRemove.current
+            });
+        }
+        // Reflect changes to the outside, for example for doing global calculations over multiple rows:
+        if (onDataChange) {
+            onDataChange(newData);
+        }
+        idToRemove.current = null;
+        setDialogOpen(false);
+    };
+    const handleCancelClick = (id) => () => {
+        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View, ignoreModifications: true } }));
+        const editedRow = dataGrid.data.find(row => row.id === id);
+        if (editedRow && editedRow.isNew) {
+            setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: dataGrid.data.filter(row => row.id !== id) }));
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!columns) {
+            setDataGrid({ data: [] });
+            return;
+        }
+        if (isEditable) {
+            for (const col of columns) {
+                if (schema[col.field].model_default) {
+                    emptyItem.current[col.field] = schema[col.field].model_default;
+                    continue;
+                }
+                if (Object.prototype.hasOwnProperty.call(defaultValues, col.field)) {
+                    emptyItem.current[col.field] = defaultValues[col.field];
+                    continue;
+                }
+                emptyItem.current[col.field] = (schema[col.field])
+                    ? (0, utils_1.emptyByType)(schema[col.field])
+                    : null;
+            }
+        }
+        const skipFields = [];
+        if (indexField && addExistingModel) {
+            skipFields.push(indexField);
+        }
+        yupValidationSchema.current = (0, utils_1.buildGenericYupValidationSchema)({
+            data: emptyItem.current,
+            schema,
+            skipFields
+        });
+        setDataGrid({
+            data
+        });
+    }, [data]);
+    (0, react_1.useEffect)(() => {
+        if (optionsAC.current) {
+            initColumns();
+            return;
+        }
+        updateOptionsAC().then(() => {
+            initColumns();
+        });
+    }, [rowModesModel]);
+    const processRowUpdate = (newRow) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!preparedColumns || !yupValidationSchema.current) {
+            return false;
+        }
+        setDataGridLoading(true);
+        const indexCol = preparedColumns.find(col => col.field === indexField);
+        processingRow.current = newRow.id;
+        console.log('antes');
+        yield yupValidationSchema.current.validate(newRow);
+        console.log('depois');
+        const onlyAddExisting = (indexField &&
+            (0, utils_1.isTmpId)(newRow.id) &&
+            (newRow[indexField] && !(0, utils_1.isTmpId)(newRow[indexField].id)) &&
+            (!indexCol || !indexCol.valueFormatter));
+        const createNewItem = (indexField && (0, utils_1.isTmpId)(newRow.id) && newRow[indexField] && (0, utils_1.isTmpId)(newRow[indexField].id));
+        if (onlyAddExisting) {
+            const row = {};
+            row.id_to_add = newRow[indexField].id;
+            for (const [key, value] of Object.entries(newRow[indexField])) {
+                if (key === 'id') {
+                    row[key] = newRow.id;
+                    continue;
+                }
+                row[key] = value;
+            }
+            newRow = Object.assign({}, row);
+        }
+        if (createNewItem && newRow[indexField]) {
+            if (newRow[indexField].inputValue) {
+                newRow[indexField] = newRow[indexField].inputValue;
+            }
+            if (addExistingModel) {
+                newRow[indexField] = newRow[indexField].label;
+            }
+        }
+        console.log({ modelParent, modelParentId, apiContext });
+        if (modelParent && modelParentId && apiContext) {
+            const response = yield apiContext.onEditRelatedModelSave({
+                model: modelParent,
+                id: modelParentId,
+                relatedModel: model,
+                relatedModelId: newRow.id,
+                newRow,
+                schema,
+                onlyAddExisting
+            });
+            const responseAsData = response;
+            if ((onlyAddExisting && typeof response != 'boolean') ||
+                (parseInt(response) && (createNewItem || !onlyAddExisting))) {
+                updateOptionsAC();
+                const data = [...dataGrid.data];
+                for (const i in data) {
+                    if (data[i].id === newRow.id) {
+                        data[i] = onlyAddExisting ? responseAsData.data : newRow;
+                        if ((0, utils_1.isTmpId)(newRow.id)) {
+                            const newId = parseInt(response);
+                            data[i].id = newId || responseAsData.data.id;
+                        }
+                        // This is for cases where users want to do custom operations after saving the row,
+                        // like for example make calculations among columns.
+                        if (onProcessRow) {
+                            onProcessRow(data[i]);
+                        }
+                        // Reflect the changes to the outside, for example for global calculations over all data
+                        if (onDataChange) {
+                            onDataChange(data);
+                        }
+                        setDataGrid({ data });
+                        break;
+                    }
+                }
+                setDataGridLoading(false);
+                return newRow;
+            }
+        }
+        setDataGridLoading(false);
+        return false;
+    });
+    const customPaddings = (isAutoHeight)
+        ? {
+            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '8px' },
+            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
+            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' }
+        }
+        : undefined;
+    return (react_1.default.createElement(Box_1.default, { className: `dataGrid_${name}`, sx: { height: '100%' } },
+        preparedColumns === null
+            ? react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.loadingBox },
+                react_1.default.createElement(CircularProgress_1.default, null))
+            : react_1.default.createElement(x_data_grid_1.DataGrid, { rows: dataGrid.data, columns: preparedColumns, onStateChange: (state) => {
+                    if (setVisibleRows) {
+                        const newVisibleRows = Object.entries(state.filter.visibleRowsLookup)
+                            .filter(entry => { return entry[1] === true; })
+                            .map((entry) => { return entry[0]; });
+                        const newVisibleRowsJSON = JSON.stringify(newVisibleRows);
+                        if (newVisibleRowsJSON !== visibleRows.current) {
+                            setVisibleRows(newVisibleRows);
+                            visibleRows.current = newVisibleRowsJSON;
+                        }
+                    }
+                }, editMode: "row", loading: dataGridLoading, hideFooterPagination: hideFooterPagination, getRowHeight: () => {
+                    if (isAutoHeight) {
+                        return 'auto';
+                    }
+                    return null;
+                }, isCellEditable: params => {
+                    var _a;
+                    return (((_a = rowModesModel[params.row.id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit &&
+                        (!(0, utils_1.isTmpId)(params.row.id) ||
+                            ((0, utils_1.isTmpId)(params.row.id) &&
+                                (params.field === indexField ||
+                                    !optionsAC.current ||
+                                    !Object.prototype.hasOwnProperty.call(optionsAC.current, indexField) ||
+                                    (preparedColumns.find(col => col.field === indexField) &&
+                                        Object.prototype.hasOwnProperty.call(preparedColumns.find(col => col.field === indexField), 'valueFormatter'))))));
+                }, rowModesModel: rowModesModel, onRowEditStart: handleRowEditStart, onRowEditStop: handleRowEditStop, processRowUpdate: processRowUpdate, onProcessRowUpdateError: (e) => {
+                    setDataGridLoading(false);
+                    if (processingRow.current) {
+                        setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [processingRow.current]: { mode: x_data_grid_1.GridRowModes.Edit } }));
+                    }
+                    const msg = `Erro em "${e.path}": ${e.errors}`;
+                    setSnackBar({
+                        open: true,
+                        severity: 'error',
+                        msg
+                    });
+                    console.log(e);
+                }, components: { Toolbar: CustomToolbar_1.CustomToolbar, Footer: FooterToolbar_1.FooterToolbar }, componentsProps: {
+                    toolbar: {
+                        preparedColumns,
+                        setPreparedColumns,
+                        showQuickFilter: true,
+                        quickFilterProps: { debounceMs: 500 }
+                    },
+                    footer: {
+                        name,
+                        setRowModesModel,
+                        dataGrid,
+                        setDataGrid,
+                        emptyItem,
+                        indexField,
+                        isEditable
+                    },
+                    filterPanel: {
+                        sx: {
+                            '& .MuiDataGrid-filterFormValueInput': { width: 300 }
+                        }
+                    }
+                }, experimentalFeatures: { newEditingApi: isEditable }, sx: customPaddings }),
+        react_1.default.createElement(ConfirmDialog_1.ConfirmDialog, { open: dialogOpen, onClose: handleDialogClose, onConfirm: handleDeleteSave }),
+        react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 5000, onClose: () => { setSnackBar(Object.assign(Object.assign({}, initialSnackBar), { open: false })); }, anchorOrigin: { vertical: 'top', horizontal: 'center' } },
+            react_1.default.createElement(Alert_1.default, { severity: snackBar.severity }, snackBar.msg))));
+});
+DataGridBySchemaEditable.displayName = 'DataGridBySchemaEditable';
+exports.default = DataGridBySchemaEditable;

package/dist/components/DataTotals.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { AlertColor } from '@mui/material/Alert';
+import { GridRowId } from '@mui/x-data-grid';
+import { Item } from '../utils';
+export interface SumRowsType {
+    rows: Item[];
+    severity?: AlertColor;
+}
+interface DataTotalsProps {
+    data?: Item[];
+    sumRows?: SumRowsType;
+    visibleRows: GridRowId[];
+}
+declare const DataTotals: ({ data, sumRows, visibleRows }: DataTotalsProps) => JSX.Element;
+export default DataTotals;

package/dist/components/DataTotals.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Alert_1 = __importDefault(require("@mui/material/Alert"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const react_number_format_1 = require("react-number-format");
+;
+const DataTotals = ({ data, sumRows, visibleRows }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, data && sumRows && sumRows.rows.length > 0 &&
+        react_1.default.createElement(Alert_1.default, { severity: sumRows.severity || 'info' },
+            react_1.default.createElement(List_1.default, { dense: true }, sumRows.rows.map(row => (react_1.default.createElement(ListItem_1.default, { key: `sumRows_${row.field}` },
+                react_1.default.createElement(react_number_format_1.NumericFormat, { value: data.reduce((total, item) => {
+                        if (parseFloat(item[row.field]) && visibleRows.includes(`${item.id}`)) {
+                            return total + parseFloat(item[row.field]);
+                        }
+                        return total;
+                    }, 0), thousandSeparator: '.', decimalSeparator: ',', displayType: 'text', decimalScale: row.isCount ? 0 : 2, fixedDecimalScale: true, prefix: row.prefix, suffix: row.suffix }))))))));
+};
+exports.default = DataTotals;

package/dist/components/DialogActions.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DialogType } from '../context/APIWrapperContext';
+interface DialogActionsProps {
+    setDialog: React.Dispatch<React.SetStateAction<DialogType>>;
+    handleSave: (p: any) => Promise<boolean | undefined>;
+    btnCancel?: string;
+    btnConfirm?: string;
+}
+export default function DialogActions({ setDialog, handleSave, btnCancel, btnConfirm }: DialogActionsProps): JSX.Element;
+export {};

package/dist/components/DialogActions.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+;
+function DialogActions({ setDialog, handleSave, btnCancel = 'Cancelar', btnConfirm = 'Salvar' }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { onClick: () => {
+                setDialog({ open: false });
+            } }, btnCancel),
+        react_1.default.createElement(Button_1.default, { onClick: handleSave }, btnConfirm)));
+}
+exports.default = DialogActions;
+;

package/dist/components/DialogJSONSchemaForm.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Item, SchemaType } from '../utils';
+interface DialogJSONSchemaFormProps {
+    jsonSchemaFormRef: any;
+    schema: SchemaType;
+    uiSchema: SchemaType;
+    formData: Item;
+    onSubmit: ({ formData }: {
+        formData: Item;
+    }) => void;
+}
+export default function DialogJSONSchemaForm({ jsonSchemaFormRef, schema, uiSchema, formData, onSubmit }: DialogJSONSchemaFormProps): JSX.Element;
+export {};