react-draggable-tab - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

CHANGELOG.md

@@ -5,4 +5,6 @@ ## Change Log
 
+  * #63 [React v15 support](https://github.com/georgeOsdDev/react-draggable-tab/issues/63)
+
 ### Ver 0.5.1
-  *  #59 [Allow overriding TabStyles.wrapper using props](https://github.com/georgeOsdDev/react-draggable-tab/issues/59)
+  * #59 [Allow overriding TabStyles.wrapper using props](https://github.com/georgeOsdDev/react-draggable-tab/issues/59)
 
@@ -9,0 +11,0 @@ ### Ver 0.5.0

example/app.js

@@ -8,2 +8,3 @@ 'use strict';
 injectTapEventPlugin();
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import {Dialog, FlatButton, Menu, MenuItem, TextField} from 'material-ui';
@@ -80,2 +81,6 @@ import {Tabs, Tab} from '../lib/index.js';
 
+  getChildContext() {
+    return { muiTheme: getMuiTheme()};
+  }
+
   // getChildContext() {
@@ -280,5 +285,5 @@ //   return {
 App.childContextTypes = {
-  // muiTheme: React.PropTypes.object
+  muiTheme: React.PropTypes.object
 };
 
 ReactDOM.render(<App/>, document.getElementById('tabs'));

lib/components/CloseIcon.js

@@ -50,3 +50,3 @@ 'use strict';
     value: function handleMouseEnter() {
-      this.setState({ 'hover': true });
+      this.setState({ hover: true });
     }
