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

Question

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

这将呈现以下内容：

我想做的是在 is 时使用color另一个。目前，它对所有记录使用颜色。statusDRAFTprimary

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

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

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

标签： react-admin

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：