CRUD component #4486
CRUD component #4486
Conversation
apedroferreira
added
new feature
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
Netlify deploy preview |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
github-actions
bot
added
the
PR: out-of-date
|
|
||
| const { fields, createOne, validate } = cachedDataSource; | ||
|
|
||
| const [formState, setFormState] = React.useState<{ |
There was a problem hiding this comment.
The formState calculation seems quite expensive to be made every render, here's a performance suggestion (including removing the .filter.map chain and using a single .reduce):
const createInitialValues = React.useCallback((fields, initialValues) => {
const baseValues = fields.reduce((acc, { field, type }) => {
if (field === 'id') return acc;
acc[field] = type === 'boolean' ? (initialValues[field] ?? false) : initialValues[field];
return acc;
}, {} as Partial<OmitId<D>>);
return {
values: { ...baseValues, ...initialValues },
errors: {} as Partial<Record<keyof D, string>>
};
}, []);
const [formState, setFormState] = React.useState(() =>
createInitialValues(fields, initialValues)
);There was a problem hiding this comment.
But that's only the initial state value, it doesn't run every render.
I think it should be ok, .reduce might be more efficient but not as readable.
There was a problem hiding this comment.
hm, i just looked it up and looks like it might run every render...
I guess that just passing a function with the same result still using .map and .filter would only run once though, I'll do that if it sounds cool. (just added it)
github-actions
bot
added
PR: out-of-date
|
|
||
| - A `fields` property, which extends the [MUI X Data Grid column definition](https://mui.com/x/react-data-grid/column-definition/) where different fields, header names and field types, among others, can be specified for your data. | ||
|
|
||
| An `id` field (string or number) is mandatory so that individual items can be identified. |
There was a problem hiding this comment.
| An `id` field (string or number) is mandatory so that individual items can be identified. | |
| - An `id` field (string or number) is mandatory so that individual items can be identified. |
|
|
||
| An `id` field (string or number) is mandatory so that individual items can be identified. | ||
|
|
||
| An additional type `longString` is provided for multiline form fields. |
There was a problem hiding this comment.
| An additional type `longString` is provided for multiline form fields. | |
| - An additional type `longString` is provided for multiline form fields. |
| components: Crud, CrudProvider, List, Show, Create, Edit, CrudForm | ||
| --- | ||
|
|
||
| # Crud |
There was a problem hiding this comment.
Should it be CRUD or Crud?
|
|
||
| The `Crud` component automatically generates CRUD pages for your data source, automatically integrated with your routing solution. All that is required is a `dataSource` definition and a `rootPath` for the CRUD pages. | ||
|
|
||
| {{"demo": "CrudBasic.js", "height": 600, "iframe": true}} |
There was a problem hiding this comment.
In case of TS, code highlight doesn't seem to be applied for the preview code. It's happening for some other demos as well. I'm not sure if it's an issue and can be fixed. Just thought of sharing this observation.
Implement CRUD feature as specified in #4146
https://deploy-preview-4486--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/
Tests and examples will be added in separate PRs as this PR has already grown too large.
To help review, the contents of this PR are mostly:
packages/toolpad-core.docs, many examples but with a lot of repetition between them, feel free to just mostly take a look at the new documentation page for theCrudcomponent.playgrounds for Vite, Next.js App Router and Next.js Pages Router.It took a while to reach this first version but still feel free to provide any major or minor feedback!