@@ -56,3 +56,3 @@ }, {
     value: function handleMouseLeave() {
-      this.setState({ 'hover': false });
+      this.setState({ hover: false });
     }
@@ -59,0 +59,0 @@ }, {

lib/components/CustomDraggable.js

@@ -24,6 +24,6 @@ 'use strict';
 
-  function CustomDraggable(props) {
+  function CustomDraggable() {
     _classCallCheck(this, CustomDraggable);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(CustomDraggable).call(this, props));
+    return _possibleConstructorReturn(this, Object.getPrototypeOf(CustomDraggable).apply(this, arguments));
   }
@@ -30,0 +30,0 @@

lib/components/Tab.js

@@ -44,3 +44,5 @@ 'use strict';
 Tab.defaultProps = {
+  beforeTitle: _react2.default.createElement('span', null),
   title: 'untitled',
+  afterTitle: _react2.default.createElement('span', null),
   disableClose: false,
@@ -47,0 +49,0 @@ tabClassNames: {

lib/components/Tabs.js

@@ -39,2 +39,6 @@ 'use strict';
 
+var _Tab = require('./Tab');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
 var _TabStyles = require('./TabStyles');
@@ -78,6 +82,18 @@
 
-    var defaultState = _this._tabStateFromProps(_this.props);
-    defaultState.selectedTab = _this.props.selectedTab ? _this.props.selectedTab : _this.props.tabs ? _this.props.tabs[0].key : '';
-    defaultState.hoveredTab = '';
-    defaultState.closedTabs = [];
+    var tabs = _this._tabStateFromProps(_this.props).tabs;
+    var selectedTab = '';
+    if (_this.props.selectedTab) {
+      selectedTab = _this.props.selectedTab;
+    } else if (_this.props.tabs) {
+      selectedTab = _this.props.tabs[0].key;
+    }
+    var hoveredTab = '';
+    var closedTabs = [];
+    var defaultState = {
+      tabs: tabs,
+      selectedTab: selectedTab,
+      hoveredTab: hoveredTab,
+      closedTabs: closedTabs
+    };
+
     _this.state = defaultState;
@@ -98,3 +114,2 @@
       _react2.default.Children.forEach(props.tabs, function (tab) {
-
         (0, _invariant2.default)(tab.key, 'There should be unique key in each Tab');
@@ -195,11 +210,12 @@
     value: function _cancelEventSafety(e) {
+      var ev = e;
       if (typeof e.preventDefault !== 'function') {
-        e.preventDefault = function () {};
+        ev.preventDefault = function () {};
       }
       if (typeof e.stopPropagation !== 'function') {
-        e.stopPropagation = function () {};
+        ev.stopPropagation = function () {};
       }
-      e.preventDefault();
-      e.stopPropagation();
-      return e;
+      ev.preventDefault();
+      ev.stopPropagation();
+      return ev;
     }
@@ -247,5 +263,5 @@ }, {
           _mousetrap2.default.bind(this.props.shortCutKeys.close, function (e) {
-            e = _this4._cancelEventSafety(e);
+            var ev = _this4._cancelEventSafety(e);
             if (_this4.state.selectedTab) {
-              _this4.handleCloseButtonClick(_this4.state.selectedTab, e);
+              _this4.handleCloseButtonClick(_this4.state.selectedTab, ev);
             }
@@ -256,4 +272,4 @@ });
           _mousetrap2.default.bind(this.props.shortCutKeys.create, function (e) {
-            e = _this4._cancelEventSafety(e);
-            _this4.handleAddButtonClick(e);
+            var ev = _this4._cancelEventSafety(e);
+            _this4.handleAddButtonClick(ev);
           });
@@ -263,4 +279,4 @@ }
           _mousetrap2.default.bind(this.props.shortCutKeys.moveRight, function (e) {
-            e = _this4._cancelEventSafety(e);
-            _this4.moveRight(e);
+            var ev = _this4._cancelEventSafety(e);
+            _this4.moveRight(ev);
           });
@@ -270,4 +286,4 @@ }
           _mousetrap2.default.bind(this.props.shortCutKeys.moveLeft, function (e) {
-            e = _this4._cancelEventSafety(e);
-            _this4.moveLeft(e);
+            var ev = _this4._cancelEventSafety(e);
+            _this4.moveLeft(ev);
           });
@@ -284,3 +300,3 @@ }
     key: 'handleDragStart',
-    value: function handleDragStart(key, e, ui) {
+    value: function handleDragStart() {
       this.dragging = true;
@@ -290,3 +306,3 @@ }
     key: 'handleDrag',
-    value: function handleDrag(key, e, ui) {
+    value: function handleDrag(key, e) {
       var _this5 = this;
@@ -299,3 +315,2 @@
         if (shoudBeSwap) {
-          var el = _reactDom2.default.findDOMNode(_this5.refs[pos.key]);
           var idx1 = _this5._getIndexOfTabByKey(key);
@@ -305,3 +320,3 @@ var idx2 = _this5._getIndexOfTabByKey(pos.key);
           var movePx = minus * (pos.pos.right - pos.pos.left) - tempMoved;
-          el.style.transform = 'translate(' + movePx + 'px, 0px)';
+          _reactDom2.default.findDOMNode(_this5.refs[pos.key]).style.transform = 'translate(' + movePx + 'px, 0px)';
           _this5.startPositions[idx2].moved = movePx;
@@ -313,3 +328,3 @@ }
     key: 'handleDragStop',
-    value: function handleDragStop(key, e, ui) {
+    value: function handleDragStop(key, e) {
       var _this6 = this;
@@ -319,3 +334,2 @@
       var swapedTabs = void 0;
-      var newState = {};
       _lodash2.default.each(this.startPositions, function (pos) {
@@ -326,9 +340,10 @@ var shoudBeSwap = key !== pos.key && pos.pos.left < deltaX && deltaX < pos.pos.right;
         }
-        var el = _reactDom2.default.findDOMNode(_this6.refs[pos.key]);
-        el.style.transform = 'translate(0px, 0px)';
+        _reactDom2.default.findDOMNode(_this6.refs[pos.key]).style.transform = 'translate(0px, 0px)';
       });
       var nextTabs = swapedTabs || this.state.tabs;
 
-      newState.tabs = nextTabs;
-      newState.selectedTab = key;
+      var newState = {
+        tabs: nextTabs,
+        selectedTab: key
+      };
       this.dragging = false;
@@ -356,3 +371,3 @@ this.setState(newState, function () {
       if (classes.indexOf('rdTabCloseIcon') > -1) {
-        e = this._cancelEventSafety(e);
+        this._cancelEventSafety(e);
       } else {
@@ -371,3 +386,5 @@ this.setState({ selectedTab: key }, function () {
         }, function () {
-          _lodash2.default.isFunction(onMouseEnter) ? onMouseEnter(e) : null;
+          if (_lodash2.default.isFunction(onMouseEnter)) {
+            onMouseEnter(e);
+          }
         });
@@ -384,6 +401,10 @@ }
           }, function () {
-            _lodash2.default.isFunction(onMouseLeave) ? onMouseLeave(e) : null;
+            if (_lodash2.default.isFunction(onMouseLeave)) {
+              onMouseLeave(e);
+            }
           });
         } else {
-          _lodash2.default.isFunction(onMouseLeave) ? onMouseLeave(e) : null;
+          if (_lodash2.default.isFunction(onMouseLeave)) {
+            onMouseLeave(e);
+          }
         }
@@ -397,3 +418,3 @@ }
 
-      e = this._cancelEventSafety(e);
+      var ev = this._cancelEventSafety(e);
       var nextSelected = void 0;
@@ -416,5 +437,5 @@
         var currentOpenTabs = _this8._getCurrentOpenTabs();
-        _this8.props.onTabClose(e, key, currentOpenTabs);
+        _this8.props.onTabClose(ev, key, currentOpenTabs);
         if (shoudBeNotifyTabChange) {
-          _this8.props.onTabSelect(e, nextSelected, currentOpenTabs);
+          _this8.props.onTabSelect(ev, nextSelected, currentOpenTabs);
         }
@@ -463,14 +484,13 @@ });
         return '';
-      } else {
-        var onHoverStyle = _styleOverride2.default.merge(hoverStyleBase, tab.props.tabStyles.tabCloseIconOnHover);
-        return _react2.default.createElement(
-          _CloseIcon2.default,
-          {
-            style: style,
-            hoverStyle: onHoverStyle,
-            className: classes,
-            onClick: this.handleCloseButtonClick.bind(this, tab.key) },
-          '×'
-        );
       }
+      var onHoverStyle = _styleOverride2.default.merge(hoverStyleBase, tab.props.tabStyles.tabCloseIconOnHover);
+      return _react2.default.createElement(
+        _CloseIcon2.default,
+        {
+          style: style,
+          hoverStyle: onHoverStyle,
+          className: classes,
+          onClick: this.handleCloseButtonClick.bind(this, tab.key) },
+        '×'
+      );
     }
