drf-react-by-schema 0.5.3 → 0.6.0

package/dist/components/DataGridBySchemaEditable.js

@@ -71,9 +71,8 @@ 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, onEditModel, 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", "onEditModel", "isEditable", "sx", "isAutoHeight", "defaultValues", "hideFooterPagination", "setVisibleRows"]);
+    var { schema, data, rowCount = 0, 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, onEditModel, isEditable = false, sx = { mr: 2 }, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined } = _a, other = __rest(_a, ["schema", "data", "rowCount", "columns", "model", "fieldKey", "labelKey", "index", "name", "indexField", "addExistingModel", "indexFieldMinWidth", "indexFieldBasePath", "stateToLink", "minWidth", "modelParent", "modelParentId", "customColumnOperations", "customLinkDestination", "LinkComponent", "onProcessRow", "onDataChange", "onEditModel", "isEditable", "sx", "isAutoHeight", "defaultValues", "hideFooterPagination", "setVisibleRows", "paginationModel", "setPaginationModel"]);
     const { serverEndPoint } = DRFReactBySchemaContext_1.DRFReactBySchemaContext
         ? react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext)
         : { serverEndPoint: null };
@@ -81,10 +80,12 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
     const initialSnackBar = {
         open: false,
         msg: '',
-        severity: 'info'
+        severity: 'info',
     };
     const [snackBar, setSnackBar] = (0, react_1.useState)(initialSnackBar);
-    const [dataGrid, setDataGrid] = (0, react_1.useState)({ data: [] });
+    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)({});
@@ -101,8 +102,12 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             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 (['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;
@@ -115,7 +120,10 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                 continue;
             }
             if (col.field === indexField && addExistingModel && !optionsAC.current[col.field]) {
-                const options = yield (0, api_1.getAutoComplete)({ model: addExistingModel, serverEndPoint });
+                const options = yield (0, api_1.getAutoComplete)({
+                    model: addExistingModel,
+                    serverEndPoint,
+                });
                 if (options) {
                     optionsAC.current[col.field] = options;
                     continue;
@@ -139,105 +147,112 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     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" })
+                            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" })
+                        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 => {
+        cols = cols.map((col) => {
             if (!schema[col.field]) {
                 return col;
             }
-            const isIndexField = (indexField !== '' && (col.field === indexField));
+            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));
+            column.editable =
+                isEditable &&
+                    (!schema[col.field].read_only ||
+                        ['field', 'nested object'].includes(schema[col.field].type));
+            if (['field', 'nested object'].includes(schema[col.field].type)) {
+                column.creatable =
+                    'related_editable' in schema[col.field]
+                        ? schema[col.field].related_editable
+                        : column.creatable;
+            }
             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' });
+                    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')
-                        : '';
+                    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.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, onEditModel: onEditModel }));
+                        column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField, onEditModel: onEditModel })));
                         break;
                     }
-                    column.valueGetter = params => {
-                        return (!params.value) ? '' : params.value.label;
+                    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))
+                        column.valueFormatter = (params) => {
+                            return !params.value || !Array.isArray(params.value)
                                 ? ''
-                                : params.value.map(val => val.label).join(', ');
+                                : 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: schema[col.field].many || 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: schema[col.field].many || false })));
                         break;
                     }
-                    column.valueGetter = params => {
-                        return (!params.value || !Array.isArray(params.value))
+                    column.valueGetter = (params) => {
+                        return !params.value || !Array.isArray(params.value)
                             ? ''
-                            : params.value.map(val => val.label).join(', ');
+                            : 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.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 }));
+                        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;
+                    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.valueFormatter = (params) => {
+                            return params.value ? 'Sim' : 'Não';
                         };
-                        column.renderEditCell = (params) => react_1.default.createElement(BooleanInputCell_1.BooleanInputCell, Object.assign({}, params, { column: column }));
+                        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';
+                    column.valueGetter = (params) => {
+                        return params.value ? 'Sim' : 'Não';
                     };
                     break;
                 case 'decimal':
@@ -247,32 +262,36 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     const suffix = schema[col.field].suffix || '';
                     const isCurrency = schema[col.field].is_currency;
                     column.type = 'number';
-                    column.valueFormatter = params => {
-                        return (!params.value)
+                    column.valueFormatter = (params) => {
+                        return !params.value
                             ? ''
                             : parseFloat(params.value).toLocaleString('pt-BR', {
                                 minimumFractionDigits: decimalScale,
-                                maximumFractionDigits: decimalScale
+                                maximumFractionDigits: decimalScale,
                             });
                     };
                     if (isEditable) {
-                        column.renderEditCell = (params) => react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, { decimalScale: decimalScale, isCurrency: isCurrency, prefix: prefix, suffix: suffix, column: column }));
+                        column.renderEditCell = (params) => (react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, { decimalPlaces: decimalScale, isCurrency: isCurrency, prefix: prefix, suffix: suffix, column: column })));
                     }
-                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({ type: 'float' });
+                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
+                        type: 'float',
+                    });
                     break;
                 case 'number':
                 case 'integer':
                     column.type = 'number';
