rc-tabs - npm Package Compare versions

Comparing version 5.3.2 to 5.3.3

lib/InkBarMixin.js

@@ -32,7 +32,7 @@ 'use strict';
     } else {
-      var top = tabOffset.top - containerOffset.top;
+      var _top = tabOffset.top - containerOffset.top;
       inkBarNode.style.left = '';
       inkBarNode.style.right = '';
-      inkBarNode.style.top = top + 'px';
-      inkBarNode.style.bottom = containerNode.offsetHeight - top - tabNode.offsetHeight + 'px';
+      inkBarNode.style.top = _top + 'px';
+      inkBarNode.style.bottom = containerNode.offsetHeight - _top - tabNode.offsetHeight + 'px';
     }
@@ -39,0 +39,0 @@ }

lib/KeyCode.js

@@ -1,7 +0,7 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports['default'] = {
+exports["default"] = {
   /**
@@ -22,4 +22,4 @@ * LEFT
    */
-  DOWN: 40 // also NUM_SOUTH
-};
-module.exports = exports['default'];
+  DOWN: 40 };
+module.exports = exports["default"];
+// also NUM_SOUTH

lib/Nav.js

@@ -24,2 +24,7 @@ 'use strict';
 
+  propTypes: {
+    tabPosition: _react2['default'].PropTypes.string,
+    onTabClick: _react2['default'].PropTypes.func
+  },
+
   mixins: [require('./InkBarMixin')],
@@ -35,3 +40,45 @@
 
-  _getTabs: function _getTabs() {
+  componentDidMount: function componentDidMount() {
+    this.componentDidUpdate();
+  },
+
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (prevProps && prevProps.tabPosition !== this.props.tabPosition) {
+      this.setOffset(0);
+      return;
+    }
+    var navNode = _react2['default'].findDOMNode(this.refs.nav);
+    var navNodeWH = this.getOffsetWH(navNode);
+    var navWrapNode = _react2['default'].findDOMNode(this.refs.navWrap);
+    var navWrapNodeWH = this.getOffsetWH(navWrapNode);
+    var state = this.state;
+    var offset = state.offset;
+    if (navWrapNodeWH - offset < navNodeWH) {
+      if (!state.next) {
+        this.setNext(true);
+      }
+    } else {
+      var minOffset = navWrapNodeWH - navNodeWH;
+      if (minOffset < 0 && minOffset > offset) {
+        if (state.next) {
+          this.setNext(false);
+        }
+        this.setOffset(minOffset);
+        offset = minOffset;
+      }
+    }
+    if (offset < 0) {
+      if (!state.prev) {
+        this.setPrev(true);
+      }
+    } else if (state.prev) {
+      this.setPrev(false);
+    }
+  },
+
+  onTabClick: function onTabClick(key) {
+    this.props.onTabClick(key);
+  },
+
+  getTabs: function getTabs() {
     var _this = this;
@@ -54,3 +101,3 @@
         events = {
-          onClick: _this.handleTabClick.bind(_this, key)
+          onClick: _this.onTabClick.bind(_this, key)
         };
@@ -79,59 +126,2 @@ }
 
-  handleTabClick: function handleTabClick(key) {
-    this.props.handleTabClick(key);
-  },
-
-  componentDidMount: function componentDidMount() {
-    this.componentDidUpdate();
-  },
-
-  componentDidUpdate: function componentDidUpdate(prevProps) {
-    if (prevProps && prevProps.tabPosition !== this.props.tabPosition) {
-      this.setOffset(0);
-      return;
-    }
-    var navNode = _react2['default'].findDOMNode(this.refs.nav);
-    var navNodeWH = this.getOffsetWH(navNode);
-    var navWrapNode = _react2['default'].findDOMNode(this.refs.navWrap);
-    var navWrapNodeWH = this.getOffsetWH(navWrapNode);
-    var state = this.state;
-    var offset = state.offset;
-    if (navWrapNodeWH - offset < navNodeWH) {
-      if (!state.next) {
-        this.setState({
-          next: true
-        });
-      }
-    } else {
-      var minOffset = navWrapNodeWH - navNodeWH;
-      if (minOffset < 0 && minOffset > offset) {
-        if (state.next) {
-          this.setState({
-            next: false
-          });
-        }
-        this.setOffset(minOffset);
-        offset = minOffset;
-      }
-    }
-    if (offset < 0) {
-      if (!state.prev) {
-        this.setState({
-          prev: true
-        });
-      }
-    } else if (state.prev) {
-      this.setState({
-        prev: false
-      });
-    }
-  },
-
-  setOffset: function setOffset(offset) {
-    offset = Math.min(0, offset);
-    this.setState({
-      offset: offset
-    });
-  },
-
   getOffsetWH: function getOffsetWH(node) {
@@ -146,18 +136,2 @@ var tabPosition = this.props.tabPosition;
 
-  prev: function prev() {
-    var navWrapNode = _react2['default'].findDOMNode(this.refs.navWrap);
-    var navWrapNodeWH = this.getOffsetWH(navWrapNode);
-    var state = this.state;
-    var offset = state.offset;
-    this.setOffset(offset + navWrapNodeWH);
-  },
-
-  next: function next() {
-    var navWrapNode = _react2['default'].findDOMNode(this.refs.navWrap);
-    var navWrapNodeWH = this.getOffsetWH(navWrapNode);
-    var state = this.state;
-    var offset = state.offset;
-    this.setOffset(offset - navWrapNodeWH);
-  },
-
   render: function render() {
@@ -167,3 +141,3 @@ var props = this.props;
     var prefixCls = props.prefixCls;
-    var tabs = this._getTabs();
+    var tabs = this.getTabs();
     var tabMovingDirection = props.tabMovingDirection;
@@ -175,3 +149,4 @@ var tabPosition = props.tabPosition;
     }
-    var nextButton, prevButton;
+    var nextButton = undefined;
+    var prevButton = undefined;
 
@@ -187,3 +162,3 @@ var showNextPrev = state.prev || state.next;
           onClick: state.prev ? this.prev : noop,
-          unselectable: "unselectable",
+          unselectable: 'unselectable',
           className: (0, _utils.cx)((_cx = {}, _defineProperty(_cx, prefixCls + '-tab-prev', 1), _defineProperty(_cx, prefixCls + '-tab-btn-disabled', !state.prev), _cx)) },