@@ -519,7 +539,5 @@ }, {
       var tabs = _lodash2.default.map(this.state.tabs, function (tab) {
-
         if (_this11.state.closedTabs.indexOf(tab.key) > -1) {
           return '';
         }
-
         var _tab$props = tab.props;
@@ -564,3 +582,3 @@ var beforeTitle = _tab$props.beforeTitle;
             _TabContainer2.default,
-            { key: 'tabContainer#' + tab.key, selected: true, style: tab.props.containerStyle },
+            { key: 'tabContainer#' + tab.key, selected: true, style: containerStyle },
             tab
@@ -578,3 +596,3 @@ ));
             _TabContainer2.default,
-            { key: 'tabContainer#' + tab.key, selected: false, style: tab.props.containerStyle },
+            { key: 'tabContainer#' + tab.key, selected: false, style: containerStyle },
             tab
@@ -581,0 +599,0 @@ ));

lib/helpers/styleOverride.js

@@ -17,2 +17,4 @@ 'use strict';
 
-exports.default = { merge: merge };
+exports.default = {
+  merge: merge
+};

lib/helpers/utils.js

@@ -38,2 +38,4 @@ "use strict";
 
-exports.default = { slideArray: slideArray };
+exports.default = {
+  slideArray: slideArray
+};

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Draggable chrome like tab react component ",
@@ -42,4 +42,7 @@ "main": "./lib/index.js",
     "chai": "^3.5.0",
-    "eslint": "^2.7.0",
-    "eslint-plugin-react": "^4.3.0",
+    "eslint": "^2.8.0",
+    "eslint-config-airbnb": "^7.0.0",
+    "eslint-plugin-import": "^1.5.0",
+    "eslint-plugin-jsx-a11y": "^0.6.2",
+    "eslint-plugin-react": "^5.0.1",
     "karma": "^0.13.22",
@@ -56,5 +59,5 @@ "karma-browserify": "^5.0.3",
     "mocha": "^2.4.5",
-    "react-addons-test-utils": "^0.14.7",
-    "react-notification-badge": "^1.1.0",
-    "react-tap-event-plugin": "^0.2.2",
+    "react-addons-test-utils": "^15.0.1",
+    "react-notification-badge": "^1.2.0",
+    "react-tap-event-plugin": "^1.0.0",
     "watchify": "^3.7.0"
@@ -64,13 +67,13 @@ },
     "classnames": "^2.2.3",
-    "immutable": "^3.7.6",
+    "immutable": "^3.8.0",
     "invariant": "^2.2.1",
-    "lodash": "^4.11.0",
+    "lodash": "^4.11.1",
     "mousetrap": "^1.5.3",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7",
-    "react-draggable": "^1.3.4"
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-draggable": "^2.0.0-beta2"
   },
   "peerDependencies": {
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1"
   },
@@ -77,0 +80,0 @@ "browserify": {

src/components/CloseIcon.js

@@ -10,3 +10,3 @@ import React from 'react';
     this.state = {
-      hover: false
+      hover: false,
     };
@@ -16,7 +16,7 @@ }
   handleMouseEnter() {
-    this.setState({'hover': true});
+    this.setState({ hover: true });
   }
 
   handleMouseLeave() {
-    this.setState({'hover': false});
+    this.setState({ hover: false });
   }
@@ -57,3 +57,3 @@
   hoverStyle: {},
-  onClick: () => {}
+  onClick: () => {},
 };
@@ -64,5 +64,5 @@
   hoverStyle: React.PropTypes.object,
-  onClick: React.PropTypes.func
+  onClick: React.PropTypes.func,
 };
 
 export default CloseIcon;

src/components/CustomDraggable.js

 import Draggable from 'react-draggable';
 
 class CustomDraggable extends Draggable {
-  constructor(props) {
-    super(props);
-  }
-
   componentWillReceiveProps(nextProps) {
-    let newState =  {
+    const newState = {
       clientX: nextProps.start.x,
-      clientY: nextProps.start.y
+      clientY: nextProps.start.y,
     }
@@ -13,0 +9,0 @@ this.setState(newState);

src/components/Tab.js

@@ -16,3 +16,5 @@ import React from 'react';
 Tab.defaultProps = {
+  beforeTitle: <span />,
   title: 'untitled',
+  afterTitle: <span />,
   disableClose: false,
@@ -28,6 +30,6 @@ tabClassNames: {
     tabActive: '',
-    tabHover: ''
+    tabHover: '',
   },
   tabStyles: {},
-  containerStyle: {}
+  containerStyle: {},
 };
@@ -39,3 +41,3 @@
     React.PropTypes.string,
-    React.PropTypes.element
+    React.PropTypes.element,
   ]).isRequired,
@@ -53,3 +55,3 @@ afterTitle: React.PropTypes.element,
     tabActive: React.PropTypes.string,
-    tabHover:  React.PropTypes.string
+    tabHover: React.PropTypes.string,
   }),
