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

[RFR] Replace injected elements by injected components #3262

Merged
merged 21 commits into from
May 23, 2019
Merged

[RFR] Replace injected elements by injected components #3262

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
4d3a2cc
Migrate Login to require components instead of element
djhi May 22, 2019
b91d478
Migrate buttons to require components instead of element
djhi May 22, 2019
3ef84e2
Migrate detail components to require components instead of elements
djhi May 22, 2019
e1f7e41
Migrate layout components to require components instead of elements
djhi May 22, 2019
295e922
Login: use children instead of a custom prop
djhi May 22, 2019
cb5ce09
Buttons: use JSX instead of createElement
djhi May 22, 2019
eaeb238
Detail components: use JSX instead of createElement
djhi May 22, 2019
1eb64cd
Layout components: use JSX instead of createElement
djhi May 22, 2019
db1fe50
Migrate list components to require components instead of elements
djhi May 22, 2019
943ca0d
Fix simple example
djhi May 22, 2019
4a8652b
Fix unit tests
djhi May 22, 2019
8d5c5b7
Speed up & stabilize e2e tests by blocking unsplash host in cypress
djhi May 22, 2019
d9e5fc9
Migrate form components to require components instead of elements
djhi May 22, 2019
70c1b9a
Migrate field components to require components instead of elements
djhi May 22, 2019
1c20130
Migrate input components to require components instead of elements
djhi May 22, 2019
3b58102
Update documentation & missing components
djhi May 22, 2019
c02ca55
Update documentation
djhi May 22, 2019
7c74228
Upgrade guide
djhi May 22, 2019
c880048
Fix RadioButtonGroupInput
djhi May 22, 2019
1274bab
Fix Tab component
djhi May 22, 2019
5388e1c
Proofreading Upgrade guide
fzaninotto May 23, 2019
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
5 changes: 4 additions & 1 deletion cypress/cypress.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,8 @@
"supportFile": "support/index.js",
"videosFolder": "videos",
"viewportWidth": 1280,
"viewportHeight": 720
"viewportHeight": 720,
"blacklistHosts": [
"source.unsplash.com"
]
}
2 changes: 1 addition & 1 deletion docs/Admin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ const Menu = ({ resources, onMenuClick, logout }) => (
<MenuItemLink
to="/custom-route"
primaryText="Miscellaneous"
leftIcon={<LabelIcon />}
leftIcon={LabelIcon}
onClick={onMenuClick} />
<Responsive
small={logout}
Expand Down
6 changes: 3 additions & 3 deletions docs/Authorization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const UserCreateToolbar = ({ permissions, ...props }) =>
export const UserCreate = ({ permissions, ...props }) =>
<Create {...props}>
<SimpleForm
toolbar={<UserCreateToolbar permissions={permissions} />}
toolbar={props => <UserCreateToolbar permissions={permissions} {...props} />}
defaultValue={{ role: 'user' }}
>
<TextInput source="name" validate={[required()]} />
Expand All @@ -140,7 +140,7 @@ This also works inside an `Edition` view with a `TabbedForm`, and you can hide a
{% raw %}
```jsx
export const UserEdit = ({ permissions, ...props }) =>
<Edit title={<UserTitle />} {...props}>
<Edit title={UserTitle} {...props}>
<TabbedForm defaultValue={{ role: 'user' }}>
<FormTab label="user.form.summary">
{permissions === 'admin' && <DisabledInput source="id" />}
Expand Down Expand Up @@ -173,7 +173,7 @@ const UserFilter = ({ permissions, ...props }) =>
export const UserList = ({ permissions, ...props }) =>
<List
{...props}
filters={<UserFilter permissions={permissions} />}
filters={props => <UserFilter permissions={permissions} {...props} />}
sort={{ field: 'name', order: 'ASC' }}
>
<Responsive
Expand Down
20 changes: 10 additions & 10 deletions docs/CreateEdit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const PostCreate = (props) => (
);

export const PostEdit = (props) => (
<Edit title={<PostTitle />} {...props}>
<Edit title={PostTitle} {...props}>
<SimpleForm>
<DisabledInput label="Id" source="id" />
<TextInput source="title" validate={required()} />
Expand Down Expand Up @@ -107,15 +107,15 @@ const PostTitle = ({ record }) => {
return <span>Post {record ? `"${record.title}"` : ''}</span>;
};
export const PostEdit = (props) => (
<Edit title={<PostTitle />} {...props}>
<Edit title={PostTitle} {...props}>
...
</Edit>
);
```

### Actions

You can replace the list of default actions by your own element using the `actions` prop:
You can replace the list of default actions by your own component using the `actions` prop:

```jsx
import Button from '@material-ui/core/Button';
Expand All @@ -130,7 +130,7 @@ const PostEditActions = ({ basePath, data, resource }) => (
);

export const PostEdit = (props) => (
<Edit actions={<PostEditActions />} {...props}>
<Edit actions={PostEditActions} {...props}>
...
</Edit>
);
Expand All @@ -152,7 +152,7 @@ const Aside = () => (
);

const PostEdit = props => (
<Edit aside={<Aside />} {...props}>
<Edit aside={Aside} {...props}>
...
</Edit>
```
Expand Down Expand Up @@ -218,7 +218,7 @@ const CustomToolbar = withStyles(toolbarStyles)(props => (

const PostEdit = props => (
<Edit {...props}>
<SimpleForm toolbar={<CustomToolbar />}>
<SimpleForm toolbar={CustomToolbar}>
...
</SimpleForm>
</Edit>
Expand Down Expand Up @@ -718,7 +718,7 @@ const PostCreateToolbar = props => (

export const PostCreate = (props) => (
<Create {...props}>
<SimpleForm toolbar={<PostCreateToolbar />} redirect="show">
<SimpleForm toolbar={PostCreateToolbar} redirect="show">
...
</SimpleForm>
</Create>
Expand All @@ -738,7 +738,7 @@ const PostEditToolbar = props => (

export const PostEdit = (props) => (
<Edit {...props}>
<SimpleForm toolbar={<PostEditToolbar />}>
<SimpleForm toolbar={PostEditToolbar}>
...
</SimpleForm>
</Edit>
Expand Down Expand Up @@ -811,7 +811,7 @@ const UserCreateToolbar = ({ permissions, ...props }) =>
export const UserCreate = ({ permissions, ...props }) =>
<Create {...props}>
<SimpleForm
toolbar={<UserCreateToolbar permissions={permissions} />}
toolbar={props => <UserCreateToolbar permissions={permissions} {...props} />}
defaultValue={{ role: 'user' }}
>
<TextInput source="name" validate={[required()]} />
Expand All @@ -829,7 +829,7 @@ This also works inside an `Edition` view with a `TabbedForm`, and you can hide a
{% raw %}
```jsx
export const UserEdit = ({ permissions, ...props }) =>
<Edit title={<UserTitle />} {...props}>
<Edit title={UserTitle} {...props}>
<TabbedForm defaultValue={{ role: 'user' }}>
<FormTab label="user.form.summary">
{permissions === 'admin' && <DisabledInput source="id" />}
Expand Down
4 changes: 2 additions & 2 deletions docs/Fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ const choices = [
{ id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <Chip>{record.first_name} {record.last_name}</Chip>;
<SelectField source="author_id" choices={choices} optionText={<FullNameField />}/>
<SelectField source="author_id" choices={choices} optionText={FullNameField}/>
```

The current choice is translated by default, so you can use translation identifiers as choices:
Expand Down Expand Up @@ -619,7 +619,7 @@ And if you want to allow users to paginate the list, pass a `<Pagination>` compo
```jsx
import { Pagination } from 'react-admin';

<ReferenceManyField pagination={<Pagination />} reference="comments" target="post_id">
<ReferenceManyField pagination={Pagination} reference="comments" target="post_id">
...
</ReferenceManyField>
```
Expand Down
8 changes: 4 additions & 4 deletions docs/Inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import React from 'react';
import { Edit, DisabledInput, LongTextInput, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';

export const PostEdit = (props) => (
<Edit title={<PostTitle />} {...props}>
<Edit title={PostTitle} {...props}>
<SimpleForm>
<DisabledInput source="id" />
<ReferenceInput label="User" source="userId" reference="users">
Expand Down Expand Up @@ -433,7 +433,7 @@ const choices = [
{ id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
<CheckboxGroupInput source="gender" choices={choices} optionText={<FullNameField />}/>
<CheckboxGroupInput source="gender" choices={choices} optionText={FullNameField}/>
```

The choices are translated by default, so you can use translation identifiers as choices:
Expand Down Expand Up @@ -685,7 +685,7 @@ const choices = [
{ id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
<RadioButtonGroupInput source="gender" choices={choices} optionText={<FullNameField />}/>
<RadioButtonGroupInput source="gender" choices={choices} optionText={FullNameField}/>
```

The choices are translated by default, so you can use translation identifiers as choices:
Expand Down Expand Up @@ -1001,7 +1001,7 @@ const choices = [
{ id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
<SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>
<SelectInput source="gender" choices={choices} optionText={FullNameField}/>
```

Enabling the `allowEmpty` props adds an empty choice (with a default `null` value, which you can overwrite with the `emptyValue` prop) on top of the options, and makes the value nullable:
Expand Down
Loading