@@ -197,3 +172,3 @@ _react2['default'].createElement('span', { className: prefixCls + '-tab-prev-icon' })
           onClick: state.next ? this.next : noop,
-          unselectable: "unselectable",
+          unselectable: 'unselectable',
           className: (0, _utils.cx)((_cx2 = {}, _defineProperty(_cx2, prefixCls + '-tab-next', 1), _defineProperty(_cx2, prefixCls + '-tab-btn-disabled', !state.next), _cx2)) },
@@ -219,3 +194,3 @@ _react2['default'].createElement('span', { className: prefixCls + '-tab-next-icon' })
         style: props.style,
-        ref: "container" },
+        ref: 'container' },
       prevButton,
@@ -225,3 +200,3 @@ nextButton,
         'div',
-        { className: prefixCls + '-nav-wrap', ref: "navWrap" },
+        { className: prefixCls + '-nav-wrap', ref: 'navWrap' },
         _react2['default'].createElement(
@@ -232,3 +207,3 @@ 'div',
             'div',
-            { className: prefixCls + '-nav', ref: "nav", style: navOffset },
+            { className: prefixCls + '-nav', ref: 'nav', style: navOffset },
             _react2['default'].createElement('div', { className: inkBarClass, ref: 'inkBar' }),
@@ -240,2 +215,36 @@ tabs
     );
+  },
+
+  setOffset: function setOffset(offset) {
+    this.setState({
+      offset: Math.min(0, offset)
+    });
+  },
+
+  prev: function prev() {
+    var navWrapNode = _react2['default'].findDOMNode(this.refs.navWrap);
+    var navWrapNodeWH = this.getOffsetWH(navWrapNode);
+    var state = this.state;
+    var offset = state.offset;
+    this.setOffset(offset + navWrapNodeWH);
+  },
+
+  next: function next() {
+    var navWrapNode = _react2['default'].findDOMNode(this.refs.navWrap);
+    var navWrapNodeWH = this.getOffsetWH(navWrapNode);
+    var state = this.state;
+    var offset = state.offset;
+    this.setOffset(offset - navWrapNodeWH);
+  },
+
+  setPrev: function setPrev(v) {
+    this.setState({
+      prev: v
+    });
+  },
+
+  setNext: function setNext(v) {
+    this.setState({
+      next: v
+    });
   }
@@ -242,0 +251,0 @@ });

lib/TabPane.js

@@ -7,12 +7,4 @@ 'use strict';
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -22,37 +14,29 @@
 
