react-draggable-tab - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

CHANGELOG.md

 ## Change Log
 
-### Ver 0.3.3(Next release, Not released)
+### Ver 0.3.4(Next release, Not released)
 
+### Ver 0.3.3
+
+  * #30 [Switch tab position while dragging](https://github.com/georgeOsdDev/react-draggable-tab/issues/33)
+
 ### Ver 0.3.2
@@ -6,0 +10,0 @@

components/Tabs.js

@@ -203,2 +203,16 @@ 'use strict';
   handleDrag(key, e, ui) {
+    const deltaX = (e.pageX || e.clientX);
+    _.each(this.startPositions, (pos) => {
+      let tempMoved = pos.moved || 0;
+      let shoudBeSwap = key !== pos.key && pos.pos.left + tempMoved < deltaX && deltaX < pos.pos.right + tempMoved;
+      if (shoudBeSwap) {
+        let el = React.findDOMNode(this.refs[pos.key]);
+        let idx1 = this._getIndexOfTabByKey(key);
+        let idx2 = this._getIndexOfTabByKey(pos.key);
+        let minus = idx1 > idx2 ? 1 : -1;
+        let movePx = (minus * (pos.pos.right - pos.pos.left)) - tempMoved;
+        el.style.transform = 'translate('+ movePx + 'px, 0px)';
+        this.startPositions[idx2].moved = movePx;
+      }
+    });
   }
@@ -215,2 +229,4 @@
       }
+      let el = React.findDOMNode(this.refs[pos.key]);
+      el.style.transform = 'translate(0px, 0px)';
     });
@@ -217,0 +233,0 @@ let nextTabs = swapedTabs || this.state.tabs;

components/TabStyles.js

@@ -69,3 +69,4 @@ /* Inspired from Atom
     maxWidth: '175px',
-    minWidth: '40px'
+    minWidth: '40px',
+    transform: 'translate(0px, 0px)'
   },
@@ -72,0 +73,0 @@

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Draggable chrome like tab react component ",
@@ -5,0 +5,0 @@ "main": "index.js",

test/components/Tabs_spec.js

@@ -977,2 +977,3 @@ 'use strict';
       let clientY = target1.getBoundingClientRect().top + 5;
+      let droppedToX = target2.getBoundingClientRect().left + 10;
 
@@ -994,3 +995,3 @@ triggerEvent(target1, 'mousedown', {
       triggerEvent(target1, 'mouseup', {
-        clientX: target2.getBoundingClientRect().left + 10,
+        clientX: droppedToX,
         clientY: clientY
@@ -1014,2 +1015,3 @@ });
       let clientY = target1.getBoundingClientRect().top + 5;
+      let droppedToX = target2.getBoundingClientRect().left + 10;
 
@@ -1031,3 +1033,3 @@ triggerEvent(target1, 'mousedown', {
       triggerEvent(target1, 'mouseup', {
-        clientX: target2.getBoundingClientRect().left + 10,
+        clientX: droppedToX,
         clientY: clientY
@@ -1052,2 +1054,3 @@ });
       let clientY = target1.getBoundingClientRect().top + 5;
+      let droppedToX = target2.getBoundingClientRect().left + 10;
 
@@ -1069,3 +1072,3 @@ triggerEvent(target1, 'mousedown', {
       triggerEvent(target1, 'mouseup', {
-        clientX: target2.getBoundingClientRect().left + 10,
+        clientX: droppedToX,
         clientY: clientY
@@ -1089,2 +1092,3 @@ });
       let clientY = target1.getBoundingClientRect().top + 5;
+      let droppedToX = target2.getBoundingClientRect().left + 10;
 
@@ -1106,3 +1110,3 @@ triggerEvent(target1, 'mousedown', {
       triggerEvent(target1, 'mouseup', {
-        clientX: target2.getBoundingClientRect().left + 10,
+        clientX: droppedToX,
         clientY: clientY
@@ -1109,0 +1113,0 @@ });

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

118472

increased by0.92%

Lines of code

2605

increased by0.81%

No dependency changes