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

Fix docs JSX samples. #3936

Merged
merged 1 commit into from
Nov 5, 2019
Merged

Fix docs JSX samples. #3936

Show file tree
Hide file tree
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
34 changes: 17 additions & 17 deletions docs/Inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ Ex. `<AutocompleteInput shouldRenderSuggestions={(val) => { return val.trim().le
**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:

```jsx
import { AutocompleteInput, ReferenceInput } from 'react-admin'
import { AutocompleteInput, ReferenceInput } from 'react-admin';

<ReferenceInput label="Post" source="post_id" reference="posts">
<AutocompleteInput optionText="title" />
Expand All @@ -197,7 +197,7 @@ Lastly, would you need to override the props of the suggestions container (a `Po
<AutocompleteInput source="category" options={{
suggestionsContainerProps: {
disablePortal: true,
}} />
}}} />
```
{% endraw %}

Expand Down Expand Up @@ -288,7 +288,7 @@ Lastly, `<AutocompleteArrayInput>` renders a [material-ui-chip-input](https://gi
**Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<AutocompleteArrayInput>` with [`<ReferenceArrayInput>`](#referenceinput), and leave the `choices` empty:

```jsx
import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin'
import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';

<ReferenceArrayInput label="Tags" reference="tags" source="tags">
<AutocompleteArrayInput />
Expand All @@ -302,7 +302,7 @@ If you need to override the props of the suggestions container (a `Popper` eleme
<AutocompleteArrayInput source="category" options={{
suggestionsContainerProps: {
disablePortal: true,
}} />
}}} />
```
{% endraw %}

Expand Down Expand Up @@ -636,7 +636,7 @@ Refer to [Material UI RadioGroup documentation](https://material-ui.com/api/radi
**Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<RadioButtonGroupInput>` with [`<ReferenceInput>`](#referenceinput), and leave the `choices` empty:

```jsx
import { RadioButtonGroupInput, ReferenceInput } from 'react-admin'
import { RadioButtonGroupInput, ReferenceInput } from 'react-admin';

<ReferenceInput label="Author" source="author_id" reference="authors">
<RadioButtonGroupInput optionText="last_name" />
Expand Down Expand Up @@ -671,8 +671,8 @@ This means you can use `<ReferenceArrayInput>` with [`<SelectArrayInput>`](#sele

The component expects a `source` and a `reference` attributes. For instance, to make the `tag_ids` for a `post` editable:

```js
import { ReferenceArrayInput, SelectArrayInput } from 'react-admin'
```jsx
import { ReferenceArrayInput, SelectArrayInput } from 'react-admin';

<ReferenceArrayInput source="tag_ids" reference="tags">
<SelectArrayInput optionText="name" />
Expand All @@ -683,7 +683,7 @@ import { ReferenceArrayInput, SelectArrayInput } from 'react-admin'

**Note**: You **must** add a `<Resource>` for the reference resource - react-admin needs it to fetch the reference data. You can omit the list prop in this reference if you want to hide it in the sidebar menu.

```js
```jsx
<Admin dataProvider={myDataProvider}>
<Resource name="posts" list={PostList} edit={PostEdit} />
<Resource name="tags" />
Expand All @@ -693,8 +693,8 @@ import { ReferenceArrayInput, SelectArrayInput } from 'react-admin'
Set the `allowEmpty` prop when you want to add an empty choice with a value of null in the choices list.
Disabling `allowEmpty` does not mean that the input will be required. If you want to make the input required, you must add a validator as indicated in [Validation Documentation](./CreateEdit.md#validation). Enabling the `allowEmpty` props just adds an empty choice (with `null` value) on top of the options, and makes the value nullable.

```js
import { ReferenceArrayInput, SelectArrayInput } from 'react-admin'
```jsx
import { ReferenceArrayInput, SelectArrayInput } from 'react-admin';

<ReferenceArrayInput source="tag_ids" reference="tags" allowEmpty>
<SelectArrayInput optionText="name" />
Expand All @@ -706,7 +706,7 @@ import { ReferenceArrayInput, SelectArrayInput } from 'react-admin'
You can tweak how this component fetches the possible values using the `perPage`, `sort`, and `filter` props.

{% raw %}
```js
```jsx
// by default, fetches only the first 25 values. You can extend this limit
// by setting the `perPage` prop.
<ReferenceArrayInput
Expand Down Expand Up @@ -745,7 +745,7 @@ This means you can use `<ReferenceInput>` with any of [`<SelectInput>`](#selecti
The component expects a `source` and a `reference` attributes. For instance, to make the `post_id` for a `comment` editable:

```jsx
import { ReferenceInput, SelectInput } from 'react-admin'
import { ReferenceInput, SelectInput } from 'react-admin';

<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="title" />
Expand All @@ -769,7 +769,7 @@ Set the `allowEmpty` prop when you want to add an empty choice with a value of n
Disabling `allowEmpty` does not mean that the input will be required. If you want to make the input required, you must add a validator as indicated in [Validation Documentation](./CreateEdit.md#validation). Enabling the `allowEmpty` props just adds an empty choice (with `null` value) on top of the options, and makes the value nullable.

```jsx
import { ReferenceInput, SelectInput } from 'react-admin'
import { ReferenceInput, SelectInput } from 'react-admin';

<ReferenceInput label="Post" source="post_id" reference="posts" allowEmpty>
<SelectInput optionText="title" />
Expand Down Expand Up @@ -875,7 +875,7 @@ You can customize the rich text editor toolbar using the `toolbar` attribute, as

If you need more customization, you can access the quill object through the `configureQuill` callback that will be called just after its initialization.

```js
```jsx
const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
this.quill.format('bold', value)
});
Expand Down Expand Up @@ -974,7 +974,7 @@ Refer to [Material UI Select documentation](https://material-ui.com/api/select)
**Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<SelectInput>` with [`<ReferenceInput>`](#referenceinput), and leave the `choices` empty:

```jsx
import { SelectInput, ReferenceInput } from 'react-admin'
import { SelectInput, ReferenceInput } from 'react-admin';

<ReferenceInput label="Author" source="author_id" reference="authors">
<SelectInput optionText="last_name" />
Expand Down Expand Up @@ -1013,7 +1013,7 @@ const choices = [

To let users choose several values in a list using a dropdown, use `<SelectArrayInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select). Set the `choices` attribute to determine the options (with `id`, `name` tuples):

```js
```jsx
import { SelectArrayInput } from 'react-admin';

<SelectArrayInput label="Tags" source="categories" choices={[
Expand Down Expand Up @@ -1063,7 +1063,7 @@ const choices = [
Lastly, use the `options` attribute if you want to override any of the `<Select>` attributes:

{% raw %}
```js
```jsx
<SelectArrayInput source="category" options={{ fullWidth: true }} />
```
{% endraw %}
Expand Down
6 changes: 3 additions & 3 deletions docs/List.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -881,7 +881,7 @@ const postRowClick = (id, basePath, record) => fetchUserRights().then(({ canEdit
To show more data from the resource without adding too many columns, you can show data in an expandable panel below the row on demand, using the `expand` prop. For instance, this code shows the `body` of a post in an expandable panel:

{% raw %}
```js
```jsx
const PostPanel = ({ id, record, resource }) => (
<div dangerouslySetInnerHTML={{ __html: record.body }} />
);
Expand All @@ -906,7 +906,7 @@ The `expand` prop expects an component as value. When the user chooses to expand

**Tip**: Since the `expand` element receives the same props as a detail view, you can actually use a `<Show>` view as component for the `expand` prop:

```js
```jsx
const PostShow = props => (
<Show
{...props}
Expand Down Expand Up @@ -936,7 +936,7 @@ The result will be the same as in the previous snippet, except that `<Show>` enc

**Tip**: You can go one step further and use an `<Edit>` view as `expand` component, albeit with a twist:

```js
```jsx
const PostEdit = props => (
<Edit
{...props}
Expand Down