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 在内部创建的

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>
);