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

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Vadorequest正在寻找来自信誉良好的来源的答案。

我正在尝试在ChipField列表视图中有条件地显示react-admin组件。它类似于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;

这将显示以下内容：

我想做的是，当color为status时使用另一个DRAFT。当前，它对所有记录使用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道具。

您可以通过用ChipField创建一个所需颜色的类来更改backgroundColor的颜色，并将其应用于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：