diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 261a57fedbb..3b750ae2eed 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -38,7 +38,7 @@ "@patternfly/react-styles": "^4.25.2", "@patternfly/react-tokens": "^4.27.2", "focus-trap": "6.2.2", - "react-dropzone": "10.2.2", + "react-dropzone": "9.0.0", "tippy.js": "5.1.2", "tslib": "^2.0.0" }, diff --git a/packages/react-core/src/components/FileUpload/FileUpload.tsx b/packages/react-core/src/components/FileUpload/FileUpload.tsx index fcdaca64640..85256ae4550 100644 --- a/packages/react-core/src/components/FileUpload/FileUpload.tsx +++ b/packages/react-core/src/components/FileUpload/FileUpload.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import Dropzone, { DropzoneProps, DropEvent, DropzoneInputProps } from 'react-dropzone'; +import Dropzone, { DropzoneProps, DropzoneInputProps, DropFileEventHandler } from 'react-dropzone'; import { FileUploadField, FileUploadFieldProps } from './FileUploadField'; import { readFile, fileReaderType } from '../../helpers/fileUtils'; import { fromEvent } from 'file-selector'; + +interface DropzoneInputPropsWithRef extends DropzoneInputProps { + ref: React.RefCallback; // Working around an issue in react-dropzone 9.0.0's types. Should not be necessary in later versions. +} + export interface FileUploadProps extends Omit< FileUploadFieldProps, @@ -26,11 +31,9 @@ export interface FileUploadProps | React.MouseEvent // Clear button was clicked | React.DragEvent // User dragged/dropped a file | React.ChangeEvent // User typed in the TextArea - | DragEvent - | Event ) => void; /** Change event emitted from the hidden \ field associated with the component */ - onFileInputChange?: (event: React.ChangeEvent | DropEvent, file: File) => void; + onFileInputChange?: (event: React.ChangeEvent | React.DragEvent, file: File) => void; /** Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog. */ onClick?: (event: React.MouseEvent) => void; /** Additional classes added to the FileUpload container element. */ @@ -104,7 +107,7 @@ export const FileUpload: React.FunctionComponent = ({ dropzoneProps = {}, ...props }: FileUploadProps) => { - const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => { + const onDropAccepted: DropFileEventHandler = (acceptedFiles, event) => { if (acceptedFiles.length > 0) { const fileHandle = acceptedFiles[0]; if (event.type === 'drop') { @@ -132,7 +135,7 @@ export const FileUpload: React.FunctionComponent = ({ dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event); }; - const onDropRejected = (rejectedFiles: File[], event: DropEvent) => { + const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => { if (rejectedFiles.length > 0) { onChange('', rejectedFiles[0].name, event); } @@ -151,13 +154,7 @@ export const FileUpload: React.FunctionComponent = ({ }; return ( - + {({ getRootProps, getInputProps, isDragActive, open }) => { const oldInputProps = getInputProps(); const inputProps: DropzoneInputProps = { @@ -190,7 +187,14 @@ export const FileUpload: React.FunctionComponent = ({ onTextAreaClick={onClick} onTextChange={onTextChange} > - + { + fileInputRef.current = input; + (inputProps as DropzoneInputPropsWithRef).ref(input); + }} + /> {children} ); diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap index 65c545bac0f..521653414e4 100644 --- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap +++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap @@ -1,12 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`simple fileupload 1`] = ` - - + `; diff --git a/packages/react-core/src/components/FileUpload/examples/FileUpload.md b/packages/react-core/src/components/FileUpload/examples/FileUpload.md index b3617347388..483b62fc8d8 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUpload.md +++ b/packages/react-core/src/components/FileUpload/examples/FileUpload.md @@ -27,7 +27,7 @@ class SimpleTextFileUpload extends React.Component { super(props); this.state = { value: '', filename: '', isLoading: false }; this.handleFileInputChange = (event, file) => this.setState({ filename: file.name }); - this.handleDataChange = value => this.setState({ value }); + this.handleTextOrDataChange = value => this.setState({ value }); this.handleClear = event => this.setState({ filename: '', value: '' }); this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true }); this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false }); @@ -43,7 +43,8 @@ class SimpleTextFileUpload extends React.Component { filename={filename} filenamePlaceholder="Drag and drop a file or upload one" onFileInputChange={this.handleFileInputChange} - onDataChange={this.handleDataChange} + onDataChange={this.handleTextOrDataChange} + onTextChange={this.handleTextOrDataChange} onReadStarted={this.handleFileReadStarted} onReadFinished={this.handleFileReadFinished} onClearClick={this.handleClear} diff --git a/yarn.lock b/yarn.lock index b1c209e1a9c..942b3302c2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4585,11 +4585,6 @@ attr-accept@^1.1.3: dependencies: core-js "^2.5.0" -attr-accept@^2.0.0: - version "2.2.2" - resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b" - integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg== - autoprefixer@^9.8.6: version "9.8.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f" @@ -8152,13 +8147,6 @@ file-saver@^1.3.8: version "1.3.8" resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8" -file-selector@^0.1.12: - version "0.1.19" - resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.19.tgz#8ecc9d069a6f544f2e4a096b64a8052e70ec8abf" - integrity sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ== - dependencies: - tslib "^2.0.1" - file-selector@^0.1.8: version "0.1.12" resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0" @@ -13653,15 +13641,6 @@ react-dom@^17.0.0: object-assign "^4.1.1" scheduler "^0.20.1" -react-dropzone@10.2.2: - version "10.2.2" - resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815" - integrity sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA== - dependencies: - attr-accept "^2.0.0" - file-selector "^0.1.12" - prop-types "^15.7.2" - react-dropzone@9.0.0: version "9.0.0" resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-9.0.0.tgz#4f5223cdcb4d3bd8a66e3298c4041eb0c75c4634"