-var TabPane = (function (_React$Component) {
-  _inherits(TabPane, _React$Component);
+var TabPane = _react2['default'].createClass({
+  displayName: 'TabPane',
 
-  function TabPane() {
-    _classCallCheck(this, TabPane);
+  propTypes: {
+    onDestroy: _react2['default'].PropTypes.func
+  },
 
-    _get(Object.getPrototypeOf(TabPane.prototype), 'constructor', this).apply(this, arguments);
-  }
-
-  _createClass(TabPane, [{
-    key: 'render',
-    value: function render() {
-      var props = this.props;
-      var prefixCls = props.rootPrefixCls + '-tabpane';
-      var cls = props.active ? '' : prefixCls + '-hidden';
-      cls += ' ' + prefixCls;
-      return _react2['default'].createElement(
-        'div',
-        { className: cls },
-        props.children
-      );
+  componentWillUnmount: function componentWillUnmount() {
+    if (this.props.onDestroy) {
+      this.props.onDestroy();
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.props.onDestroy) {
-        this.props.onDestroy();
-      }
-    }
-  }]);
+  },
 
-  return TabPane;
-})(_react2['default'].Component);
+  render: function render() {
+    var props = this.props;
+    var prefixCls = props.rootPrefixCls + '-tabpane';
+    var cls = props.active ? '' : prefixCls + '-hidden';
+    cls += ' ' + prefixCls;
+    return _react2['default'].createElement(
+      'div',
+      { className: cls },
+      props.children
+    );
+  }
+});
 
 exports['default'] = TabPane;
 module.exports = exports['default'];

lib/Tabs.js

@@ -34,5 +34,12 @@ 'use strict';
 
