Skip to content

Commit 19afa64

Browse files
slax57slax57
committed
Update the documentation for version 5.11.0
1 parent 1b239e3 commit 19afa64

File tree

956 files changed

+99499
-257
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

956 files changed

+99499
-257
lines changed

‎AutocompleteArrayInput.md‎

Lines changed: 71 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -57,25 +57,26 @@ 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+
| `offline` | Optional | `ReactNode` | - | What to render when there is no network connectivity when fetching the choices |
72+
| `onChange` | Optional | `Function` | `-` | A function called with the new value, along with the selected records, when the input value changes |
73+
| `onCreate` | Optional | `Function` | `-` | A function called with the current filter value when users choose to create a new choice. |
74+
| `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}`) |
75+
| `optionValue` | Optional | `string` | `id` | Field name of record containing the value to use as input value |
76+
| `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`. |
77+
| `shouldRender Suggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. |
78+
| `suggestionLimit` | Optional | `number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
79+
| `translateChoice` | Optional | `boolean` | `true` | Whether the choices should be translated |
7980

8081

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

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

241257
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 +269,21 @@ Or, if you want to customize it just for this `<AutocompleteArrayInput>`, use th
253269
/>
254270
```
255271

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

258289
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.
@@ -293,6 +324,27 @@ const filterToQuery = searchText => ({ name_ilike: `%${searchText}%` });
293324
</ReferenceArrayInput>
294325
```
295326

327+
## `offline`
328+
329+
`<AutocompleteArrayInput>` can display a custom message when it can't fetch the choices because there is no network connectivity, thanks to the `offline` prop.
330+
331+
```jsx
332+
<ReferenceArrayInput source="tag_ids" reference="tags">
333+
<AutocompleteArrayInput offline={<span>No network, could not fetch data</span>} />
334+
</ReferenceArrayInput>
335+
```
336+
337+
You can pass either a React element or a string to the `offline` prop:
338+
339+
```jsx
340+
<ReferenceArrayInput source="tag_ids" reference="tags">
341+
<AutocompleteArrayInput offline={<span>No network, could not fetch data</span>} />
342+
</ReferenceArrayInput>
343+
<ReferenceArrayInput source="tag_ids" reference="tags">
344+
<AutocompleteArrayInput offline="No network, could not fetch data" />
345+
</ReferenceArrayInput>
346+
```
347+
296348
## `onChange`
297349

298350
Use the `onChange` prop to get notified when the input value changes.

0 commit comments

Comments
 (0)