react-sortable-hoc - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

CHANGELOG.md

 Changelog
 ------------
+### 0.6.5
+Fixes the position of the sortable helper when the page is scrolled [#213](https://github.com/clauderic/react-sortable-hoc/pull/213)
+
+### 0.6.4
+Fix: when cloning the element that is being sorted, we no longer update the value of cloned file inputs [#232](https://github.com/clauderic/react-sortable-hoc/pull/232)
+
 ### 0.6.3
@@ -4,0 +10,0 @@ Fixes issues caused by a disabled SortableElement being moved when `distance` is set to a value other than `0`

dist/commonjs/SortableContainer/index.js

@@ -71,4 +71,4 @@ 'use strict';
         _this._pos = {
-          x: e.clientX,
-          y: e.clientY
+          x: e.pageX,
+          y: e.pageY
         };
@@ -126,4 +126,4 @@
           _this._delta = {
-            x: _this._pos.x - e.clientX,
-            y: _this._pos.y - e.clientY
+            x: _this._pos.x - e.pageX,
+            y: _this._pos.y - e.pageY
           };
@@ -203,2 +203,7 @@ var delta = Math.abs(_this._delta.x) + Math.abs(_this._delta.y);
 
+          _this.initialWindowScroll = {
+            top: window.scrollY,
+            left: window.scrollX
+          };
+
           var fields = node.querySelectorAll('input, textarea, select');
@@ -475,4 +480,4 @@ var clonedNode = node.cloneNode(true);
         return {
-          x: e.touches ? e.touches[0].clientX : e.clientX,
-          y: e.touches ? e.touches[0].clientY : e.clientY
+          x: e.touches ? e.touches[0].pageX : e.pageX,
+          y: e.touches ? e.touches[0].pageY : e.pageY
         };
@@ -534,2 +539,3 @@ }
 
+
         var offset = this.getOffset(e);
@@ -540,2 +546,6 @@ var translate = {
         };
+        // Adjust for window scroll
+        translate.y -= window.scrollY - this.initialWindowScroll.top;
+        translate.x -= window.scrollX - this.initialWindowScroll.left;
+
         this.translate = translate;
@@ -586,2 +596,6 @@
         };
+        var scrollDifference = {
+          top: window.scrollY - this.initialWindowScroll.top,
+          left: window.scrollX - this.initialWindowScroll.left
+        };
         this.newIndex = null;
@@ -599,2 +613,3 @@
           };
