Skip to content

Commit 3b06440

Browse files
jonkoopsjonkoops
committed
Upgrade 'react-dropzone' to latest version
1 parent 418c338 commit 3b06440

File tree

16 files changed

+148
-171
lines changed

16 files changed

+148
-171
lines changed

‎packages/react-code-editor/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@patternfly/react-core": "^4.237.5",
3434
"@patternfly/react-icons": "^4.88.5",
3535
"@patternfly/react-styles": "^4.87.5",
36-
"react-dropzone": "9.0.0",
36+
"react-dropzone": "^14.2.2",
3737
"tslib": "^2.0.0"
3838
},
3939
"peerDependencies": {

‎packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
2323
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
2424
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
2525
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
26-
import Dropzone from 'react-dropzone';
26+
import Dropzone, { FileRejection } from 'react-dropzone';
2727
import { CodeEditorContext } from './CodeEditorUtils';
2828

2929
export interface Shortcut {
@@ -426,7 +426,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
426426
}
427427
};
428428

429-
onDropRejected = (rejectedFiles: File[]) => {
429+
onDropRejected = (rejectedFiles: FileRejection[]) => {
430430
if (rejectedFiles.length > 0) {
431431
// eslint-disable-next-line no-console
432432
console.error('There was an error accepting that dropped file'); // TODO

‎packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
66
class="pf-c-code-editor pf-m-read-only"
77
>
88
<div
9-
class="pf-c-file-upload undefined false"
9+
class="pf-c-file-upload false false"
10+
role="presentation"
1011
tabindex="0"
1112
>
1213
<div
@@ -119,7 +120,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
119120
class="pf-c-code-editor__main"
120121
>
121122
<input
122-
autocomplete="off"
123123
style="display: none;"
124124
tabindex="-1"
125125
type="file"

‎packages/react-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@patternfly/react-styles": "^4.87.5",
4949
"@patternfly/react-tokens": "^4.89.5",
5050
"focus-trap": "6.9.2",
51-
"react-dropzone": "9.0.0",
51+
"react-dropzone": "^14.2.2",
5252
"tippy.js": "5.1.2",
5353
"tslib": "^2.0.0"
5454
},

‎packages/react-core/src/components/FileUpload/FileUpload.tsx‎

Lines changed: 55 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import * as React from 'react';
2-
import Dropzone, { DropzoneProps, DropzoneInputProps, DropFileEventHandler } from 'react-dropzone';
2+
import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
33
import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
44
import { readFile, fileReaderType } from '../../helpers/fileUtils';
55
import { fromEvent } from 'file-selector';
66

7-
interface DropzoneInputPropsWithRef extends DropzoneInputProps {
8-
ref: React.RefCallback<HTMLInputElement>; // Working around an issue in react-dropzone 9.0.0's types. Should not be necessary in later versions.
9-
}
10-
117
export interface FileUploadProps
128
extends Omit<
139
FileUploadFieldProps,
@@ -29,11 +25,11 @@ export interface FileUploadProps
2925
filename: string,
3026
event:
3127
| React.MouseEvent<HTMLButtonElement, MouseEvent> // Clear button was clicked
32-
| React.DragEvent<HTMLElement> // User dragged/dropped a file
3328
| React.ChangeEvent<HTMLElement> // User typed in the TextArea
29+
| DropEvent
3430
) => void;
3531
/** Change event emitted from the hidden \<input type="file" \> field associated with the component */
36-
onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>, file: File) => void;
32+
onFileInputChange?: (event: DropEvent, file: File) => void;
3733
/** Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog. */
3834
onClick?: (event: React.MouseEvent) => void;
3935
/** Additional classes added to the FileUpload container element. */
@@ -80,7 +76,7 @@ export interface FileUploadProps
8076
/** A callback for when the FileReader API fails */
8177
onReadFailed?: (error: DOMException, fileHandle: File) => void;
8278
/** Optional extra props to customize react-dropzone. */
83-
dropzoneProps?: DropzoneProps;
79+
dropzoneProps?: DropzoneOptions;
8480
/** Clear button was clicked */
8581
onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
8682
/** Text area text changed */
@@ -107,7 +103,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
107103
dropzoneProps = {},
108104
...props
109105
}: FileUploadProps) => {
110-
const onDropAccepted: DropFileEventHandler = (acceptedFiles, event) => {
106+
const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
111107
if (acceptedFiles.length > 0) {
112108
const fileHandle = acceptedFiles[0];
113109
if (event.type === 'drop') {
@@ -135,71 +131,68 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
135131
dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
136132
};
137133

138-
const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
134+
const onDropRejected = (rejectedFiles: FileRejection[], event: DropEvent) => {
139135
if (rejectedFiles.length > 0) {
140-
onChange('', rejectedFiles[0].name, event);
136+
onChange('', rejectedFiles[0].file.name, event);
141137
}
142138
dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event);
143139
};
144140

145-
const fileInputRef = React.useRef<HTMLInputElement>();
146-
const setFileValue = (filename: string) => {
147-
fileInputRef.current.value = filename;
148-
};
149-
150141
const onClearButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
151142
onChange('', '', event);
152143
onClearClick?.(event);
153144
setFileValue(null);
154145
};
155146

156-
return (
157-
<Dropzone multiple={false} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
158-
{({ getRootProps, getInputProps, isDragActive, open }) => {
159-
const oldInputProps = getInputProps();
160-
const inputProps: DropzoneInputProps = {
161-
...oldInputProps,
162-
onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
163-
oldInputProps.onChange?.(e);
164-
const files = await fromEvent(e.nativeEvent);
165-
if (files.length === 1) {
166-
onFileInputChange?.(e, files[0] as File);
167-
}
168-
}
169-
};
147+
const { getRootProps, getInputProps, isDragActive, open, inputRef } = useDropzone({
148+
multiple: false,
149+
...dropzoneProps,
150+
onDropAccepted,
151+
onDropRejected
152+
});
153+
154+
const setFileValue = (filename: string) => {
155+
inputRef.current.value = filename;
156+
};
170157

171-
return (
172-
<FileUploadField
173-
{...getRootProps({
174-
...props,
175-
refKey: 'containerRef',
176-
onClick: event => event.preventDefault()
177-
})}
178-
tabIndex={null} // Omit the unwanted tabIndex from react-dropzone's getRootProps
179-
id={id}
180-
type={type}
181-
filename={filename}
182-
value={value}
183-
onChange={onChange}
184-
isDragActive={isDragActive}
185-
onBrowseButtonClick={open}
186-
onClearButtonClick={onClearButtonClick}
187-
onTextAreaClick={onClick}
188-
onTextChange={onTextChange}
189-
>
190-
<input
191-
/* hidden, necessary for react-dropzone */
192-
{...inputProps}
193-
ref={input => {
194-
fileInputRef.current = input;
195-
(inputProps as DropzoneInputPropsWithRef).ref(input);
196-
}}
197-
/>
198-
{children}
199-
</FileUploadField>
200-
);
201-
}}
202-
</Dropzone>
158+
const oldInputProps = getInputProps();
159+
const inputProps: DropzoneInputProps = {
160+
...oldInputProps,
161+
onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
162+
oldInputProps.onChange?.(e);
163+
const files = await fromEvent(e.nativeEvent);
164+
if (files.length === 1) {
165+
onFileInputChange?.(e, files[0] as File);
166+
}
167+
}
168+
};
169+
170+
return (
171+
<FileUploadField
172+
{...getRootProps({
173+
...props,
174+
refKey: 'containerRef',
175+
onClick: event => event.preventDefault()
176+
})}
177+
tabIndex={null} // Omit the unwanted tabIndex from react-dropzone's getRootProps
178+
id={id}
179+
type={type}
180+
filename={filename}
181+
value={value}
182+
onChange={onChange}
183+
isDragActive={isDragActive}
184+
onBrowseButtonClick={open}
185+
onClearButtonClick={onClearButtonClick}
186+
onTextAreaClick={onClick}
187+
onTextChange={onTextChange}
188+
>
189+
<input
190+
/* hidden, necessary for react-dropzone */
191+
{...inputProps}
192+
ref={inputRef}
193+
/>
194+
{children}
195+
</FileUploadField>
203196
);
204197
};
205198
FileUpload.displayName = 'FileUpload';

