Skip to content

Commit 34b2b8a

Browse files
MadeorskMadeorsk
committed
Document the newly allowed property types.
1 parent cf53a23 commit 34b2b8a

File tree

4 files changed

+154
-64
lines changed

4 files changed

+154
-64
lines changed

‎docs/AutocompleteArrayInput.md‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -57,25 +57,25 @@ The form value for the source must be an array of the selected values, e.g.
5757

5858
## Props
5959

60-
| Prop | Required | Type | Default | Description |
61-
|----------------------------|----------|-----------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
62-
| `choices` | Required | `Object[]` | - | List of choices |
63-
| `create` | Optional | `Element` | `-` | A React Element to render when users want to create a new choice |
64-
| `createLabel` | Optional | `string` | - | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty. |
65-
| `createItemLabel` | Optional | `string` | `ra.action .create_item` | The label for the menu item allowing users to create a new choice. Used when the filter is not empty. |
66-
| `debounce` | Optional | `number` | `250` | The delay to wait before calling the setFilter function injected when used in a ReferenceArray Input. |
67-
| `emptyValue` | Optional | `any` | `''` | The value to use for the empty element |
68-
| `filterToQuery` | Optional | `string` => `Object` | `q => ({ q })` | How to transform the searchText into a parameter for the data provider |
69-
| `inputText` | Optional | `Function` | `-` | Required if `optionText` is a custom Component, this function must return the text displayed for the current selection. |
70-
| `matchSuggestion` | Optional | `Function` | `-` | Required if `optionText` is a React element. Function returning a boolean indicating whether a choice matches the filter. `(filter, choice) => boolean` |
71-
| `onChange` | Optional | `Function` | `-` | A function called with the new value, along with the selected records, when the input value changes |
72-
| `onCreate` | Optional | `Function` | `-` | A function called with the current filter value when users choose to create a new choice. |
73-
| `optionText` | Optional | `string` | `Function` | `Component` | `name` | Field name of record to display in the suggestion item or function which accepts the correct record as argument (`(record)=> {string}`) |
74-
| `optionValue` | Optional | `string` | `id` | Field name of record containing the value to use as input value |
75-
| `setFilter` | Optional | `Function` | `null` | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically set up when using `ReferenceArray Input`. |
76-
| `shouldRender Suggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. |
77-
| `suggestionLimit` | Optional | `number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
78-
| `translateChoice` | Optional | `boolean` | `true` | Whether the choices should be translated |
60+
| Prop | Required | Type | Default | Description |
61+
|----------------------------|----------|-------------------------------------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
62+
| `choices` | Required | `Object[]` | - | List of choices |
63+
| `create` | Optional | `Element` | `-` | A React Element to render when users want to create a new choice |
64+
| `createLabel` | Optional | `string` | `ReactNode` | - | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty. |
65+
| `createItemLabel` | Optional | `string` | `(filter: string) => ReactNode` | `ra.action .create_item` | The label for the menu item allowing users to create a new choice. Used when the filter is not empty. |
66+
| `debounce` | Optional | `number` | `250` | The delay to wait before calling the setFilter function injected when used in a ReferenceArray Input. |
67+
| `emptyValue` | Optional | `any` | `''` | The value to use for the empty element |
68+
| `filterToQuery` | Optional | `string` => `Object` | `q => ({ q })` | How to transform the searchText into a parameter for the data provider |
69+
| `inputText` | Optional | `Function` | `-` | Required if `optionText` is a custom Component, this function must return the text displayed for the current selection. |
70+
| `matchSuggestion` | Optional | `Function` | `-` | Required if `optionText` is a React element. Function returning a boolean indicating whether a choice matches the filter. `(filter, choice) => boolean` |
71+
| `onChange` | Optional | `Function` | `-` | A function called with the new value, along with the selected records, when the input value changes |
72+
| `onCreate` | Optional | `Function` | `-` | A function called with the current filter value when users choose to create a new choice. |
73+
| `optionText` | Optional | `string` | `Function` | `Component` | `name` | Field name of record to display in the suggestion item or function which accepts the correct record as argument (`(record)=> {string}`) |
74+
| `optionValue` | Optional | `string` | `id` | Field name of record containing the value to use as input value |
75+
| `setFilter` | Optional | `Function` | `null` | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically set up when using `ReferenceArray Input`. |
76+
| `shouldRender Suggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. |
77+
| `suggestionLimit` | Optional | `number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
78+
| `translateChoice` | Optional | `boolean` | `true` | Whether the choices should be translated |
7979

8080

8181
`<AutocompleteArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -236,6 +236,21 @@ You can use the `createLabel` prop to render an additional (disabled) menu item
236236
/>
237237
```
238238

239+
You can also use any React node as the create label.
240+
241+
```jsx
242+
<AutocompleteArrayInput
243+
source="roles"
244+
choices={choices}
245+
create={<CreateRole />}
246+
createLabel={
247+
<Typography className="custom">
248+
Start typing to create a new <strong>role</strong>
249+
</Typography>
250+
}
251+
/>
252+
```
253+
239254
## `createItemLabel`
240255

241256
If you set the `create` or `onCreate` prop, `<AutocompleteArrayInput>` lets users create new options. When the text entered by the user doesn't match any option, the input renders a "Create XXX" menu item at the bottom of the list.
@@ -253,6 +268,21 @@ Or, if you want to customize it just for this `<AutocompleteArrayInput>`, use th
253268
/>
254269
```
255270

271+
You can also define a function returning any rendered React node.
272+
273+
```jsx
274+
<AutocompleteArrayInput
275+
source="roles"
276+
choices={choices}
277+
create={<CreateRole />}
278+
createItemLabel={item => (
279+
<Typography className="custom">
280+
Create <Chip label={item} />
281+
</Typography>
282+
)}
283+
/>
284+
```
285+
256286
## `debounce`
257287

258288
When used inside a [`<ReferenceArrayInput>`](./ReferenceArrayInput.md), `<AutocompleteArrayInput>` will call `dataProvider.getList()` with the current input value as filter after a delay of 250ms. This is to avoid calling the API too often while users are typing their query.

0 commit comments

Comments
 (0)