react-draggable-tab - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

CHANGELOG.md

 ## Change Log
 
+### PR
+
+  This version contains a breaking change. The name of the Tab 'disableClose' property,
+  which shadowed a standard property name and resulted in a React warning, has been changed
+  to 'unclosable'.
+ 
+  **TESTS ARE BROKEN**. `react-addons-test-utils` has a hard dependency on React 15. For
+  React 16, Facebook has moved the utilities into `react-dom/test-utils` and
+  `react-test-renderer/shallow`, and they are quite a bit different.
+
+  * #73 [Invariant Violation: addComponentAsRefTo(...): ...](https://github.com/georgeOsdDev/react-draggable-tab/issues/73)
+  may be better. The React version has been updated, but react-draggable-tab is still using string refs, which is deprecated.
+  * #90 [React.PropTypes should be replaced by just PropTypes](https://github.com/georgeOsdDev/react-draggable-tab/issues/90)
+  * #92 [Update to React v16](https://github.com/georgeOsdDev/react-draggable-tab/issues/92)
+  Updated all libraries. Uses React 16.2.0.
+  * #93 [Resolve all eslint "airbnb" errors](https://github.com/georgeOsdDev/react-draggable-tab/issues/93)
+  (except in tests)
+
 ### Ver 0.8.1
@@ -4,0 +22,0 @@

example/app.js

@@ -6,4 +6,3 @@ 'use strict';
 import ReactDOM from 'react-dom';
-import injectTapEventPlugin from 'react-tap-event-plugin';
-injectTapEventPlugin();
+import PropTypes from 'prop-types';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
@@ -44,4 +43,4 @@ import {Dialog, FlatButton, Menu, MenuItem, TextField} from 'material-ui';
 
-    let icon = (<image src='icon.png' style={{height:'13px'}}/>);
-    let fonticon = (<icon className='icon-html5'/>);
+    let icon = (<img src='icon.png' style={{height:'13px'}}/>);
+    let fonticon = (<span className='icon-html5'/>);
     let badge = (<DynamicTabBadge />);
@@ -51,3 +50,3 @@
       tabs:[
-        (<Tab key={'tab0'} title={'unclosable tab'} disableClose={true} {...this.makeListeners('tab0')}>
+        (<Tab key={'tab0'} title={'unclosable tab'} uncloseable={true} {...this.makeListeners('tab0')}>
           <div>
@@ -79,3 +78,3 @@ <h1>This tab cannot close</h1>
             <h1>Super big content</h1>
-              {Array(10000).fill().map(() => <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>)}
+              {Array(10000).fill(0).map((_, i) => <p key={i}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>)}
           </div>
@@ -92,3 +91,4 @@ </Tab>),
       menuPosition: {},
-      showMenu: false
+      showMenu: false,
+      dialogOpen: false
     };
@@ -112,4 +112,2 @@ }
       onDoubleClick: (e) => { console.log('onDoubleClick', key, e); this.handleTabDoubleClick(key, e)},
-      onMouseEnter: (e) => { console.log('onMouseEnter', key, e);},
-      onMouseLeave: (e) => { console.log('onMouseLeave', key, e);}
     }
@@ -149,3 +147,3 @@ }
 
-  handleTabDoubleClick(key, e) {
+  handleTabDoubleClick(key) {
     this.setState({
@@ -196,10 +194,9 @@ editTabKey: key,
   _onDialogSubmit() {
-    let title = this.refs.input.getValue();
-    let newTabs = _.map(this.state.tabs, (tab) => {
-      if(tab.key === this.state.editTabKey) {
-        return React.cloneElement(tab, {title: title});
-      } else {
+    const replaceFunc = _.bind((tab) => {
+        if (tab.key === this.state.editTabKey) {
+          return React.cloneElement(tab, {title: this.refs.input.getValue()});
+        }
         return tab;
-      }
-    });
+      }, this),
+      newTabs = _.map(this.state.tabs, replaceFunc);
     this.setState({
@@ -224,10 +221,2 @@ tabs: newTabs,
 
-  _handleBadgeInc() {
-    this.setState({badgeCount: this.state.badgeCount + 1});
-  }
-
-  _handleBadgeDec() {
-    this.setState({badgeCount: this.state.badgeCount + 1});
-  }
-
   shouldTabClose(e, key){
@@ -244,3 +233,3 @@ console.log('should tab close', e, key);
         secondary={true}
-        onTouchTap={this._onDialogCancel.bind(this)}
+        onClick={this._onDialogCancel.bind(this)}
       />,
@@ -251,3 +240,3 @@ <FlatButton
         keyboardFocused={true}
-        onTouchTap={this._onDialogSubmit.bind(this)}
+        onClick={this._onDialogSubmit.bind(this)}
       />
@@ -262,3 +251,3 @@ ];
       backgroundColor: '#F0F0F0'
-    }
+    };
 
@@ -302,3 +291,3 @@ return (
           <TextField
-            ref='input' style={{width: '90%'}}/>
+            ref='input' id="rename-input" style={{width: '90%'}}/>
         </Dialog>
@@ -314,5 +303,5 @@ <p style={{position: 'fixed', 'bottom': '10px'}}>
 App.childContextTypes = {
-  muiTheme: React.PropTypes.object
+  muiTheme: PropTypes.object
 };
 
 ReactDOM.render(<App/>, document.getElementById('tabs'));

example/DynamicTabBadge.js

 'use strict';
 
-import _     from 'lodash';
 import React from 'react';
@@ -30,4 +29,4 @@ import NotificationBadge, {Effect} from 'react-notification-badge';
   }
-};
+}
 
 export default DynamicTabContent;

example/DynamicTabContent.js

 'use strict';
 
-import _     from 'lodash';
 import React from 'react';
@@ -27,4 +26,4 @@
   }
-};
+}
 
 export default DynamicTabContent;

lib/components/CloseIcon.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
@@ -40,3 +44,3 @@
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CloseIcon).call(this, props));
+    var _this = _possibleConstructorReturn(this, (CloseIcon.__proto__ || Object.getPrototypeOf(CloseIcon)).call(this, props));
 
@@ -69,2 +73,3 @@ _this.state = {
       var className = this.props.className;
+
       if (this.state.hover) {
@@ -75,3 +80,2 @@ iconStyle = _styleOverride2.default.merge(this.props.style, _styleOverride2.default.merge(_TabStyles2.default.tabCloseIconOnHover, this.props.hoverStyle));
         iconStyle = this.props.style;
-        className = this.props.className;
       }
@@ -102,7 +106,7 @@
 CloseIcon.propTypes = {
-  style: _react2.default.PropTypes.object,
-  hoverStyle: _react2.default.PropTypes.object,
-  onClick: _react2.default.PropTypes.func
+  style: _propTypes2.default.object,
+  hoverStyle: _propTypes2.default.object,
+  onClick: _propTypes2.default.func
 };
 
 exports.default = CloseIcon;

lib/components/CustomDraggable.js

@@ -27,3 +27,3 @@ 'use strict';
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(CustomDraggable).apply(this, arguments));
+    return _possibleConstructorReturn(this, (CustomDraggable.__proto__ || Object.getPrototypeOf(CustomDraggable)).apply(this, arguments));
   }
@@ -30,0 +30,0 @@

lib/components/Tab.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,3 +32,3 @@
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Tab).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).call(this, props));
 
@@ -49,3 +53,3 @@ _this.state = {};
   afterTitle: _react2.default.createElement('span', null),
-  disableClose: false,
+  uncloseable: false,
   tabClassNames: {
@@ -67,37 +71,37 @@ tab: '',
 Tab.propTypes = {
-  beforeTitle: _react2.default.PropTypes.element,
-  title: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]).isRequired,
-  afterTitle: _react2.default.PropTypes.element,
-  disableClose: _react2.default.PropTypes.bool,
-  tabClassNames: _react2.default.PropTypes.shape({
-    tab: _react2.default.PropTypes.string,
-    tabBefore: _react2.default.PropTypes.string,
-    tabAfter: _react2.default.PropTypes.string,
-    tabBeforeTitle: _react2.default.PropTypes.string,
-    tabTitle: _react2.default.PropTypes.string,
-    tabAfterTitle: _react2.default.PropTypes.string,
-    tabCloseIcon: _react2.default.PropTypes.string,
-    tabActive: _react2.default.PropTypes.string,
-    tabHover: _react2.default.PropTypes.string
+  beforeTitle: _propTypes2.default.element,
+  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]).isRequired,
+  afterTitle: _propTypes2.default.element,
+  uncloseable: _propTypes2.default.bool,
+  tabClassNames: _propTypes2.default.shape({
+    tab: _propTypes2.default.string,
+    tabBefore: _propTypes2.default.string,
+    tabAfter: _propTypes2.default.string,
+    tabBeforeTitle: _propTypes2.default.string,
+    tabTitle: _propTypes2.default.string,
+    tabAfterTitle: _propTypes2.default.string,
+    tabCloseIcon: _propTypes2.default.string,
+    tabActive: _propTypes2.default.string,
+    tabHover: _propTypes2.default.string
   }),
