drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
158 lines (157 loc) • 10 kB
JavaScript
"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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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 Box_1 = __importDefault(require("@mui/material/Box"));
const Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
const Alert_1 = __importDefault(require("@mui/material/Alert"));
const utils_1 = require("../utils");
const APIWrapperContext_1 = require("../context/APIWrapperContext");
const ConfirmDialog_1 = require("./DataGridBySchemaEditable/ConfirmDialog");
const DataGridDesktop_1 = __importDefault(require("./DataGridBySchemaEditable/DataGridDesktop"));
const DataGridMobile_1 = __importDefault(require("./DataGridBySchemaEditable/DataGridMobile"));
const DataGridBySchemaEditable = (0, react_1.forwardRef)(({ schema, data, rowCount = 0, columns, columnVisibilityModel, model, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', indexFieldViewBasePath, stateToLink = {}, minWidth = 80, loading, modelParent, modelParentId, customColumnOperations, customFieldFormLayouts, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, hasBulkSelect = false, onSelectActions, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined, hideFooterComponent, hideToolbarComponent, tableAutoHeight, actions = ['editInline', 'remove'], customActions, hideColumnsButton, hideFilterButton, hideDensityButton, hideExportButton, hideQuickFilterBar, optionsAC, extraValidators, MobileListRenderItem, MobileRenderNoResults, }, _) => {
const wrapperRef = (0, react_1.useRef)(null);
const apiContext = (0, APIWrapperContext_1.useAPIWrapper)();
const initialSnackBar = {
open: false,
msg: '',
severity: 'info',
};
const [snackBar, setSnackBar] = (0, react_1.useState)(initialSnackBar);
const [dataGrid, setDataGrid] = (0, react_1.useState)({
data: [],
});
const [confirmDialogOpen, setConfirmDialogOpen] = (0, react_1.useState)(false);
const [emptyItem, setEmptyItem] = (0, react_1.useState)({});
const yupValidationSchema = (0, react_1.useRef)(null);
const idToRemove = (0, react_1.useRef)(null);
const handleConfirmDialogClose = () => {
setConfirmDialogOpen(false);
};
const handleDeleteSave = () => {
if (idToRemove.current === null) {
setConfirmDialogOpen(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;
setConfirmDialogOpen(false);
};
const handleDeleteClick = (id) => {
console.log('oi???');
idToRemove.current = id;
setConfirmDialogOpen(true);
};
(0, react_1.useEffect)(() => {
if (!columns) {
setDataGrid({ data: [] });
return;
}
const newEmptyItem = {};
if (isEditable) {
for (const col of columns) {
if (schema[col.field].model_default) {
newEmptyItem[col.field] = schema[col.field].model_default;
continue;
}
if (col.field in defaultValues) {
newEmptyItem[col.field] = defaultValues[col.field];
continue;
}
newEmptyItem[col.field] = schema[col.field] ? (0, utils_1.emptyByType)(schema[col.field]) : null;
}
setEmptyItem(newEmptyItem);
}
const skipFields = [];
if (indexField && addExistingModel) {
skipFields.push(indexField);
}
yupValidationSchema.current = (0, utils_1.buildGenericYupValidationSchema)({
data: newEmptyItem,
schema,
skipFields,
extraValidators,
uiFields: columns.map(({ field }) => field),
});
setDataGrid({
data,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
// Accessibility requirement for DataGrid access with screenreader:
(0, react_1.useEffect)(() => {
const applyAria = () => {
var _a;
const scroller = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.MuiDataGrid-virtualScroller');
if (scroller && scroller.getAttribute('role') !== 'region') {
scroller.setAttribute('role', 'rowgroup');
scroller.setAttribute('aria-label', 'Conteúdo rolável da tabela');
scroller.setAttribute('tabindex', '0');
}
};
applyAria();
const observer = new MutationObserver(applyAria);
if (wrapperRef.current) {
observer.observe(wrapperRef.current, { childList: true, subtree: true });
}
return () => observer.disconnect();
}, []);
return (react_1.default.createElement(Box_1.default, { sx: { height: '100%', width: '100%', maxWidth: '100%' }, ref: !apiContext.isMobile || !MobileListRenderItem ? wrapperRef : undefined },
apiContext.isMobile && MobileListRenderItem ? (react_1.default.createElement(DataGridMobile_1.default, { name: name, data: data, schema: schema, columns: columns, customColumnOperations: customColumnOperations, MobileListRenderItem: MobileListRenderItem, MobileRenderNoResults: MobileRenderNoResults, hideQuickFilterBar: hideQuickFilterBar, paginationModel: paginationModel, setPaginationModel: setPaginationModel, rowCount: rowCount })) : (react_1.default.createElement(DataGridDesktop_1.default, { schema: schema, dataGrid: dataGrid, setDataGrid: setDataGrid, rowCount: rowCount, columns: columns, columnVisibilityModel: columnVisibilityModel, model: model, name: name, indexField: indexField, addExistingModel: addExistingModel, indexFieldMinWidth: indexFieldMinWidth, indexFieldBasePath: indexFieldBasePath, indexFieldViewBasePath: indexFieldViewBasePath, stateToLink: stateToLink, minWidth: minWidth, loading: loading, modelParentId: modelParentId, modelParent: modelParent, customColumnOperations: customColumnOperations, customFieldFormLayouts: customFieldFormLayouts, customLinkDestination: customLinkDestination, LinkComponent: LinkComponent, onProcessRow: onProcessRow, onDataChange: onDataChange, onEditModel: onEditModel, isEditable: isEditable, hasBulkSelect: hasBulkSelect, onSelectActions: onSelectActions, isAutoHeight: isAutoHeight, defaultValues: defaultValues, hideFooterPagination: hideFooterPagination, setVisibleRows: setVisibleRows, paginationModel: paginationModel, setPaginationModel: setPaginationModel, hideFooterComponent: hideFooterComponent, hideToolbarComponent: hideToolbarComponent, tableAutoHeight: tableAutoHeight, actions: actions, customActions: customActions, hideColumnsButton: hideColumnsButton, hideFilterButton: hideFilterButton, hideDensityButton: hideDensityButton, hideExportButton: hideExportButton, hideQuickFilterBar: hideQuickFilterBar, optionsAC: optionsAC, extraValidators: extraValidators, emptyItem: emptyItem, handleDeleteClick: handleDeleteClick, setSnackBar: setSnackBar, yupValidationSchema: yupValidationSchema.current })),
react_1.default.createElement(ConfirmDialog_1.ConfirmDialog, { open: confirmDialogOpen, onClose: handleConfirmDialogClose, 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;