@beisen/ethos/lib/dropdown-button/index.js

beisencloud pc react components

'use strict';

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

require('./styles/all.scss');

var _DropButtonMain = require('./DropButtonMain/DropButtonMain');

var _DropButtonMain2 = _interopRequireDefault(_DropButtonMain);

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

var _commonMount2 = _interopRequireDefault(_commonMount);

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

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

var DropDownButton = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(DropDownButton, _Component);

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

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

    var defualt = {
      btnStyle: '',
      btnSize: '',
      iconName: '',
      maxWidth: 'none',
      listShow: false,
      ulHide: false,
      shadowHide: true,
      btnDisabled: false,
      btnDirection: {},
      scrollHeight: 0,
      notBtnIcon: props.iconName,
      listViewDirection: "right-down"
    };

    _this.CommonMount = new _commonMount2.default({
      containerId: 'common-mount-list', // 容器ID
      follow: true, // 是否滚动跟随，默认true
      fixed: true // 定位：fixed，false时为absolute
    });
    _this.state = (0, _extends3.default)({}, defualt, props);
    _this.onClose = _this.onClose.bind(_this);
    _this.btnMouseMove = _this.btnMouseMove.bind(_this);
    _this.btnMouseOut = _this.btnMouseOut.bind(_this);
    _this.itemClick = _this.itemClick.bind(_this);
    _this.scrollUl = _this.scrollUl.bind(_this);
    _this.onClick = _this.onClick.bind(_this);
    _this.renderDOM = _this.renderDOM.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(DropDownButton, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.state = (0, _extends3.default)({}, this.state, nextProps);
      this.setState(this.state);
    }
  }, {
    key: 'scrollUl',
    value: function scrollUl(height) {
      this.setState({ scrollHeight: height });
    }
  }, {
    key: 'onClick',
    value: function onClick(e) {
      var self = this;
      if (this.state.btnActive) {
        this.CommonMount.unmountBox();
        this.setState({ btnActive: false });
        return false;
      }
      var allFun = function allFun() {
        self.renderDOM(e.target);
        document.removeEventListener('mousedown', self.onClose);
        document.addEventListener('mousedown', self.onClose);
        self.setState({ btnActive: true });
      };
      var retFun = function retFun(children) {
        if (children) {
          self.state.children = children;
        }
        allFun();
      };
      if (!this.props.itemClick) {
        allFun();
      }
      if (!self.state.children || self.state.children.length == 0) {
        this.props.itemClick && this.props.itemClick(retFun);
      } else {
        allFun();
      }
    }
  }, {
    key: 'renderDOM',
    value: function renderDOM(tar) {
      var _state = this.state,
          autoDirection = _state.autoDirection,
          direction = _state.direction,
          children = _state.children,
          sideTip = _state.sideTip,
          hiddenTip = _state.hiddenTip;
      var _props = this.props,
          panelWidth = _props.panelWidth,
          deviationLeft = _props.deviationLeft,
          rightAlign = _props.rightAlign,
          disabledShowTips = _props.disabledShowTips,
          tipsDes = _props.tipsDes;

      var self = this;
      var target = this.refs.dropDownView.getBoundingClientRect();
      var length = this.state.children.length >= 10 ? 260 : this.state.children.length * 26;
      var winHeight = window.innerHeight;
      var winWidth = window.innerWidth;
      var horizontal = winWidth - target.left > panelWidth ? "right" : "left";
      var vertical = winHeight - target.bottom > length ? "-down" : winHeight - target.top > length ? "-top" : winHeight - target.bottom > target.top ? "-down" : "-top";
      if (this.state.disabled) {
        return false;
      }
      var tempList = this.state.listShow == false ? true : false;
      var showAutoUl = _react2.default.createElement(_DropButtonMain2.default, {
        data: children,
        disabledShowTips: disabledShowTips,
        sideTip: sideTip,
        hiddenTip: hiddenTip,
        panelWidth: panelWidth,
        itemClick: this.itemClick,
        ulHide: !tempList,
        scrollUl: this.scrollUl,
        direction: autoDirection || autoDirection == undefined ? horizontal + vertical : direction,
        listShow: tempList,
        tipsDes: tipsDes
      });
      this.CommonMount.renderDom('drop-down-list-not-active', // wrap's classname & id
      showAutoUl, // content dom
      self.refs.dropDownView, // 跟随目标
      [self.refs.dropDownView, //挂载目标节点
      { // 挂载元素宽高 {width: '', height: ''}
        width: panelWidth, // 挂载宽度
        height: length
      }, 26], true, deviationLeft, rightAlign);

      var parent = document.getElementById('drop-down-list-ul');
      setTimeout(function () {
        parent.className = parent.className + ' drop-down-list-active';
      }, 10);
    }
  }, {
    key: 'onClose',
    value: function onClose(event) {
      var area = document.getElementById("common-mount-list");
      if (area && !area.contains(event.target) && !this.refs.dropBtnComponent.contains(event.target)) {
        this.CommonMount.unmountBox();
        this.setState({ btnActive: false });
        document.removeEventListener('mousedown', this.onClose);
      }
    }
  }, {
    key: 'itemClick',
    value: function itemClick(e, val) {
      var self = this;
      var stateData = this.state;
      stateData.children.map(function (item) {
        if (item.value == val.value) item.active = true;
      });
      // let iconName = this.state.iconName.replace('active', 'nomal');
      //背景效果展现，隐藏ul列表
      this.setState({
        shadowHide: false,
        children: stateData.children,
        ulHide: true,
        iconName: this.props.iconName
      });

      setTimeout(function () {
        //延迟消失ul列表
        var stateData = self.state;
        stateData.children.map(function (item) {
          if (item.active) item.active = false;
        });
        self.CommonMount.unmountBox();
        self.setState({ btnActive: false });
      }, 300);
      this.props.onClick && this.props.onClick(val, e, true, this.state, this.refs.dropdownbtn);
      this.state.listShow = false;
      document.removeEventListener('mousedown', this.onClose);
    }
  }, {
    key: 'btnMouseMove',
    value: function btnMouseMove() {
      var _props2 = this.props,
          activeName = _props2.activeName,
          hoverName = _props2.hoverName,
          isBtnStyle = _props2.isBtnStyle;

      if (this.state.disabled) {
        return false;
      }
      if (isBtnStyle) {
        var iconName = this.state.iconName.replace('nomal', 'active');
        this.setState({
          iconName: iconName
        });
      } else {
        if (this.refs.dropDownIcon) this.refs.dropDownIcon.className = this.refs.dropDownIcon.className.replace("nomal", hoverName ? "hover" : "active");
        this.setState({ notBtnIcon: hoverName ? hoverName : activeName, hovering: true });
      }
    }
  }, {
    key: 'btnMouseOut',
    value: function btnMouseOut() {
      var _props3 = this.props,
          iconName = _props3.iconName,
          hoverName = _props3.hoverName,
          isBtnStyle = _props3.isBtnStyle;

      if (this.state.disabled) {
        return false;
      }
      if (isBtnStyle) {
        var _iconName = this.state.iconName.replace('active', 'nomal');
        !this.state.listShow && this.setState({
          iconName: _iconName
        });
      } else {
        if (this.refs.dropDownIcon) this.refs.dropDownIcon.className = this.refs.dropDownIcon.className.replace(hoverName ? "hover" : "active", "nomal");
        this.setState({ notBtnIcon: iconName, hovering: false }, this.forceUpdate());
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var initData = {
        "bsSize": {
          "small": "drop-btns-bgc-small ",
          "default": "drop-btns-bgc-big "
        },
        "bsStyle": {
          "weaken": "drop-btns-weaken ",
          "default": " ",
          "link": " "
        },
        "btnDisabled": {
          "weaken": "drop-btns-bg-gray-weaken ",
          "default": "drop-btns-bg-gray-defalult "
        },
        "btnDirection": {
          "small": "drop-down-btn-small",
          "default": "drop-down-btn-big"
        },
        "btnIcon": {
          "weaken": this.props.iconName ? this.props.iconName : "pc-sys-arrowdown-nomal-svg",
          "default": "pc-sys-arrowdownM7-nomal-svg"
        }
      };
      var _props4 = this.props,
          bsStyle = _props4.bsStyle,
          bsSize = _props4.bsSize,
          open = _props4.open,
          disabled = _props4.disabled,
          maxWidth = _props4.maxWidth,
          iconName = _props4.iconName;
      //初始化数据，为按钮添加样式

      var btnActive = false;
      var btnStyle = initData.bsStyle[bsStyle],
          btnSize = initData.bsSize[bsSize],
          listShow = open ? true : false,
          btnDirection = initData.btnDirection[bsSize],
          btnDisabled = disabled ? initData.btnDisabled[bsStyle] : this.state.btnDisabled = " ",
          iconBtnName = disabled ? iconName.replace('nomal', 'disabled') : initData.btnIcon[bsStyle],
          maxBtnWidth = maxWidth && maxWidth.length > 0 ? maxWidth : 'none';;
      this.setState({
        maxWidth: maxBtnWidth,
        btnActive: btnActive,
        btnStyle: btnStyle,
        btnSize: btnSize,
        listShow: listShow,
        btnDirection: btnDirection,
        btnDisabled: btnDisabled,
        iconName: iconBtnName
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.CommonMount.unmountBox();
      document.removeEventListener('mousedown', this.onClose);
    }
  }, {
    key: 'render',
    value: function render() {
      var _state2 = this.state,
          type = _state2.type,
          btnSize = _state2.btnSize,
          btnStyle = _state2.btnStyle,
          btnDisabled = _state2.btnDisabled,
          iconName = _state2.iconName,
          hovering = _state2.hovering,
          btnDirection = _state2.btnDirection,
          maxWidth = _state2.maxWidth,
          listShow = _state2.listShow,
          notBtnIcon = _state2.notBtnIcon,
          btnActive = _state2.btnActive;
      var _props5 = this.props,
          title = _props5.title,
          hidden = _props5.hidden,
          isBtnStyle = _props5.isBtnStyle,
          hoverName = _props5.hoverName,
          activeName = _props5.activeName;

      var dropLabel = void 0,
          labelType = void 0,
          iconLabel = void 0,
          maxBtnWidth = void 0,
          btnActiveClass = void 0;
      btnActiveClass = btnActive ? 'drop-down-button-active' : '';
      if (type == "text") {
        maxBtnWidth = maxWidth;
        labelType = ' drop-down-btn-label ';
        if (title.length > 0) {
          dropLabel = _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              'span',
              { className: 'drop-down-btn-title' },
              title
            ),
            _react2.default.createElement('span', { className: (this.props.bsStyle == "default" ? 'pc-sys-dropdownmin-disabled-svg ' : this.props.iconName ? btnActive ? this.props.activeName : hovering ? this.props.hoverName : this.props.iconName : 'pc-sys-dropdownmin-nomal-svg ') + ' drop-down-btn-svg ' })
          );
        } else {
          dropLabel = "";
        }
      } else {
        labelType = ' drop-down-btn-icon ';
        var hoverClass = hoverName && btnActive ? activeName : hovering ? this.props.iconName : notBtnIcon;
        iconLabel = _react2.default.createElement('span', { ref: 'dropDownIcon', className: 'drop-down-icon ' + (isBtnStyle || isBtnStyle == undefined ? iconName : hoverClass) });
      }

      if (hidden) {
        return _react2.default.createElement('div', null);
      } else {
        return _react2.default.createElement(
          'div',
          { 'data-style-sys': 'ux-dropdown-button', 'data-style-extend': 'ux-dropdown-button', ref: 'dropBtnComponent', className: 'feild drop-down-button ' + ((0, _commonFunc.judgeBrowser)().isSafari ? 'safari_fix-vertical-align' : '') },
          _react2.default.createElement(
            'div',
            { ref: 'dropDownView', className: 'drop-down-btn-list ' + (isBtnStyle || isBtnStyle == undefined ? '' : 'is-not-btn-style') + (listShow ? 'drop-down-list-active ' : ' ') + btnDirection },
            _react2.default.createElement(
              'div',
              {
                ref: 'dropdownbtn',
                style: { "maxWidth": maxBtnWidth },
                className: btnSize + btnStyle + btnDisabled + labelType + btnActiveClass,
                onClick: this.onClick,
                onMouseOver: this.btnMouseMove,
                onMouseOut: this.btnMouseOut
              },
              dropLabel,
              iconLabel
            )
          )
        );
      }
    }
  }]);
  return DropDownButton;
}(_react.Component), _class.defaultProps = {
  deviationLeft: 0,
  panelWidth: 170
}, _temp);


module.exports = DropDownButton;