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

beisencloud pc react components

'use strict';

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

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

var _DropDownList = require('./DropDownList/DropDownList');

var _DropDownList2 = _interopRequireDefault(_DropDownList);

var _commonMount = require('../common-mount');

var _commonMount2 = _interopRequireDefault(_commonMount);

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

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

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

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

    _this.dropDownClick = function (val, index) {
      var self = _this;
      setTimeout(function () {
        self.setState({
          viewShow: false,
          children: self.props.children
        });
      }, 300);
      _this.props.callBack(val.value);
      _this.props.dropItemClick(val, index);
    };

    _this.titleClick = function (event) {
      event.stopPropagation();
      if (!_this.state.viewShow) {
        _this.renderDOM(event.target);
        _this.setState({
          viewShow: true,
          active: true
        });
        document.removeEventListener('click', _this.onClose);
        document.addEventListener('click', _this.onClose);
      } else {
        _this.setState({
          viewShow: false,
          active: false
        });
        _this.CommonMount.unmountBox();
        document.removeEventListener('click', _this.onClose);
      }
    };

    _this.onClose = function (event) {
      var area = _this.refs.feildSearchDropDownList;
      if (area == undefined) {
        _this.CommonMount.unmountBox();
        return;
      }
      if (area.contains(event.target)) return;
      _this.setState({ active: false }, _this.forceUpdate());
      var self = _this;
      setTimeout(function () {
        if (!area.contains(event.target)) {
          self.setState({ viewShow: false });
          self.CommonMount.unmountBox();
          document.removeEventListener('click', self.onClose);
        }
      }, 100);
    };

    var defaults = {
      positionLeft: false, //窗口的位置
      children: props.children, //下拉菜单中的数据
      viewShow: false, //点击按钮后显示状态
      active: true
    };
    _this.state = (0, _extends3.default)({}, defaults, props);
    _this.CommonMount = new _commonMount2.default({
      containerId: 'TabDropDown_ul', // 容器ID
      follow: true, // 是否滚动跟随，默认true
      fixed: true // 定位：fixed，false时为absolute
    });
    return _this;
  }

  (0, _createClass3.default)(DropDownListComponent, [{
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.CommonMount.unmountBox();
      document.removeEventListener('click', this.onClose);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.children != this.state.children) {
        this.setState({ children: nextProps.children });
      }
    }
  }, {
    key: 'renderDOM',
    value: function renderDOM(tar) {
      var showAutoUl = _react2.default.createElement(
        'div',
        { className: 'tab-field-drop-list-content drop-list-open tab-search-drop-list-position-left ' },
        _react2.default.createElement(_DropDownList2.default, { data: this.state, callBack: this.props.callBack, dropDownClick: this.dropDownClick })
      );
      this.CommonMount.renderDom('mount-box', // wrap's classname & id
      showAutoUl, // content dom
      tar, // 跟随目标
      [tar, //挂载目标节点
      { // 挂载元素宽高 {width: '', height: ''}
        width: 170, // 挂载宽度
        height: 100
      }]);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var target = this.refs.feildSearchDropDownList;
      window.document.body.clientWidth / 2 > target.getBoundingClientRect()['left'] ? this.setState({ positionLeft: true }) : this.setState({ positionLeft: false });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          viewShow = _state.viewShow,
          hidden = _state.hidden,
          disabled = _state.disabled;
      var _props = this.props,
          bsStyle = _props.bsStyle,
          defaultValue = _props.defaultValue,
          title = _props.title;

      var tabsStyle = bsStyle === "tabs" ? "tab-style-tabs" : "tab-style-block";
      if (hidden) {
        return _react2.default.createElement('div', null);
      } else {
        return _react2.default.createElement(
          'div',
          { ref: 'feildSearchDropDownList', className: 'feild tab-drop-down-list-component ' + tabsStyle },
          _react2.default.createElement(
            'div',
            {
              className: (disabled ? 'tab-search-drop-list-disabled ' : 'tab-search-drop-list-label ') + (viewShow ? 'tab-search-drop-list-label-active' : ' '),
              onClick: this.titleClick
            },
            defaultValue == "" || defaultValue == null ? title : defaultValue
          )
        );
      }
    }
  }]);
  return DropDownListComponent;
}(_react.Component);

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