mui-datagrid-full-edit
Version:
A full functioned react MUI grid component with CRUD and an easy way of @mui/x-data-grid
196 lines (193 loc) • 9.42 kB
JavaScript
;
require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.weak-map.js");
require("core-js/modules/esnext.iterator.for-each.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.iterator.find.js");
require("core-js/modules/esnext.iterator.map.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
var _DeleteOutlined = _interopRequireDefault(require("@mui/icons-material/DeleteOutlined"));
var _Save = _interopRequireDefault(require("@mui/icons-material/Save"));
var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
var _xDataGrid = require("@mui/x-data-grid");
var _DefaultToolbar = _interopRequireDefault(require("./components/DefaultToolbar"));
const _excluded = ["columns", "rows", "defaultPageSize", "onSaveRow", "onDeleteRow", "createRowData", "noActionColumn", "onProcessRowUpdateError", "slotToolbar"]; // translate to javascript and custom it by Blueberry 03/02/2023
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function FullFeaturedCrudGrid(_ref) {
let {
columns,
rows,
defaultPageSize,
onSaveRow,
onDeleteRow,
createRowData,
noActionColumn,
onProcessRowUpdateError,
slotToolbar
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const [internalRows, setInternalRows] = React.useState(rows);
const [rowModesModel, setRowModesModel] = React.useState({});
(0, _react.useEffect)(() => {
setInternalRows(rows);
}, [rows]);
const handleRowEditStart = (params, event) => {
event.defaultMuiPrevented = true;
};
const handleRowEditStop = (params, event) => {
event.defaultMuiPrevented = true;
};
const handleEditClick = id => () => {
setRowModesModel(_objectSpread(_objectSpread({}, rowModesModel), {}, {
[id]: {
mode: _xDataGrid.GridRowModes.Edit
}
}));
};
const handleSaveClick = id => () => {
setRowModesModel(_objectSpread(_objectSpread({}, rowModesModel), {}, {
[id]: {
mode: _xDataGrid.GridRowModes.View
}
}));
};
const handleDeleteClick = id => () => {
setInternalRows(internalRows.filter(row => row.id !== id));
onDeleteRow(id, internalRows.find(row => row.id === id), internalRows);
};
const handleCancelClick = id => () => {
setRowModesModel(_objectSpread(_objectSpread({}, rowModesModel), {}, {
[id]: {
mode: _xDataGrid.GridRowModes.View,
ignoreModifications: true
}
}));
const editedRow = internalRows.find(row => row.id === id);
if (editedRow.isNew) {
setInternalRows(internalRows.filter(row => row.id !== id));
}
};
const processRowUpdate = newRow => {
const updatedRow = _objectSpread({}, newRow);
if (!updatedRow.isNew) updatedRow.isNew = false;
const oldRow = internalRows.find(r => r.id === updatedRow.id);
setInternalRows(internalRows.map(row => row.id === newRow.id ? updatedRow : row));
onSaveRow(updatedRow.id, updatedRow, oldRow, internalRows);
return updatedRow;
};
const appendedColumns = noActionColumn ? columns : [...columns, {
field: "actions",
type: "actions",
headerName: "Actions",
width: 100,
cellClassName: "actions",
getActions: _ref2 => {
var _rowModesModel$id;
let {
id
} = _ref2;
const isInEditMode = ((_rowModesModel$id = rowModesModel[id]) === null || _rowModesModel$id === void 0 ? void 0 : _rowModesModel$id.mode) === _xDataGrid.GridRowModes.Edit;
if (isInEditMode) {
return [/*#__PURE__*/React.createElement(_xDataGrid.GridActionsCellItem, {
icon: /*#__PURE__*/React.createElement(_Save.default, null),
label: "Save",
onClick: handleSaveClick(id)
}), /*#__PURE__*/React.createElement(_xDataGrid.GridActionsCellItem, {
icon: /*#__PURE__*/React.createElement(_Close.default, null),
label: "Cancel",
className: "textPrimary",
onClick: handleCancelClick(id),
color: "inherit"
})];
}
return [/*#__PURE__*/React.createElement(_xDataGrid.GridActionsCellItem, {
icon: /*#__PURE__*/React.createElement(_Edit.default, null),
label: "Edit",
className: "textPrimary",
onClick: handleEditClick(id),
color: "inherit"
}), /*#__PURE__*/React.createElement(_xDataGrid.GridActionsCellItem, {
icon: /*#__PURE__*/React.createElement(_DeleteOutlined.default, null),
label: "Delete",
onClick: handleDeleteClick(id),
color: "inherit"
})];
}
}];
//pagination
const [pageSize, setPageSize] = React.useState(defaultPageSize);
return /*#__PURE__*/React.createElement(_xDataGrid.DataGrid, _extends({
rows: internalRows,
columns: appendedColumns,
editMode: "row",
rowModesModel: rowModesModel,
onRowModesModelChange: newModel => setRowModesModel(newModel),
onRowEditStart: handleRowEditStart,
onRowEditStop: handleRowEditStop,
processRowUpdate: processRowUpdate,
onProcessRowUpdateError: onProcessRowUpdateError,
slots: {
toolbar: slotToolbar ? slotToolbar : _DefaultToolbar.default
},
slotProps: {
toolbar: {
rows: internalRows,
setRows: setInternalRows,
setRowModesModel,
createRowData,
columns
}
},
experimentalFeatures: {
newEditingApi: true
}
//pagination
,
pageSize: pageSize,
onPageSizeChange: newPageSize => setPageSize(newPageSize)
}, props));
}
FullFeaturedCrudGrid.defaultProps = {
//action
onSaveRow: (id, updatedRow /*, oldRow, rows*/) => {
console.log("save row", updatedRow);
},
onDeleteRow: (id, oldRow /*, rows*/) => {
console.log("delete row", oldRow);
},
noActionColumn: false,
onProcessRowUpdateError: error => {
console.error(error);
},
initialState: {
columns: {
columnVisibilityModel: {
id: false
}
}
},
autoHeight: true,
//pagination
pagination: true,
defaultPageSize: 25,
rowsPerPageOptions: [5, 10, 25, 50, 100]
};
var _default = exports.default = FullFeaturedCrudGrid;