‎packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`simple fileupload 1`] = `
44
<DocumentFragment>
55
<div
66
class="pf-c-file-upload"
7+
role="presentation"
78
>
89
<div
910
class="pf-c-file-upload__file-select"
@@ -63,7 +64,6 @@ exports[`simple fileupload 1`] = `
6364
/>
6465
</div>
6566
<input
66-
autocomplete="off"
6767
style="display: none;"
6868
tabindex="-1"
6969
type="file"

‎packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,17 @@ import { FileUpload } from '@patternfly/react-core';
33
import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
44

55
export const CustomPreviewFileUpload: React.FunctionComponent = () => {
6-
const [value, setValue] = React.useState(null);
6+
const [value, setValue] = React.useState<File>();
77
const [filename, setFilename] = React.useState('');
88

9-
const handleFileInputChange = (
10-
_event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
11-
file: File
12-
) => {
9+
const handleFileInputChange = (_, file: File) => {
1310
setValue(file);
1411
setFilename(file.name);
1512
};
1613

1714
const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
1815
setFilename('');
19-
setValue('');
16+
setValue(undefined);
2017
};
2118

2219
return (

‎packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import React from 'react';
22
import { FileUpload } from '@patternfly/react-core';
33

44
export const SimpleFileUpload: React.FunctionComponent = () => {
5-
const [value, setValue] = React.useState(null);
5+
const [value, setValue] = React.useState('');
66
const [filename, setFilename] = React.useState('');
77

8-
const handleFileInputChange = (
9-
_event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
10-
file: File
11-
) => {
8+
const handleFileInputChange = (_, file: File) => {
129
setFilename(file.name);
1310
};
1411

‎packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
66
const [filename, setFilename] = React.useState('');
77
const [isLoading, setIsLoading] = React.useState(false);
88

9-
const handleFileInputChange = (
10-
_event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
11-
file: File
12-
) => {
9+
const handleFileInputChange = (_, file: File) => {
1310
setFilename(file.name);
1411
};
1512

‎packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
66
const [filename, setFilename] = React.useState('');
77
const [isLoading, setIsLoading] = React.useState(false);
88

9-
const handleFileInputChange = (
10-
_event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
11-
file: File
12-
) => {
9+
const handleFileInputChange = (_, file: File) => {
1310
setFilename(file.name);
1411
};
1512

0 commit comments

Comments
 (0)