@rpldy/upload-drop-zone - npm Package Compare versions

Comparing version 0.14.1 to 0.14.2

lib/cjs/UploadDropZone.js

@@ -20,18 +20,18 @@ "use strict";
 
-const UploadDropZone = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const containerRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, () => containerRef.current, []);
+const UploadDropZone = /*#__PURE__*/(0, _react.forwardRef)(({
+  className,
+  id,
+  children,
+  onDragOverClassName,
+  dropHandler,
+  htmlDirContentParams,
+  extraProps,
+  ...uploadOptions
+}, ref) => {
   const {
     upload
   } = (0, _sharedUi.useUploadyContext)();
-  const {
-    className,
-    id,
-    children,
-    onDragOverClassName,
-    dropHandler,
-    htmlDirContentParams,
-    extraProps,
-    ...uploadOptions
-  } = props; //using ref so upload can stay memoized
+  const containerRef = (0, _react.useRef)(null);
+  const dragLeaveTrackerRef = (0, _react.useRef)(false);
+  (0, _react.useImperativeHandle)(ref, () => containerRef.current, []); //using ref so upload can stay memoized
 
@@ -41,2 +41,4 @@ const uploadOptionsRef = (0, _react.useRef)();
   const handleEnd = (0, _react.useCallback)(() => {
+    dragLeaveTrackerRef.current = false;
+
     if (containerRef.current && onDragOverClassName) {
@@ -54,4 +56,4 @@ containerRef.current.classList.remove(onDragOverClassName);
   }, [upload, dropFileHandler, uploadOptionsRef]);
-  const onDragOver = (0, _react.useCallback)(e => {
-    e.preventDefault();
+  const onDragEnter = (0, _react.useCallback)(e => {
+    dragLeaveTrackerRef.current = !dragLeaveTrackerRef.current && e.target === containerRef.current;
 
@@ -62,2 +64,6 @@ if (containerRef.current && onDragOverClassName) {
   }, [onDragOverClassName, containerRef]);
+  const onDragOver = (0, _react.useCallback)(e => {
+    //must have drag over event handler with preventDefault for drop to work
+    e.preventDefault();
+  }, []);
   const onDrop = (0, _react.useCallback)(e => {
@@ -69,5 +75,7 @@ e.preventDefault();
   }, [handleEnd, handleDropUpload]);
-  const onDragLeave = (0, _react.useCallback)(() => {
-    handleEnd();
-  }, [handleEnd]);
+  const onDragLeave = (0, _react.useCallback)(e => {
+    if (dragLeaveTrackerRef.current && e.target === containerRef.current) {
+      handleEnd();
+    }
+  }, [handleEnd, containerRef]);
   const onDragEnd = (0, _react.useCallback)(e => {
@@ -83,2 +91,3 @@ e.preventDefault();
     onDragOver: onDragOver,
+    onDragEnter: onDragEnter,
     onDrop: onDrop,
@@ -85,0 +94,0 @@ onDragLeave: onDragLeave,

lib/esm/UploadDropZone.js

@@ -6,18 +6,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { useUploadyContext, markAsUploadOptionsComponent } from "@rpldy/shared-ui";
-const UploadDropZone = /*#__PURE__*/forwardRef((props, ref) => {
-  const containerRef = useRef(null);
-  useImperativeHandle(ref, () => containerRef.current, []);
+const UploadDropZone = /*#__PURE__*/forwardRef(({
+  className,
+  id,
+  children,
+  onDragOverClassName,
+  dropHandler,
+  htmlDirContentParams,
+  extraProps,
+  ...uploadOptions
+}, ref) => {
   const {
     upload
   } = useUploadyContext();
-  const {
-    className,
-    id,
-    children,
-    onDragOverClassName,
-    dropHandler,
-    htmlDirContentParams,
-    extraProps,
-    ...uploadOptions
-  } = props; //using ref so upload can stay memoized
+  const containerRef = useRef(null);
+  const dragLeaveTrackerRef = useRef(false);
+  useImperativeHandle(ref, () => containerRef.current, []); //using ref so upload can stay memoized
 
@@ -27,2 +27,4 @@ const uploadOptionsRef = useRef();
   const handleEnd = useCallback(() => {
+    dragLeaveTrackerRef.current = false;
+
     if (containerRef.current && onDragOverClassName) {
@@ -40,4 +42,4 @@ containerRef.current.classList.remove(onDragOverClassName);
   }, [upload, dropFileHandler, uploadOptionsRef]);
-  const onDragOver = useCallback(e => {
-    e.preventDefault();
+  const onDragEnter = useCallback(e => {
+    dragLeaveTrackerRef.current = !dragLeaveTrackerRef.current && e.target === containerRef.current;
 
@@ -48,2 +50,6 @@ if (containerRef.current && onDragOverClassName) {
   }, [onDragOverClassName, containerRef]);
+  const onDragOver = useCallback(e => {
+    //must have drag over event handler with preventDefault for drop to work
+    e.preventDefault();
+  }, []);
   const onDrop = useCallback(e => {
@@ -55,5 +61,7 @@ e.preventDefault();
   }, [handleEnd, handleDropUpload]);
-  const onDragLeave = useCallback(() => {
-    handleEnd();
-  }, [handleEnd]);
+  const onDragLeave = useCallback(e => {
+    if (dragLeaveTrackerRef.current && e.target === containerRef.current) {
+      handleEnd();
+    }
+  }, [handleEnd, containerRef]);
   const onDragEnd = useCallback(e => {
@@ -69,2 +77,3 @@ e.preventDefault();
     onDragOver: onDragOver,
+    onDragEnter: onDragEnter,
     onDrop: onDrop,
@@ -71,0 +80,0 @@ onDragLeave: onDragLeave,

package.json

 {
-  "version": "0.14.1",
+  "version": "0.14.2",
   "name": "@rpldy/upload-drop-zone",
@@ -30,9 +30,9 @@ "description": "drop zone (container) component to initiate file and folder content uploads",
   "dependencies": {
-    "@rpldy/shared-ui": "^0.14.1",
+    "@rpldy/shared-ui": "^0.14.2",
     "html-dir-content": "^0.3.2"
   },
   "devDependencies": {
-    "@rpldy/shared": "^0.14.1",
-    "@rpldy/upload-button": "^0.14.1",
-    "@rpldy/uploady": "^0.14.1",
+    "@rpldy/shared": "^0.14.2",
+    "@rpldy/upload-button": "^0.14.2",
+    "@rpldy/uploady": "^0.14.2",
     "flow-bin": "^0.159.0",
@@ -50,3 +50,3 @@ "react-dnd": "^11.1.3",
   },
-  "gitHead": "d5627c9ac7b076131cbfa59910cba50e94e197b2"
+  "gitHead": "a03a076546fd0895f2eada2687de86a2e23f7732"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15137

increased by5.79%

Lines of code

208

increased by8.33%

Dependency changes

• Updated@rpldy/shared-ui@^0.14.2