Условный стиль React-Admin с проблемой ReferenceField - PullRequest
Новая
       89

Условный стиль React-Admin с проблемой ReferenceField

0 голосов
/ 08 мая 2020

Мне нужно добавить условный стиль к ChipField внутри ReferenceField. Я следовал документации для условного форматирования шаг за шагом. Он работает, когда у меня нет ReferenceField, но я не работаю ни с одним полем внутри RefereneField. Есть ли какие-нибудь предложения по решению этой проблемы? Вот мои коды: 

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

const useStyles = makeStyles({
    green: {backgroundColor: '#00a65a' },
    red: { backgroundColor: '#f39c12' },
    blue: { backgroundColor: '#00c0ef' },
});

const MyTextField = props => {
    const classes = useStyles();
    
    const isOnhold = v => v.toUpperCase() === 'ON HOLD';
    const isInprogress = v => v.toUpperCase() === 'IN PROGRESS';
    const isCompleted = v => v.toUpperCase() === 'COMPLETED';
    console.log("props is = " + props.record[props.source]);
    console.log("isOnhold "+isOnhold(props.record[props.source]));
    console.log("isInprogress "+isInprogress(props.record[props.source]));
    console.log("isCompleted "+isCompleted(props.record[props.source]));
    return (
    <ChipField 
        className={classnames({
            [classes.red]: isOnhold(props.record[props.source]),
            [classes.blue]: isInprogress(props.record[props.source]),
            [classes.green]: isCompleted(props.record[props.source]),
        })}
        {...props} 
    />
    );
};

MyTextField.defaultProps = ChipField.defaultProps;
export const TaskList = props => (
    <List filters={<TaskFilter />} {...props} exporter={exporter}>
        <CustomizableDatagrid rowClick="edit">
            <TextField source="taskName" label="Name" />
            <ReferenceField source="taskstatusId" reference="taskstatus" label="Status">
                <MyTextField source="tStatus" label="Status"/>
            </ReferenceField>
        </CustomizableDatagrid>
    </List>
);

1 Ответ

0 голосов
/ 15 мая 2020

Думаю, проблема в вашем компоненте MyTextField 

<ReferenceField source="taskstatusId" reference="taskstatus" label="Status">
    <MyTextField source="tStatus" label="Status"/>
</ReferenceField>
  
  
<ReferenceField source="taskstatusId" reference="taskstatus" label="Status">
  <MyTextField optionValue="id" optionText="tStatus" label="Status"/>
</ReferenceField>

Внутренний компонент согласно документации будет использовать по умолчанию id как OptionValue и name как OptionText. Возможно, проблема связана с тем, что вы неправильно ссылаетесь на значения

...