Skip to content

Commit

Permalink
Merge pull request #8299 from marmelab/doc-inputs
Browse files Browse the repository at this point in the history 
Fix `<RadioButtonGroupInput options>` prop was ignored
  • Loading branch information
@fzaninotto
fzaninotto authored Oct 25, 2022
2 parents 520a59c + 4e104b2 commit 4a44316
Show file tree
Hide file tree
Showing 17 changed files with 1,137 additions and 285 deletions.
449 changes: 340 additions & 109 deletions docs/AutocompleteInput.md
View file

Large diffs are not rendered by default.

14 changes: 8 additions & 6 deletions docs/DualListInput.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@ title: "The DualListInput Component"

# `<DualListInput>`

This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component allows to edit array values, one-to-many or many-to-many relationships by moving items from one list to another. It's a good alternative to `<SelectInput>` for a small number of choices.
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component allows to edit array values, one-to-many or many-to-many relationships by moving items from one list to another. It's a good alternative to [`<SelectArrayInput>`](./SelectArrayInput.md) for a small number of choices.

![DualListInput](https://marmelab.com/ra-enterprise/modules/assets/ra-relationships-duallistinput.gif)

## Usage

```jsx
import { ReferenceInput } from 'react-admin';
import { DualListInput } from '@react-admin/ra-relationships';
import { ReferenceArrayInput } from "react-admin";
import { DualListInput } from "@react-admin/ra-relationships";

<ReferenceInput label="Author" source="author_id" reference="authors">
<DualListInput optionText="last_name" />
</ReferenceInput>
<ReferenceArrayInput label="Authors" source="authors_ids" reference="authors">
<DualListInput optionText="last_name" />
</ReferenceArrayInput>;
```

Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/modules/ra-relationships) for more details.
32 changes: 30 additions & 2 deletions docs/Inputs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Input components are usually wrappers around MUI form components, bound to the c

Input components must be used inside a Form element (e.g. [`<Form>`](./Form.md), [`<SimpleForm>`](./SimpleForm.md), [`<TabbedForm>`](./TabbedForm.md)). These components create a [`react-hook-form`](https://react-hook-form.com/) form and context.

They require a `source` property.
Input components require a `source` prop.

```jsx
import { Edit, SimpleForm, ReferenceInput, SelectInput, TextInput, required } from 'react-admin';
Expand Down Expand Up @@ -54,7 +54,35 @@ All input components accept the following props:

React-admin uses [react-hook-form](https://react-hook-form.com/) to control form inputs. Each input component also accepts all react-hook-form [useController](https://react-hook-form.com/api/usecontroller) hook options.

Additional props are passed down to the underlying component (usually an MUI component). For instance, when setting the `variant` prop on a `TextInput` component, the underlying MUI `<TextField>` receives it, and renders it with a different variant. Refer to the documentation of each Input component to see the underlying MUI component and its props.
Additional props are passed down to the underlying component (usually an MUI component). For instance, when setting the `variant` prop on a `<TextInput>` component, the underlying MUI `<TextField>` receives it, and renders it with a different variant. Refer to the documentation of each Input component to see the underlying MUI component and its props.

## Which Input Component to Use?

React-admin provides a set of Input components, each one designed for a specific data type. Here is a list of the most common ones:

| Data Type | Example value | Input Components |
|-----------------------|--------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| String | `'Lorem Ipsum'` | [`<TextInput>`](./TextInput.md) |
| Rich text | `<p>Lorem Ipsum</p>` | [`<RichTextInput>`](./RichTextInput.md) |
| Markdown | `# Lorem Ipsum` | [`<MarkdownInput>`](./MarkdownInput.md) |
| Password | `'********'` | [`<PasswordInput>`](./PasswordInput.md) |
| Image URL | `'https://example.com/image.png'` | [`<ImageInput>`](./ImageInput.md) |
| File URL | `'https://example.com/file.pdf'` | [`<FileInput>`](./FileInput.md) |
| Number | `42`, `1.345` | [`<NumberInput>`](./NumberInput.md) |
| Boolean | `true` | [`<BooleanInput>`](./BooleanInput.md), [`<NullableBooleanInput>`](./NullableBooleanInput.md) |
| Date | `'2022-10-23'` | [`<DateInput>`](./DateInput.md) |
| Time | `'14:30:00'` | [`<TimeInput>`](./TimeInput.md) |
| Date & time | `'2022-10-24T19:40:28.003Z'` | [`<DateTimeInput>`](./DateTimeInput.md) |
| Object | `{ foo: 'bar' }` | All inputs (see [ `source`](#source)) |
| Enum | `'foo'` | [`<SelectInput>`](./SelectInput.md), [`<AutocompleteInput>`](./AutocompleteInput.md), [`<RadioButtonGroupInput>`](./RadioButtonGroupInput.md) |
| Foreign key | `42` | [`<ReferenceInput>`](./ReferenceInput.md) |
| Array of objects | `[{ item: 'jeans', qty: 3 }, { item: 'shirt', qty: 1 }]` | [`<ArrayInput>`](./ArrayInput.md) |
| Array of Enums | `['foo', 'bar']` | [`<SelectArrayInput>`](./SelectArrayInput.md), [`<AutocompleteArrayInput>`](./AutocompleteArrayInput.md), [`<CheckboxGroupInput>`](./CheckboxGroupInput.md), [`<DualListInput>`](./DualListInput.md) |
| Array of foreign keys | `[42, 43]` | [`<ReferenceArrayInput>`](./ReferenceArrayInput.md) |
| Translations | `{ en: 'Hello', fr: 'Bonjour' }` | [`<TranslatableInputs>`](./TranslatableInputs.md) |
| Related records | `[{ id: 42, title: 'Hello' }, { id: 43, title: 'World' }]` | [`<ReferenceManyInput>`](./ReferenceManyInput.md), [`<ReferenceManyToManyInput>`](./ReferenceManyToManyInput.md) |



## `className`

Expand Down
Loading

0 comments on commit 4a44316

Please sign in to comment.