zent/lib/tabs/components/Nav.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _Tab = require('./Tab');

var _Tab2 = _interopRequireDefault(_Tab);

var _navUtil = require('./navUtil');

var _navUtil2 = _interopRequireDefault(_navUtil);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _ref2 = _react2['default'].createElement(
  'span',
  null,
  '+'
);

var Nav = function (_ref) {
  (0, _inherits3['default'])(Nav, _ref);

  function Nav() {
    (0, _classCallCheck3['default'])(this, Nav);
    return (0, _possibleConstructorReturn3['default'])(this, (Nav.__proto__ || Object.getPrototypeOf(Nav)).apply(this, arguments));
  }

  (0, _createClass3['default'])(Nav, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.componentDidUpdate();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      // 设置navContent的宽度
      this.positionInkBar();
    }
  }, {
    key: 'positionInkBar',
    value: function positionInkBar() {
      var type = this.props.type;

      if (type === 'slider') {
        var activeTabDom = _reactDom2['default'].findDOMNode(this.activeTab);
        if (activeTabDom) {
          var activeTabInner = activeTabDom.children[0];
          var activeTabInnerContentDom = activeTabInner.children[0];
          var targetDom = activeTabInnerContentDom || activeTabInner;
          var tWidth = _navUtil2['default'].getOffsetWH(targetDom);
          var tLeft = _navUtil2['default'].getOffsetLT(targetDom);
          var wrapLeft = _navUtil2['default'].getOffsetLT(this.tabwrapDom);
          if (!activeTabInnerContentDom) {
            var cssStyle = window.getComputedStyle(activeTabInner);
            var paddingLeft = window.parseInt(cssStyle.paddingLeft);
            var paddingRight = window.parseInt(cssStyle.paddingRight);
            tWidth = tWidth - paddingLeft - paddingRight;
            wrapLeft -= paddingLeft;
          }
          this.inkBarDom.style.width = tWidth + 'px';
          this.inkBarDom.style.left = tLeft - wrapLeft + 'px';
        }
      }
    }
  }, {
    key: 'renderTabs',
    value: function renderTabs() {
      var _this2 = this;

      var renderData = _navUtil2['default'].modifyTabListData(this.props);
      var TabList = [];
      renderData.forEach(function (renderDataItem) {
        var refParam = {};
        if (renderDataItem.actived) {
          refParam.ref = function (c) {
            _this2.activeTab = c;
          };
        }
        TabList.push(_react2['default'].createElement(
          _Tab2['default'],
          (0, _extends3['default'])({
            prefix: _this2.props.prefix,
            onSelected: _this2.onTabSelected.bind(_this2),
            onDelete: _this2.onTabDel.bind(_this2),
            uniqueId: _this2.props.uniqueId
          }, renderDataItem, {
            id: renderDataItem.key
          }, refParam),
          renderDataItem.title
        ));
      });
      return TabList;
    }
  }, {
    key: 'onTabSelected',
    value: function onTabSelected(id) {
      var onChange = this.props.onChange;
      // change

      onChange(id);
    }
  }, {
    key: 'onTabDel',
    value: function onTabDel(id) {
      var onDelete = this.props.onDelete;

      onDelete(id);
    }
  }, {
    key: 'onTabAdd',
    value: function onTabAdd() {
      var onTabAdd = this.props.onTabAdd;

      onTabAdd();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          prefix = _props.prefix,
          align = _props.align,
          canadd = _props.canadd,
          size = _props.size,
          type = _props.type;

      var classes = prefix + '-tabs-size-' + size + ' ' + prefix + '-tabs-type-' + type + ' ' + prefix + '-tabs-align-' + align;
      if (type === 'slider' && size === 'normal') {
        classes += ' ' + prefix + '-tabs-third-level';
      }
      var addOperation = '';
      if (canadd && align !== 'center') {
        addOperation = _react2['default'].createElement(
          'div',
          {
            className: prefix + '-tabs-nav-add',
            onClick: this.onTabAdd.bind(this)
          },
          _ref2
        );
      }

      return _react2['default'].createElement(
        'div',
        { className: prefix + '-tabs-nav ' + classes },
        _react2['default'].createElement(
          'div',
          {
            className: prefix + '-tabs-nav-content',
            ref: function ref(r) {
              _this3.navContentDom = _reactDom2['default'].findDOMNode(r);
            }
          },
          addOperation,
          _react2['default'].createElement(
            'div',
            { className: prefix + '-tabs-scroll' },
            _react2['default'].createElement(
              'div',
              {
                className: prefix + '-tabs-tabwrap',
                role: 'tablist',
                ref: function ref(c) {
                  _this3.tabwrapDom = c;
                }
              },
              _react2['default'].createElement('span', {
                className: prefix + '-tabs-nav-ink-bar',
                ref: function ref(c) {
                  _this3.inkBarDom = c;
                }
              }),
              _react2['default'].createElement(
                'div',
                null,
                this.renderTabs()
              )
            )
          )
        )
      );
    }
  }]);
  return Nav;
}(_react.PureComponent || _react.Component);

Nav.propTypes = {
  prefix: _propTypes2['default'].string,
  tabListData: _propTypes2['default'].array,
  onChange: _propTypes2['default'].func,
  type: _propTypes2['default'].string,
  align: _propTypes2['default'].string,
  size: _propTypes2['default'].string,
  onDelete: _propTypes2['default'].func,
  onTabAdd: _propTypes2['default'].func,
  candel: _propTypes2['default'].bool,
  canadd: _propTypes2['default'].bool,
  uniqueId: _propTypes2['default'].number
};
Nav.defaultProps = {
  prefix: 'zent',
  onChange: _noop2['default'],
  tabListData: [],
  type: 'normal',
  align: 'left',
  size: 'normal',
  onDelete: _noop2['default'],
  candel: false,
  canadd: false,
  onTabAdd: _noop2['default'],
  uniqueId: 0
};
exports['default'] = Nav;