Как отключить кнопку «Очистить» в предварительном просмотре ImageInput, FileInput, ImageField или FileField

Question

У меня есть ImageInput и ImageField для предварительного просмотра в моей форме создания.

В правом верхнем углу есть кнопка очистки, как вы можете видеть на скриншоте

Есть ли способ отключить эту кнопку? Или обработать событие клика по нему?

Answer 1

React Admin не выставляет опору или способ удалить эту кнопку.

Единственный способ - создать собственный ImageInput и отключить его, например, в CSS, например:

// CustomImageInput.js
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import { addField, translate, FileInput } from 'react-admin';

const styles = {
    root: { width: '100%' },
    dropZone: {
        background: '#efefef',
        cursor: 'pointer',
        padding: '1rem',
        textAlign: 'center',
        color: '#999',
    },
    preview: {},
    removeButton: {
        display: 'none',
    },
};

export class ImageInput extends FileInput {
    static defaultProps = {
        ...FileInput.defaultProps,
        labelMultiple: 'ra.input.image.upload_several',
        labelSingle: 'ra.input.image.upload_single',
    };
}

export default compose(
    addField,
    translate,
    withStyles(styles)
)(ImageInput);

Будем рады, если вы захотите сделать пиар, чтобы выставить реквизит, подобный showDeleteButton, который по умолчанию равен true.