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.

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

Fix <RadioButtonGroupInput options> prop was ignored #8299

Merged
merged 25 commits into from
Oct 25, 2022
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
d79a739
[Doc] Improve SelectInput docs
fzaninotto Oct 24, 2022
c423ce5
Improve RadioButtonGroupInput doc
fzaninotto Oct 24, 2022
7e864f6
Improve AutocompleteInput docs
fzaninotto Oct 24, 2022
c4ad534
Update AutocompleteInput illustration
fzaninotto Oct 24, 2022
9daef72
Merge branch 'master' into doc-inputs
fzaninotto Oct 24, 2022
8e8694d
Add useInput chapter
fzaninotto Oct 24, 2022
5c226f0
Add input component zoo
fzaninotto Oct 24, 2022
790e4c2
Tweak AutocompleteInput custom element tutorial
fzaninotto Oct 24, 2022
9760c32
Improve ReferenceInput documentation
fzaninotto Oct 24, 2022
e72205d
Fix DualListInput doc
fzaninotto Oct 24, 2022
786dba6
Add relationship explanation to ReferenceInput
fzaninotto Oct 24, 2022
70a2ff7
Improve ReferenceInput doc again
fzaninotto Oct 24, 2022
d945e59
final tweaks
fzaninotto Oct 24, 2022
27ad173
Update docs/RadioButtonGroupInput.md
fzaninotto Oct 25, 2022
e105e68
Update docs/RadioButtonGroupInput.md
fzaninotto Oct 25, 2022
f77aade
Add defaultValue
fzaninotto Oct 25, 2022
b612f40
Update docs/RadioButtonGroupInput.md
fzaninotto Oct 25, 2022
224676c
Update docs/Inputs.md
fzaninotto Oct 25, 2022
7dfdce4
Update docs/useInput.md
fzaninotto Oct 25, 2022
b57fb86
Update docs/ReferenceInput.md
fzaninotto Oct 25, 2022
9233142
Update docs/ReferenceInput.md
fzaninotto Oct 25, 2022
5feb550
Update docs/SelectInput.md
fzaninotto Oct 25, 2022
5a20c29
Update docs/AutocompleteInput.md
fzaninotto Oct 25, 2022
1ea0ee1
Update docs/AutocompleteInput.md
fzaninotto Oct 25, 2022
4e104b2
Update docs/AutocompleteInput.md
fzaninotto Oct 25, 2022
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
450 changes: 341 additions & 109 deletions docs/AutocompleteInput.md

Large diffs are not rendered by default.

14 changes: 8 additions & 6 deletions docs/DualListInput.md
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
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