review

Author: slax57

docs_headless/astro.config.mjs

@@ -176,6 +176,8 @@ export default defineConfig({
                     label: 'Inputs',
                     items: [
                         'inputs',
+                        'referenceinputbase',
+                        'referencearrayinputbase',
                         'referencemanyinputbase',
                         'referencemanytomanyinputbase',
                         'referenceoneinputbase',

docs_headless/src/content/docs/ReferenceArrayInputBase.md

@@ -97,7 +97,7 @@ dataProvider.getList('tags', {
 });
 ```
 
-`<ReferenceArrayInputBase>` handles the data fetching and provides the choices through a [`ChoicesContext`](./usechoicescontext). It's up to the child components to render the selection interface.
+`<ReferenceArrayInputBase>` handles the data fetching and provides the choices through a [`ChoicesContext`](./useChoicesContext.md). It's up to the child components to render the selection interface.
 
 You can tweak how `<ReferenceArrayInputBase>` fetches the possible values using the `page`, `perPage`, `sort`, and `filter` props.
 
@@ -108,6 +108,7 @@ You can tweak how `<ReferenceArrayInputBase>` fetches the possible values using
 | `source`           | Required | `string`                                    | -                                | Name of the entity property to use for the input value                                                                |
 | `reference`        | Required | `string`                                    | ''                                 | Name of the reference resource, e.g. 'tags'.                                                                       |
 | `children`         | Required | `ReactNode`                                 | -                                | The actual selection component                                                                                   |
+| `render`           | Optional | `(context) => ReactNode`                    | -                                | Function that takes the choices context and renders the selection interface                    |
 | `enableGetChoices` | Optional | `({q: string}) => boolean`                  | `() => true`                       | Function taking the `filterValues` and returning a boolean to enable the `getList` call.                           |
 | `filter`           | Optional | `Object`                                    | `{}`                               | Permanent filters to use for getting the suggestion list                                                            |
 | `offline`          | Optional | `ReactNode`                                 | -                                  | What to render when there is no network connectivity when loading the record |
@@ -170,6 +171,44 @@ export const MyReferenceArrayInput = () => (
 );
 ```
 
+## `render`	
+
+Alternatively, you can pass a `render` function prop instead of children. This function will receive the `ChoicesContext` as argument.	
+
+```jsx	
+export const MyReferenceArrayInput = () => (	
+    <ReferenceArrayInputBase	
+        source="tag_ids"	
+        reference="tags"	
+        render={({ choices, isLoading, error }) => {	
+            if (isLoading) {	
+                return <div>Loading...</div>;	
+            }	
+
+            if (error) {	
+                return (	
+                    <div className="error">	
+                        {error.message}	
+                    </div>	
+                );	
+            }	
+
+            return (	
+                <select multiple>	
+                    {choices.map(choice => (	
+                        <option key={choice.id} value={choice.id}>	
+                            {choice.name}	
+                        </option>
+                    ))}	
+                </select>	
+            );	
+        }}	
+    />	
+);	
+```	
+
+The `render` function prop will take priority on `children` props if both are set.
+
 ## `enableGetChoices`
 
 You can make the `getList()` call lazy by using the `enableGetChoices` prop. This prop should be a function that receives the `filterValues` as parameter and return a boolean. This can be useful when using a search input on a resource with a lot of data. The following example only starts fetching the options when the query has at least 2 characters:

docs_headless/src/content/docs/ReferenceInputBase.md

@@ -87,7 +87,7 @@ dataProvider.getList('companies', {
 });
 ```
 
-`<ReferenceInputBase>` handles the data fetching and provides the choices through a [`ChoicesContext`](./usechoicescontext). It's up to the child components to render the selection interface.
+`<ReferenceInputBase>` handles the data fetching and provides the choices through a [`ChoicesContext`](./useChoicesContext.md). It's up to the child components to render the selection interface.
 
 You can tweak how `<ReferenceInputBase>` fetches the possible values using the `page`, `perPage`, `sort`, and `filter` props.
 
@@ -115,7 +115,7 @@ You can access the choices context using the `useChoicesContext` hook.
 import { ReferenceInputBase, useChoicesContext, useInput } from 'ra-core';
 
 export const CustomSelector = () => {
-    const { allChoices, isLoading, error, source } = useChoicesContext();
+    const { allChoices, isPending, error, source } = useChoicesContext();
     const { field, id } = useInput({ source });
 
     if (error) {

docs_headless/src/content/docs/useChoicesContext.md

@@ -4,7 +4,7 @@ title: "useChoicesContext"
 
 The [`<ReferenceInputBase>`](./ReferenceInputBase.md) and [`<ReferenceArrayInputBase>`](./ReferenceArrayInputBase.md) components create a `ChoicesContext` to store the choices, as well as filters, pagination, sort state, and callbacks to update them.
 
-The `ChoicesContext` is very similar to the [`ListContext`](./uselistcontext) with the exception that it does not return a `data` property but 3 choices related properties:
+The `ChoicesContext` is very similar to the [`ListContext`](./useListContext.md) with the exception that it does not return a `data` property but 3 choices related properties:
 
 - `availableChoices`: The choices that are not selected but match the parameters (sorting, pagination and filters)
 - `selectedChoices`: The selected choices.