fix: "getDropZoneProps" must accept custom onDrop / onDragOver callbacks

adrians5j · Dec 28, 2018 · eb3715d · eb3715d
1 parent 0c3322c
commit eb3715d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 36 deletions.
diff --git a/src/Files.js b/src/Files.js
@@ -191,13 +191,17 @@ class Files extends React.Component<Props> {
                         // Opens the file browser.
                         this.input && this.input.click();
                     },
-                    getDropZoneProps: props => {
+                    getDropZoneProps: (props: Object) => {
                         return {
                             ...props,
-                            onDragOver: e => e.preventDefault(),
+                            onDragOver: e => {
+                                e.preventDefault();
+                                typeof props.onDragOver === "function" && props.onDragOver();
+                            },
                             onDrop: async e => {
                                 e.preventDefault();
-                                this.processSelectedFiles(e.dataTransfer.files);
+                                await this.processSelectedFiles(e.dataTransfer.files);
+                                typeof props.onDrop === "function" && props.onDrop();
                             }
                         };
                     }

diff --git a/stories/ImageGallery.js b/stories/ImageGallery.js
@@ -16,6 +16,9 @@ const gallery = css({
     width: 500,
     minHeight: 500,
     border: "1px lightgray dashed",
+    "&.dragging": {
+        backgroundColor: "#80808008"
+    },
     ul: {
         padding: 10,
         margin: 0
@@ -95,49 +98,53 @@ class ImageGallery extends React.Component<Props, State> {
                                 this.handleFiles(files, this.state.files.length)
                             }
                         >
-                            {({ browseFiles, getDropZoneProps }) => {
-                                const images = this.state.files;
-
-                                return (
-                                    <div {...getDropZoneProps({ className: gallery })}>
-                                        <ul>
-                                            {images.map((image, index) => (
-                                                <li
-                                                    key={index}
-                                                    onClick={() => {
-                                                        browseFiles({
-                                                            onErrors: this.handleErrors,
-                                                            onSuccess: files => {
-                                                                // Will insert images after the clicked image.
-                                                                this.handleFiles(files, index + 1);
-                                                            }
-                                                        });
-                                                    }}
-                                                >
-                                                    <img src={image.src} />
-                                                </li>
-                                            ))}
+                            {({ browseFiles, getDropZoneProps }) => (
+                                <div
+                                    {...getDropZoneProps({
+                                        className:
+                                            gallery + (this.state.dragging ? " dragging" : ""),
+                                        onDragEnter: () => this.setState({ dragging: true }),
+                                        onDragLeave: () => this.setState({ dragging: false }),
+                                        onDrop: () => this.setState({ dragging: false })
+                                    })}
+                                >
+                                    <ul>
+                                        {this.state.files.map((image, index) => (
                                             <li
-                                                className="new-image"
+                                                key={index}
                                                 onClick={() => {
                                                     browseFiles({
                                                         onErrors: this.handleErrors,
                                                         onSuccess: files => {
-                                                            // Will append images at the end of the list.
-                                                            this.handleFiles(
-                                                                files,
-                                                                this.state.files.length
-                                                            );
+                                                            // Will insert images after the clicked image.
+                                                            this.handleFiles(files, index + 1);
                                                         }
                                                     });
                                                 }}
                                             >
-                                                <div>+</div>
+                                                <img src={image.src} />
                                             </li>
-                                        </ul>
-                                    </div>
-                                );
-                            }}
+                                        ))}
+                                        <li
+                                            className="new-image"
+                                            onClick={() => {
+                                                browseFiles({
+                                                    onErrors: this.handleErrors,
+                                                    onSuccess: files => {
+                                                        // Will append images at the end of the list.
+                                                        this.handleFiles(
+                                                            files,
+                                                            this.state.files.length
+                                                        );
+                                                    }
+                                                });
+                                            }}
+                                        >
+                                            <div>+</div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            )}
                         </Files>
 
                         {this.state.errors.length > 0 && <div>An error occurred.</div>}