Skip to content

Commit db67e5b

Browse files
author
Moritz Gramlich
committed
implement review comments
1 parent d85c986 commit db67e5b

6 files changed

Lines changed: 54 additions & 21 deletions

File tree

‎docs/FileInput.md‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,17 @@ Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and
5353

5454
## Props
5555

56-
| Prop | Required | Type | Default | Description |
57-
|------------------------|----------|---------------------|------------|---------------------------------------------------------------------|
56+
| Prop | Required | Type | Default | Description |
57+
|------------------------|----------|---------------------|-----------|---------------------------------------------------------------------|
5858
| `accept` | Optional | `string | string[]` | - | Accepted file type(s). When empty, all file types are accepted. |
59-
| `children` | Optional | `ReactNode` | - | Element used to preview file(s) |
60-
| `minSize` | Optional | `number` | 0 | Minimum file size (in bytes), e.g. 5000 for 5KB |
59+
| `children` | Optional | `ReactNode` | - | Element used to preview file(s) |
60+
| `minSize` | Optional | `number` | 0 | Minimum file size (in bytes), e.g. 5000 for 5KB |
6161
| `maxSize` | Optional | `number` | `Infinity` | Maximum file size (in bytes), e.g. 5000000 for 5MB |
62-
| `multiple` | Optional | `boolean` | `false` | Whether the inputs can accept multiple files. |
63-
| `options` | Optional | `Object` | `{}` | Additional options passed to react-dropzone's `useDropzone()` hook. |
64-
| `placeholder` | Optional | `ReactNode` | - | Invite displayed in the drop zone |
65-
| `removeIcon` | Optional | `ReactNode` | - | The clickable icon for removing images |
66-
| `validateFile Removal` | Optional | `function` | - | Allows to cancel the removal of files |
62+
| `multiple` | Optional | `boolean` | `false` | Whether the inputs can accept multiple files. |
63+
| `options` | Optional | `Object` | `{}` | Additional options passed to react-dropzone's `useDropzone()` hook. |
64+
| `placeholder` | Optional | `ReactNode` | - | Invite displayed in the drop zone |
65+
| `removeIcon` | Optional | `ReactNode` | [MUI's RemoveCircle icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) | The clickable icon for removing images |
66+
| `validateFile Removal` | Optional | `function` | - | Allows to cancel the removal of files |
6767

6868
`<FileInput>` also accepts the [common input props](./Inputs.md#common-input-props).
6969

@@ -155,7 +155,13 @@ If that's not enough, you can pass a `placeholder` prop to overwrite it. The val
155155

156156
## `removeIcon`
157157

158-
Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing files.
158+
Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing files:
159+
160+
```jsx
161+
<ImageInput source="attachments" RemoveIcon={CustomSvgIcon}>
162+
<ImageField source="src" title="title" />
163+
</ImageInput>
164+
```
159165

160166
## `sx`: CSS API
161167

‎docs/ImageInput.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and
6060
| `multiple` | Optional | `boolean` | `false` | Whether the inputs can accept multiple files. |
6161
| `options` | Optional | `Object` | `{}` | Additional options passed to react-dropzone's `useDropzone()` hook. |
6262
| `placeholder` | Optional | `ReactNode` | - | Invite displayed in the drop zone |
63-
| `removeIcon` | Optional | `ReactNode` | - | The clickable icon for removing images |
63+
| `removeIcon` | Optional | `ReactNode` | [MUI's RemoveCircle icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) | The clickable icon for removing images |
6464
| `validateFile Removal` | Optional | `function` | - | Allows to cancel the removal of files |
6565

6666
`<ImageInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -152,7 +152,13 @@ If that's not enough, you can pass a `placeholder` prop to overwrite it. The val
152152

153153
## `removeIcon`
154154

155-
Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing images.
155+
Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing images:
156+
157+
```jsx
158+
<ImageInput source="pictures" RemoveIcon={CustomSvgIcon}>
159+
<ImageField source="src" title="title" />
160+
</ImageInput>
161+
```
156162

157163
## `sx`: CSS API
158164

‎packages/ra-ui-materialui/src/input/FileInput.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { FileInput } from './FileInput';
99
import { FileField } from '../field';
1010
import { required } from 'ra-core';
1111
import { FormInspector } from './common.stories';
12+
import DeleteIcon from '@mui/icons-material/DeleteOutline';
1213

1314
export default { title: 'ra-ui-materialui/input/FileInput' };
1415

@@ -104,6 +105,15 @@ export const Disabled = () => (
104105
</Wrapper>
105106
);
106107

108+
export const CustomRemoveIcon = () => (
109+
<Wrapper>
110+
<FileInput source="attachments" RemoveIcon={DeleteIcon}>
111+
<FileField source="src" title="title" />
112+
</FileInput>
113+
<FormInspector name="attachments" />
114+
</Wrapper>
115+
);
116+
107117
const i18nProvider = polyglotI18nProvider(() => englishMessages);
108118

109119
const Wrapper = ({ children }) => (

‎packages/ra-ui-materialui/src/input/FileInput.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {
22
Children,
3+
FC,
34
isValidElement,
45
ReactElement,
56
ReactNode,
@@ -42,7 +43,7 @@ export const FileInput = (props: FileInputProps) => {
4243
onRemove: onRemoveProp,
4344
parse,
4445
placeholder,
45-
removeIcon,
46+
RemoveIcon,
4647
resource,
4748
source,
4849
validate,
@@ -194,7 +195,7 @@ export const FileInput = (props: FileInputProps) => {
194195
file={file}
195196
onRemove={onRemove(file)}
196197
className={FileInputClasses.removeButton}
197-
removeIcon={removeIcon}
198+
RemoveIcon={RemoveIcon}
198199
>
199200
<RecordContextProvider value={file}>
200201
{childrenElement}
@@ -226,7 +227,7 @@ FileInput.propTypes = {
226227
multiple: PropTypes.bool,
227228
validateFileRemoval: PropTypes.func,
228229
options: PropTypes.object,
229-
removeIcon: PropTypes.element,
230+
RemoveIcon: PropTypes.elementType,
230231
resource: PropTypes.string,
231232
source: PropTypes.string,
232233
placeholder: PropTypes.node,
@@ -268,7 +269,7 @@ export type FileInputProps = CommonInputProps & {
268269
options?: DropzoneOptions;
269270
onRemove?: Function;
270271
placeholder?: ReactNode;
271-
removeIcon?: React.ReactElement<SvgIconProps>;
272+
RemoveIcon?: FC<SvgIconProps>;
272273
inputProps?: any;
273274
validateFileRemoval?(file): boolean | Promise<boolean>;
274275
sx?: SxProps;

‎packages/ra-ui-materialui/src/input/FileInputPreview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { ReactNode, useEffect } from 'react';
2+
import { FC, ReactNode, useEffect } from 'react';
33
import { styled } from '@mui/material/styles';
44
import PropTypes from 'prop-types';
55
import RemoveCircle from '@mui/icons-material/RemoveCircle';
@@ -13,7 +13,7 @@ export const FileInputPreview = (props: FileInputPreviewProps) => {
1313
className,
1414
onRemove,
1515
file,
16-
removeIcon = RemoveCircle,
16+
RemoveIcon = RemoveCircle,
1717
...rest
1818
} = props;
1919

@@ -38,7 +38,7 @@ export const FileInputPreview = (props: FileInputPreviewProps) => {
3838
title={translate('ra.action.delete')}
3939
size="small"
4040
>
41-
{removeIcon}
41+
<RemoveIcon className={FileInputPreviewClasses.removeIcon} />
4242
</IconButton>
4343
{children}
4444
</Root>
@@ -80,5 +80,5 @@ export interface FileInputPreviewProps {
8080
className?: string;
8181
onRemove: () => void;
8282
file: any;
83-
removeIcon?: React.ReactElement<SvgIconProps>;
83+
RemoveIcon?: FC<SvgIconProps>;
8484
}

‎packages/ra-ui-materialui/src/input/ImageInput.stories.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import { AdminContext } from '../AdminContext';
66
import { Create } from '../detail';
77
import { SimpleForm } from '../form';
88
import { ImageInput } from './ImageInput';
9-
import { ImageField } from '../field';
9+
import { FileField, ImageField } from '../field';
1010
import { required } from 'ra-core';
1111
import { FormInspector } from './common.stories';
12+
import DeleteIcon from '@mui/icons-material/DeleteOutline';
1213

1314
export default { title: 'ra-ui-materialui/input/ImageInput' };
1415

@@ -83,6 +84,15 @@ export const Required = () => (
8384
</Wrapper>
8485
);
8586

87+
export const CustomRemoveIcon = () => (
88+
<Wrapper>
89+
<ImageInput source="image" RemoveIcon={DeleteIcon}>
90+
<FileField source="src" title="title" />
91+
</ImageInput>
92+
<FormInspector name="attachments" />
93+
</Wrapper>
94+
);
95+
8696
const i18nProvider = polyglotI18nProvider(() => englishMessages);
8797

8898
const Wrapper = ({ children }) => (

0 commit comments

Comments
 (0)