-  tabStyles: _react2.default.PropTypes.shape({
-    tab: _react2.default.PropTypes.object,
-    tabBefore: _react2.default.PropTypes.object,
-    tabAfter: _react2.default.PropTypes.object,
-    tabTitle: _react2.default.PropTypes.object,
-    tabActive: _react2.default.PropTypes.object,
-    tabTitleActive: _react2.default.PropTypes.object,
-    tabBeforeActive: _react2.default.PropTypes.object,
-    tabAfterActive: _react2.default.PropTypes.object,
-    tabOnHover: _react2.default.PropTypes.object,
-    tabTitleOnHover: _react2.default.PropTypes.object,
-    tabBeforeOnHover: _react2.default.PropTypes.object,
-    tabAfterOnHover: _react2.default.PropTypes.object,
-    tabCloseIcon: _react2.default.PropTypes.object,
-    tabCloseIconHover: _react2.default.PropTypes.object
+  tabStyles: _propTypes2.default.shape({
+    tab: _propTypes2.default.object,
+    tabBefore: _propTypes2.default.object,
+    tabAfter: _propTypes2.default.object,
+    tabTitle: _propTypes2.default.object,
+    tabActive: _propTypes2.default.object,
+    tabTitleActive: _propTypes2.default.object,
+    tabBeforeActive: _propTypes2.default.object,
+    tabAfterActive: _propTypes2.default.object,
+    tabOnHover: _propTypes2.default.object,
+    tabTitleOnHover: _propTypes2.default.object,
+    tabBeforeOnHover: _propTypes2.default.object,
+    tabAfterOnHover: _propTypes2.default.object,
+    tabCloseIcon: _propTypes2.default.object,
+    tabCloseIconHover: _propTypes2.default.object
   }),
-  containerStyle: _react2.default.PropTypes.object,
-  hiddenContainerStyle: _react2.default.PropTypes.object
+  containerStyle: _propTypes2.default.object,
+  hiddenContainerStyle: _propTypes2.default.object
 };
 
 exports.default = Tab;

lib/components/TabContainer.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _styleOverride = require('../helpers/styleOverride');
@@ -40,3 +44,3 @@
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContainer).apply(this, arguments));
+    return _possibleConstructorReturn(this, (TabContainer.__proto__ || Object.getPrototypeOf(TabContainer)).apply(this, arguments));
   }
@@ -72,7 +76,7 @@
 TabContainer.propTypes = {
-  selected: _react2.default.PropTypes.bool.isRequired,
-  style: _react2.default.PropTypes.object,
-  hiddenStyle: _react2.default.PropTypes.object
+  selected: _propTypes2.default.bool.isRequired,
+  style: _propTypes2.default.object,
+  hiddenStyle: _propTypes2.default.object
 };
 
 exports.default = TabContainer;

lib/components/Tabs.js

@@ -11,6 +11,2 @@ 'use strict';
 
-var _lodash = require('lodash');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
 var _react = require('react');
@@ -24,2 +20,10 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 var _invariant = require('invariant');
@@ -71,2 +75,14 @@
 
+function tabStateFromProps(props) {
+  var tabs = [];
+  var idx = 0;
+  _react2.default.Children.forEach(props.tabs, function (tab) {
+    (0, _invariant2.default)(tab.key, 'There should be unique key in each Tab');
+
+    tabs[idx] = tab;
+    idx += 1;
+  });
+  return { tabs: tabs };
+}
+
 var Tabs = function (_React$Component) {
@@ -78,22 +94,21 @@ _inherits(Tabs, _React$Component);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Tabs).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props));
 
-    var tabs = _this._tabStateFromProps(_this.props).tabs;
+    var _tabStateFromProps = tabStateFromProps(_this.props),
+        tabs = _tabStateFromProps.tabs;
+
     var selectedTab = '';
     if (_this.props.selectedTab) {
-      selectedTab = _this.props.selectedTab;
+      selectedTab = _this.props.selectedTab; // eslint-disable-line prefer-destructuring
     } else if (_this.props.tabs) {
       selectedTab = _this.props.tabs[0].key;
     }
