react-admin：如何自定义批量操作

Question

我想禁用一些由自定义 BulkActionsButton 创建的复选框。这是一个简单的列表：

function CourseList(props): ReactElement {
  return (
    <List
      {...props}
      bulkActionButtons={<BulkActionButton />}
    >
      <Datagrid>
         ...some fields
      </Datagrid>
    </List>
  );
}

和 BulkActionButton:

const BulkActionButton = ({
  resource,
  selectedIds,
}: BulkActionProps): ReactElement | null => {
  const { data, loading } = useGetMany(
    'shared/courses',
    selectedIds as Identifier[]
  );

  if (!data || loading) {
    return null;
  }

  const someHasBeenPaid = data.some((course) => !!course?.invoiceDate);

  return (
      <Button
        color="secondary"
        disabled={someHasBeenPaid}
        label={t('@app.manager.clientDepartment.invoiceCTA')}
      />
  );
};

其实有invoiceDate的记录不应该首先检查。但是复选框是由 react-admin 在内部创建的我没有找到任何关于如何将一些过滤器应用于 enable/disabled 复选框或者是否可能的文档。

Answer 1

根据此文档https://marmelab.com/react-admin/List.html#isrowselectable，您可以在 Datagrid 组件上使用 isRowSelectable 属性来选择是否可以为批量操作选择一行。您可以访问那里的记录，以便根据您的数据做出决定：

export const RecordList = props => (
    <List {...props}>
        <Datagrid isRowSelectable={ record => !record.invoiceDate }>
            ...
        </Datagrid>
    </List>
);

react-admin：如何自定义批量操作

react-admin: how to customise the bulk actions

reactjs

react-admin