@toolpad/core
Version:
Dashboard framework powered by Material UI.
233 lines (232 loc) • 8.68 kB
JavaScript
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Create = Create;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _invariant = _interopRequireDefault(require("invariant"));
var _useNotifications = require("../useNotifications");
var _context = require("../shared/context");
var _LocalizationProvider = require("../AppProvider/LocalizationProvider");
var _CrudForm = require("./CrudForm");
var _cache = require("./cache");
var _useCachedDataSource = require("./useCachedDataSource");
var _localeText = require("./localeText");
var _PageContainer = require("../PageContainer");
var _useActivePage = require("../useActivePage");
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:
*
* - [Create API](https://mui.com/toolpad/core/api/create)
*/
function Create(props) {
const {
initialValues = {},
onSubmitSuccess,
resetOnSubmit = false,
dataSourceCache,
pageTitle,
localeText: propsLocaleText,
slots,
slotProps
} = props;
const globalLocaleText = (0, _LocalizationProvider.useLocaleText)();
const localeText = {
..._localeText.CRUD_DEFAULT_LOCALE_TEXT,
...globalLocaleText,
...propsLocaleText
};
const crudContext = React.useContext(_context.CrudContext);
const dataSource = props.dataSource ?? crudContext.dataSource;
const notifications = (0, _useNotifications.useNotifications)();
(0, _invariant.default)(dataSource, 'No data source found.');
const cache = React.useMemo(() => {
const manualCache = dataSourceCache ?? crudContext.dataSourceCache;
return typeof manualCache !== 'undefined' ? manualCache : new _cache.DataSourceCache();
}, [crudContext.dataSourceCache, dataSourceCache]);
const cachedDataSource = (0, _useCachedDataSource.useCachedDataSource)(dataSource, cache);
const {
fields,
createOne,
validate
} = cachedDataSource;
const activePage = (0, _useActivePage.useActivePage)();
const [formState, setFormState] = React.useState(() => ({
values: {
...Object.fromEntries(fields.filter(({
field,
editable
}) => field !== 'id' && editable !== false).map(({
field,
type
}) => [field, type === 'boolean' ? initialValues[field] ?? false : initialValues[field]])),
...initialValues
},
errors: {}
}));
const formValues = formState.values;
const formErrors = formState.errors;
const setFormValues = React.useCallback(newFormValues => {
setFormState(previousState => ({
...previousState,
values: newFormValues
}));
}, []);
const setFormErrors = React.useCallback(newFormErrors => {
setFormState(previousState => ({
...previousState,
errors: newFormErrors
}));
}, []);
const handleFormFieldChange = React.useCallback((name, value) => {
const validateField = async values => {
if (validate) {
const {
issues
} = await validate(values);
setFormErrors({
...formErrors,
[name]: issues?.find(issue => issue.path?.[0] === name)?.message
});
}
};
const newFormValues = {
...formValues,
[name]: value
};
setFormValues(newFormValues);
validateField(newFormValues);
}, [formErrors, formValues, setFormErrors, setFormValues, validate]);
const handleFormReset = React.useCallback(() => {
setFormValues(initialValues);
}, [initialValues, setFormValues]);
const handleFormSubmit = React.useCallback(async () => {
if (validate) {
const {
issues
} = await validate(formValues);
if (issues && issues.length > 0) {
setFormErrors(Object.fromEntries(issues.map(issue => [issue.path?.[0], issue.message])));
throw new Error('Form validation failed');
}
}
setFormErrors({});
try {
await createOne(formValues);
notifications.show(localeText.createSuccessMessage, {
severity: 'success',
autoHideDuration: 3000
});
if (onSubmitSuccess) {
await onSubmitSuccess(formValues);
}
if (resetOnSubmit) {
handleFormReset();
}
} catch (createError) {
notifications.show(`${localeText.createErrorMessage} ${createError.message}`, {
severity: 'error',
autoHideDuration: 3000
});
throw createError;
}
}, [createOne, formValues, handleFormReset, localeText.createErrorMessage, localeText.createSuccessMessage, notifications, onSubmitSuccess, resetOnSubmit, setFormErrors, validate]);
const PageContainerSlot = slots?.pageContainer ?? _PageContainer.PageContainer;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PageContainerSlot, {
title: pageTitle,
breadcrumbs: activePage && pageTitle ? [...activePage.breadcrumbs, {
title: pageTitle
}] : undefined,
...slotProps?.pageContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CrudForm.CrudForm, {
dataSource: dataSource,
formState: formState,
onFieldChange: handleFormFieldChange,
onSubmit: handleFormSubmit,
onReset: handleFormReset,
submitButtonLabel: localeText.createLabel,
slots: slots?.form,
slotProps: slotProps?.form
})
});
}
process.env.NODE_ENV !== "production" ? Create.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,
/**
* [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
}),
/**
* Initial form values.
* @default {}
*/
initialValues: _propTypes.default.object,
/**
* Locale text for the component.
*/
localeText: _propTypes.default.object,
/**
* Callback fired when the form is successfully submitted.
*/
onSubmitSuccess: _propTypes.default.func,
/**
* The title of the page.
*/
pageTitle: _propTypes.default.string,
/**
* Whether the form fields should reset after the form is submitted.
* @default false
*/
resetOnSubmit: _propTypes.default.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: _propTypes.default.shape({
form: _propTypes.default.shape({
checkbox: _propTypes.default.object,
datePicker: _propTypes.default.object,
dateTimePicker: _propTypes.default.object,
select: _propTypes.default.object,
textField: _propTypes.default.object
}),
pageContainer: _propTypes.default.object
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: _propTypes.default.shape({
form: _propTypes.default.shape({
checkbox: _propTypes.default.elementType,
datePicker: _propTypes.default.elementType,
dateTimePicker: _propTypes.default.elementType,
select: _propTypes.default.elementType,
textField: _propTypes.default.elementType
}),
pageContainer: _propTypes.default.elementType
})
} : void 0;