@@ -70,7 +72,7 @@ tabStyles: React.PropTypes.shape({
     tabCloseIcon: React.PropTypes.object,
-    tabCloseIconHover: React.PropTypes.object
+    tabCloseIconHover: React.PropTypes.object,
   }),
-  containerStyle: React.PropTypes.object
+  containerStyle: React.PropTypes.object,
 };
 
 export default Tab;

src/components/TabContainer.js

@@ -8,8 +8,8 @@ import React from 'react';
     position: 'relative',
-    textAlign: 'initial'
+    textAlign: 'initial',
   },
   unselected: {
     height: '0px',
-    overflow: 'hidden'
-  }
+    overflow: 'hidden',
+  },
 };
@@ -19,3 +19,3 @@
 
-  render(){
+  render() {
     let style = StyleOverride.merge(styles.root, this.props.style);
@@ -34,4 +34,4 @@ if (!this.props.selected) {
 TabContainer.defaultProps = {
-  selected:false,
-  style: {}
+  selected: false,
+  style: {},
 };
@@ -41,5 +41,5 @@
   selected: React.PropTypes.bool.isRequired,
-  style: React.PropTypes.object
+  style: React.PropTypes.object,
 };
 
 export default TabContainer;

src/components/Tabs.js

@@ -9,2 +9,3 @@ import _ from 'lodash';
 import CustomDraggable from './CustomDraggable';
+import Tab from './Tab';
 import TabStyles from './TabStyles';
@@ -21,7 +22,18 @@ import TabContainer from './TabContainer';
 
-    let defaultState = this._tabStateFromProps(this.props);
-    defaultState.selectedTab = this.props.selectedTab ? this.props.selectedTab :
-                                                        this.props.tabs ? this.props.tabs[0].key : '';
-    defaultState.hoveredTab = '';
-    defaultState.closedTabs = [];
+    const tabs = this._tabStateFromProps(this.props).tabs;
+    let selectedTab = '';
+    if (this.props.selectedTab) {
+      selectedTab = this.props.selectedTab;
+    } else if (this.props.tabs) {
+      selectedTab = this.props.tabs[0].key;
+    }
+    const hoveredTab = '';
+    const closedTabs = [];
+    const defaultState = {
+      tabs,
+      selectedTab,
+      hoveredTab,
+      closedTabs,
+    };
+
     this.state = defaultState;
@@ -39,3 +51,2 @@
     React.Children.forEach(props.tabs, (tab) => {
-
       invariant(
@@ -51,3 +62,3 @@ tab.key,
     return {
-      tabs: tabs
+      tabs,
     };
@@ -61,11 +72,7 @@ }
   _getIndexOfTabByKey(key) {
-    return _.findIndex(this.state.tabs, (tab) =>{
-      return tab.key === key;
-    });
+    return _.findIndex(this.state.tabs, (tab) => tab.key === key);
   }
 
   _getTabByKey(key) {
-    return _.where(this.state.tabs, (tab) => {
-      return tab.key === key;
-    });
+    return _.where(this.state.tabs, (tab) => tab.key === key);
   }
@@ -75,3 +82,3 @@
     let nextKey;
-    let current = this._getIndexOfTabByKey(key);
+    const current = this._getIndexOfTabByKey(key);
     if (current + 1 < this.state.tabs.length) {
@@ -88,3 +95,3 @@ nextKey = this.state.tabs[current + 1].key;
     let prevKey;
-    let current = this._getIndexOfTabByKey(key);
+    const current = this._getIndexOfTabByKey(key);
     if (current > 0) {
@@ -104,10 +111,8 @@ prevKey = this.state.tabs[current - 1].key;
   _getOpenTabs(tabs) {
-    return _.filter(tabs, (tab) => {
-      return !this._isClosed(tab.key);
-    });
+    return _.filter(tabs, (tab) => !this._isClosed(tab.key));
   }
 
   _moveTabPosition(key1, key2) {
-    let t1 = this._getIndexOfTabByKey(key1);
-    let t2 = this._getIndexOfTabByKey(key2);
+    const t1 = this._getIndexOfTabByKey(key1);
+    const t2 = this._getIndexOfTabByKey(key2);
     return Utils.slideArray(this.state.tabs, t1, t2);
@@ -117,8 +122,8 @@ }
   _saveStartPositions() {
-    let positions = _.map(this.state.tabs, (tab) => {
-      let el = ReactDom.findDOMNode(this.refs[tab.key]);
-      let pos = el ? el.getBoundingClientRect() : {};
+    const positions = _.map(this.state.tabs, (tab) => {
+      const el = ReactDom.findDOMNode(this.refs[tab.key]);
+      const pos = el ? el.getBoundingClientRect() : {};
       return {
         key: tab.key,
-        pos: pos
+        pos,
       };
@@ -130,12 +135,13 @@ });
 
-  _cancelEventSafety(e){
+  _cancelEventSafety(e) {
+    let ev = e;
     if (typeof e.preventDefault !== 'function') {
-      e.preventDefault = () => {};
+      ev.preventDefault = () => {};
     }
     if (typeof e.stopPropagation !== 'function') {
-      e.stopPropagation = () => {};
+      ev.stopPropagation = () => {};
     }
-    e.preventDefault();
-    e.stopPropagation();
-    return e;
+    ev.preventDefault();
+    ev.stopPropagation();
+    return ev;
   }
@@ -172,9 +178,9 @@
 
-  bindShortcuts(){
+  bindShortcuts() {
     if (this.props.shortCutKeys) {
       if (this.props.shortCutKeys.close) {
         Mousetrap.bind(this.props.shortCutKeys.close, (e) => {
-          e = this._cancelEventSafety(e);
+          const ev = this._cancelEventSafety(e);
           if (this.state.selectedTab) {
-            this.handleCloseButtonClick(this.state.selectedTab, e);
+            this.handleCloseButtonClick(this.state.selectedTab, ev);
           }
@@ -185,4 +191,4 @@ });
         Mousetrap.bind(this.props.shortCutKeys.create, (e) => {
-          e = this._cancelEventSafety(e);
-          this.handleAddButtonClick(e);
+          const ev = this._cancelEventSafety(e);
+          this.handleAddButtonClick(ev);
         });
@@ -192,4 +198,4 @@ }
         Mousetrap.bind(this.props.shortCutKeys.moveRight, (e) => {
-          e = this._cancelEventSafety(e);
-          this.moveRight(e);
+          const ev = this._cancelEventSafety(e);
+          this.moveRight(ev);
         });
@@ -199,4 +205,4 @@ }
         Mousetrap.bind(this.props.shortCutKeys.moveLeft, (e) => {
-          e = this._cancelEventSafety(e);
-          this.moveLeft(e);
+          const ev = this._cancelEventSafety(e);
+          this.moveLeft(ev);
         });
@@ -207,22 +213,24 @@ }
 
-  unbindShortcuts(){
+  unbindShortcuts() {
     Mousetrap.reset();
   }
 
-  handleDragStart(key, e, ui) {
+  handleDragStart() {
     this.dragging = true;
   }
 
-  handleDrag(key, e, ui) {
+  handleDrag(key, e) {
     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;
+      const tempMoved = pos.moved || 0;
+      const shoudBeSwap =
+        key !== pos.key &&
+        pos.pos.left + tempMoved < deltaX &&
+        deltaX < pos.pos.right + tempMoved;
       if (shoudBeSwap) {
-        let el = ReactDom.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)';
+        const idx1 = this._getIndexOfTabByKey(key);
+        const idx2 = this._getIndexOfTabByKey(pos.key);
+        const minus = idx1 > idx2 ? 1 : -1;
+        const movePx = (minus * (pos.pos.right - pos.pos.left)) - tempMoved;
+        ReactDom.findDOMNode(this.refs[pos.key]).style.transform = `translate(${movePx}px, 0px)`;
         this.startPositions[idx2].moved = movePx;
@@ -233,21 +241,24 @@ }
 
-  handleDragStop(key, e, ui) {
+  handleDragStop(key, e) {
     const deltaX = (e.pageX || e.clientX);
     let swapedTabs;
-    let newState = {};
     _.each(this.startPositions, (pos) => {
-      let shoudBeSwap = key !== pos.key && pos.pos.left < deltaX && deltaX < pos.pos.right;
+      const shoudBeSwap =
+        key !== pos.key &&
+        pos.pos.left < deltaX &&
+        deltaX < pos.pos.right;
       if (shoudBeSwap) {
         swapedTabs = this._moveTabPosition(key, pos.key);
       }
-      let el = ReactDom.findDOMNode(this.refs[pos.key]);
-      el.style.transform = 'translate(0px, 0px)';
+      ReactDom.findDOMNode(this.refs[pos.key]).style.transform = 'translate(0px, 0px)';
     });
-    let nextTabs = swapedTabs || this.state.tabs;
+    const nextTabs = swapedTabs || this.state.tabs;
 
-    newState.tabs = nextTabs;
-    newState.selectedTab = key;
+    const newState = {
+      tabs: nextTabs,
+      selectedTab: key,
+    };
     this.dragging = false;
     this.setState(newState, () => {
-      if(swapedTabs) {
+      if (swapedTabs) {
         this.props.onTabPositionChange(e, key, this._getOpenTabs(nextTabs));
@@ -259,5 +270,5 @@ }
   handleTabClick(key, e) {
-    let isBehindTab = key !== this.state.selectedTab;
-    let idx = this._getIndexOfTabByKey(key);
-    let isDragAfter = this.startPositions[idx].moved !== 0;
+    const isBehindTab = key !== this.state.selectedTab;
+    const idx = this._getIndexOfTabByKey(key);
+    const isDragAfter = this.startPositions[idx].moved !== 0;
     if (isBehindTab && isDragAfter && this.props.keepSelectedTab) {
@@ -268,7 +279,7 @@ e.preventDefault();
 
-    let classes = e.target.className.split(' ');
+    const classes = e.target.className.split(' ');
     if (classes.indexOf('rdTabCloseIcon') > -1) {
-      e = this._cancelEventSafety(e);
+      this._cancelEventSafety(e);
     } else {
-      this.setState({selectedTab: key}, () => {
+      this.setState({ selectedTab: key }, () => {
         this.props.onTabSelect(e, key, this._getCurrentOpenTabs());
@@ -279,8 +290,10 @@ });
 
-  handleMouseEnter(key, onMouseEnter, e){
-    if (!this.dragging){
+  handleMouseEnter(key, onMouseEnter, e) {
+    if (!this.dragging) {
       this.setState({
-        hoveredTab: key
+        hoveredTab: key,
       }, () => {
-        _.isFunction(onMouseEnter) ? onMouseEnter(e): null;
+        if (_.isFunction(onMouseEnter)) {
+          onMouseEnter(e);
+        }
       });
@@ -290,12 +303,16 @@ }
 
-  handleMouseLeave(key, onMouseLeave, e){
-    if (!this.dragging){
-      if (this.state.hoveredTab === key){
+  handleMouseLeave(key, onMouseLeave, e) {
+    if (!this.dragging) {
+      if (this.state.hoveredTab === key) {
         this.setState({
-          hoveredTab: ''
+          hoveredTab: '',
         }, () => {
-          _.isFunction(onMouseLeave) ? onMouseLeave(e): null;
+          if (_.isFunction(onMouseLeave)) {
+            onMouseLeave(e);
+          }
         });
       } else {
-        _.isFunction(onMouseLeave) ? onMouseLeave(e): null;
+        if (_.isFunction(onMouseLeave)) {
+          onMouseLeave(e);
+        }
       }
@@ -306,3 +323,3 @@ }
   handleCloseButtonClick(key, e) {
-    e = this._cancelEventSafety(e);
+    const ev = this._cancelEventSafety(e);
     let nextSelected;
@@ -319,11 +336,11 @@
 
-    let shoudBeNotifyTabChange = this.state.selectedTab !== nextSelected;
+    const shoudBeNotifyTabChange = this.state.selectedTab !== nextSelected;
     this.setState({
       closedTabs: this.state.closedTabs.concat([key]),
-      selectedTab: nextSelected
-    }, ()=>{
-      let currentOpenTabs = this._getCurrentOpenTabs();
-      this.props.onTabClose(e, key, currentOpenTabs);
+      selectedTab: nextSelected,
+    }, () => {
+      const currentOpenTabs = this._getCurrentOpenTabs();
+      this.props.onTabClose(ev, key, currentOpenTabs);
       if (shoudBeNotifyTabChange) {
-        this.props.onTabSelect(e, nextSelected, currentOpenTabs);
+        this.props.onTabSelect(ev, nextSelected, currentOpenTabs);
       }
@@ -343,3 +360,3 @@ });
     if (nextSelected !== this.state.selectedTab) {
-      this.setState({selectedTab: nextSelected}, () => {
+      this.setState({ selectedTab: nextSelected }, () => {
         this.props.onTabSelect(e, nextSelected, this._getCurrentOpenTabs());
@@ -356,3 +373,3 @@ });
     if (nextSelected !== this.state.selectedTab) {
-      this.setState({selectedTab: nextSelected}, () => {
+      this.setState({ selectedTab: nextSelected }, () => {
         this.props.onTabSelect(e, nextSelected, this._getCurrentOpenTabs());
@@ -366,14 +383,13 @@ });
       return '';
-    } else {
-      let onHoverStyle = StyleOverride.merge(hoverStyleBase, tab.props.tabStyles.tabCloseIconOnHover);
-      return (<CloseIcon
-        style={style}
-        hoverStyle={onHoverStyle}
-        className={classes}
-        onClick={this.handleCloseButtonClick.bind(this, tab.key)}>&times;</CloseIcon>);
     }
+    let onHoverStyle = StyleOverride.merge(
+      hoverStyleBase, tab.props.tabStyles.tabCloseIconOnHover);
+    return (<CloseIcon
+      style={style}
+      hoverStyle={onHoverStyle}
+      className={classes}
+      onClick={this.handleCloseButtonClick.bind(this, tab.key)}>&times;</CloseIcon>);
   }
 
   render() {
-
     // override inline tabs styles
@@ -419,7 +435,5 @@ let tabInlineStyles = {
     let tabs = _.map(this.state.tabs, (tab) => {
-
       if (this.state.closedTabs.indexOf(tab.key) > -1) {
         return '';
       }
-
       let {
@@ -444,3 +458,3 @@ beforeTitle,
       let tabTiteleStyle = StyleOverride.merge(tabInlineStyles.tabTitle, tabStyles.tabTitle);
-      let tabCloseIconStyle = StyleOverride.merge(tabInlineStyles.tabCloseIcon, tabStyles.tabCloseIcon);
+      const tabCloseIconStyle = StyleOverride.merge(tabInlineStyles.tabCloseIcon, tabStyles.tabCloseIcon);
 
@@ -453,3 +467,3 @@ let tabClasses = classNames(_tabClassNames.tab, tabClassNames.tab);
       let tabAfterTitleClasses = classNames(_tabClassNames.tabAfterTitle, tabClassNames.tabAfterTitle);
-      let tabCloseIconClasses = classNames(_tabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
+      const tabCloseIconClasses = classNames(_tabClassNames.tabCloseIcon, tabClassNames.tabCloseIcon);
 
@@ -462,3 +476,3 @@ 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={tab.props.containerStyle}>{tab}</TabContainer>);
+        content.push(<TabContainer key={`tabContainer#${tab.key}`} selected={true} style={containerStyle}>{tab}</TabContainer>);
       } else {
@@ -472,6 +486,5 @@ if (this.state.hoveredTab === tab.key) {
         }
-        content.push(<TabContainer key={'tabContainer#' + tab.key} selected={false} style={tab.props.containerStyle}>{tab}</TabContainer>);
+        content.push(<TabContainer key={`tabContainer#${tab.key}`} selected={false} style={containerStyle}>{tab}</TabContainer>);
       }
 
-
       // title will be shorten with inline style
@@ -484,3 +497,3 @@ //  {
       let extraAttribute = {};
-      if (typeof title === 'string'){
+      if (typeof title === 'string') {
         extraAttribute.title = title;
@@ -492,9 +505,9 @@ }
         <CustomDraggable
-          key={'draggable_tabs_' + tab.key }
-          axis='x'
-          cancel='.rdTabCloseIcon'
-          start={{x:0, y:0}}
+          key={`draggable_tabs_${tab.key}`}
+          axis="x"
+          cancel=".rdTabCloseIcon"
+          start={{ x: 0, y: 0 }}
           moveOnStartChange={true}
           zIndex={100}
-          bounds='parent'
+          bounds="parent"
           onStart={this.handleDragStart.bind(this, tab.key)}
@@ -526,5 +539,5 @@ onDrag={this.handleDrag.bind(this, tab.key)}
       <div style={tabInlineStyles.tabWrapper} className={_tabClassNames.tabWrapper}>
-        <ul tabIndex='-1' style={tabInlineStyles.tabBar} className={_tabClassNames.tabBar}>
+        <ul tabIndex="-1" style={tabInlineStyles.tabBar} className={_tabClassNames.tabBar}>
           {tabs}
-          <li className='rdTabAddButton' style={TabStyles.tabAddButton} onClick={this.handleAddButtonClick.bind(this)}>
+          <li className="rdTabAddButton" style={TabStyles.tabAddButton} onClick={this.handleAddButtonClick.bind(this)}>
             {this.props.tabAddButton}
@@ -553,6 +566,6 @@ </li>
     tabActive: '',
-    tabHover: ''
+    tabHover: '',
   },
   tabsStyles: {},
-  shortCutKeys:{},
+  shortCutKeys: {},
   tabAddButton: (<span>{'+'}</span>),
@@ -563,3 +576,3 @@ onTabSelect: () => {},
   onTabPositionChange: () => {},
-  keepSelectedTab: false
+  keepSelectedTab: false,
 };
@@ -572,3 +585,3 @@
   tabsClassNames: React.PropTypes.shape({
-    tabWrapper:React.PropTypes.string,
+    tabWrapper: React.PropTypes.string,
     tabBar: React.PropTypes.string,
@@ -584,6 +597,6 @@ tabBarAfter: React.PropTypes.string,
     tabActive: React.PropTypes.string,
-    tabHover:  React.PropTypes.string
+    tabHover: React.PropTypes.string,
   }),
   tabsStyles: React.PropTypes.shape({
-    tabWrapper:React.PropTypes.object,
+    tabWrapper: React.PropTypes.object,
     tabBar: React.PropTypes.object,
@@ -604,9 +617,13 @@ tabBarAfter: React.PropTypes.object,
     tabCloseIcon: React.PropTypes.object,
-    tabCloseIconOnHover: React.PropTypes.object
+    tabCloseIconOnHover: React.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)])
+    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)]),
   }),
@@ -618,5 +635,5 @@ tabAddButton: React.PropTypes.element,
   onTabPositionChange: React.PropTypes.func,
-  keepSelectedTab: React.PropTypes.bool
+  keepSelectedTab: React.PropTypes.bool,
 };
 
 export default Tabs;

src/components/TabStyles.js

@@ -10,3 +10,3 @@ /* Inspired from Atom
     width: '100%',
-    position: 'relative'
+    position: 'relative',
   },
@@ -32,3 +32,3 @@
     maxWidth: '99%',
-    paddingRight: '35px'
+    paddingRight: '35px',
   },
@@ -46,3 +46,3 @@
     borderBottom: '1px solid #111111',
-    pointerEvents: 'none'
+    pointerEvents: 'none',
   },
@@ -66,3 +66,3 @@
     minWidth: '0px',
-    transform: 'translate(0px, 0px)'
+    transform: 'translate(0px, 0px)',
   },
@@ -85,3 +85,3 @@
     backgroundImage: 'linear-gradient(#454545, #333333)',
-    borderRadius: '7.5px 0 0 0'
+    borderRadius: '7.5px 0 0 0',
   },
@@ -104,3 +104,3 @@
     backgroundImage: 'linear-gradient(#454545, #333333)',
-    borderRadius: '0 7.5px 0 0'
+    borderRadius: '0 7.5px 0 0',
   },
@@ -118,3 +118,3 @@
     width: '90%',
-    color: 'rgb(170, 170, 170)'
+    color: 'rgb(170, 170, 170)',
   },
@@ -131,11 +131,11 @@
     fontSize: '13px',
-    backgroundImage: 'linear-gradient(#343434, #222222)'
+    backgroundImage: 'linear-gradient(#343434, #222222)',
   },
 
   tabBeforeActive: {
-    backgroundImage: 'linear-gradient(#343434, #222222)'
+    backgroundImage: 'linear-gradient(#343434, #222222)',
   },
 
   tabAfterActive: {
-    backgroundImage: 'linear-gradient(#343434, #222222)'
+    backgroundImage: 'linear-gradient(#343434, #222222)',
   },
@@ -146,3 +146,3 @@
     color: 'rgb(255, 255, 255)',
-    marginTop:'6px'
+    marginTop: '6px',
   },
@@ -155,14 +155,14 @@
   tabBeforeOnHover: {
-    backgroundImage: 'linear-gradient(#333333, #222222)'
+    backgroundImage: 'linear-gradient(#333333, #222222)',
   },
 
   tabAfterOnHover: {
-    backgroundImage: 'linear-gradient(#333333, #222222)'
+    backgroundImage: 'linear-gradient(#333333, #222222)',
   },
 
   tabTitleOnHover: {
-    filter: 'alpha(opacity=20)'
+    filter: 'alpha(opacity=20)',
   },
 
-  tabCloseIcon:{
+  tabCloseIcon: {
     position: 'absolute',
@@ -184,6 +184,6 @@ cursor: 'pointer',
     borderRadius: '8px',
-    zIndex: 999
+    zIndex: 999,
   },
 
-  tabCloseIconOnHover:{
+  tabCloseIconOnHover: {
     filter: 'none',
@@ -203,20 +203,20 @@ backgroundColor: 'red',
     marginLeft: '20px',
-    zIndex: 2
+    zIndex: 2,
   },
 
   beforeTitle: {
-    position:'absolute',
+    position: 'absolute',
     top: '8px',
     left: '-8px',
-    zIndex: 2
+    zIndex: 2,
   },
 
   afterTitle: {
-    position:'absolute',
+    position: 'absolute',
     top: '8px',
     right: '16px',
-    zIndex: 2
-  }
+    zIndex: 2,
+  },
 };
 
 export default TabStyles;

src/helpers/styleOverride.js

 import Immutable from 'immutable';
 
-let merge = (original, override) => {
-  return Immutable.Map(original).merge(override).toObject();
+const merge = (original, override) => Immutable.Map(original).merge(override).toObject();
+
+export default {
+  merge,
 };
-
-export default {merge: merge};

src/helpers/utils.js

@@ -1,4 +0,4 @@
-let slideArray = (array, a, b) => {
+const slideArray = (array, a, b) => {
   let retArr;
-  let _array = array.slice(0);
+  const _array = array.slice(0);
 
@@ -33,2 +33,4 @@ if (a < b) {
 
-export default {slideArray: slideArray};
+export default {
+  slideArray,
+};

src/index.js

@@ -6,3 +6,3 @@ import Tab from './components/Tab';
   Tab,
-  Tabs
+  Tabs,
 };

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

187948

increased by0.48%

Lines of code

4183

increased by1.21%

Worsened metrics

Dev dependency count

30

increased by11.11%

Dependency changes

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-dom@15.7.0(transitive)

• + Addedreact-draggable@2.2.6(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedreact-dom@0.14.10(transitive)

• - Removedreact-draggable@1.3.7(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedimmutable@^3.8.0

• Updatedlodash@^4.11.1

• Updatedreact@^15.0.1

• Updatedreact-dom@^15.0.1

• Updatedreact-draggable@^2.0.0-beta2