@beisen/ethos/lib/tab-component/index.js

beisencloud pc react components

'use strict';

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

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

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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);

require('./index.scss');

var _BottomLine = require('./BottomLine');

var _BottomLine2 = _interopRequireDefault(_BottomLine);

var _TabItem = require('./TabItem');

var _TabItem2 = _interopRequireDefault(_TabItem);

var _es6PromiseDebounce = require('../es6-promise-debounce');

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

var _DropDownListComponent = require('./DropDownListComponent');

var _DropDownListComponent2 = _interopRequireDefault(_DropDownListComponent);

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

var Tab = function (_Component) {
  (0, _inherits3.default)(Tab, _Component);

  function Tab(props) {
    (0, _classCallCheck3.default)(this, Tab);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Tab.__proto__ || (0, _getPrototypeOf2.default)(Tab)).call(this, props));

    _this.getRef = function (Initleft, Initwidth) {
      _this.setState({ width: Initwidth, left: Initleft });
    };

    _this.handleClick = function (eventKey, event) {
      event.stopPropagation();
      var _this$state = _this.state,
          tabItems = _this$state.tabItems,
          callBack = _this$state.callBack;

      tabItems.forEach(function (elem, index) {
        if (elem.eventKey == eventKey) {
          elem.active = true;
        } else {
          elem.active = false;
        }
      });
      _this.setState({ width: event.target.offsetWidth, left: event.target.offsetLeft, tabItems: tabItems });
      callBack && callBack(eventKey, event);
    };

    _this.dropItemClick = function (val, index) {
      var _this$state2 = _this.state,
          tabItems = _this$state2.tabItems,
          dropItems = _this$state2.dropItems;

      var tabItem = tabItems,
          dropItem = dropItems;
      //替换tabItmes里的最后一个，对应替换dropItem里的数据
      var lastItem = tabItem[tabItem.length - 1];
      dropItem.splice(index, 1, lastItem);
      tabItem.pop();
      tabItem.map(function (item) {
        if (item.active) item.active = false;
      });
      tabItem.push({ 'dix': 'tab' + tabItem.length, 'eventKey': val.value, 'title': val.text, 'active': true });
      var target = document.getElementsByClassName('last-item')[0];
      _this.setState({
        tabItems: tabItem,
        dropItems: dropItem,
        wdith: target && target.offsetWidth,
        left: target && target.offsetLeft
      });

      // 隐藏点击之后重新获取最后一个的蓝线的宽度和位置
      var self = _this;
      setTimeout(function () {
        var Node = self.refs.tabChild.lastChild;
        var left = Node && Node.offsetLeft;
        var width = Node && Node.offsetWidth;
        self.setState({ left: left, width: width });
      }, 50);
    };

    _this.getItem = function (item) {
      return {
        "value": item.eventKey,
        "text": item.title,
        "isActive": item.active,
        "isChecked": false,
        "udtData": item.udtData
      };
    };

    _this.renderTabItem = function (data, hidden, tabItemLength) {
      var _this$props = _this.props,
          hiddenTip = _this$props.hiddenTip,
          sideTip = _this$props.sideTip;

      var renderSum = [];
      data.map(function (item, index) {
        var isCurrent;
        if (hidden) {
          isCurrent = item.active ? "tab-item current-tab item-shadown" : "tab-item item-shadown";
        } else {
          var lastChild = index == tabItemLength ? ' last-item' : '';
          isCurrent = item.active ? "tab-item current-tab" + lastChild : "tab-item" + lastChild;
        }
        var refValue = item.active ? "iscurrent" : "notcurrent";
        renderSum.push(_react2.default.createElement(_TabItem2.default, {
          active: item.active,
          refValue: refValue,
          isCurrent: isCurrent,
          getRef: _this.getRef,
          key: index,
          idx: item.idx,
          handleClick: _this.handleClick,
          title: item.title,
          eventKey: item.eventKey,
          hiddenTip: hiddenTip,
          sideTip: sideTip,
          udcData: item.udcData,
          udtData: item.udtData
        }));
      });
      return renderSum;
    };

    var defaults = {
      bsStyle: 'block',
      dropItems: [],
      allItems: props.tabItems,
      getNewData: false,
      tabChildWidth: 0,
      tabItems: [],
      callBack: function callBack() {
        return true;
      },
      left: 1,
      width: 1
    };
    _this.tabItemsDate = [];
    _this.tabItemsDate = props.tabItems;
    _this.state = (0, _extends3.default)({}, defaults, props);
    return _this;
  }

  (0, _createClass3.default)(Tab, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var self = this;
      var _state = this.state,
          dropItems = _state.dropItems,
          tabItems = _state.tabItems,
          autoAdaptive = _state.autoAdaptive;

      if (autoAdaptive) {
        window.onresize = (0, _es6PromiseDebounce2.default)(function () {
          self.filterData(dropItems, tabItems);
        }, 300);
      }
    }
  }, {
    key: 'getActiveIndex',
    value: function getActiveIndex(data) {
      return data.findIndex(function (item) {
        return item && item.active;
      });
    }
  }, {
    key: 'getKeyChange',
    value: function getKeyChange(allItems, tabItems) {
      var keyChange = false;
      if (allItems.length != tabItems.length) {
        keyChange = true;
      } else {
        for (var i = 0; i < allItems.length; i++) {
          if (allItems[i].eventKey != tabItems[i].eventKey || allItems[i].active != tabItems[i].active) keyChange = true;
        }
      }
      return keyChange;
    }
  }, {
    key: 'setResizeDebounce',
    value: function setResizeDebounce() {
      var self = this;
      var _state2 = this.state,
          dropItems = _state2.dropItems,
          tabItems = _state2.tabItems,
          autoAdaptive = _state2.autoAdaptive;

      if (autoAdaptive) {
        window.onresize = (0, _es6PromiseDebounce2.default)(function () {
          self.filterData(dropItems, tabItems);
        }, 300);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // this.setResizeDebounce()
      window.onresize && window.onresize();
      this.tabItemsDate = nextProps.tabItems;
      var _state3 = this.state,
          dropItems = _state3.dropItems,
          tabItems = _state3.tabItems,
          allItems = _state3.allItems;

      var index = this.getActiveIndex(nextProps.tabItems);

      if (nextProps.tabItems.length > 0) {
        if (this.getKeyChange(allItems, nextProps.tabItems)) {
          var tabChildNode = this.refs.tabChild.childNodes;
          var activeChild = tabChildNode[index >= tabChildNode.length ? tabChildNode.length - 1 : index < 0 ? 0 : index];
          var allValue = nextProps.tabItems.concat(); //防止修改原数组
          if (this.props.autoAdaptive) {
            tabItems = allValue.splice(0, tabChildNode.length);
            dropItems = allValue;
          } else {
            tabItems = allValue;
          }
          var dropActiveItem = dropItems.filter(function (item) {
            return item.active;
          });
          var dropActiveIndex = this.getActiveIndex(dropItems);
          if (dropActiveItem.length > 0) {
            var lastItem = tabItems[tabItems.length - 1];
            dropItems.splice(dropActiveIndex, 1, lastItem);
            tabItems.pop();
            tabItems.push({ 'dix': 'tab' + tabItems.length, 'eventKey': dropActiveItem[0].eventKey, 'title': dropActiveItem[0].title, 'active': true });
          }
          this.setState({
            width: activeChild.offsetWidth ? activeChild.offsetWidth : 100,
            left: activeChild.offsetLeft ? activeChild.offsetLeft : 0,
            tabItems: tabItems,
            allItems: this.tabItemsDate,
            dropItems: dropItems,
            getNewData: true
          });
        }
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      if ((0, _stringify2.default)(prevState.tabItems) != (0, _stringify2.default)(this.state.tabItems)) {
        var dropActiveItem = this.state.dropItems.filter(function (item) {
          return item.active;
        });
        if (dropActiveItem.length > 0) {
          var dropActiveIndex = this.getActiveIndex(this.state.dropItems);
          var activeItem = dropActiveItem[0];
          activeItem["text"] = activeItem.title;
          activeItem["value"] = activeItem.eventKey;
          this.dropItemClick(activeItem, dropActiveIndex);
        }
        var tabActiveIndex = this.getActiveIndex(this.state.tabItems);
        if (tabActiveIndex >= 0) {
          var tabNode = this.refs.tabChild.childNodes[tabActiveIndex];
          this.setState({ left: tabNode && tabNode.offsetLeft, width: tabNode && tabNode.offsetWidth });
        }
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _state4 = this.state,
          dropItems = _state4.dropItems,
          tabItems = _state4.tabItems,
          autoAdaptive = _state4.autoAdaptive;

      var self = this;
      setInterval(function () {
        if (self.refs.tabwrapWidth && self.refs.tabwrapWidth.offsetWidth != self.state.tabChildWidth && autoAdaptive) self.filterData([], self.state.tabItems);
      }, 1000);
      if (autoAdaptive) this.filterData(dropItems, tabItems);
      setTimeout(function () {
        var dropActiveItem = self.state.dropItems.filter(function (item) {
          return item && item.active;
        });
        if (dropActiveItem.length > 0) {
          var dropActiveIndex = self.getActiveIndex(self.state.dropItems);
          var activeItem = dropActiveItem[0];
          activeItem["text"] = activeItem.title;
          activeItem["value"] = activeItem.eventKey;
          self.dropItemClick(activeItem, dropActiveIndex);
        }
      }, 0);
    }
  }, {
    key: 'filterData',
    value: function filterData(dropItems, tabItems) {
      //过滤数据，判断到第几个出现dropItems
      if (!this.refs.tabRegion) return;
      var tabList = document.getElementsByClassName("item-shadown");
      var tabWidth = 0,
          tempItem = [],
          dropItem = [];
      for (var i = 0; i < this.tabItemsDate.length; i++) {
        tabWidth += tabList[i] ? tabList[i].clientWidth : 0;
        if (tabWidth > this.refs.tabRegion.clientWidth - 100) {
          dropItem.push(this.tabItemsDate[i]);
        } else {
          tempItem.push(this.tabItemsDate[i]);
        }
      }
      this.setState({ allItems: this.tabItemsDate,
        getNewData: false,
        tabItems: tempItem,
        tabChildWidth: this.refs.tabwrapWidth ? this.refs.tabwrapWidth.offsetWidth : 0,
        dropItems: dropItems.length > 0 ? [].concat((0, _toConsumableArray3.default)(dropItems), dropItem) : dropItem
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          hidden = _props.hidden,
          maxTabLength = _props.maxTabLength,
          autoAdaptive = _props.autoAdaptive,
          tabItems = _props.tabItems,
          hiddenTip = _props.hiddenTip,
          sideTip = _props.sideTip;

      if (!hidden) {
        var _state5 = this.state,
            bsStyle = _state5.bsStyle,
            callBack = _state5.callBack;

        var tabState = this.state;
        var isBsStyle = bsStyle == 'block' ? 'tab' : 'levelTab';
        var dropData = [],
            tabData = [],
            dropComponent = void 0;

        //如果是自适应的话，则过滤数据，将可展示的放入TabItems中，剩下的放入下拉中
        if (autoAdaptive) {
          tabData = tabState.tabItems;
          tabState.dropItems && tabState.dropItems.map(function (item) {
            if (item) {
              dropData.push(_this2.getItem(item));
            }
          });
        } else {
          tabState.tabItems.map(function (item, index) {
            if (index < maxTabLength || maxTabLength < 0 || !maxTabLength) {
              tabData.push(item);
            } else {
              dropData.push(_this2.getItem(item));
            }
          });
        }

        var data = {
          "title": "..." //input框前的文字标识，可为空
          , "openListView": false // 是否打开下拉框
          , "children": dropData /** MenuItem **/
          , "hidden": false //是否显示
          , "disabled": false //是否禁用
          , "hiddenTip": hiddenTip,
          "sideTip": sideTip,
          "onBlur": function onBlur(val) {} /**失去焦点后事件回调**/
        };
        var tabItemLength = tabData.length - 1;

        //判断什么时候出现下拉
        if (autoAdaptive && dropData.length > 0 || !autoAdaptive && maxTabLength >= 0 && maxTabLength < tabState.tabItems.length) {
          dropComponent = _react2.default.createElement(_DropDownListComponent2.default, (0, _extends3.default)({}, data, { dropItemClick: this.dropItemClick, callBack: callBack, bsStyle: bsStyle }));
        }

        return _react2.default.createElement(
          'div',
          { ref: 'tabRegion', className: 'tab-change-region' },
          _react2.default.createElement(
            'div',
            { className: isBsStyle + "-component" },
            _react2.default.createElement(
              'div',
              { className: isBsStyle, ref: 'tabwrapWidth' },
              _react2.default.createElement(
                'div',
                { ref: 'tabChild', className: 'tab-drop-label' },
                this.renderTabItem(tabData, false, tabItemLength)
              ),
              _react2.default.createElement(
                'div',
                { className: 'tab-drop-label', style: { "visibility": "hidden", "float": "left", "height": "0px" } },
                this.renderTabItem(tabItems, true, tabItemLength)
              ),
              dropComponent,
              _react2.default.createElement(_BottomLine2.default, { width: tabState.width, left: tabState.left })
            )
          )
        );
      } else {
        return _react2.default.createElement('div', null);
      }
    }
  }]);
  return Tab;
}(_react.Component);

module.exports = Tab;