-                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({ type: 'number' });
+                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
+                        type: 'number',
+                    });
                     break;
             }
             if (indexFieldMinWidth && !column.minWidth) {
-                column.minWidth = (col.field === indexField) ? indexFieldMinWidth : minWidth;
+                column.minWidth = col.field === indexField ? indexFieldMinWidth : minWidth;
             }
             if (indexField) {
                 if (col.field === indexField) {
                     column.flex = 1;
-                    column.renderCell = params => {
+                    column.renderCell = (params) => {
                         if (LinkComponent && customLinkDestination) {
                             return (react_1.default.createElement(LinkComponent, { to: `${customLinkDestination(params)}`, state: stateToLink }, params.formattedValue));
                         }
@@ -280,9 +299,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                             !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));
+                            return react_1.default.createElement(react_1.default.Fragment, null, params.formattedValue);
                         }
-                        const targetId = (['field', 'nested object'].includes(schema[col.field].type))
+                        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));
@@ -293,7 +312,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                         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(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 })));
                         };
@@ -306,7 +325,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             }
             // format numbers:
             if (column.patternFormat) {
-                column.valueFormatter = params => {
+                column.valueFormatter = (params) => {
                     if (!params.value || typeof params.value !== 'string') {
                         return params.value;
                     }
@@ -314,7 +333,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     return formattedValue;
                 };
                 if (isEditable) {
-                    column.renderEditCell = params => react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat }));
+                    column.renderEditCell = (params) => (react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat })));
                 }
             }
             // Finally!
@@ -346,14 +365,14 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             setDialogOpen(false);
             return;
         }
-        const newData = dataGrid.data.filter(row => row.id !== idToRemove.current);
+        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
+                relatedModelId: idToRemove.current,
             });
         }
         // Reflect changes to the outside, for example for doing global calculations over multiple rows:
@@ -365,9 +384,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
     };
     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);
+        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) }));
+            setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: dataGrid.data.filter((row) => row.id !== id) }));
         }
     };
     (0, react_1.useEffect)(() => {
@@ -385,7 +404,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     emptyItem.current[col.field] = defaultValues[col.field];
                     continue;
                 }
-                emptyItem.current[col.field] = (schema[col.field])
+                emptyItem.current[col.field] = schema[col.field]
                     ? (0, utils_1.emptyByType)(schema[col.field])
                     : null;
             }
@@ -397,10 +416,10 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         yupValidationSchema.current = (0, utils_1.buildGenericYupValidationSchema)({
             data: emptyItem.current,
             schema,
-            skipFields
+            skipFields,
         });
         setDataGrid({
-            data
+            data,
         });
     }, [data]);
     (0, react_1.useEffect)(() => {
@@ -417,14 +436,18 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
             return false;
         }
         setDataGridLoading(true);
-        const indexCol = preparedColumns.find(col => col.field === indexField);
+        const indexCol = preparedColumns.find((col) => col.field === indexField);
         processingRow.current = newRow.id;
         yield yupValidationSchema.current.validate(newRow);
-        const onlyAddExisting = (indexField &&
+        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));
+            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;
@@ -453,7 +476,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                 relatedModelId: newRow.id,
                 newRow,
                 schema,
-                onlyAddExisting
+                onlyAddExisting,
             });
             const responseAsData = response;
             if ((onlyAddExisting && typeof response != 'boolean') ||
@@ -487,79 +510,112 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
         setDataGridLoading(false);
         return false;
     });
-    const customPaddings = (isAutoHeight)
+    const customPaddings = isAutoHeight
         ? {
-            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '8px' },
-            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
-            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' }
+            '&.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
+        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];
                     });
-                    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
+                    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,
+                        },
                     },
-                    filterPanel: {
-                        sx: {
-                            '& .MuiDataGrid-filterFormValueInput': { width: 300 }
-                        }
+                },
+            }, experimentalFeatures: { newEditingApi: isEditable }, sx: customPaddings, paginationMode: paginationModel ? 'server' : 'client', onPageChange: (newPage) => {
+                if (setPaginationModel && paginationModel) {
+                    setPaginationModel(Object.assign(Object.assign({}, paginationModel), { page: newPage }));
+                }
+            }, onPageSizeChange: (newPageSize) => {
+                if (setPaginationModel && paginationModel) {
+                    setPaginationModel(Object.assign(Object.assign({}, paginationModel), { pageSize: newPageSize }));
+                }
+            }, rowCount: paginationModel && typeof rowCount !== 'undefined'
+                ? rowCount
+                : undefined, pageSize: paginationModel ? paginationModel.pageSize : 100, rowsPerPageOptions: [2], filterMode: paginationModel ? 'server' : 'client', onFilterModelChange: paginationModel
+                ? (newFilter) => {
+                    if (setPaginationModel && paginationModel) {
+                        setPaginationModel(Object.assign(Object.assign({}, paginationModel), { filter: newFilter }));
                     }
-                }, experimentalFeatures: { newEditingApi: isEditable }, sx: customPaddings }),
+                }
+                : undefined })),
         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(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';

package/dist/components/GenericModelList.d.ts

@@ -13,8 +13,9 @@ interface GenericModelListProps {
     isAutoHeight?: boolean;
     model: string;
     forceReload: boolean;
-    LinkComponent?: JSX.Element | null;
+    LinkComponent?: any | null;
     hasHeader: boolean;
+    paginationMode: 'server' | 'client';
 }
-declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, }: GenericModelListProps) => JSX.Element;
+declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, }: GenericModelListProps) => JSX.Element;
 export default GenericModelList;