react-admin: как настроить массовые действия

#reactjs #react-admin

#reactjs #react-admin

Вопрос:

Я хотел бы отключить некоторый флажок, созданный пользовательской кнопкой 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')}
      />
  );
};
  

На самом деле записи, которые имеют a invoiceDate , не должны проверяться в первую очередь. Но флажки создаются внутри react-admin Я не нахожу никакой документации о том, как применить некоторые фильтры для включения / отключения флажков или, если это вообще возможно.

Ответ №1:

На основе этой документации https://marmelab.com/react-admin/List.html#isrowselectable вы можете использовать isRowSelectable prop для Datagrid компонента, чтобы выбрать, можно ли выбирать строку для массовых действий. Вы получаете доступ к записи там, чтобы вы могли принять решение на основе ваших данных:

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

Комментарии:

1. Добро пожаловать 🙂 Документы react-admin действительно хороши и очень обширны, но иногда вы не будете уверены, где искать, пока не прочитаете их много 🙂

2. Точно 🙂 Иногда вы теряетесь в этом. Но в последнее время они отлично работают и значительно улучшают как документацию, так и фреймворк. Еще раз спасибо 🙂

3. К вашему сведению, приведенная выше ссылка больше не действует. Похоже, что он был перемещен в: marmelab.com/react-admin/Datagrid.html#isrowselectable