-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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
[RFR] Add invite to create the first record when the list is empty #4065
Conversation
Very encouraging! |
e8f6fa6
to
0e63a83
Compare
Could you PR against |
@@ -28,6 +28,7 @@ Here are all the props accepted by the `<List>` component: | |||
* [`filterDefaultValues`](#filter-default-values) (the default values for `alwaysOn` filters) | |||
* [`pagination`](#pagination) | |||
* [`aside`](#aside-component) | |||
* [`emptyState`](#empty-state) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd call it empty
instead
@@ -683,6 +685,34 @@ const Aside = ({ data, ids }) => ( | |||
``` | |||
{% endraw %} | |||
|
|||
### Empty state | |||
|
|||
When there is no result, and there is no active filter, and the resource has a create page then a special page inviting the user to create the first record is displayed. Use the `emptyState` prop to modify that page, passing your custom component: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When there is no result, and there is no active filter, and the resource has a create page then a special page inviting the user to create the first record is displayed. Use the `emptyState` prop to modify that page, passing your custom component: | |
When there is no result, and there is no active filter, and the resource has a create page, react-admin displays a special page inviting the user to create the first record. | |
You can use the `emptyState` prop to replace that page by a custom component: |
``` | ||
{% endraw %} | ||
|
||
The `emptyState` component receives the same props as the `aside` prop. Read the [section above](#aside-component) to check them. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no, please repeat them - developers don't read the docs sequentially.
|
||
const EmptyState = ({ basePath }) => ( | ||
<div style={{ textAlign: 'center', margin: '1em' }}> | ||
<h1>No products available</h1> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd use resource
in the example
const resourceName = translate(`resources.${resource}.name`, { | ||
smart_count: 0, | ||
_: inflection.humanize(resource), | ||
}).toLowerCase(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't use toLowerCase
anywhere else on the naming, and I humanize
should do the trick.
> | ||
<Title title={title} defaultTitle={defaultTitle} /> | ||
|
||
const renderChildren = () => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
renderList?
Why did you close your PR? |
@fzaninotto I will open another PR targeting |
Closes #2639
<EmptyState />