react-draggable-tab - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

CHANGELOG.md

 ## Change Log
 
+### Ver 0.8.1
+
+  * #80 [Fix tabAddButton position](https://github.com/georgeOsdDev/react-draggable-tab/issues/80)
+  Thanks @warent
+  * #81 [Added prop to disable the dragging of tabs]()https://github.com/georgeOsdDev/react-draggable-tab/issues/81
+  Thanks @erangil2
+
 ### Ver 0.8.0
@@ -4,0 +11,0 @@

lib/components/TabStyles.js

@@ -193,3 +193,3 @@ 'use strict';
     textShadow: 'rgb(255, 255, 255) 0px 1px 0px',
-    position: 'fixed',
+    position: 'relative',
     width: '25px',
@@ -196,0 +196,0 @@ height: '26px',

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Draggable chrome like tab react component ",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -95,2 +95,5 @@ # React-draggable-tab [![Build Status](https://travis-ci.org/georgeOsdDev/react-draggable-tab.svg?branch=develop)](https://travis-ci.org/georgeOsdDev/react-draggable-tab) [![npm version](https://badge.fury.io/js/react-draggable-tab.svg)](http://badge.fury.io/js/react-draggable-tab)
 
+  * 'disableDrag': disables the ability to drag the tabs.
+    'React.PropTypes.bool' default is false.
+
   * `tabAddButton`: element for add button.
@@ -97,0 +100,0 @@ `React.PropTypes.element`

src/components/Tabs.js

@@ -481,2 +481,3 @@ import _ from 'lodash';
           key={`draggable_tabs_${tab.key}`}
+          disabled={this.props.disableDrag}
           axis="x"
@@ -551,2 +552,3 @@ cancel=".rdTabCloseIcon"
   keepSelectedTab: false,
+  disableDrag: false,
 };
@@ -608,4 +610,5 @@
   keepSelectedTab: React.PropTypes.bool,
+  disableDrag: React.PropTypes.bool,
 };
 
 export default Tabs;

src/components/TabStyles.js

@@ -188,3 +188,3 @@ /* Inspired from Atom
     textShadow: 'rgb(255, 255, 255) 0px 1px 0px',
-    position: 'fixed',
+    position: 'relative',
     width: '25px',
@@ -191,0 +191,0 @@ height: '26px',

test/components/Tabs_spec.js

@@ -35,2 +35,3 @@ import React from 'react';
     expect(component.props.tabsClassNames.tabHover).to.be.equal('');
+    expect(component.props.disableDrag).to.be.equal(false);
 
@@ -1167,2 +1168,82 @@ expect(component.props.tabsStyles).to.be.empty;
     });
+  })
+
+  describe('when disabled and attempts to drag', function () {
+    let called = false;
+
+    let target1;
+    let target2;
+
+    const tabs = [
+      (<Tab key={'tab1'} title={'tab1'}>
+        <div>
+          <h1>tab1Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab2'} title={'tab2'}>
+        <div>
+          <h1>tab2Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab3'} title={'tab3'}>
+        <div>
+          <h1>tab3Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab4'} title={'tab4'}>
+        <div>
+          <h1>tab4Content</h1>
+        </div>
+      </Tab>)
+
+    ];
+
+    beforeEach(() => {
+      ReactDom.render(
+        <Tabs
+          tabsClassNames={{tabCloseIcon: 'myCloseButton'}}
+          onTabPositionChange={function (e, _key, _currentTabs) {
+            called = true;
+          }}
+          selectedTab="tab1"
+          tabs={tabs}
+        disableDrag={true}/>, document.body);
+    });
+
+    afterEach(() => {
+      ReactDom.unmountComponentAtNode(document.body);
+      target1 = null;
+      target2 = null;
+      called = false;
+    });
+
+    it('attemp to switch position when dragging is disabled', () => {
+
+      target1 = document.getElementsByClassName('rdTab')[0];
+      target2 = document.getElementsByClassName('rdTab')[1];
+
+      let clientY = target1.getBoundingClientRect().top + 5;
+      let droppedToX = target2.getBoundingClientRect().left + 10;
+
+      triggerEvent(target1, 'mousedown', {
+        clientX: target1.getBoundingClientRect().left + 5,
+        clientY: clientY,
+        offset: {
+          left: target1.getBoundingClientRect().left + 10,
+          top: target1.getBoundingClientRect().top + 10
+        }
+      });
+
+      triggerEvent(target1, 'mousemove', {
+        clientX: target2.getBoundingClientRect().left + 10,
+        clientY: clientY
+      });
+
+      triggerEvent(target1, 'mouseup', {
+        clientX: droppedToX,
+        clientY: clientY
+      });
+
+      expect(called).to.be.equal(false);
+    });
   });
@@ -1169,0 +1250,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

195079

increased by1.32%

Lines of code

4345

increased by1.66%

Number of lines in readme file

298

increased by1.02%

No dependency changes