Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the readability of the Input documentation #4278

Merged
merged 1 commit into from
Jan 13, 2020
Merged

Improve the readability of the Input documentation #4278

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 0 additions & 26 deletions docs/Inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,13 +186,11 @@ Ex. `<AutocompleteInput shouldRenderSuggestions={(val) => { return val.trim().le
`<AutocompleteInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:

{% raw %}

```jsx
<AutocompleteInput source="category" options={{
color: 'secondary',
}} />
```

{% endraw %}

**Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<AutocompleteInput>` with [`<ReferenceInput>`](#referenceinput), and leave the `choices` empty:
Expand All @@ -208,14 +206,12 @@ import { AutocompleteInput, ReferenceInput } from 'react-admin';
Lastly, would you need to override the props of the suggestions container (a `Popper` element), you can specify them using the `options.suggestionsContainerProps`. For example:

{% raw %}

```jsx
<AutocompleteInput source="category" options={{
suggestionsContainerProps: {
disablePortal: true,
}}} />
```

{% endraw %}

**Tip**: `<AutocompleteInput>` is a stateless component, so it only allows to *filter* the list of choices, not to *extend* it. If you need to populate the list of choices based on the result from a `fetch` call (and if [`<ReferenceInput>`](#referenceinput) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on material-ui `<AutoComplete>` component.
Expand Down Expand Up @@ -294,13 +290,11 @@ Ex. `<AutocompleteArrayInput shouldRenderSuggestions={(val) => { return val.trim
Lastly, `<AutocompleteArrayInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:

{% raw %}

```jsx
<AutocompleteArrayInput source="category" options={{
color: 'secondary',
}} />
```

{% endraw %}

**Tip**: Like many other inputs, `<AutocompleteArrayInput>` accept a `fullWidth` prop.
Expand All @@ -317,14 +311,12 @@ import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
If you need to override the props of the suggestions container (a `Popper` element), you can specify them using the `options.suggestionsContainerProps`. For example:

{% raw %}

```jsx
<AutocompleteArrayInput source="category" options={{
suggestionsContainerProps: {
disablePortal: true,
}}} />
```

{% endraw %}

**Tip**: `<ReferenceArrayInput>` is a stateless component, so it only allows to *filter* the list of choices, not to *extend* it. If you need to populate the list of choices based on the result from a `fetch` call (and if [`<ReferenceArrayInput>`](#referencearrayinput) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on [material-ui-chip-input](https://github.com/TeamWertarbyte/material-ui-chip-input).
Expand Down Expand Up @@ -365,7 +357,6 @@ This input does not handle `null` values. You would need the `<NullableBooleanIn
You can use the `options` prop to pass any option supported by the Material UI `Switch` components. For example, here's how to set a custom checked icon:

{% raw %}

```jsx
import { BooleanInput } from 'react-admin';
import FavoriteIcon from '@material-ui/icons/Favorite';
Expand All @@ -377,7 +368,6 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
}}
/>
```

{% endraw %}

![CustomBooleanInputCheckIcon](./img/custom-switch-icon.png)
Expand Down Expand Up @@ -463,7 +453,6 @@ However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the
Lastly, use the `options` attribute if you want to override any of Material UI's `<Checkbox>` attributes:

{% raw %}

```jsx
import { FavoriteBorder, Favorite } from '@material-ui/icons';

Expand All @@ -472,7 +461,6 @@ import { FavoriteBorder, Favorite } from '@material-ui/icons';
checkedIcon: <Favorite />
}} />
```

{% endraw %}

### Properties
Expand Down Expand Up @@ -623,11 +611,9 @@ import { PasswordInput } from 'react-admin';
**Tip**: It is possible to set the [`autocomplete` attribute](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs/autocomplete) by injecting an input props:

{% raw %}

```jsx
<PasswordInput source="password" inputProps={{ autocomplete: 'current-password' }} />
```

{% endraw %}

## `<RadioButtonGroupInput>`
Expand Down Expand Up @@ -696,13 +682,11 @@ However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the
Lastly, use the `options` attribute if you want to override any of Material UI's `<RadioButtonGroup>` attributes:

{% raw %}

```jsx
<RadioButtonGroupInput source="category" options={{
labelPosition: 'right'
}} />
```

{% endraw %}

Refer to [Material UI RadioGroup documentation](https://material-ui.com/api/radio-group) for more details.
Expand Down Expand Up @@ -793,7 +777,6 @@ import { ReferenceArrayInput, SelectArrayInput } from 'react-admin';
You can tweak how this component fetches the possible values using the `perPage`, `sort`, and `filter` props.

{% raw %}

```jsx
// by default, fetches only the first 25 values. You can extend this limit
// by setting the `perPage` prop.
Expand Down Expand Up @@ -822,7 +805,6 @@ You can tweak how this component fetches the possible values using the `perPage`
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
```

{% endraw %}

`<ReferenceArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props).
Expand Down Expand Up @@ -882,7 +864,6 @@ const CommentFilter = (props) => (
You can tweak how this component fetches the possible values using the `perPage`, `sort`, and `filter` props.

{% raw %}

```jsx
// by default, fetches only the first 25 values. You can extend this limit
// by setting the `perPage` prop.
Expand Down Expand Up @@ -911,7 +892,6 @@ You can tweak how this component fetches the possible values using the `perPage`
<SelectInput optionText="title" />
</ReferenceInput>
```

{% endraw %}

The child component may further filter results (that's the case, for instance, for `<AutocompleteInput>`). ReferenceInput passes a `setFilter` function as prop to its child component. It uses the value to create a filter for the query - by default `{ q: [searchText] }`. You can customize the mapping
Expand Down Expand Up @@ -1071,13 +1051,11 @@ Note that `translateChoice` is set to `false` when `<SelectInput>` is a child of
Lastly, use the `options` attribute if you want to override any of Material UI's `<SelectField>` attributes:

{% raw %}

```jsx
<SelectInput source="category" options={{
maxHeight: 200
}} />
```

{% endraw %}

Refer to [Material UI Select documentation](https://material-ui.com/api/select) for more details.
Expand Down Expand Up @@ -1189,11 +1167,9 @@ const choices = [
Lastly, use the `options` attribute if you want to override any of the `<Select>` attributes:

{% raw %}

```jsx
<SelectArrayInput source="category" options={{ fullWidth: true }} />
```

{% endraw %}

Refer to [the Select documentation](https://material-ui.com/api/select) for more details.
Expand Down Expand Up @@ -1672,7 +1648,6 @@ import { FormDataConsumer } from 'react-admin';
**Tip**: When using a `FormDataConsumer` you can define `subscription` prop to pass to the `react-final-form`

{% raw %}

```jsx
import { FormDataConsumer } from 'react-admin';

Expand All @@ -1689,5 +1664,4 @@ import { FormDataConsumer } from 'react-admin';
</Edit>
);
```

{% endraw %}