-    var hoveredTab = '';
-    var closedTabs = [];
-    var defaultState = {
+
+    _this.state = {
       tabs: tabs,
       selectedTab: selectedTab,
-      hoveredTab: hoveredTab,
-      closedTabs: closedTabs
+      hoveredTab: '',
+      closedTabs: []
     };
 
-    _this.state = defaultState;
-
     // Dom positons
@@ -107,25 +122,9 @@ // do not save in state
   _createClass(Tabs, [{
-    key: '_tabStateFromProps',
-    value: function _tabStateFromProps(props) {
-      var tabs = [];
-      var idx = 0;
-      _react2.default.Children.forEach(props.tabs, function (tab) {
-        (0, _invariant2.default)(tab.key, 'There should be unique key in each Tab');
-
-        tabs[idx] = tab;
-        idx++;
-      });
-
-      return {
-        tabs: tabs
-      };
-    }
-  }, {
-    key: '_isClosed',
-    value: function _isClosed(key) {
+    key: 'isClosed',
+    value: function isClosed(key) {
       return this.state.closedTabs.indexOf(key) > -1;
     }
   }, {
-    key: '_getIndexOfTabByKey',
-    value: function _getIndexOfTabByKey(key) {
+    key: 'getIndexOfTabByKey',
+    value: function getIndexOfTabByKey(key) {
       return _lodash2.default.findIndex(this.state.tabs, function (tab) {
@@ -136,17 +135,10 @@ return tab.key === key;
   }, {
-    key: '_getTabByKey',
-    value: function _getTabByKey(key) {
-      return _lodash2.default.where(this.state.tabs, function (tab) {
-        return tab.key === key;
-      });
-    }
-  }, {
-    key: '_getNextTabKey',
-    value: function _getNextTabKey(key) {
+    key: 'getNextTabKey',
+    value: function getNextTabKey(key) {
       var nextKey = void 0;
-      var current = this._getIndexOfTabByKey(key);
+      var current = this.getIndexOfTabByKey(key);
       if (current + 1 < this.state.tabs.length) {
         nextKey = this.state.tabs[current + 1].key;
-        if (this._isClosed(nextKey)) {
-          nextKey = this._getNextTabKey(nextKey);
+        if (this.isClosed(nextKey)) {
+          nextKey = this.getNextTabKey(nextKey);
         }
@@ -157,10 +149,10 @@ }
   }, {
-    key: '_getPrevTabKey',
-    value: function _getPrevTabKey(key) {
+    key: 'getPrevTabKey',
+    value: function getPrevTabKey(key) {
       var prevKey = void 0;
-      var current = this._getIndexOfTabByKey(key);
+      var current = this.getIndexOfTabByKey(key);
       if (current > 0) {
         prevKey = this.state.tabs[current - 1].key;
-        if (this._isClosed(prevKey)) {
-          prevKey = this._getPrevTabKey(prevKey);
+        if (this.isClosed(prevKey)) {
+          prevKey = this.getPrevTabKey(prevKey);
         }
@@ -171,28 +163,29 @@ }
   }, {
-    key: '_getCurrentOpenTabs',
-    value: function _getCurrentOpenTabs() {
-      return this._getOpenTabs(this.state.tabs);
+    key: 'getCurrentOpenTabs',
+    value: function getCurrentOpenTabs() {
+      return this.getOpenTabs(this.state.tabs);
     }
   }, {
-    key: '_getOpenTabs',
-    value: function _getOpenTabs(tabs) {
+    key: 'getOpenTabs',
+    value: function getOpenTabs(tabs) {
       var _this2 = this;
 
       return _lodash2.default.filter(tabs, function (tab) {
-        return !_this2._isClosed(tab.key);
+        return !_this2.isClosed(tab.key);
       });
     }
   }, {
-    key: '_moveTabPosition',
-    value: function _moveTabPosition(key1, key2) {
-      var t1 = this._getIndexOfTabByKey(key1);
-      var t2 = this._getIndexOfTabByKey(key2);
+    key: 'moveTabPosition',
+    value: function moveTabPosition(key1, key2) {
+      var t1 = this.getIndexOfTabByKey(key1);
+      var t2 = this.getIndexOfTabByKey(key2);
       return _utils2.default.slideArray(this.state.tabs, t1, t2);
     }
   }, {
-    key: '_saveStartPositions',
-    value: function _saveStartPositions() {
+    key: 'saveStartPositions',
+    value: function saveStartPositions() {
       var _this3 = this;
 
-      var positions = _lodash2.default.map(this.state.tabs, function (tab) {
+      // Do not save in state
+      this.startPositions = _lodash2.default.map(this.state.tabs, function (tab) {
         var el = _reactDom2.default.findDOMNode(_this3.refs[tab.key]);
@@ -205,8 +198,9 @@ var pos = el ? el.getBoundingClientRect() : {};
       });
-      // Do not save in state
-      this.startPositions = positions;
     }
+
+    // eslint-disable-next-line class-methods-use-this
+
   }, {
-    key: '_cancelEventSafety',
-    value: function _cancelEventSafety(e) {
+    key: 'cancelEventSafety',
+    value: function cancelEventSafety(e) {
       var ev = e;
@@ -223,2 +217,5 @@ if (typeof e.preventDefault !== 'function') {
     }
+
+    // eslint-disable-next-line class-methods-use-this
+
   }, {
@@ -230,3 +227,3 @@ key: 'componentWillMount',
     value: function componentDidMount() {
-      this._saveStartPositions();
+      this.saveStartPositions();
       this.bindShortcuts();
@@ -242,3 +239,3 @@ }
     value: function componentWillReceiveProps(nextProps) {
-      var newState = this._tabStateFromProps(nextProps);
+      var newState = tabStateFromProps(nextProps);
       if (nextProps.selectedTab !== 'undefined') {
@@ -251,2 +248,5 @@ newState.selectedTab = nextProps.selectedTab;
     }
+
+    // eslint-disable-next-line class-methods-use-this
+
   }, {
@@ -258,3 +258,3 @@ key: 'componentWillUpdate',
     value: function componentDidUpdate() {
-      this._saveStartPositions();
+      this.saveStartPositions();
     }
@@ -269,3 +269,3 @@ }, {
           _mousetrap2.default.bind(this.props.shortCutKeys.close, function (e) {
-            var ev = _this4._cancelEventSafety(e);
+            var ev = _this4.cancelEventSafety(e);
             if (_this4.state.selectedTab) {
@@ -278,3 +278,3 @@ _this4.handleCloseButtonClick(_this4.state.selectedTab, ev);
           _mousetrap2.default.bind(this.props.shortCutKeys.create, function (e) {
-            var ev = _this4._cancelEventSafety(e);
+            var ev = _this4.cancelEventSafety(e);
             _this4.handleAddButtonClick(ev);
@@ -285,3 +285,3 @@ });
           _mousetrap2.default.bind(this.props.shortCutKeys.moveRight, function (e) {
-            var ev = _this4._cancelEventSafety(e);
+            var ev = _this4.cancelEventSafety(e);
             _this4.moveRight(ev);
@@ -292,3 +292,3 @@ });
           _mousetrap2.default.bind(this.props.shortCutKeys.moveLeft, function (e) {
-            var ev = _this4._cancelEventSafety(e);
+            var ev = _this4.cancelEventSafety(e);
             _this4.moveLeft(ev);
@@ -300,7 +300,2 @@ });
   }, {
-    key: 'unbindShortcuts',
-    value: function unbindShortcuts() {
-      _mousetrap2.default.reset();
-    }
-  }, {
     key: 'handleDragStart',
@@ -320,4 +315,4 @@ value: function handleDragStart() {
         if (shoudBeSwap) {
-          var idx1 = _this5._getIndexOfTabByKey(key);
-          var idx2 = _this5._getIndexOfTabByKey(pos.key);
+          var idx1 = _this5.getIndexOfTabByKey(key);
+          var idx2 = _this5.getIndexOfTabByKey(pos.key);
           var minus = idx1 > idx2 ? 1 : -1;
@@ -336,7 +331,7 @@ var movePx = minus * (pos.pos.right - pos.pos.left) - tempMoved;
       var deltaX = e.pageX || e.clientX;
-      var swapedTabs = void 0;
+      var swapedTabs = null;
       _lodash2.default.each(this.startPositions, function (pos) {
         var shoudBeSwap = key !== pos.key && pos.pos.left < deltaX && deltaX < pos.pos.right;
         if (shoudBeSwap) {
-          swapedTabs = _this6._moveTabPosition(key, pos.key);
+          swapedTabs = _this6.moveTabPosition(key, pos.key);
         }
@@ -347,10 +342,9 @@ _reactDom2.default.findDOMNode(_this6.refs[pos.key]).style.transform = 'translate(0px, 0px)';
 
-      var newState = {
+      this.dragging = false;
+      this.setState({
         tabs: nextTabs,
         selectedTab: key
-      };
-      this.dragging = false;
-      this.setState(newState, function () {
+      }, function () {
         if (swapedTabs) {
-          _this6.props.onTabPositionChange(e, key, _this6._getOpenTabs(nextTabs));
+          _this6.props.onTabPositionChange(e, key, _this6.getOpenTabs(nextTabs));
         }
@@ -365,3 +359,3 @@ });
       var isBehindTab = key !== this.state.selectedTab;
-      var idx = this._getIndexOfTabByKey(key);
+      var idx = this.getIndexOfTabByKey(key);
       var isDragAfter = this.startPositions[idx].moved !== 0;
@@ -375,6 +369,6 @@ if (isBehindTab && isDragAfter && this.props.keepSelectedTab) {
       if (classes.indexOf('rdTabCloseIcon') > -1) {
-        this._cancelEventSafety(e);
+        this.cancelEventSafety(e);
       } else {
         this.setState({ selectedTab: key }, function () {
-          _this7.props.onTabSelect(e, key, _this7._getCurrentOpenTabs());
+          _this7.props.onTabSelect(e, key, _this7.getCurrentOpenTabs());
         });
@@ -408,6 +402,4 @@ }
           });
-        } else {
-          if (_lodash2.default.isFunction(onMouseLeave)) {
-            onMouseLeave(e);
-          }
+        } else if (_lodash2.default.isFunction(onMouseLeave)) {
+          onMouseLeave(e);
         }
@@ -421,10 +413,10 @@ }
 
-      var ev = this._cancelEventSafety(e);
-      var doClose = function doClose() {
+      var ev = this.cancelEventSafety(e);
+      var doClose = function () {
         var nextSelected = void 0;
 
         if (_this8.state.selectedTab === key) {
-          nextSelected = _this8._getNextTabKey(key);
+          nextSelected = _this8.getNextTabKey(key);
           if (!nextSelected) {
-            nextSelected = _this8._getPrevTabKey(key);
+            nextSelected = _this8.getPrevTabKey(key);
           }
@@ -440,3 +432,3 @@ } else {
         }, function () {
-          var currentOpenTabs = _this8._getCurrentOpenTabs();
+          var currentOpenTabs = _this8.getCurrentOpenTabs();
           _this8.props.onTabClose(ev, key, currentOpenTabs);
@@ -455,3 +447,3 @@ if (shoudBeNotifyTabChange) {
     value: function handleAddButtonClick(e) {
-      this.props.onTabAddButtonClick(e, this._getCurrentOpenTabs());
+      this.props.onTabAddButtonClick(e, this.getCurrentOpenTabs());
     }
@@ -463,3 +455,3 @@ }, {
 
-      var nextSelected = this._getNextTabKey(this.state.selectedTab);
+      var nextSelected = this.getNextTabKey(this.state.selectedTab);
       if (!nextSelected) {
@@ -470,3 +462,3 @@ nextSelected = this.props.tabs[0] ? this.props.tabs[0].key : '';
         this.setState({ selectedTab: nextSelected }, function () {
-          _this9.props.onTabSelect(e, nextSelected, _this9._getCurrentOpenTabs());
+          _this9.props.onTabSelect(e, nextSelected, _this9.getCurrentOpenTabs());
         });
@@ -480,3 +472,3 @@ }
 
-      var nextSelected = this._getPrevTabKey(this.state.selectedTab);
+      var nextSelected = this.getPrevTabKey(this.state.selectedTab);
       if (!nextSelected) {
@@ -487,3 +479,3 @@ nextSelected = _lodash2.default.last(this.props.tabs) ? _lodash2.default.last(this.props.tabs).key : '';
         this.setState({ selectedTab: nextSelected }, function () {
-          _this10.props.onTabSelect(e, nextSelected, _this10._getCurrentOpenTabs());
+          _this10.props.onTabSelect(e, nextSelected, _this10.getCurrentOpenTabs());
         });
@@ -495,3 +487,3 @@ }
     value: function getCloseButton(tab, style, classes, hoverStyleBase) {
-      if (tab.props.disableClose) {
+      if (tab.props.uncloseable) {
         return '';
@@ -507,3 +499,3 @@ }
           onClick: this.handleCloseButtonClick.bind(this, tab.key) },
-        '×'
+        '\xD7'
       );
@@ -539,13 +531,13 @@ }
       // append tabs classNames
-      var _tabClassNames = {};
-      _tabClassNames.tabWrapper = (0, _classnames2.default)('rdTabWrapper', this.props.tabsClassNames.tabWrapper);
-      _tabClassNames.tabBar = (0, _classnames2.default)('rdTabBar', this.props.tabsClassNames.tabBar);
-      _tabClassNames.tabBarAfter = (0, _classnames2.default)('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
-      _tabClassNames.tab = (0, _classnames2.default)('rdTab', this.props.tabsClassNames.tab);
-      _tabClassNames.tabBefore = (0, _classnames2.default)('rdTabBefore', this.props.tabsClassNames.tabBefore);
-      _tabClassNames.tabAfter = (0, _classnames2.default)('rdTabAfter', this.props.tabsClassNames.tabAfter);
-      _tabClassNames.tabTitle = (0, _classnames2.default)('rdTabTitle', this.props.tabsClassNames.tabTitle);
-      _tabClassNames.tabBeforeTitle = (0, _classnames2.default)('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
-      _tabClassNames.tabAfterTitle = (0, _classnames2.default)('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
-      _tabClassNames.tabCloseIcon = (0, _classnames2.default)('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
+      var xtabClassNames = {};
+      xtabClassNames.tabWrapper = (0, _classnames2.default)('rdTabWrapper', this.props.tabsClassNames.tabWrapper);
+      xtabClassNames.tabBar = (0, _classnames2.default)('rdTabBar', this.props.tabsClassNames.tabBar);
+      xtabClassNames.tabBarAfter = (0, _classnames2.default)('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
+      xtabClassNames.tab = (0, _classnames2.default)('rdTab', this.props.tabsClassNames.tab);
+      xtabClassNames.tabBefore = (0, _classnames2.default)('rdTabBefore', this.props.tabsClassNames.tabBefore);
+      xtabClassNames.tabAfter = (0, _classnames2.default)('rdTabAfter', this.props.tabsClassNames.tabAfter);
+      xtabClassNames.tabTitle = (0, _classnames2.default)('rdTabTitle', this.props.tabsClassNames.tabTitle);
+      xtabClassNames.tabBeforeTitle = (0, _classnames2.default)('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
+      xtabClassNames.tabAfterTitle = (0, _classnames2.default)('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
+      xtabClassNames.tabCloseIcon = (0, _classnames2.default)('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
 
@@ -557,16 +549,14 @@ var content = [];
         }
-        var _tab$props = tab.props;
-        var beforeTitle = _tab$props.beforeTitle;
-        var title = _tab$props.title;
-        var afterTitle = _tab$props.afterTitle;
-        var disableClose = _tab$props.disableClose;
-        var tabClassNames = _tab$props.tabClassNames;
-        var tabStyles = _tab$props.tabStyles;
-        var containerStyle = _tab$props.containerStyle;
-        var hiddenContainerStyle = _tab$props.hiddenContainerStyle;
-        var onClick = _tab$props.onClick;
-        var onMouseEnter = _tab$props.onMouseEnter;
-        var onMouseLeave = _tab$props.onMouseLeave;
 
-        var others = _objectWithoutProperties(_tab$props, ['beforeTitle', 'title', 'afterTitle', 'disableClose', 'tabClassNames', 'tabStyles', 'containerStyle', 'hiddenContainerStyle', 'onClick', 'onMouseEnter', 'onMouseLeave']);
+        var _tab$props = tab.props,
+            beforeTitle = _tab$props.beforeTitle,
+            title = _tab$props.title,
+            afterTitle = _tab$props.afterTitle,
+            tabClassNames = _tab$props.tabClassNames,
+            tabStyles = _tab$props.tabStyles,
+            containerStyle = _tab$props.containerStyle,
+            hiddenContainerStyle = _tab$props.hiddenContainerStyle,
+            onMouseEnter = _tab$props.onMouseEnter,
+            onMouseLeave = _tab$props.onMouseLeave,
+            others = _objectWithoutProperties(_tab$props, ['beforeTitle', 'title', 'afterTitle', 'tabClassNames', 'tabStyles', 'containerStyle', 'hiddenContainerStyle', 'onMouseEnter', 'onMouseLeave']);
 
@@ -582,9 +572,9 @@ // override inline each tab styles
 
-        var tabClasses = (0, _classnames2.default)(_tabClassNames.tab, tabClassNames.tab);
-        var tabBeforeClasses = (0, _classnames2.default)(_tabClassNames.tabBefore, tabClassNames.tabBefore);
-        var tabAfterClasses = (0, _classnames2.default)(_tabClassNames.tabAfter, tabClassNames.tabAfter);
-        var tabTitleClasses = (0, _classnames2.default)(_tabClassNames.tabTitle, tabClassNames.tabTitle);
-        var tabBeforeTitleClasses = (0, _classnames2.default)(_tabClassNames.tabBeforeTitle, tabClassNames.tabBeforeTitle);
-        var tabAfterTitleClasses = (0, _classnames2.default)(_tabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
-        var tabCloseIconClasses = (0, _classnames2.default)(_tabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
+        var tabClasses = (0, _classnames2.default)(xtabClassNames.tab, tabClassNames.tab);
+        var tabBeforeClasses = (0, _classnames2.default)(xtabClassNames.tabBefore, tabClassNames.tabBefore);
+        var tabAfterClasses = (0, _classnames2.default)(xtabClassNames.tabAfter, tabClassNames.tabAfter);
+        var tabTitleClasses = (0, _classnames2.default)(xtabClassNames.tabTitle, tabClassNames.tabTitle);
+        var tabBeforeTitleClasses = (0, _classnames2.default)(xtabClassNames.tabBeforeTitle, tabClassNames.tabBeforeTitle);
+        var tabAfterTitleClasses = (0, _classnames2.default)(xtabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
+        var tabCloseIconClasses = (0, _classnames2.default)(xtabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
 
@@ -599,3 +589,4 @@ if (_this11.state.selectedTab === tab.key) {
             _TabContainer2.default,
-            { key: 'tabContainer#' + tab.key, selected: true, style: containerStyle },
+            { key: 'tabContainer#' + tab.key, selected: true,
+              style: containerStyle },
             tab
@@ -613,3 +604,7 @@ ));
             _TabContainer2.default,
-            { key: 'tabContainer#' + tab.key, selected: false, style: containerStyle, hiddenStyle: hiddenContainerStyle },
+            {
+              key: 'tabContainer#' + tab.key,
+              selected: false,
+              style: containerStyle,
+              hiddenStyle: hiddenContainerStyle },
             tab
@@ -634,3 +629,4 @@ ));
           {
-            key: 'draggable_tabs_' + tab.key,
+            key: tab.key,
+            disabled: _this11.props.disableDrag,
             axis: 'x',
@@ -652,2 +648,7 @@ cancel: '.rdTabCloseIcon',
               ref: tab.key
+              // TODO: This copies props to <li> which it does not understand.
+              // This isn't a major problem, but the 'uncloseable' prop is
+              // passed as a boolean. In Development mode react-dom will give a
+              // warning that non-boolean prop 'uncloseable' is being passed as
+              // a boolean to <li>.
             }, others),
@@ -680,6 +681,6 @@ _react2.default.createElement(
         'div',
-        { style: tabInlineStyles.tabWrapper, className: _tabClassNames.tabWrapper },
+        { style: tabInlineStyles.tabWrapper, className: xtabClassNames.tabWrapper },
         _react2.default.createElement(
           'ul',
-          { tabIndex: '-1', style: tabInlineStyles.tabBar, className: _tabClassNames.tabBar },
+          { tabIndex: '-1', style: tabInlineStyles.tabBar, className: xtabClassNames.tabBar },
           tabs,
@@ -692,6 +693,11 @@ _react2.default.createElement(
         ),
-        _react2.default.createElement('span', { style: tabInlineStyles.tabBarAfter, className: _tabClassNames.tabBarAfter }),
+        _react2.default.createElement('span', { style: tabInlineStyles.tabBarAfter, className: xtabClassNames.tabBarAfter }),
         content
       );
     }
+  }], [{
+    key: 'unbindShortcuts',
+    value: function unbindShortcuts() {
+      _mousetrap2.default.reset();
+    }
   }]);
@@ -731,57 +737,59 @@
   },
-  keepSelectedTab: false
+  keepSelectedTab: false,
+  disableDrag: false
 };
 
 Tabs.propTypes = {
-  tabs: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.element),
+  tabs: _propTypes2.default.arrayOf(_propTypes2.default.element),
 
-  selectedTab: _react2.default.PropTypes.string,
-  tabsClassNames: _react2.default.PropTypes.shape({
-    tabWrapper: _react2.default.PropTypes.string,
-    tabBar: _react2.default.PropTypes.string,
-    tabBarAfter: _react2.default.PropTypes.string,
-    tab: _react2.default.PropTypes.string,
-    tabBefore: _react2.default.PropTypes.string,
-    tabAfter: _react2.default.PropTypes.string,
-    tabBeforeTitle: _react2.default.PropTypes.string,
-    tabTitle: _react2.default.PropTypes.string,
-    tabAfterTitle: _react2.default.PropTypes.string,
-    tabCloseIcon: _react2.default.PropTypes.string,
-    tabActive: _react2.default.PropTypes.string,
-    tabHover: _react2.default.PropTypes.string
+  selectedTab: _propTypes2.default.string,
+  tabsClassNames: _propTypes2.default.shape({
+    tabWrapper: _propTypes2.default.string,
+    tabBar: _propTypes2.default.string,
+    tabBarAfter: _propTypes2.default.string,
+    tab: _propTypes2.default.string,
+    tabBefore: _propTypes2.default.string,
+    tabAfter: _propTypes2.default.string,
+    tabBeforeTitle: _propTypes2.default.string,
+    tabTitle: _propTypes2.default.string,
+    tabAfterTitle: _propTypes2.default.string,
+    tabCloseIcon: _propTypes2.default.string,
+    tabActive: _propTypes2.default.string,
+    tabHover: _propTypes2.default.string
   }),
-  tabsStyles: _react2.default.PropTypes.shape({
-    tabWrapper: _react2.default.PropTypes.object,
-    tabBar: _react2.default.PropTypes.object,
-    tabBarAfter: _react2.default.PropTypes.object,
-    tab: _react2.default.PropTypes.object,
-    tabBefore: _react2.default.PropTypes.object,
-    tabAfter: _react2.default.PropTypes.object,
-    tabTitle: _react2.default.PropTypes.object,
-    tabActive: _react2.default.PropTypes.object,
-    tabTitleActive: _react2.default.PropTypes.object,
-    tabBeforeActive: _react2.default.PropTypes.object,
-    tabAfterActive: _react2.default.PropTypes.object,
-    tabOnHover: _react2.default.PropTypes.object,
-    tabTitleOnHover: _react2.default.PropTypes.object,
-    tabBeforeOnHover: _react2.default.PropTypes.object,
-    tabAfterOnHover: _react2.default.PropTypes.object,
-    tabCloseIcon: _react2.default.PropTypes.object,
-    tabCloseIconOnHover: _react2.default.PropTypes.object
+  tabsStyles: _propTypes2.default.shape({
+    tabWrapper: _propTypes2.default.object,
+    tabBar: _propTypes2.default.object,
+    tabBarAfter: _propTypes2.default.object,
+    tab: _propTypes2.default.object,
+    tabBefore: _propTypes2.default.object,
+    tabAfter: _propTypes2.default.object,
+    tabTitle: _propTypes2.default.object,
+    tabActive: _propTypes2.default.object,
+    tabTitleActive: _propTypes2.default.object,
+    tabBeforeActive: _propTypes2.default.object,
+    tabAfterActive: _propTypes2.default.object,
+    tabOnHover: _propTypes2.default.object,
+    tabTitleOnHover: _propTypes2.default.object,
+    tabBeforeOnHover: _propTypes2.default.object,
+    tabAfterOnHover: _propTypes2.default.object,
+    tabCloseIcon: _propTypes2.default.object,
+    tabCloseIconOnHover: _propTypes2.default.object
   }),
-  shortCutKeys: _react2.default.PropTypes.shape({
-    close: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string)]),
-    create: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string)]),
-    moveRight: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string)]),
-    moveLeft: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string)])
+  shortCutKeys: _propTypes2.default.shape({
+    close: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
+    create: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
+    moveRight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
+    moveLeft: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)])
   }),
-  tabAddButton: _react2.default.PropTypes.element,
-  onTabSelect: _react2.default.PropTypes.func,
-  onTabClose: _react2.default.PropTypes.func,
-  onTabAddButtonClick: _react2.default.PropTypes.func,
-  onTabPositionChange: _react2.default.PropTypes.func,
-  shouldTabClose: _react2.default.PropTypes.func,
-  keepSelectedTab: _react2.default.PropTypes.bool
+  tabAddButton: _propTypes2.default.element,
+  onTabSelect: _propTypes2.default.func,
+  onTabClose: _propTypes2.default.func,
+  onTabAddButtonClick: _propTypes2.default.func,
+  onTabPositionChange: _propTypes2.default.func,
+  shouldTabClose: _propTypes2.default.func,
+  keepSelectedTab: _propTypes2.default.bool,
+  disableDrag: _propTypes2.default.bool
 };
 
 exports.default = Tabs;

lib/helpers/styleOverride.js

@@ -13,3 +13,4 @@ 'use strict';
 
-var merge = function merge(original, override) {
+// eslint-disable-next-line new-cap
+var merge = function (original, override) {
   return _immutable2.default.Map(original).merge(override).toObject();
@@ -16,0 +17,0 @@ };

lib/helpers/utils.js

@@ -6,8 +6,8 @@ "use strict";
 });
-var slideArray = function slideArray(array, a, b) {
+var slideArray = function (array, a, b) {
   var retArr = void 0;
-  var _array = array.slice(0);
+  var xarray = array.slice(0);
 
   if (a < b) {
-    retArr = _array.map(function (v, idx) {
+    retArr = xarray.map(function (v, idx) {
       if (idx < a) {
@@ -19,8 +19,7 @@ return v;
         return array[a];
-      } else {
-        return v;
       }
+      return v;
     });
   } else {
-    retArr = _array.map(function (v, idx) {
+    retArr = xarray.map(function (v, idx) {
       if (idx < b) {
@@ -32,5 +31,4 @@ return v;
         return array[idx - 1];
-      } else {
-        return v;
       }
+      return v;
     });
@@ -37,0 +35,0 @@ }

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Draggable chrome like tab react component ",
   "main": "./lib/index.js",
   "scripts": {
-    "browser": "browser-sync start --files example/* --server example",
-    "watch:example": "watchify example/app.js -dv -o example/bundle.js",
-    "start:example": "NODE_ENV=production npm run watch:example & npm run browser",
+    "browser": "browser-sync start --files 'example/bundle.js' 'example/index.html' --server example",
+    "watch:example": "watchify example/app.js -dv -o example/bundle.js -t [ babelify ]",
+    "start:example:basex": "npm run clean && npm run build && (npm run watch:example & npm run browser)",
+    "start:example:base": "npm run clean && npm run build && ",
+    "start:example": "NODE_ENV=development npm run start:example:base",
+    "start:example:prod": "NODE_ENV=production npm run start:example:base",
     "test:local": "karma start",
     "test": "./node_modules/.bin/karma start --browsers Firefox --single-run",
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib"
+    "build": "NODE_ENV=production babel src --out-dir lib"
   },
@@ -32,58 +35,65 @@ "repository": {
   "devDependencies": {
-    "babel-cli": "^6.11.4",
-    "babel-core": "^6.13.2",
-    "babel-eslint": "^6.1.2",
-    "babel-preset-es2015": "^6.13.2",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-2": "^6.13.0",
-    "babelify": "^7.3.0",
-    "browser-sync": "^2.14.0",
-    "browserify": "^13.1.0",
-    "chai": "^3.5.0",
-    "eslint": "^3.3.0",
-    "eslint-config-airbnb": "^10.0.1",
-    "eslint-plugin-import": "^1.13.0",
-    "eslint-plugin-jsx-a11y": "^2.1.0",
-    "eslint-plugin-react": "^6.1.0",
-    "karma": "^1.2.0",
-    "karma-browserify": "^5.1.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-plugin-minify-dead-code-elimination": "^0.2.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babelify": "^8.0.0",
+    "browser-sync": "^2.23.5",
+    "browserify": "^15.2.0",
+    "chai": "^4.1.2",
+    "eslint": "^4.16.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1",
+    "karma": "^2.0.0",
+    "karma-browserify": "^5.1.3",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-cli": "1.0.1",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.1.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-cli": "^1.0.1",
+    "karma-firefox-launcher": "^1.1.0",
+    "karma-mocha": "^1.3.0",
     "karma-safari-launcher": "^1.0.0",
-    "karma-spec-reporter": "0.0.26",
-    "material-ui": "^0.15.4",
-    "mocha": "^3.0.2",
-    "react-addons-test-utils": "^15.3.0",
-    "react-notification-badge": "^1.2.0",
-    "react-tap-event-plugin": "^1.0.0",
-    "watchify": "^3.7.0"
+    "karma-spec-reporter": "^0.0.32",
+    "material-ui": "^0.20.0",
+    "mocha": "^5.0.0",
+    "react-notification-badge": "^1.3.4",
+    "react-tap-event-plugin": "^3.0.2",
+    "watchify": "^3.9.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "immutable": "^3.8.1",
-    "invariant": "^2.2.1",
-    "lodash": "^4.15.0",
-    "mousetrap": "^1.6.0",
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0",
-    "react-draggable": "^2.2.1"
+    "immutable": "^3.8.2",
+    "invariant": "^2.2.2",
+    "lodash": "^4.17.4",
+    "mousetrap": "^1.6.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-draggable": "^3.0.5"
   },
-  "peerDependencies": {
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0"
-  },
-  "browserify": {
+  "peerDependencies": {},
+  "babelify": {
     "transform": [
       [
-        "babelify",
+        "babel",
         {
           "compact": false,
           "presets": [
-            "es2015",
-            "stage-2",
-            "react"
-          ]
+            "env",
+            "react",
+            "stage-0"
+          ],
+          "env": {
+            "production": {
+              "plugins": [
+                "minify-dead-code-elimination"
+              ]
+            }
+          }
         }
@@ -90,0 +100,0 @@ ]

README.md

@@ -30,15 +30,15 @@ # 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)
   * `key`: *unique* key in `TabList`.
-    `React.PropTypes.string.isRequired`
+    `PropTypes.string.isRequired`
 
   * `beforeTitle`: element to show in tab. eg icon.
-    `React.PropTypes.element`
+    `PropTypes.element`
 
   * `title`: string or element to show in tab.
-    `React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]).isRequired`
+    `PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired`
 
   * `afterTitle`: element to show in tab. eg: notification badge
-    `React.PropTypes.element`
+    `PropTypes.element`
 
-  * `disableClose`: If `true`, closeButton will not be appeared in tab.
-    `React.PropTypes.bool` (Default `false`)
+  * `uncloseable`: If `true`, closeButton will not be appeared in tab.
+    `PropTypes.bool` (Default `false`)
 
@@ -91,15 +91,15 @@ ###### Style (for each tab)
   * `tabs`: Array of `Tab` elements.
-    `React.PropTypes.arrayOf(React.PropTypes.element)`
+    `PropTypes.arrayOf(PropTypes.element)`
 
   * `selectedTab`: key for selectedTab.
-    `React.PropTypes.string` default to first tab.
+    `PropTypes.string` default to first tab.
 
-  * 'disableDrag': disables the ability to drag the tabs.
-    'React.PropTypes.bool' default is false.
+  * `disableDrag`: disables the ability to drag the tabs.
+    `React.PropTypes.bool` default is false.
 
   * `tabAddButton`: element for add button.
-    `React.PropTypes.element`
+    `PropTypes.element`
 
   * `keepSelectedTab`: Prevent tab select on drag/move behind tab.
-    `React.PropTypes.bool` default `false`.
+    `PropTypes.bool` default `false`.
 
@@ -106,0 +106,0 @@ * `shouldTabClose(e, key)`: will be called before tab close event, return false if you want to stop tab close process, default `true`;

src/components/CloseIcon.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -28,11 +29,11 @@ import TabStyles from './TabStyles';
     let iconStyle = this.props.style;
-    let className = this.props.className;
+    let { className } = this.props;
     if (this.state.hover) {
-      iconStyle = StyleOverride.merge(this.props.style,
-                    StyleOverride.merge(TabStyles.tabCloseIconOnHover, this.props.hoverStyle)
-                  );
+      iconStyle = StyleOverride.merge(
+        this.props.style,
+        StyleOverride.merge(TabStyles.tabCloseIconOnHover, this.props.hoverStyle),
+      );
       className = classNames(this.props.className, 'hover');
     } else {
       iconStyle = this.props.style;
-      className = this.props.className;
     }
@@ -56,11 +57,12 @@
   hoverStyle: {},
-  onClick: () => {},
+  onClick: () => {
+  },
 };
 
 CloseIcon.propTypes = {
-  style: React.PropTypes.object,
-  hoverStyle: React.PropTypes.object,
-  onClick: React.PropTypes.func,
+  style: PropTypes.object,
+  hoverStyle: PropTypes.object,
+  onClick: PropTypes.func,
 };
 
 export default CloseIcon;

src/components/CustomDraggable.js

@@ -8,3 +8,3 @@ import Draggable from 'react-draggable';
       clientY: nextProps.start.y,
-    }
+    };
     this.setState(newState);
@@ -11,0 +11,0 @@ }

src/components/Tab.js

 import React from 'react';
 
+import PropTypes from 'prop-types';
+
 class Tab extends React.Component {
@@ -19,3 +21,3 @@ constructor(props) {
   afterTitle: <span />,
-  disableClose: false,
+  uncloseable: false,
   tabClassNames: {
@@ -37,40 +39,40 @@ tab: '',
 Tab.propTypes = {
-  beforeTitle: React.PropTypes.element,
-  title: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element,
+  beforeTitle: PropTypes.element,
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
   ]).isRequired,
-  afterTitle: React.PropTypes.element,
-  disableClose: React.PropTypes.bool,
-  tabClassNames: React.PropTypes.shape({
-    tab: React.PropTypes.string,
-    tabBefore: React.PropTypes.string,
-    tabAfter: React.PropTypes.string,
-    tabBeforeTitle: React.PropTypes.string,
-    tabTitle: React.PropTypes.string,
-    tabAfterTitle: React.PropTypes.string,
-    tabCloseIcon: React.PropTypes.string,
-    tabActive: React.PropTypes.string,
-    tabHover: React.PropTypes.string,
+  afterTitle: PropTypes.element,
+  uncloseable: PropTypes.bool,
+  tabClassNames: PropTypes.shape({
+    tab: PropTypes.string,
+    tabBefore: PropTypes.string,
+    tabAfter: PropTypes.string,
+    tabBeforeTitle: PropTypes.string,
+    tabTitle: PropTypes.string,
+    tabAfterTitle: PropTypes.string,
+    tabCloseIcon: PropTypes.string,
+    tabActive: PropTypes.string,
+    tabHover: PropTypes.string,
   }),
-  tabStyles: React.PropTypes.shape({
-    tab: React.PropTypes.object,
-    tabBefore: React.PropTypes.object,
-    tabAfter: React.PropTypes.object,
-    tabTitle: React.PropTypes.object,
-    tabActive: React.PropTypes.object,
-    tabTitleActive: React.PropTypes.object,
-    tabBeforeActive: React.PropTypes.object,
-    tabAfterActive: React.PropTypes.object,
-    tabOnHover: React.PropTypes.object,
-    tabTitleOnHover: React.PropTypes.object,
-    tabBeforeOnHover: React.PropTypes.object,
-    tabAfterOnHover: React.PropTypes.object,
-    tabCloseIcon: React.PropTypes.object,
-    tabCloseIconHover: React.PropTypes.object,
+  tabStyles: PropTypes.shape({
+    tab: PropTypes.object,
+    tabBefore: PropTypes.object,
+    tabAfter: PropTypes.object,
+    tabTitle: PropTypes.object,
+    tabActive: PropTypes.object,
+    tabTitleActive: PropTypes.object,
+    tabBeforeActive: PropTypes.object,
+    tabAfterActive: PropTypes.object,
+    tabOnHover: PropTypes.object,
+    tabTitleOnHover: PropTypes.object,
+    tabBeforeOnHover: PropTypes.object,
+    tabAfterOnHover: PropTypes.object,
+    tabCloseIcon: PropTypes.object,
+    tabCloseIconHover: PropTypes.object,
   }),
-  containerStyle: React.PropTypes.object,
-  hiddenContainerStyle: React.PropTypes.object,
+  containerStyle: PropTypes.object,
+  hiddenContainerStyle: PropTypes.object,
 };
 
 export default Tab;

src/components/TabContainer.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import StyleOverride from '../helpers/styleOverride';
@@ -13,3 +14,2 @@
 class TabContainer extends React.Component {
-
   render() {
@@ -38,7 +38,7 @@ let style = StyleOverride.merge(styles.root, this.props.style);
 TabContainer.propTypes = {
-  selected: React.PropTypes.bool.isRequired,
-  style: React.PropTypes.object,
-  hiddenStyle: React.PropTypes.object,
+  selected: PropTypes.bool.isRequired,
+  style: PropTypes.object,
+  hiddenStyle: PropTypes.object,
 };
 
 export default TabContainer;

src/components/Tabs.js

@@ -1,4 +0,5 @@
-import _ from 'lodash';
 import React from 'react';
 import ReactDom from 'react-dom';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
 import invariant from 'invariant';
@@ -16,2 +17,17 @@ import classNames from 'classnames';
 
+function tabStateFromProps(props) {
+  const tabs = [];
+  let idx = 0;
+  React.Children.forEach(props.tabs, (tab) => {
+    invariant(
+      tab.key,
+      'There should be unique key in each Tab',
+    );
+
+    tabs[idx] = tab;
+    idx += 1;
+  });
+  return { tabs };
+}
+
 class Tabs extends React.Component {
@@ -21,6 +37,6 @@ constructor(props) {
 
-    const tabs = this._tabStateFromProps(this.props).tabs;
+    const { tabs } = tabStateFromProps(this.props);
     let selectedTab = '';
     if (this.props.selectedTab) {
-      selectedTab = this.props.selectedTab;
+      selectedTab = this.props.selectedTab; // eslint-disable-line prefer-destructuring
     } else if (this.props.tabs) {
@@ -31,3 +47,3 @@ selectedTab = this.props.tabs[0].key;
     const closedTabs = [];
-    const defaultState = {
+    this.state = {
       tabs,
@@ -39,4 +55,2 @@ selectedTab,
 
-    this.state = defaultState;
-
     // Dom positons
@@ -48,39 +62,17 @@ // do not save in state
 
-  _tabStateFromProps(props) {
-    const tabs = [];
-    let idx = 0;
-    React.Children.forEach(props.tabs, (tab) => {
-      invariant(
-        tab.key,
-        'There should be unique key in each Tab'
-      );
-
-      tabs[idx] = tab;
-      idx++;
-    });
-
-    return {
-      tabs,
-    };
-  }
-
-  _isClosed(key) {
+  isClosed(key) {
     return this.state.closedTabs.indexOf(key) > -1;
   }
 
-  _getIndexOfTabByKey(key) {
-    return _.findIndex(this.state.tabs, (tab) => tab.key === key);
+  getIndexOfTabByKey(key) {
+    return _.findIndex(this.state.tabs, tab => tab.key === key);
   }
 
-  _getTabByKey(key) {
-    return _.where(this.state.tabs, (tab) => tab.key === key);
-  }
-
-  _getNextTabKey(key) {
+  getNextTabKey(key) {
     let nextKey;
-    const current = this._getIndexOfTabByKey(key);
+    const current = this.getIndexOfTabByKey(key);
     if (current + 1 < this.state.tabs.length) {
       nextKey = this.state.tabs[current + 1].key;
-      if (this._isClosed(nextKey)) {
-        nextKey = this._getNextTabKey(nextKey);
+      if (this.isClosed(nextKey)) {
+        nextKey = this.getNextTabKey(nextKey);
       }
@@ -91,9 +83,9 @@ }
 
-  _getPrevTabKey(key) {
+  getPrevTabKey(key) {
     let prevKey;
-    const current = this._getIndexOfTabByKey(key);
+    const current = this.getIndexOfTabByKey(key);
     if (current > 0) {
       prevKey = this.state.tabs[current - 1].key;
-      if (this._isClosed(prevKey)) {
-        prevKey = this._getPrevTabKey(prevKey);
+      if (this.isClosed(prevKey)) {
+        prevKey = this.getPrevTabKey(prevKey);
       }
@@ -104,18 +96,19 @@ }
 
-  _getCurrentOpenTabs() {
-    return this._getOpenTabs(this.state.tabs);
+  getCurrentOpenTabs() {
+    return this.getOpenTabs(this.state.tabs);
   }
 
-  _getOpenTabs(tabs) {
-    return _.filter(tabs, (tab) => !this._isClosed(tab.key));
+  getOpenTabs(tabs) {
+    return _.filter(tabs, tab => !this.isClosed(tab.key));
   }
 
-  _moveTabPosition(key1, key2) {
-    const t1 = this._getIndexOfTabByKey(key1);
-    const t2 = this._getIndexOfTabByKey(key2);
+  moveTabPosition(key1, key2) {
+    const t1 = this.getIndexOfTabByKey(key1);
+    const t2 = this.getIndexOfTabByKey(key2);
     return Utils.slideArray(this.state.tabs, t1, t2);
   }
 
-  _saveStartPositions() {
-    const positions = _.map(this.state.tabs, (tab) => {
+  saveStartPositions() {
+    // Do not save in state
+    this.startPositions = _.map(this.state.tabs, (tab) => {
       const el = ReactDom.findDOMNode(this.refs[tab.key]);
@@ -128,13 +121,14 @@ const pos = el ? el.getBoundingClientRect() : {};
     });
-    // Do not save in state
-    this.startPositions = positions;
   }
 
-  _cancelEventSafety(e) {
+  // eslint-disable-next-line class-methods-use-this
+  cancelEventSafety(e) {
     const ev = e;
     if (typeof e.preventDefault !== 'function') {
-      ev.preventDefault = () => {};
+      ev.preventDefault = () => {
+      };
     }
     if (typeof e.stopPropagation !== 'function') {
-      ev.stopPropagation = () => {};
+      ev.stopPropagation = () => {
+      };
     }
@@ -146,2 +140,3 @@ ev.preventDefault();
 
+  // eslint-disable-next-line class-methods-use-this
   componentWillMount() {
@@ -151,3 +146,3 @@ }
   componentDidMount() {
-    this._saveStartPositions();
+    this.saveStartPositions();
     this.bindShortcuts();
@@ -161,3 +156,3 @@ }
   componentWillReceiveProps(nextProps) {
-    const newState = this._tabStateFromProps(nextProps);
+    const newState = tabStateFromProps(nextProps);
     if (nextProps.selectedTab !== 'undefined') {
@@ -171,2 +166,3 @@ newState.selectedTab = nextProps.selectedTab;
 
+  // eslint-disable-next-line class-methods-use-this
   componentWillUpdate() {
@@ -176,3 +172,3 @@ }
   componentDidUpdate() {
-    this._saveStartPositions();
+    this.saveStartPositions();
   }
@@ -184,3 +180,3 @@
         Mousetrap.bind(this.props.shortCutKeys.close, (e) => {
-          const ev = this._cancelEventSafety(e);
+          const ev = this.cancelEventSafety(e);
           if (this.state.selectedTab) {
@@ -193,3 +189,3 @@ this.handleCloseButtonClick(this.state.selectedTab, ev);
         Mousetrap.bind(this.props.shortCutKeys.create, (e) => {
-          const ev = this._cancelEventSafety(e);
+          const ev = this.cancelEventSafety(e);
           this.handleAddButtonClick(ev);
@@ -200,3 +196,3 @@ });
         Mousetrap.bind(this.props.shortCutKeys.moveRight, (e) => {
-          const ev = this._cancelEventSafety(e);
+          const ev = this.cancelEventSafety(e);
           this.moveRight(ev);
@@ -207,3 +203,3 @@ });
         Mousetrap.bind(this.props.shortCutKeys.moveLeft, (e) => {
-          const ev = this._cancelEventSafety(e);
+          const ev = this.cancelEventSafety(e);
           this.moveLeft(ev);
@@ -215,3 +211,3 @@ });
 
-  unbindShortcuts() {
+  static unbindShortcuts() {
     Mousetrap.reset();
@@ -233,4 +229,4 @@ }
       if (shoudBeSwap) {
-        const idx1 = this._getIndexOfTabByKey(key);
-        const idx2 = this._getIndexOfTabByKey(pos.key);
+        const idx1 = this.getIndexOfTabByKey(key);
+        const idx2 = this.getIndexOfTabByKey(pos.key);
         const minus = idx1 > idx2 ? 1 : -1;
@@ -246,3 +242,3 @@ const movePx = (minus * (pos.pos.right - pos.pos.left)) - tempMoved;
     const deltaX = (e.pageX || e.clientX);
-    let swapedTabs;
+    let swapedTabs = null;
     _.each(this.startPositions, (pos) => {
@@ -254,3 +250,3 @@ const shoudBeSwap =
       if (shoudBeSwap) {
-        swapedTabs = this._moveTabPosition(key, pos.key);
+        swapedTabs = this.moveTabPosition(key, pos.key);
       }
@@ -268,3 +264,3 @@ ReactDom.findDOMNode(this.refs[pos.key]).style.transform = 'translate(0px, 0px)';
       if (swapedTabs) {
-        this.props.onTabPositionChange(e, key, this._getOpenTabs(nextTabs));
+        this.props.onTabPositionChange(e, key, this.getOpenTabs(nextTabs));
       }
@@ -276,3 +272,3 @@ });
     const isBehindTab = key !== this.state.selectedTab;
-    const idx = this._getIndexOfTabByKey(key);
+    const idx = this.getIndexOfTabByKey(key);
     const isDragAfter = this.startPositions[idx].moved !== 0;
@@ -286,6 +282,6 @@ if (isBehindTab && isDragAfter && this.props.keepSelectedTab) {
     if (classes.indexOf('rdTabCloseIcon') > -1) {
-      this._cancelEventSafety(e);
+      this.cancelEventSafety(e);
     } else {
       this.setState({ selectedTab: key }, () => {
-        this.props.onTabSelect(e, key, this._getCurrentOpenTabs());
+        this.props.onTabSelect(e, key, this.getCurrentOpenTabs());
       });
@@ -317,6 +313,4 @@ }
         });
-      } else {
-        if (_.isFunction(onMouseLeave)) {
-          onMouseLeave(e);
-        }
+      } else if (_.isFunction(onMouseLeave)) {
+        onMouseLeave(e);
       }
@@ -327,3 +321,3 @@ }
   handleCloseButtonClick(key, e) {
-    const ev = this._cancelEventSafety(e);
+    const ev = this.cancelEventSafety(e);
     const doClose = () => {
@@ -333,5 +327,5 @@ let nextSelected;
       if (this.state.selectedTab === key) {
-        nextSelected = this._getNextTabKey(key);
+        nextSelected = this.getNextTabKey(key);
         if (!nextSelected) {
-          nextSelected = this._getPrevTabKey(key);
+          nextSelected = this.getPrevTabKey(key);
         }
@@ -347,3 +341,3 @@ } else {
       }, () => {
-        const currentOpenTabs = this._getCurrentOpenTabs();
+        const currentOpenTabs = this.getCurrentOpenTabs();
         this.props.onTabClose(ev, key, currentOpenTabs);
@@ -361,7 +355,7 @@ if (shoudBeNotifyTabChange) {
   handleAddButtonClick(e) {
-    this.props.onTabAddButtonClick(e, this._getCurrentOpenTabs());
+    this.props.onTabAddButtonClick(e, this.getCurrentOpenTabs());
   }
 
   moveRight(e) {
-    let nextSelected = this._getNextTabKey(this.state.selectedTab);
+    let nextSelected = this.getNextTabKey(this.state.selectedTab);
     if (!nextSelected) {
@@ -372,3 +366,3 @@ nextSelected = this.props.tabs[0] ? this.props.tabs[0].key : '';
       this.setState({ selectedTab: nextSelected }, () => {
-        this.props.onTabSelect(e, nextSelected, this._getCurrentOpenTabs());
+        this.props.onTabSelect(e, nextSelected, this.getCurrentOpenTabs());
       });
@@ -379,3 +373,3 @@ }
   moveLeft(e) {
-    let nextSelected = this._getPrevTabKey(this.state.selectedTab);
+    let nextSelected = this.getPrevTabKey(this.state.selectedTab);
     if (!nextSelected) {
@@ -386,3 +380,3 @@ nextSelected = _.last(this.props.tabs) ? _.last(this.props.tabs).key : '';
       this.setState({ selectedTab: nextSelected }, () => {
-        this.props.onTabSelect(e, nextSelected, this._getCurrentOpenTabs());
+        this.props.onTabSelect(e, nextSelected, this.getCurrentOpenTabs());
       });
@@ -393,7 +387,6 @@ }
   getCloseButton(tab, style, classes, hoverStyleBase) {
-    if (tab.props.disableClose) {
+    if (tab.props.uncloseable) {
       return '';
     }
-    let onHoverStyle = StyleOverride.merge(
-      hoverStyleBase, tab.props.tabStyles.tabCloseIconOnHover);
+    const onHoverStyle = StyleOverride.merge(hoverStyleBase, tab.props.tabStyles.tabCloseIconOnHover);
     return (<CloseIcon
@@ -408,4 +401,3 @@ style={style}
     // override inline tabs styles
-    const tabInlineStyles = {
-    };
+    const tabInlineStyles = {};
     tabInlineStyles.tabWrapper = StyleOverride.merge(TabStyles.tabWrapper, this.props.tabsStyles.tabWrapper);
@@ -432,26 +424,24 @@ tabInlineStyles.tabBar = StyleOverride.merge(TabStyles.tabBar, this.props.tabsStyles.tabBar);
     // append tabs classNames
-    const _tabClassNames = {
-    };
-    _tabClassNames.tabWrapper = classNames('rdTabWrapper', this.props.tabsClassNames.tabWrapper);
-    _tabClassNames.tabBar = classNames('rdTabBar', this.props.tabsClassNames.tabBar);
-    _tabClassNames.tabBarAfter = classNames('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
-    _tabClassNames.tab = classNames('rdTab', this.props.tabsClassNames.tab);
-    _tabClassNames.tabBefore = classNames('rdTabBefore', this.props.tabsClassNames.tabBefore);
-    _tabClassNames.tabAfter = classNames('rdTabAfter', this.props.tabsClassNames.tabAfter);
-    _tabClassNames.tabTitle = classNames('rdTabTitle', this.props.tabsClassNames.tabTitle);
-    _tabClassNames.tabBeforeTitle = classNames('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
-    _tabClassNames.tabAfterTitle = classNames('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
-    _tabClassNames.tabCloseIcon = classNames('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
+    const xtabClassNames = {};
+    xtabClassNames.tabWrapper = classNames('rdTabWrapper', this.props.tabsClassNames.tabWrapper);
+    xtabClassNames.tabBar = classNames('rdTabBar', this.props.tabsClassNames.tabBar);
+    xtabClassNames.tabBarAfter = classNames('rdTabBarAfter', this.props.tabsClassNames.tabBarAfter);
+    xtabClassNames.tab = classNames('rdTab', this.props.tabsClassNames.tab);
+    xtabClassNames.tabBefore = classNames('rdTabBefore', this.props.tabsClassNames.tabBefore);
+    xtabClassNames.tabAfter = classNames('rdTabAfter', this.props.tabsClassNames.tabAfter);
+    xtabClassNames.tabTitle = classNames('rdTabTitle', this.props.tabsClassNames.tabTitle);
+    xtabClassNames.tabBeforeTitle = classNames('rdTabBeforeTitle', this.props.tabsClassNames.tabBeforeTitle);
+    xtabClassNames.tabAfterTitle = classNames('rdTabAfterTitle', this.props.tabsClassNames.tabAfterTitle);
+    xtabClassNames.tabCloseIcon = classNames('rdTabCloseIcon', this.props.tabsClassNames.tabCloseIcon);
 
 
-    let content = [];
-    let tabs = _.map(this.state.tabs, (tab) => {
+    const content = [];
+    const tabs = _.map(this.state.tabs, (tab) => {
       if (this.state.closedTabs.indexOf(tab.key) > -1) {
         return '';
       }
-      let {
+      const {
         beforeTitle,
         title,
         afterTitle,
-        disableClose,
         tabClassNames,
@@ -461,3 +451,2 @@ tabStyles,
         hiddenContainerStyle,
-        onClick,
         onMouseEnter,
@@ -475,9 +464,9 @@ onMouseLeave,
 
-      let tabClasses = classNames(_tabClassNames.tab, tabClassNames.tab);
-      let tabBeforeClasses = classNames(_tabClassNames.tabBefore, tabClassNames.tabBefore);
-      let tabAfterClasses = classNames(_tabClassNames.tabAfter, tabClassNames.tabAfter);
-      let tabTitleClasses = classNames(_tabClassNames.tabTitle, tabClassNames.tabTitle);
-      let tabBeforeTitleClasses = classNames(_tabClassNames.tabBeforeTitle, tabClassNames.tabBeforeTitle);
-      let tabAfterTitleClasses = classNames(_tabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
-      const tabCloseIconClasses = classNames(_tabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
+      let tabClasses = classNames(xtabClassNames.tab, tabClassNames.tab);
+      const tabBeforeClasses = classNames(xtabClassNames.tabBefore, tabClassNames.tabBefore);
+      const tabAfterClasses = classNames(xtabClassNames.tabAfter, tabClassNames.tabAfter);
+      const tabTitleClasses = classNames(xtabClassNames.tabTitle, tabClassNames.tabTitle);
+      const tabBeforeTitleClasses = classNames(xtabClassNames.tabBeforeTitle, tabClassNames.tabBeforeTitle);
+      const tabAfterTitleClasses = classNames(xtabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
+      const tabCloseIconClasses = classNames(xtabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
 
@@ -490,3 +479,4 @@ if (this.state.selectedTab === tab.key) {
         tabClasses = classNames(tabClasses, 'rdTabActive', this.props.tabsClassNames.tabActive, tabClassNames.tabActive);
-        content.push(<TabContainer key={`tabContainer#${tab.key}`} selected={true} style={containerStyle}>{tab}</TabContainer>);
+        content.push(<TabContainer key={`tabContainer#${tab.key}`} selected={true}
+                                   style={containerStyle}>{tab}</TabContainer>);
       } else {
@@ -500,4 +490,7 @@ if (this.state.hoveredTab === tab.key) {
         }
-        content.push(
-          <TabContainer key={`tabContainer#${tab.key}`} selected={false} style={containerStyle} hiddenStyle={hiddenContainerStyle}>{tab}</TabContainer>);
+        content.push(<TabContainer
+          key={`tabContainer#${tab.key}`}
+          selected={false}
+          style={containerStyle}
+          hiddenStyle={hiddenContainerStyle}>{tab}</TabContainer>);
       }
@@ -515,7 +508,7 @@
       }
-      let closeButton = this.getCloseButton(tab, tabCloseIconStyle, tabCloseIconClasses, tabInlineStyles.tabCloseIconOnHover);
+      const closeButton = this.getCloseButton(tab, tabCloseIconStyle, tabCloseIconClasses, tabInlineStyles.tabCloseIconOnHover);
 
       return (
         <CustomDraggable
-          key={`draggable_tabs_${tab.key}`}
+          key={tab.key}
           disabled={this.props.disableDrag}
@@ -536,7 +529,12 @@ axis="x"
               ref={tab.key}
+              // TODO: This copies props to <li> which it does not understand.
+              // This isn't a major problem, but the 'uncloseable' prop is
+              // passed as a boolean. In Development mode react-dom will give a
+              // warning that non-boolean prop 'uncloseable' is being passed as
+              // a boolean to <li>.
               {...others}>
             <span style={TabStyles.beforeTitle} className={tabBeforeTitleClasses}>{beforeTitle}</span>
             <p style={tabTiteleStyle}
-              className={tabTitleClasses}
-              {...extraAttribute} >
+               className={tabTitleClasses}
+               {...extraAttribute} >
               {title}
@@ -546,4 +544,4 @@ </p>
             {closeButton}
-            <span style={tabBeforeStyle} className={tabBeforeClasses}></span>
-            <span style={tabAfterStyle} className={tabAfterClasses}></span>
+            <span style={tabBeforeStyle} className={tabBeforeClasses}/>
+            <span style={tabAfterStyle} className={tabAfterClasses}/>
           </li>
@@ -555,4 +553,4 @@ </CustomDraggable>
     return (
-      <div style={tabInlineStyles.tabWrapper} className={_tabClassNames.tabWrapper}>
-        <ul tabIndex="-1" style={tabInlineStyles.tabBar} className={_tabClassNames.tabBar}>
+      <div style={tabInlineStyles.tabWrapper} className={xtabClassNames.tabWrapper}>
+        <ul tabIndex="-1" style={tabInlineStyles.tabBar} className={xtabClassNames.tabBar}>
           {tabs}
@@ -563,3 +561,3 @@ <li className="rdTabAddButton" style={TabStyles.tabAddButton} onClick={this.handleAddButtonClick.bind(this)}>
         </ul>
-        <span style={tabInlineStyles.tabBarAfter} className={_tabClassNames.tabBarAfter}></span>
+        <span style={tabInlineStyles.tabBarAfter} className={xtabClassNames.tabBarAfter}/>
         {content}
@@ -589,6 +587,10 @@ </div>
   tabAddButton: (<span>{'+'}</span>),
-  onTabSelect: () => {},
-  onTabClose: () => {},
-  onTabAddButtonClick: () => {},
-  onTabPositionChange: () => {},
+  onTabSelect: () => {
+  },
+  onTabClose: () => {
+  },
+  onTabAddButtonClick: () => {
+  },
+  onTabPositionChange: () => {
+  },
   shouldTabClose: () => true,
@@ -600,58 +602,54 @@ keepSelectedTab: false,
 Tabs.propTypes = {
-  tabs: React.PropTypes.arrayOf(React.PropTypes.element),
+  tabs: PropTypes.arrayOf(PropTypes.element),
 
-  selectedTab: React.PropTypes.string,
-  tabsClassNames: React.PropTypes.shape({
-    tabWrapper: React.PropTypes.string,
-    tabBar: React.PropTypes.string,
-    tabBarAfter: React.PropTypes.string,
-    tab: React.PropTypes.string,
-    tabBefore: React.PropTypes.string,
-    tabAfter: React.PropTypes.string,
-    tabBeforeTitle: React.PropTypes.string,
-    tabTitle: React.PropTypes.string,
-    tabAfterTitle: React.PropTypes.string,
-    tabCloseIcon: React.PropTypes.string,
-    tabActive: React.PropTypes.string,
-    tabHover: React.PropTypes.string,
+  selectedTab: PropTypes.string,
+  tabsClassNames: PropTypes.shape({
+    tabWrapper: PropTypes.string,
+    tabBar: PropTypes.string,
+    tabBarAfter: PropTypes.string,
+    tab: PropTypes.string,
+    tabBefore: PropTypes.string,
+    tabAfter: PropTypes.string,
+    tabBeforeTitle: PropTypes.string,
+    tabTitle: PropTypes.string,
+    tabAfterTitle: PropTypes.string,
+    tabCloseIcon: PropTypes.string,
+    tabActive: PropTypes.string,
+    tabHover: PropTypes.string,
   }),
-  tabsStyles: React.PropTypes.shape({
-    tabWrapper: React.PropTypes.object,
-    tabBar: React.PropTypes.object,
-    tabBarAfter: React.PropTypes.object,
-    tab: React.PropTypes.object,
-    tabBefore: React.PropTypes.object,
-    tabAfter: React.PropTypes.object,
-    tabTitle: React.PropTypes.object,
-    tabActive: React.PropTypes.object,
-    tabTitleActive: React.PropTypes.object,
-    tabBeforeActive: React.PropTypes.object,
-    tabAfterActive: React.PropTypes.object,
-    tabOnHover: React.PropTypes.object,
-    tabTitleOnHover: React.PropTypes.object,
-    tabBeforeOnHover: React.PropTypes.object,
-    tabAfterOnHover: React.PropTypes.object,
-    tabCloseIcon: React.PropTypes.object,
-    tabCloseIconOnHover: React.PropTypes.object,
+  tabsStyles: PropTypes.shape({
+    tabWrapper: PropTypes.object,
+    tabBar: PropTypes.object,
+    tabBarAfter: PropTypes.object,
+    tab: PropTypes.object,
+    tabBefore: PropTypes.object,
+    tabAfter: PropTypes.object,
+    tabTitle: PropTypes.object,
+    tabActive: PropTypes.object,
+    tabTitleActive: PropTypes.object,
+    tabBeforeActive: PropTypes.object,
+    tabAfterActive: PropTypes.object,
+    tabOnHover: PropTypes.object,
+    tabTitleOnHover: PropTypes.object,
+    tabBeforeOnHover: PropTypes.object,
+    tabAfterOnHover: PropTypes.object,
+    tabCloseIcon: PropTypes.object,
+    tabCloseIconOnHover: PropTypes.object,
   }),
-  shortCutKeys: React.PropTypes.shape({
-    close: React.PropTypes.oneOfType(
-      [React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
-    create: React.PropTypes.oneOfType(
-      [React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
-    moveRight: React.PropTypes.oneOfType(
-      [React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
-    moveLeft: React.PropTypes.oneOfType(
-      [React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)]),
+  shortCutKeys: PropTypes.shape({
+    close: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    create: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    moveRight: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    moveLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   }),
-  tabAddButton: React.PropTypes.element,
-  onTabSelect: React.PropTypes.func,
-  onTabClose: React.PropTypes.func,
-  onTabAddButtonClick: React.PropTypes.func,
-  onTabPositionChange: React.PropTypes.func,
-  shouldTabClose: React.PropTypes.func,
-  keepSelectedTab: React.PropTypes.bool,
-  disableDrag: React.PropTypes.bool,
+  tabAddButton: PropTypes.element,
+  onTabSelect: PropTypes.func,
+  onTabClose: PropTypes.func,
+  onTabAddButtonClick: PropTypes.func,
+  onTabPositionChange: PropTypes.func,
+  shouldTabClose: PropTypes.func,
+  keepSelectedTab: PropTypes.bool,
+  disableDrag: PropTypes.bool,
 };
 
 export default Tabs;

src/helpers/styleOverride.js

 import Immutable from 'immutable';
 
+// eslint-disable-next-line new-cap
 const merge = (original, override) => Immutable.Map(original).merge(override).toObject();
@@ -4,0 +5,0 @@

src/helpers/utils.js

 const slideArray = (array, a, b) => {
   let retArr;
-  const _array = array.slice(0);
+  const xarray = array.slice(0);
 
   if (a < b) {
-    retArr = _array.map((v, idx) => {
+    retArr = xarray.map((v, idx) => {
       if (idx < a) {
@@ -13,8 +13,7 @@ return v;
         return array[a];
-      } else {
-        return v;
       }
+      return v;
     });
   } else {
-    retArr = _array.map((v, idx) => {
+    retArr = xarray.map((v, idx) => {
       if (idx < b) {
@@ -26,5 +25,4 @@ return v;
         return array[idx - 1];
-      } else {
-        return v;
       }
+      return v;
     });
@@ -31,0 +29,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

395595

increased by102.79%

Dependency count

9

decreased by-10%

Worsened metrics

Dev dependency count

32

increased by6.67%

Lines of code

4285

decreased by-1.38%

Dependency changes

• + Addedprop-types@^15.6.0

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-draggable@3.3.2(transitive)

• + Addedscheduler@0.19.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• - Removedreact-draggable@2.2.6(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedimmutable@^3.8.2

• Updatedinvariant@^2.2.2

• Updatedlodash@^4.17.4

• Updatedmousetrap@^1.6.1

• Updatedreact@^16.2.0

• Updatedreact-dom@^16.2.0

• Updatedreact-draggable@^3.0.5