+  propTypes: {
+    onTabClick: _react2['default'].PropTypes.func,
+    onChange: _react2['default'].PropTypes.func,
+    children: _react2['default'].PropTypes.any,
+    animation: _react2['default'].PropTypes.string
+  },
+
   getInitialState: function getInitialState() {
     var props = this.props;
-    var activeKey;
+    var activeKey = undefined;
     if ('activeKey' in props) {
@@ -66,21 +73,2 @@ activeKey = props.activeKey;
 
-  setActiveKey: function setActiveKey(activeKey) {
-    var currentActiveKey = this.state.activeKey;
-    if (!currentActiveKey) {
-      this.setState({
-        activeKey: activeKey
-      });
-    } else {
-      var keys = [];
-      _react2['default'].Children.forEach(this.props.children, function (c) {
-        keys.push(c.key);
-      });
-      var tabMovingDirection = keys.indexOf(currentActiveKey) > keys.indexOf(activeKey) ? 'backward' : 'forward';
-      this.setState({
-        activeKey: activeKey,
-        tabMovingDirection: tabMovingDirection
-      });
-    }
-  },
-
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
@@ -92,7 +80,37 @@ if ('activeKey' in nextProps) {
 
-  handleTabDestroy: function handleTabDestroy(key) {
+  onTabDestroy: function onTabDestroy(key) {
     delete this.renderPanels[key];
   },
 
-  _getNextActiveKey: function _getNextActiveKey(next) {
+  onTabClick: function onTabClick(key) {
+    this.props.onTabClick(key);
+    if (this.state.activeKey !== key) {
+      this.setActiveKey(key);
+      this.props.onChange(key);
+    }
+  },
+
+  onKeyDown: function onKeyDown(e) {
+    if (e.target !== _react2['default'].findDOMNode(this)) {
+      return;
+    }
+    var eventKeyCode = e.keyCode;
+    switch (eventKeyCode) {
+      case _KeyCode2['default'].RIGHT:
+      case _KeyCode2['default'].DOWN:
+        e.preventDefault();
+        var nextKey = this.getNextActiveKey(true);
+        this.onTabClick(nextKey);
+        break;
+      case _KeyCode2['default'].LEFT:
+      case _KeyCode2['default'].UP:
+        e.preventDefault();
+        var previousKey = this.getNextActiveKey(false);
+        this.onTabClick(previousKey);
+        break;
+      default:
+    }
+  },
+
+  getNextActiveKey: function getNextActiveKey(next) {
     var activeKey = this.state.activeKey;
@@ -123,3 +141,3 @@ var children = [];
 
-  _getTabPanes: function _getTabPanes() {
+  getTabPanes: function getTabPanes() {
     var _this = this;
@@ -134,3 +152,4 @@
 
-    _react2['default'].Children.forEach(children, function (child) {
+    _react2['default'].Children.forEach(children, function (c) {
+      var child = c;
       var key = child.key;
@@ -142,4 +161,4 @@ var active = activeKey === key;
           active: active,
-          onDestroy: _this.handleTabDestroy.bind(_this, key),
-          //eventKey: key,
+          onDestroy: _this.onTabDestroy.bind(_this, key),
+          // eventKey: key,
           rootPrefixCls: props.prefixCls
@@ -151,3 +170,3 @@ });
         // or else will destroy and reinit
-        //newChildren.push(<TabPane active={false}
+        // newChildren.push(<TabPane active={false}
         //  key={key}
@@ -160,3 +179,3 @@ //  eventKey={key}
           active: false,
-          //eventKey: key,
+          // eventKey: key,
           rootPrefixCls: props.prefixCls
@@ -170,32 +189,2 @@ }, []));
 
-  handleTabClick: function handleTabClick(key) {
-    this.props.onTabClick(key);
-    if (this.state.activeKey !== key) {
-      this.setActiveKey(key);
-      this.props.onChange(key);
-    }
-  },
-
-  handleKeyDown: function handleKeyDown(e) {
-    if (e.target !== _react2['default'].findDOMNode(this)) {
-      return;
-    }
-    var eventKeyCode = e.keyCode;
-    switch (eventKeyCode) {
-      case _KeyCode2['default'].RIGHT:
-      case _KeyCode2['default'].DOWN:
-        e.preventDefault();
-        var nextKey = this._getNextActiveKey(true);
-        this.handleTabClick(nextKey);
-        break;
-      case _KeyCode2['default'].LEFT:
-      case _KeyCode2['default'].UP:
-        e.preventDefault();
-        var previousKey = this._getNextActiveKey(false);
-        this.handleTabClick(previousKey);
-        break;
-      default:
-    }
-  },
-
   render: function render() {
@@ -211,4 +200,4 @@ var props = this.props;
     var animation = this.props.animation;
-    var tabPanes = this._getTabPanes();
-    var transitionName;
+    var tabPanes = this.getTabPanes();
+    var transitionName = undefined;
     transitionName = props.transitionName && props.transitionName[tabMovingDirection || 'backward'];
@@ -221,3 +210,3 @@ if (!transitionName && animation) {
         _rcAnimate2['default'],
-        { showProp: "active",
+        { showProp: 'active',
           exclusive: true,
@@ -229,6 +218,6 @@ transitionName: transitionName },
     var contents = [_react2['default'].createElement(_Nav2['default'], { prefixCls: prefixCls,
-      key: "nav",
+      key: 'nav',
       tabPosition: tabPosition,
       style: props.navStyle,
-      handleTabClick: this.handleTabClick,
+      onTabClick: this.onTabClick,
       tabMovingDirection: tabMovingDirection,
@@ -240,3 +229,3 @@ panels: this.props.children,
         style: props.contentStyle,
-        key: "content" },
+        key: 'content' },
       tabPanes
@@ -250,7 +239,30 @@ )];
       { className: cls,
-        tabIndex: "0",
+        tabIndex: '0',
         style: props.style,
-        onKeyDown: this.handleKeyDown },
+        onKeyDown: this.onKeyDown },
       contents
     );
+  },
+
+  setActiveKey: function setActiveKey(activeKey) {
+    var _this2 = this;
+
+    var currentActiveKey = this.state.activeKey;
+    if (!currentActiveKey) {
+      this.setState({
+        activeKey: activeKey
+      });
+    } else {
+      (function () {
+        var keys = [];
+        _react2['default'].Children.forEach(_this2.props.children, function (c) {
+          keys.push(c.key);
+        });
+        var tabMovingDirection = keys.indexOf(currentActiveKey) > keys.indexOf(activeKey) ? 'backward' : 'forward';
+        _this2.setState({
+          activeKey: activeKey,
+          tabMovingDirection: tabMovingDirection
+        });
+      })();
+    }
   }
@@ -257,0 +269,0 @@ });

lib/utils.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+
 function getScroll(w, top) {
@@ -12,6 +13,6 @@ var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
     var d = w.document;
-    //ie6,7,8 standard mode
+    // ie6,7,8 standard mode
     ret = d.documentElement[method];
     if (typeof ret !== 'number') {
-      //quirks mode
+      // quirks mode
       ret = d.body[method];
@@ -24,3 +25,5 @@ }
 function offset(elem) {
-  var box, x, y;
+  var box = undefined;
+  var x = undefined;
+  var y = undefined;
   var doc = elem.ownerDocument;
@@ -27,0 +30,0 @@ var body = doc.body;

package.json

 {
   "name": "rc-tabs",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "tabs ui component for react",
@@ -10,2 +10,6 @@ "keywords": [
   ],
+  "files": [
+    "lib",
+    "assets/*.css"
+  ],
   "main": "./lib/index",
@@ -27,9 +31,7 @@ "homepage": "http://github.com/react-component/tabs",
     "build": "rc-tools run build",
-    "precommit": "rc-tools run precommit",
-    "less": "rc-tools run less",
     "gh-pages": "rc-tools run gh-pages",
-    "history": "rc-tools run history",
     "start": "node --harmony node_modules/.bin/rc-server",
-    "publish": "rc-tools run tag",
+    "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
+    "karma": "rc-tools run karma",
     "saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs",
@@ -43,7 +45,7 @@ "browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test",
     "rc-server": "3.x",
-    "rc-tools": "3.x",
+    "rc-tools": "4.x",
     "react": "0.13.x"
   },
   "precommit": [
-    "precommit"
+    "lint"
   ],
@@ -50,0 +52,0 @@ "dependencies": {

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

Lines of code

1238

increased by1.73%

Worsened metrics

Total package byte prevSize

42364

decreased by-3.04%

No dependency changes