react-admin - 列表视图中的 ChipField 条件颜色

Question

我正在尝试在react-admin 列表视图中有条件地显示ChipField 组件。它类似于How do you conditionally show fields in "Show" component in 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;

这会呈现以下内容：

当status 是DRAFT 时，我想做的是使用另一个color。目前，它对所有记录使用primary 颜色。

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

我尝试使用与https://stackoverflow.com/a/51068735/2391795 类似的方法，但我只能访问整个data 而不能控制每行渲染。

https://nrn-admin-display-product-status.now.sh/#/Product的互动演示

Answer 1

根据Conditional Formatting，您必须创建一个组件来替换字段组件并将props传递给它。然后你就可以控制source 和record 属性了。

您可以通过使用backgroundColor 创建一个类来将ChipField 的颜色更改为您想要的颜色并将其应用于className 属性。

将颜色更改为<ChipField>DRAFT状态的示例：

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：