response-admin - условный цвет ChipField в представлении списка

Question

Я пытаюсь условно отобразить компонент ChipField в виде списка react-admin. Это похоже на Как вы условно отображаете поля в компоненте «Показать» в реакции-администратора? , но для списка, и я не нашел рабочего способа при использовании списка.

import React from 'react';
import { ChipField, Datagrid, ImageField, List, ListController, TextField } from 'react-admin';
import { ListProps } from '../../types/admin/ListProps';
import ProductBulkActionButtons from './ProductBulkActionButtons';

const ProductList = (props: ListProps): JSX.Element => {
  console.debug('ProductList.props', props);
  return (
    <ListController {...props}>
      {(controllerProps) => {
        console.debug('ProductList.controllerProps', controllerProps);
        return (
          <List
            {...props}
            {...controllerProps}
            sort={{
              field: 'titleEN',
              order: 'DESC',
            }}
            bulkActionButtons={<ProductBulkActionButtons />}
          >
            <Datagrid rowClick="edit">
              <ImageField source={'images[0].url'} title={'images[0]title'} label={'Image'} />
              <TextField source="titleEN" label={'Title (EN)'} />
              <TextField source="titleFR" label={'Title (FR)'} />
              {/*<ArrayField source="images"><SingleFieldList><ChipField source="id" /></SingleFieldList></ArrayField>*/}
              {/*<ReferenceArrayField source="imagesIds" reference="images"><TextField source="id" /></ReferenceArrayField>*/}
              <TextField source="customer.label" label={'Customer'} />
              <TextField source="price" />
              <ChipField source="status" color={'primary'} />
            </Datagrid>
          </List>
        );
      }}
    </ListController>
  );
};

export default ProductList;

Это приводит к следующему:

Я хотел бы использовать еще один color, когда status равен DRAFT. В настоящее время он использует цвет primary для всех записей.

<ChipField source="status" color={'primary'} />

Я пытался использовать метод, аналогичный { ссылка }, но я мог получить доступ только к целому data и не контролируется рендеринг для каждой строки.

Интерактивная демонстрация в https://nrn-admin-display-product-status.now.sh/# / Product

Answer 1

В соответствии с Условное форматирование необходимо создать компонент для замены компонента поля и передать ему props. Затем вы можете управлять реквизитами source и record.

. Вы можете изменить цвет ChipField, создав класс с backgroundColor для нужного цвета и применив его к className prop.

Пример, который меняет цвет на <ChipField> DRAFT status:

import { makeStyles } from '@material-ui/core/styles';
import classnames from 'classnames';

const useStyles = makeStyles({
  draft: { backgroundColor: '#74fd74' },
});

const ColoredChipField = props => {
  const classes = useStyles();

  const isDraft = v => v.toUpperCase() === 'DRAFT';

  return (
    <ChipField
      className={classnames({
        [classes.draft]: isDraft(props.record[props.source]),
      })}
      {...props} 
    />
  );
};

и затем использует его следующим образом:

(
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="titleEN" label="Title (EN)"/>
      <TextField source="titleFR" label="Title (FR)"/>
      <ColoredChipField source="status" color="primary"/>
    </Datagrid>
  </List>
);

Пожалуйста, проверьте этот рабочий Stackblitz :