+
           var translate = {
@@ -644,3 +659,3 @@ x: 0,
               // Calculations for a grid setup
-              if (index < this.index && (sortingOffset.left - offset.width <= edgeOffset.left && sortingOffset.top <= edgeOffset.top + offset.height || sortingOffset.top + offset.height <= edgeOffset.top)) {
+              if (index < this.index && (sortingOffset.left + scrollDifference.left - offset.width <= edgeOffset.left && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height || sortingOffset.top + scrollDifference.top + offset.height <= edgeOffset.top)) {
                 // If the current node is to the left on the same row, or above the node that's being dragged
@@ -659,3 +674,3 @@ // then move it to the right
                 }
-              } else if (index > this.index && (sortingOffset.left + offset.width >= edgeOffset.left && sortingOffset.top + offset.height >= edgeOffset.top || sortingOffset.top + offset.height >= edgeOffset.top + height)) {
+              } else if (index > this.index && (sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top || sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top + height)) {
                 // If the current node is to the right on the same row, or below the node that's being dragged
@@ -674,6 +689,6 @@ // then move it to the left
             } else {
-              if (index > this.index && sortingOffset.left + offset.width >= edgeOffset.left) {
+              if (index > this.index && sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left) {
                 translate.x = -(this.width + this.marginOffset.x);
                 this.newIndex = index;
-              } else if (index < this.index && sortingOffset.left <= edgeOffset.left + offset.width) {
+              } else if (index < this.index && sortingOffset.left + scrollDifference.left <= edgeOffset.left + offset.width) {
                 translate.x = this.width + this.marginOffset.x;
@@ -686,6 +701,6 @@ if (this.newIndex == null) {
           } else if (this.axis.y) {
-            if (index > this.index && sortingOffset.top + offset.height >= edgeOffset.top) {
+            if (index > this.index && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top) {
               translate.y = -(this.height + this.marginOffset.y);
               this.newIndex = index;
-            } else if (index < this.index && sortingOffset.top <= edgeOffset.top + offset.height) {
+            } else if (index < this.index && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height) {
               translate.y = this.height + this.marginOffset.y;
@@ -692,0 +707,0 @@ if (this.newIndex == null) {

dist/es6/SortableContainer/index.js

@@ -43,4 +43,4 @@ import _extends from 'babel-runtime/helpers/extends';
         _this._pos = {
-          x: e.clientX,
-          y: e.clientY
+          x: e.pageX,
+          y: e.pageY
         };
@@ -98,4 +98,4 @@
           _this._delta = {
-            x: _this._pos.x - e.clientX,
-            y: _this._pos.y - e.clientY
+            x: _this._pos.x - e.pageX,
+            y: _this._pos.y - e.pageY
           };
@@ -175,2 +175,7 @@ var delta = Math.abs(_this._delta.x) + Math.abs(_this._delta.y);
 
+          _this.initialWindowScroll = {
+            top: window.scrollY,
+            left: window.scrollX
+          };
+
           var fields = node.querySelectorAll('input, textarea, select');
@@ -447,4 +452,4 @@ var clonedNode = node.cloneNode(true);
         return {
-          x: e.touches ? e.touches[0].clientX : e.clientX,
-          y: e.touches ? e.touches[0].clientY : e.clientY
+          x: e.touches ? e.touches[0].pageX : e.pageX,
+          y: e.touches ? e.touches[0].pageY : e.pageY
         };
@@ -506,2 +511,3 @@ }
 
+
         var offset = this.getOffset(e);
@@ -512,2 +518,6 @@ var translate = {
         };
+        // Adjust for window scroll
+        translate.y -= window.scrollY - this.initialWindowScroll.top;
+        translate.x -= window.scrollX - this.initialWindowScroll.left;
+
         this.translate = translate;
@@ -558,2 +568,6 @@
         };
+        var scrollDifference = {
+          top: window.scrollY - this.initialWindowScroll.top,
+          left: window.scrollX - this.initialWindowScroll.left
+        };
         this.newIndex = null;
@@ -571,2 +585,3 @@
           };
+
           var translate = {
@@ -616,3 +631,3 @@ x: 0,
               // Calculations for a grid setup
-              if (index < this.index && (sortingOffset.left - offset.width <= edgeOffset.left && sortingOffset.top <= edgeOffset.top + offset.height || sortingOffset.top + offset.height <= edgeOffset.top)) {
+              if (index < this.index && (sortingOffset.left + scrollDifference.left - offset.width <= edgeOffset.left && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height || sortingOffset.top + scrollDifference.top + offset.height <= edgeOffset.top)) {
                 // If the current node is to the left on the same row, or above the node that's being dragged
@@ -631,3 +646,3 @@ // then move it to the right
                 }
-              } else if (index > this.index && (sortingOffset.left + offset.width >= edgeOffset.left && sortingOffset.top + offset.height >= edgeOffset.top || sortingOffset.top + offset.height >= edgeOffset.top + height)) {
+              } else if (index > this.index && (sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top || sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top + height)) {
                 // If the current node is to the right on the same row, or below the node that's being dragged
@@ -646,6 +661,6 @@ // then move it to the left
             } else {
-              if (index > this.index && sortingOffset.left + offset.width >= edgeOffset.left) {
+              if (index > this.index && sortingOffset.left + scrollDifference.left + offset.width >= edgeOffset.left) {
                 translate.x = -(this.width + this.marginOffset.x);
                 this.newIndex = index;
-              } else if (index < this.index && sortingOffset.left <= edgeOffset.left + offset.width) {
+              } else if (index < this.index && sortingOffset.left + scrollDifference.left <= edgeOffset.left + offset.width) {
                 translate.x = this.width + this.marginOffset.x;
@@ -658,6 +673,6 @@ if (this.newIndex == null) {
           } else if (this.axis.y) {
-            if (index > this.index && sortingOffset.top + offset.height >= edgeOffset.top) {
+            if (index > this.index && sortingOffset.top + scrollDifference.top + offset.height >= edgeOffset.top) {
               translate.y = -(this.height + this.marginOffset.y);
               this.newIndex = index;
-            } else if (index < this.index && sortingOffset.top <= edgeOffset.top + offset.height) {
+            } else if (index < this.index && sortingOffset.top + scrollDifference.top <= edgeOffset.top + offset.height) {
               translate.y = this.height + this.marginOffset.y;
@@ -664,0 +679,0 @@ if (this.newIndex == null) {

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -147,3 +147,26 @@ # React Sortable (HOC)
 
+### Wrapper props not passed down to wrapped Component
+All props for `SortableContainer` and `SortableElement` listed above are intentionally consumed by the wrapper component and are **not** passed down to the wrapped component. To make them available pass down the desired prop again with a different name. E.g.:
 
+```js
+const SortableItem = SortableElement(({value, sortIndex}) =>
+  <li>{value} - #{sortIndex}</li>
+);
+
+const SortableList = SortableContainer(({items}) => {
+  return (
+    <ul>
+      {items.map((value, index) => (
+        <SortableItem 
+          key={`item-${index}`}
+          index={index}
+          sortIndex={index}
+          value={value} 
+        />
+      ))}
+    </ul>
+  );
+});
+```
+
 Dependencies
@@ -150,0 +173,0 @@ ------------

No alert changes

Improved metrics

Total package byte prevSize

1213196

increased by0.46%

Lines of code

10175

increased by0.35%

Number of lines in readme file

186

increased by14.11%

No dependency changes