New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-admin
Advanced tools
react-admin - npm Package Compare versions
Comparing version 5.4.1 to 5.4.2
@@ -12,4 +12,10 @@ --- | ||
| **Note**: `<DateRangeInput>` is a wrapper around the [Material UI X Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/), which is a MUI X Pro package. This means that you need to own a [MUI X Pro license](https://mui.com/x/introduction/licensing/#pro-plan) to use it. | ||
| **Note**: `<DateRangeInput>` is a wrapper around the [Material UI X Date Range Picker](https://mui.com/x/react-date-pickers/date-range-picker/), which is a MUI X Pro package. This means that you need to own a [MUI X Pro license](https://mui.com/x/introduction/licensing/#pro-plan) to use it and install the package: | ||
| ```sh | ||
| npm install --save @mui/x-date-pickers-pro | ||
| # or | ||
| yarn add @mui/x-date-pickers-pro | ||
| ``` | ||
| ## Usage | ||
@@ -20,3 +26,3 @@ | ||
| ```tsx | ||
| import { DateRangeInput } from '@react-admin/ra-form-layout'; | ||
| import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput'; | ||
| import { Edit, SimpleForm } from 'react-admin'; | ||
@@ -111,3 +117,3 @@ | ||
| } from "react-admin"; | ||
| import { DateRangeInput } from '@react-admin/ra-form-layout'; | ||
| import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput'; | ||
@@ -114,0 +120,0 @@ const requiredValues = dates => |
@@ -8,3 +8,3 @@ --- | ||
| This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" /> component fetches a list of referenced records by lookup in an associative table, and passes the records down to its child component, which must be an iterator component (e.g. `<SingleFieldList>`). | ||
| This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> component fetches a list of referenced records by lookup in an associative table, and passes the records down to its child component, which must be an iterator component (e.g. `<SingleFieldList>`). | ||
@@ -19,3 +19,3 @@  | ||
| ``` | ||
| ```txt | ||
| ┌─────────┐ ┌──────────────┐ ┌───────────────┐ | ||
@@ -33,3 +33,3 @@ │ bands │ │ performances │ │ venues │ | ||
| To allow users see the `venues` for a given `band` in `<SingleFieldList>`, wrap that component in `<ReferenceManyToManyField>` where you define the relationship via the `reference`, `through` and `using` props: | ||
| To allow users see the `venues` for a given `band` in `<SingleFieldList>`, wrap that component in `<ReferenceManyToManyField>` where you define the relationship via the `reference`, `through` and `using` props: | ||
@@ -67,6 +67,7 @@ ```tsx | ||
| | `reference` | Required | `string` | - | Name of the reference resource, e.g. 'venues' | | ||
| | `through` | Required | `string` | - | Name of the resource for the associative table, e.g. 'performances' | ||
| | `through` | Required | `string` | - | Name of the resource for the associative table, e.g. 'performances' | | ||
| | `filter` | Optional | `object` | `{}` | Filter for the associative table (passed to the `getManyReference()` call) | | ||
| | `joinLimit` | Optional | `number` | 100 | Limit for the number of results fetched from the associative table. Should be **greater than `perPage`** | | ||
| | `perPage` | Optional | `number` | 25 | Limit the number of displayed result after `getManyReference` is called. Useful when using a pagination component. Should be **smaller than `joinLimit`** | | ||
| | `queryOptions` | Optional | `UseQueryOptions` | - | Query options for the `getMany` and `getManyReference` calls | | ||
| | `sort` | Optional | `{ field: string, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'DESC' }` | Sort for the associative table (passed to the `getManyReference()` call) | | ||
@@ -78,3 +79,3 @@ | `source` | Optional | `string` | `'id'` | Name of the field containing the identity of the main resource. Used determine the value to look for in the associative table. | | ||
| `<ReferenceManyToManyField>` expects an _iterator_ component as child, i.e. a component working inside a `ListContext`. | ||
| `<ReferenceManyToManyField>` expects an _iterator_ component as child, i.e. a component working inside a `ListContext`. | ||
@@ -113,2 +114,3 @@ This means you can use a `<Datagrid>` instead of a `<SingleFieldList>`, which is useful if you want to display more details about related records. For instance, to display the venue `name` and `location`: | ||
| {% raw %} | ||
| ```tsx | ||
@@ -124,2 +126,3 @@ <ReferenceManyToManyField | ||
| ``` | ||
| {% endraw %} | ||
@@ -175,2 +178,23 @@ | ||
| ## `queryOptions` | ||
| Use the `queryOptions` prop to customize the queries for `getMany` and `getManyReference`. | ||
| You can for instance use it to pass [a custom meta](./Actions.md#meta-parameter) to the dataProvider. | ||
| {% raw %} | ||
| ```tsx | ||
| <ReferenceManyToManyField | ||
| reference="venues" | ||
| through="performances" | ||
| using="band_id,venue_id" | ||
| queryOptions={{ meta: { myParameter: 'value' } }} | ||
| > | ||
| {/* ... */} | ||
| </ReferenceManyToManyField> | ||
| ``` | ||
| {% endraw %} | ||
| ## `reference` | ||
@@ -198,2 +222,3 @@ | ||
| {% raw %} | ||
| ```tsx | ||
@@ -209,2 +234,3 @@ <ReferenceManyToManyField | ||
| ``` | ||
| {% endraw %} | ||
@@ -255,4 +281,4 @@ | ||
| - once to get the records of the associative resource (`performances` in this case), using a `getManyReference()` call | ||
| - once to get the records of the reference resource (`venues` in this case), using a `getMany()` call. | ||
| - once to get the records of the associative resource (`performances` in this case), using a `getManyReference()` call | ||
| - once to get the records of the reference resource (`venues` in this case), using a `getMany()` call. | ||
@@ -300,2 +326,2 @@ For instance, if the user displays the band of id `123`, `<ReferenceManyToManyField>` first issues the following query to the `dataProvider`: | ||
| } | ||
| ``` | ||
| ``` |
@@ -8,3 +8,3 @@ --- | ||
| This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" /> component allows to create, edit or remove relationships between two resources sharing an associative table. The changes in the associative table are sent to the dataProvider _when the user submits the form_, so that they can cancel the changes before submission. | ||
| This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> component allows to create, edit or remove relationships between two resources sharing an associative table. The changes in the associative table are sent to the dataProvider _when the user submits the form_, so that they can cancel the changes before submission. | ||
@@ -22,3 +22,3 @@ <video controls autoplay playsinline muted loop width="100%"> | ||
| ``` | ||
| ```txt | ||
| ┌─────────┐ ┌──────────────┐ ┌───────────────┐ | ||
@@ -34,3 +34,3 @@ │ bands │ │ performances │ │ venues │ | ||
| In this example, `bands.id` matches `performances.band_id`, and `performances.venue_id` matches `venues.id`. | ||
| In this example, `bands.id` matches `performances.band_id`, and `performances.venue_id` matches `venues.id`. | ||
@@ -66,3 +66,3 @@ To let users edit the `venues` for given `band` in an `<AutocompleteArrayInput>`, wrap that input in a `<ReferenceManyToManyInput>` where you define the relationship via the `reference`, `through` and `using` props: | ||
| **Tip**: If you need to edit the fields of the associative table (e.g. the `date` in `performances`), you can use a [`<ReferenceManyInput>`](./ReferenceManyInput.md) instead of `<ReferenceManyToManyInput>`. | ||
| **Tip**: If you need to edit the fields of the associative table (e.g. the `date` in `performances`), you can use a [`<ReferenceManyInput>`](./ReferenceManyInput.md) instead of `<ReferenceManyToManyInput>`. | ||
@@ -114,4 +114,6 @@  | ||
| | `filter Choices` | Optional | `object` | `{}` | Filter for the possible choices fetched from the reference table (passed to the `getList()` call) | | ||
| | `mutationOptions` | Optional | `{ meta, onError }` | - | Mutation options for the `create` and `deleteMany` calls. Only `meta` and `onError` are supported. | | ||
| | `perPage` | Optional | `number` | 25 | Limit for the number of results fetched from the associative table | | ||
| | `perPage Choices` | Optional | `number` | 25 | Limit for the number of possible choices fetched from the reference table | | ||
| | `queryOptions` | Optional | `UseQueryOptions` | - | Query options for the `getList`, `getMany` and `getManyReference` calls | | ||
| | `sort` | Optional | `{ field: string, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'DESC' }` | Sort for the associative table (passed to the `getManyReference()` call) | | ||
@@ -124,3 +126,3 @@ | `sort Choices` | Optional | `{ field: string, order: 'ASC' or 'DESC' }` | `{ field: 'id', order: 'DESC' }` | Sort for the possible choices fetched from the reference table (passed to the `getList()` call) | | ||
| `<ReferenceManyToManyInput>` expects a _select_ component as child, i.e. a component working inside a `ChoiceContext`. That means you can use a [`<SelectArrayInput>`](./SelectArrayInput.md), or a [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md). | ||
| `<ReferenceManyToManyInput>` expects a _select_ component as child, i.e. a component working inside a `ChoiceContext`. That means you can use a [`<SelectArrayInput>`](./SelectArrayInput.md), or a [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md). | ||
@@ -161,2 +163,3 @@ For instance, to allow user to choose `performances` using a `<SelectArrayInput>` instead of an `<AutocompleteArrayInput>`, you can write: | ||
| {% raw %} | ||
| ```tsx | ||
@@ -172,2 +175,3 @@ <ReferenceManyToManyInput | ||
| ``` | ||
| {% endraw %} | ||
@@ -182,2 +186,3 @@ | ||
| {% raw %} | ||
| ```tsx | ||
@@ -193,4 +198,26 @@ <ReferenceManyToManyInput | ||
| ``` | ||
| {% endraw %} | ||
| ## `mutationOptions` | ||
| Use the `mutationOptions` prop to customize the `create` and `deleteMany` mutations. | ||
| You can for instance use it to pass [a custom meta](./Actions.md#meta-parameter) to the dataProvider. | ||
| {% raw %} | ||
| ```tsx | ||
| <ReferenceManyToManyInput | ||
| reference="venues" | ||
| through="performances" | ||
| using="band_id,venue_id" | ||
| mutationOptions={{ meta: { myParameter: 'value' } }} | ||
| > | ||
| {/* ... */} | ||
| </ReferenceManyToManyInput> | ||
| ``` | ||
| {% endraw %} | ||
| ## `perPage` | ||
@@ -227,2 +254,24 @@ | ||
| ``` | ||
| ## `queryOptions` | ||
| Use the `queryOptions` prop to customize the queries for `getList`, `getMany` and `getManyReference`. | ||
| You can for instance use it to pass [a custom meta](./Actions.md#meta-parameter) to the dataProvider. | ||
| {% raw %} | ||
| ```tsx | ||
| <ReferenceManyToManyInput | ||
| reference="venues" | ||
| through="performances" | ||
| using="band_id,venue_id" | ||
| queryOptions={{ meta: { myParameter: 'value' } }} | ||
| > | ||
| {/* ... */} | ||
| </ReferenceManyToManyInput> | ||
| ``` | ||
| {% endraw %} | ||
| ## `reference` | ||
@@ -244,2 +293,3 @@ | ||
| ``` | ||
| ## `sort` | ||
@@ -250,2 +300,3 @@ | ||
| {% raw %} | ||
| ```tsx | ||
@@ -261,2 +312,3 @@ <ReferenceManyToManyInput | ||
| ``` | ||
| {% endraw %} | ||
@@ -269,2 +321,3 @@ | ||
| {% raw %} | ||
| ```tsx | ||
@@ -280,2 +333,3 @@ <ReferenceManyToManyInput | ||
| ``` | ||
| {% endraw %} | ||
@@ -324,4 +378,4 @@ | ||
| - `<ReferenceManyToManyInput>` cannot be used inside an `<ArrayInput>`, a `<ReferenceOneInput>` or a `<ReferenceManyInput>`. | ||
| - `<ReferenceManyToManyInput>` does not support server side validation. | ||
| - `<ReferenceManyToManyInput>` cannot be used inside an `<ArrayInput>`, a `<ReferenceOneInput>` or a `<ReferenceManyInput>`. | ||
| - `<ReferenceManyToManyInput>` does not support server side validation. | ||
@@ -332,5 +386,5 @@ ## DataProvider Calls | ||
| - once to get the records of the associative resource (`performances` in this case), using a `getManyReference()` call | ||
| - once to get the records of the reference resource (`venues` in this case), using a `getMany()` call. | ||
| - once to get the possible values of the reference resource (`venues` in this case) to show as suggestions in the input, using a `getList()` call | ||
| - once to get the records of the associative resource (`performances` in this case), using a `getManyReference()` call | ||
| - once to get the records of the reference resource (`venues` in this case), using a `getMany()` call. | ||
| - once to get the possible values of the reference resource (`venues` in this case) to show as suggestions in the input, using a `getList()` call | ||
@@ -337,0 +391,0 @@ For instance, if the user edits the band of id `123`, `<ReferenceManyToManyInput>` first issues the following query to the `dataProvider`: |
@@ -75,18 +75,19 @@ --- | ||
| | Prop | Required | Type | Default | Description | | ||
| | -------------------- | -------- | ---------------------- | ------- |---------------------------------------------------------------------------------------------| | ||
| | `addRootButton` | Optional | `ReactNode` or `false` | - | The create button to add a root node | | ||
| | `allowMultipleRoots` | Optional | `boolean` | `false` | To allow trees with multiple roots | | ||
| | `create` | Required | `ReactNode` | - | The create form of your resource | | ||
| | `draggable` | Optional | `boolean` | `false` | To allow user to reorder nodes | | ||
| | `edit` | Required | `ReactNode` | - | The edit form of your resource | | ||
| | `hideRootNodes` | Optional | `boolean` | `false` | To hide all root nodes | | ||
| | `lazy` | Optional | `boolean` | `false` | To load children only when they are expanded | | ||
| | Prop | Required | Type | Default | Description | | ||
| | -------------------- | -------- | ---------------------- | ------- |----------------------------------------------------------------------------------------------- | | ||
| | `addRootButton` | Optional | `ReactNode` or `false` | - | The create button to add a root node | | ||
| | `allowMultipleRoots` | Optional | `boolean` | `false` | To allow trees with multiple roots | | ||
| | `create` | Required | `ReactNode` | - | The create form of your resource | | ||
| | `draggable` | Optional | `boolean` | `false` | To allow user to reorder nodes | | ||
| | `edit` | Required | `ReactNode` | - | The edit form of your resource | | ||
| | `filter` | Optional | `object` | - | The permanent filter values | | ||
| | `hideRootNodes` | Optional | `boolean` | `false` | To hide all root nodes | | ||
| | `lazy` | Optional | `boolean` | `false` | To load children only when they are expanded | | ||
| | `motion` | Optional | `boolean` | `false` | To enable [rc-tree's `<Tree>`](https://github.com/react-component/tree#tree-props) transitions | | ||
| | `nodeActions` | Optional | `ReactNode` | - | To customize the default dropdown action | | ||
| | `show` | Required | `ReactNode` | - | The show view of your resource | | ||
| | `showLine` | Optional | `boolean` | `false` | Shows a connecting line | | ||
| | `sx` | Optional | `SxProps` | - | Material UI shortcut for defining custom styles | | ||
| | `title` | Optional | `string` | - | The title to display in the `<AppBar>` | | ||
| | `titleField` | Optional | `string` | `title` | Set the record field to display in the tree | | ||
| | `nodeActions` | Optional | `ReactNode` | - | To customize the default dropdown action | | ||
| | `show` | Required | `ReactNode` | - | The show view of your resource | | ||
| | `showLine` | Optional | `boolean` | `false` | Shows a connecting line | | ||
| | `sx` | Optional | `SxProps` | - | Material UI shortcut for defining custom styles | | ||
| | `title` | Optional | `string` | - | The title to display in the `<AppBar>` | | ||
| | `titleField` | Optional | `string` | `title` | Set the record field to display in the tree | | ||
@@ -248,2 +249,17 @@ `<TreeWithDetails>` also accepts the [rc-tree](https://tree-react-component.vercel.app/) props. | ||
| ### `filter` | ||
| You can choose to permanently filter the tree to display only a sub tree. | ||
| For instance, imagine you have one `employees` resource with a `department` field, and you want to display a tree for the Finance department. Use the `filter` prop to filter the tree: | ||
| {% raw %} | ||
| ```jsx | ||
| const EmployeeList = () => <TreeWithDetails filter={{ department: 'finance' }} />; | ||
| ``` | ||
| {% endraw %} | ||
| **Note**: This only works if the filter field allows to extract a subtree with its own root node. If you use the `filter` prop to display a sparse selection of nodes (e.g. only the `male` employees), dragging nodes in this tree will not work as expected. | ||
| ## `hideRootNodes` | ||
@@ -250,0 +266,0 @@ |
| { | ||
| "name": "react-admin", | ||
| "version": "5.4.1", | ||
| "version": "5.4.2", | ||
| "description": "A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI", | ||
@@ -43,6 +43,6 @@ "files": [ | ||
| "@mui/material": "^5.15.20", | ||
| "ra-core": "^5.4.1", | ||
| "ra-i18n-polyglot": "^5.4.1", | ||
| "ra-language-english": "^5.4.1", | ||
| "ra-ui-materialui": "^5.4.1", | ||
| "ra-core": "^5.4.2", | ||
| "ra-i18n-polyglot": "^5.4.2", | ||
| "ra-language-english": "^5.4.2", | ||
| "ra-ui-materialui": "^5.4.2", | ||
| "react-hook-form": "^7.53.0", | ||
@@ -52,3 +52,3 @@ "react-router": "^6.22.0", | ||
| }, | ||
| "gitHead": "5749322de259d3e52d88edea335516c5a7bbfac2" | ||
| "gitHead": "13749ec2e120a017e3a1760a134d1394c1468e31" | ||
| } |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.11%
3033065
Dependency changes
Updatedra-core@^5.4.2
Updatedra-i18n-polyglot@^5.4.2
Updatedra-language-english@^5.4.2
Updatedra-ui-materialui@^5.4.2