@beisen/ethos/lib/tree/index.js

beisencloud pc react components

'use strict';

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

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 _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _TreeItem = require('./TreeItem');

var _TreeItem2 = _interopRequireDefault(_TreeItem);

require('./index.scss');

var _loading = require('../loading');

var _loading2 = _interopRequireDefault(_loading);

var _commonFunc = require('../common-func');

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

if (!String.prototype.includes) {
  String.prototype.includes = function () {
    'use strict';

    return String.prototype.indexOf.apply(this, arguments) !== -1;
  };
};

var defaultTranslation = {
  emptyBgText: '这里什么都没有...'
};
var Tree = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(Tree, _Component);

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

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

    _this.handleCheckBoxClick = function (e, dataPath) {
      //修改dataId数据的checked
      _this.props.treeData.map(function (data) {
        if (data.path === dataPath) {
          data.checked = data.checked ? false : true;
          if (data.li && data.li.length > 0) {
            data.li.map(function (item) {
              item.checked = data.checked;
            });
          }
        }
      });
      _this.setState(_this.state);
    };

    _this.itemClick = function (val, e) {
      var treeData = _this.state.treeData;

      var clickLiTop = _this.state.clickLiTop;
      treeData.map(function (item) {
        item.id == val.id ? item.is_checked = true : item.is_checked ? item.is_checked = false : item.is_checked = item.is_checked;
      });
      var tar = e.target;
      var tarPosition = tar.className == 'title-tv ' ? tar.offsetTop : tar.parentNode.parentNode.offsetTop;
      clickLiTop = tarPosition + 'px';
      _this.setState({
        clickLiTop: clickLiTop,
        clickStatus: 'block',
        clickId: val.id,
        clickPId: val.pid
      });
      _this.props.onClick && _this.props.onClick(e, val);
    };

    _this.hideLi = function () {
      _this.setState({ clickStatus: 'none' });
    };

    _this.showLi = function () {
      _this.setState({ clickStatus: 'block' });
    };

    _this.changeTop = function () {
      var treeData = _this.props.treeData;
      var findActive = treeData.filter(function (data) {
        return data.is_checked == true;
      });
      var activeDom = document.getElementsByClassName("tree-li-active")[0];
      if (findActive.length !== 0 && activeDom) {
        _this.setState({ clickLiTop: activeDom.offsetTop + 'px' });
      }
    };

    _this.changeFetching = function () {
      _this.setState({ isFetch: true });
    };

    _this.handleMouseOver = function (e) {
      var hoverLiTop = _this.state.hoverLiTop;
      var baseTreeCom = document.getElementsByClassName('base-tree-component')[0];
      var scrollWidth = baseTreeCom.scrollWidth + 'px';
      var tar = e.target;
      var tarNodePosition = tar.className.includes('title-tv') ? tar.offsetTop : tar.parentNode.parentNode.offsetTop;
      if (tar.className.includes('icon-tv')) {
        tarNodePosition = tar.offsetTop - 2;
      }
      hoverLiTop = tarNodePosition + 'px';
      _this.setState({ hoverLiTop: hoverLiTop, hoverWidth: scrollWidth });
    };

    _this.hoverMouseOut = function () {
      _this.setState({ hoverLiTop: '-40px' });
    };

    _this.transData = function (data1) {
      var data = (0, _commonFunc.deepClone)(data1);
      var filter = [],
          getData = {};
      for (var i in data) {
        if (data[i] != undefined && data[i].id == (_this.state && _this.state.clickId)) data[i].is_checked = true;
        if (data[i] != undefined) getData[data[i]["id"]] = data[i];
      }
      for (var j in data) {
        if (data[j]) {
          var item = data[j],
              temp = getData[item["pid"]];
          if (temp && temp.id !== temp.pid) {
            !temp["li"] && (temp["li"] = []);
            temp["li"].push(item);
          } else {
            filter.push(item);
          }
        }
      }
      return filter;
    };

    _this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
    _this.state = {
      treeData: [],
      hoverLiTop: '-40px',
      clickStatus: 'none',
      clickLiTop: '0px',
      hoverWidth: '100%',
      filterData: _this.transData(props.treeData),
      isFetch: true
    };
    window["getTree"] = {};
    return _this;
  }

  (0, _createClass3.default)(Tree, [{
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window["getTree"] = {};
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.treeData !== this.state.treeData) {
        this.setState({ treeData: nextProps.treeData, filterData: this.transData(nextProps.treeData) });
      }
      if (!nextProps.isFetching) {
        this.setState({ isFetch: false });
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _props = this.props,
          treeData = _props.treeData,
          getTreeData = _props.getTreeData,
          id = _props.id,
          async = _props.async,
          getTreeDataAPI = _props.getTreeDataAPI,
          initGetData = _props.initGetData,
          postData = _props.postData,
          methodType = _props.methodType;

      this.setState({ treeData: treeData });
      if (initGetData) getTreeData && getTreeData(id, async, getTreeDataAPI, postData ? postData : {}, methodType ? methodType : 'GET');
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(nextProps) {
      var _props2 = this.props,
          getTreeSize = _props2.getTreeSize,
          treeData = _props2.treeData;

      if (nextProps.treeData !== this.state.treeData) {
        var findActive = treeData.filter(function (data) {
          return data.is_checked == true;
        });
        if (findActive.length !== 0) {
          this.setState({ clickStatus: 'block' });
          var _defaultTop = document.getElementsByClassName("tree-li-active")[0].offsetTop + 'px';
          if (_defaultTop !== undefined) {
            this.setState({ clickLiTop: _defaultTop }, this.forceUpdate());
          }
        }
        var treeH = document.getElementsByClassName('base-tree-component')[0].offsetHeight;
        getTreeSize && getTreeSize(treeH);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _state = this.state,
          hoverWidth = _state.hoverWidth,
          clickId = _state.clickId,
          clickStatus = _state.clickStatus,
          clickLiTop = _state.clickLiTop,
          hoverLiTop = _state.hoverLiTop,
          treeData = _state.treeData,
          filterData = _state.filterData,
          isFetch = _state.isFetch;
      var _props3 = this.props,
          style = _props3.style,
          hidden = _props3.hidden,
          hiddenTip = _props3.hiddenTip,
          sideTip = _props3.sideTip;

      var Li = filterData.map(function (data, index) {
        return _react2.default.createElement(_TreeItem2.default, (0, _extends3.default)({}, _this2.props, {
          treeData: treeData,
          hideLi: _this2.hideLi,
          showLi: _this2.showLi,
          handleCheckBoxClick: _this2.handleCheckBoxClick,
          changeTop: _this2.changeTop,
          handleMouseOver: _this2.handleMouseOver,
          changeFetching: _this2.changeFetching,
          isFetch: _this2.state.isFetch,
          data: data,
          itemClick: _this2.itemClick,
          clickId: clickId,
          key: index,
          hiddenTip: hiddenTip,
          sideTip: sideTip
        }));
      });
      var component = treeData.length == 0 ? _react2.default.createElement('div', { className: 'us-no-data empty-con', 'data-bg-text': this.translation.emptyBgText }) : Li;
      if (hidden) {
        return _react2.default.createElement('div', null);
      } else {
        return _react2.default.createElement(
          'div',
          { ref: 'BaseTree', className: 'base-tree-component', style: style, onMouseOut: this.hoverMouseOut },
          _react2.default.createElement(
            'div',
            { className: 'base-tree-view base-tree-style' },
            _react2.default.createElement(
              'ul',
              null,
              isFetch ? _react2.default.createElement(
                'div',
                { style: { backgroundColor: "#FFF", height: '295px' } },
                _react2.default.createElement(_loading2.default, { type: 'small' })
              ) : component
            ),
            _react2.default.createElement('li', { className: 'hover-style', style: { 'top': hoverLiTop } }),
            _react2.default.createElement('li', { className: 'click-style', style: { "width": hoverWidth, "display": clickStatus, "top": clickLiTop } })
          )
        );
      }
    }
  }]);
  return Tree;
}(_react.Component), _class.defaultProps = {
  initGetData: true,
  style: {}
}, _temp);
exports.default = Tree;


module.exports = Tree;
module.exports = exports['default'];