[Doc] Improve ListActions override

[WiXSL]

Implements #6212

[djhi]

👍 Maybe we should do the same for the other action components as well.

[fzaninotto]

Thanks for your patch. However, I'm not comfortable with this change, and for 2 reasons:

• it creates 2 ways to do one simple thing. This is confusing, which way should a developer use and why?
• your API "hides" that some other buttons are included. I think that will lead to WTF moments for developers.

Overall, I don't think we should implement that.

[WiXSL]

Ok, how about moving the logic of the Actions components to hooks, so you always override the actions prop like now, but having control over default actions by calling these hooks (or not).

Example:

import Button from '@material-ui/core/Button';
import { TopToolbar, Edit, useEditActions } from 'react-admin';

const PostEditActions = (props) => {
     const DefaultActions = useEditActions(props);

    return (
      <TopToolbar>
          <DefaultActions/> 
          {/* Add your custom actions */}
          <Button 
                color="primary"
                onClick={() => { alert('Your custom action'); }}
          >
                Custom Action
          </Button>
      </TopToolbar>
    );
};

export const PostEdit = (props) => (
    <Edit actions={<PostEditActions />} {...props}>
        ...
    </Edit>
);

[WiXSL]

@fzaninotto,
What do you think of this idea?

[djhi]

Why a hook here? We could just have a component rendering a fragment with the default actions right?

[WiXSL]

You are right.
So is it ok to continue with this implementation, using a component instead of a hook?

[fzaninotto]

When I think about it, only the <ListActions> are hard to override. Maybe this is where we should do the change.

First, the documentation could be simplified since we now use the various context:

const ListActions = (props) => {
    const {
        className,
-       exporter,
-       filters,
-       maxResults,
        ...rest
    } = props;
    const {
-       currentSort,
-       resource,
-       displayedFilters,
-       filterValues,
-       hasCreate,
-       basePath,
-       selectedIds,
-       showFilter,
        total,
    } = useListContext();
    return (
        <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
-           {filters && cloneElement(filters, {
-               resource,
-               showFilter,
-               displayedFilters,
-               filterValues,
-               context: 'button',
-           })}
+           {cloneElement(filters, { context: 'button' })}
-           <CreateButton basePath={basePath} />
+           <CreateButton />
-           <ExportButton
-               disabled={total === 0}
-               resource={resource}
-               sort={currentSort}
-               filterValues={filterValues}
-               maxResults={maxResults}
-           />
+           <ExportButton disabled={total === 0} maxResults={maxResults} />
            {/* Add your custom actions */}
            <Button
                onClick={() => { alert('Your custom action'); }}
                label="Show calendar"
            >
                <IconEvent />
            </Button>
        </TopToolbar>
    );
};

For a simpler use case, the doc is even simpler:

const ListActions = () => (
    <TopToolbar >
        {cloneElement(filters, { context: 'button' })}
        <CreateButton />
        <ExportButton />
        {/* Add your custom actions */}
        <Button
            onClick={() => { alert('Your custom action'); }}
            label="Show calendar"
        >
            <IconEvent />
        </Button>
    </TopToolbar>
);

I think this is simple enough that we don't have to introduce a new component for that.

[WiXSL]

So, I should revert everything and only update the documentation?

[djhi]

Thanks!

[fzaninotto]

Thanks!