@toolpad/core
Version:
Dashboard framework powered by Material UI.
161 lines (160 loc) • 6.42 kB
JavaScript
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Crud = Crud;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _pathToRegexp = require("path-to-regexp");
var _invariant = _interopRequireDefault(require("invariant"));
var _context = require("../shared/context");
var _CrudProvider = require("./CrudProvider");
var _List = require("./List");
var _Show = require("./Show");
var _Create = require("./Create");
var _Edit = require("./Edit");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
*
* Demos:
*
* - [CRUD](https://mui.com/toolpad/core/react-crud/)
*
* API:
*
* - [Crud API](https://mui.com/toolpad/core/api/crud)
*/
function Crud(props) {
const {
dataSource,
rootPath,
initialPageSize,
defaultValues,
dataSourceCache,
slots,
slotProps
} = props;
const listPath = rootPath;
const showPath = `${rootPath}/:id`;
const createPath = `${rootPath}/new`;
const editPath = `${rootPath}/:id/edit`;
const routerContext = React.useContext(_context.RouterContext);
const handleRowClick = React.useCallback(id => {
routerContext?.navigate(`${rootPath}/${String(id)}`);
}, [rootPath, routerContext]);
const handleCreateClick = React.useCallback(() => {
routerContext?.navigate(createPath);
}, [createPath, routerContext]);
const handleEditClick = React.useCallback(id => {
routerContext?.navigate(`${rootPath}/${String(id)}/edit`);
}, [rootPath, routerContext]);
const handleCreate = React.useCallback(() => {
routerContext?.navigate(listPath);
}, [listPath, routerContext]);
const handleEdit = React.useCallback(() => {
routerContext?.navigate(listPath);
}, [listPath, routerContext]);
const handleDelete = React.useCallback(() => {
routerContext?.navigate(listPath);
}, [listPath, routerContext]);
const renderedRoute = React.useMemo(() => {
const pathname = routerContext?.pathname ?? '';
if ((0, _pathToRegexp.match)(listPath)(pathname)) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.List, {
initialPageSize: initialPageSize,
onRowClick: handleRowClick,
onCreateClick: handleCreateClick,
onEditClick: handleEditClick,
slots: slots?.list,
slotProps: slotProps?.list
});
}
if ((0, _pathToRegexp.match)(createPath)(pathname)) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Create.Create, {
initialValues: defaultValues,
onSubmitSuccess: handleCreate,
resetOnSubmit: false
});
}
const showMatch = (0, _pathToRegexp.match)(showPath)(pathname);
if (showMatch) {
const resourceId = showMatch.params.id;
(0, _invariant.default)(resourceId, 'No resource ID present in URL.');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Show.Show, {
id: resourceId,
onEditClick: handleEditClick,
onDelete: handleDelete
});
}
const editMatch = (0, _pathToRegexp.match)(editPath)(pathname);
if (editMatch) {
const resourceId = editMatch.params.id;
(0, _invariant.default)(resourceId, 'No resource ID present in URL.');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.Edit, {
id: resourceId,
onSubmitSuccess: handleEdit
});
}
return null;
}, [createPath, defaultValues, editPath, handleCreate, handleCreateClick, handleDelete, handleEdit, handleEditClick, handleRowClick, initialPageSize, listPath, routerContext?.pathname, showPath, slotProps, slots]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CrudProvider.CrudProvider, {
dataSource: dataSource,
dataSourceCache: dataSourceCache,
children: renderedRoute
});
}
process.env.NODE_ENV !== "production" ? Crud.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Server-side [data source](https://mui.com/toolpad/core/react-crud/#data-sources).
*/
dataSource: _propTypes.default.object.isRequired,
/**
* [Cache](https://mui.com/toolpad/core/react-crud/#data-caching) for the data source.
*/
dataSourceCache: _propTypes.default.shape({
cache: _propTypes.default.object.isRequired,
clear: _propTypes.default.func.isRequired,
get: _propTypes.default.func.isRequired,
set: _propTypes.default.func.isRequired,
ttl: _propTypes.default.number.isRequired
}),
/**
* Default form values for a new item.
* @default {}
*/
defaultValues: _propTypes.default.object,
/**
* Initial number of rows to show per page.
* @default 100
*/
initialPageSize: _propTypes.default.number,
/**
* Root path to CRUD pages.
*/
rootPath: _propTypes.default.string.isRequired,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: _propTypes.default.shape({
list: _propTypes.default.shape({
dataGrid: _propTypes.default.object
}).isRequired
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: _propTypes.default.shape({
list: _propTypes.default.shape({
dataGrid: _propTypes.default.func
}).isRequired
})
} : void 0;