react-admin

Question

我正在尝试在 react-admin 列表视图中有条件地显示 ChipField 组件。它类似于但是对于列表，我还没有找到使用列表的工作方式。

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'} />

我尝试使用与类似的方法，但我只能访问整个 data 而无法控制每行渲染。

Interactive demo at https://nrn-admin-display-product-status.now.sh/#/Product

Answer 1

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

您可以通过创建一个 backgroundColor 的 class 来更改 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:

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

react-admin - ChipField conditional color in List view

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

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