react-dnd-touch-backend - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

dist/Touch.js

@@ -180,2 +180,3 @@ /**
       ignoreContextMenu: false,
+      enableHoverOutsideTarget: false,
       delayTouchStart: 0,
@@ -196,2 +197,3 @@ delayMouseStart: 0,
     this.scrollAngleRanges = options.scrollAngleRanges;
+    this.enableHoverOutsideTarget = options.enableHoverOutsideTarget;
     this.sourceNodes = {};
@@ -478,3 +480,4 @@ this.sourceNodeOptions = {};
       var moveStartSourceIds = this.moveStartSourceIds,
-          dragOverTargetIds = this.dragOverTargetIds;
+          dragOverTargetIds = this.dragOverTargetIds,
+          enableHoverOutsideTarget = this.enableHoverOutsideTarget;
       var clientOffset = getEventClientOffset(e);
@@ -553,4 +556,14 @@
         return ids.indexOf(id) === index;
-      }); // Reverse order because dnd-core reverse it before calling the DropTarget drop methods
+      }); // Invoke hover for drop targets when source node is still over and pointer is outside
 
+      if (enableHoverOutsideTarget) {
+        for (var targetId in this.targetNodes) {
+          if (this.targetNodes[targetId] && this.targetNodes[targetId].contains(sourceNode) && orderedDragOverTargetIds.indexOf(targetId) === -1) {
+            orderedDragOverTargetIds.unshift(targetId);
+            break;
+          }
+        }
+      } // Reverse order because dnd-core reverse it before calling the DropTarget drop methods
+
+
       orderedDragOverTargetIds.reverse();
@@ -591,7 +604,2 @@ this.actions.hover(orderedDragOverTargetIds, {
   }, {
-    key: "handleOnContextMenu",
-    value: function handleOnContextMenu() {
-      this.moveStartSourceIds = null;
-    }
-  }, {
     key: "installSourceNodeRemovalObserver",
@@ -598,0 +606,0 @@ value: function installSourceNodeRemovalObserver(node) {

package.json

 {
   "name": "react-dnd-touch-backend",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Touch backend for react-dnd",
@@ -8,4 +8,7 @@ "main": "dist/Touch.js",
     "clean": "rimraf dist/**/* examples/*.browserified.js",
-    "js-dev": "browserify ./examples/js/index.jsx -o ./examples/main.browserified.js",
+    "js-dev": "browserify ./examples/sortableLists/js/index.jsx -o ./examples/sortableLists/main.browserified.js",
     "js-dev-drop": "browserify ./examples/dropTarget/js/index.jsx -o ./examples/dropTarget/main.browserified.js",
+    "js-dev-hover": "browserify ./examples/hoverOutside/js/index.jsx -o ./examples/hoverOutside/main.browserified.js",
+    "start": "http-server ./examples -p 7789",
+    "dev": "npm run js-dev && npm run js-dev-drop && npm run js-dev-hover && npm run start",
     "compile": "babel src/Touch.js --out-file dist/Touch.js",
@@ -40,19 +43,21 @@ "lint": "eslint --quiet --cache . --ext .js --ext .jsx",
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-    "@babel/preset-env": "^7.2.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
+    "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
-    "babelify": "10",
+    "babelify": "^10.0.0",
     "browserify": "^16.2.3",
     "classnames": "^2.2.6",
-    "eslint": "^5.9.0",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint": "5.13.0",
+    "eslint-plugin-react": "^7.12.4",
+    "http-server": "^0.11.1",
     "immutable": "^3.8.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.3",
-    "react-dnd": "7",
-    "react-dom": "^16.6.3",
-    "rimraf": "^2.6.2"
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.2",
+    "react-dnd": "^7.0.2",
+    "react-dom": "^16.8.2",
+    "rimraf": "2.6.3"
   },
@@ -59,0 +64,0 @@ "browserify": {

README.md

@@ -12,2 +12,17 @@ <img src="https://avatars2.githubusercontent.com/u/6412038?v=3&s=200" alt="react logo" title="react" align="right" width="64" height="64" />
 
+## Instalation
+
+npm:
+
+```bash
+ npm install react-dnd-touch-backend --save
+```
+
+yarn:
+
+```bash
+ yarn add react-dnd-touch-backend
+```
+
+
 ## Usage
@@ -46,2 +61,3 @@ Follow [react-dnd docs](http://gaearon.github.io/react-dnd/) to setup your app. Then swap out `HTML5Backend` for `TouchBackend` as such:
 - scrollAngleRanges
+- enableHoverOutsideTarget
 
@@ -91,2 +107,10 @@ ## Tips
 
+**enableHoverOutsideTarget**
+
+* Continue dragging of currently dragged element when pointer leaves DropTarget area
+* Default: undefined
+```js
+DragDropContext(TouchBackend({ enableHoverOutsideTarget: true }));
+```
+
 **getDropTargetElementsAtPoint**
@@ -114,6 +138,16 @@ * Specify a custom function to find drop target elements at the given point.  Useful for improving performance in environments (iOS Safari) where document.elementsFromPoint is not available.
 The `examples` folder has a sample integration. In order to build it, run:
+
+npm:
+
 ```bash
 npm i && npm run dev
 ```
+
+yarn:
+
+```bash
+yarn install && yarn run dev
+```
+
 Then navigate to `localhost:7789` or `(IP Address):7789` in your mobile browser to access the example.
 Code licensed under the MIT license. See LICENSE file for terms.

src/Touch.js

@@ -144,2 +144,3 @@ /**
             ignoreContextMenu: false,
+            enableHoverOutsideTarget: false,
             delayTouchStart: 0,
@@ -163,2 +164,3 @@ delayMouseStart: 0,
         this.scrollAngleRanges = options.scrollAngleRanges;
+        this.enableHoverOutsideTarget = options.enableHoverOutsideTarget;
         this.sourceNodes = {};
@@ -410,3 +412,3 @@ this.sourceNodeOptions = {};
 
-        const { moveStartSourceIds, dragOverTargetIds } = this;
+        const { moveStartSourceIds, dragOverTargetIds, enableHoverOutsideTarget } = this;
         const clientOffset = getEventClientOffset(e);
@@ -430,3 +432,3 @@
             this._mouseClientOffset.hasOwnProperty('x') &&
-            moveStartSourceIds && 
+            moveStartSourceIds &&
             distance(this._mouseClientOffset.x, this._mouseClientOffset.y, clientOffset.x, clientOffset.y) >
@@ -487,2 +489,14 @@ (this.touchSlop ? this.touchSlop : 0)) {
 
+        // Invoke hover for drop targets when source node is still over and pointer is outside
+        if (enableHoverOutsideTarget){
+            for (let targetId in this.targetNodes) {
+                if (this.targetNodes[targetId] &&
+                        this.targetNodes[targetId].contains(sourceNode)
+                        && orderedDragOverTargetIds.indexOf(targetId) === -1) {
+                    orderedDragOverTargetIds.unshift(targetId);
+                    break;
+                }
+            }
+        }
+
         // Reverse order because dnd-core reverse it before calling the DropTarget drop methods
@@ -526,6 +540,2 @@ orderedDragOverTargetIds.reverse();
 
-    handleOnContextMenu () {
-        this.moveStartSourceIds = null;
-    }
-
     installSourceNodeRemovalObserver (node) {
@@ -532,0 +542,0 @@ this.uninstallSourceNodeRemovalObserver();

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

Lines of code

1066

increased by1.52%

Number of lines in readme file

150

increased by29.31%

Worsened metrics

Total package byte prevSize

199412

decreased by-98.77%

Dev dependency count

19

increased by11.76%

Number of package files

11

decreased by-8.33%

No dependency changes