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

import "core-js/modules/es6.regexp.replace";
import "core-js/modules/es6.object.assign";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import React, { Component } from 'react';
import './styles/all.css';
import DropButtonMain from './DropButtonMain/DropButtonMain';
import CommonMount from '@beisen-platform/common-mount';
import DropdownDisabledIcon from '@beisen-platform/react-icons/lib/icons/DropdownminDisabled.js';
import DropdownNormalIcon from './icon/DropdownNormalIcon'; //ci

var DropDownButton =
/*#__PURE__*/
function (_Component) {
  _inherits(DropDownButton, _Component);

  function DropDownButton(props) {
    var _this;

    _classCallCheck(this, DropDownButton);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(DropDownButton).call(this, props));
    var defaultState = {
      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 CommonMount({
      containerId: 'common-mount-list',
      // 容器ID
      follow: true,
      // 是否滚动跟随，默认true
      fixed: true // 定位：fixed，false时为absolute

    });
    _this.state = Object.assign({}, defaultState, props);
    _this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
    _this.btnMouseMove = _this.btnMouseMove.bind(_assertThisInitialized(_this));
    _this.btnMouseOut = _this.btnMouseOut.bind(_assertThisInitialized(_this));
    _this.itemClick = _this.itemClick.bind(_assertThisInitialized(_this));
    _this.scrollUl = _this.scrollUl.bind(_assertThisInitialized(_this));
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    _this.renderDOM = _this.renderDOM.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DropDownButton, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      this.state = Object.assign({}, 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;
      }

      if (this.props.onDropDownIconClick) {
        this.props.onDropDownIconClick(e);
      }

      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 _this$state = this.state,
          autoDirection = _this$state.autoDirection,
          direction = _this$state.direction,
          children = _this$state.children,
          sideTip = _this$state.sideTip,
          hiddenTip = _this$state.hiddenTip;
      var _this$props = this.props,
          panelWidth = _this$props.panelWidth,
          deviationLeft = _this$props.deviationLeft,
          rightAlign = _this$props.rightAlign,
          disabledShowTips = _this$props.disabledShowTips;
      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 = React.createElement(DropButtonMain, {
        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,
        dataUdcList: this.props.dataUdcList,
        dataUdtList: this.props.dataUdtList
      });
      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
      }, 40], 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;
      }); //背景效果展现，隐藏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); // 关闭之前先将弹层的zIndex调低，处理common-pop zIndex是999的情况导致的遮不住dropdown

      if (this.CommonMount.containerStyleUpdater) {
        this.CommonMount.containerStyleUpdater('zIndex', '998');
      }

      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 _this$props2 = this.props,
          activeName = _this$props2.activeName,
          hoverName = _this$props2.hoverName,
          isBtnStyle = _this$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 _this$props3 = this.props,
          iconName = _this$props3.iconName,
          hoverName = _this$props3.hoverName,
          isBtnStyle = _this$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 _this$props4 = this.props,
          bsStyle = _this$props4.bsStyle,
          bsSize = _this$props4.bsSize,
          open = _this$props4.open,
          disabled = _this$props4.disabled,
          maxWidth = _this$props4.maxWidth,
          iconName = _this$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 _this$state2 = this.state,
          type = _this$state2.type,
          btnSize = _this$state2.btnSize,
          btnStyle = _this$state2.btnStyle,
          btnDisabled = _this$state2.btnDisabled,
          iconName = _this$state2.iconName,
          hovering = _this$state2.hovering,
          btnDirection = _this$state2.btnDirection,
          maxWidth = _this$state2.maxWidth,
          listShow = _this$state2.listShow,
          notBtnIcon = _this$state2.notBtnIcon,
          btnActive = _this$state2.btnActive;
      var _this$props5 = this.props,
          title = _this$props5.title,
          hidden = _this$props5.hidden,
          isBtnStyle = _this$props5.isBtnStyle,
          hoverName = _this$props5.hoverName,
          activeName = _this$props5.activeName;
      var IconComponent = this.props.iconComponent;
      var dropLabel, labelType, iconLabel, maxBtnWidth;

      if (type == 'text') {
        maxBtnWidth = maxWidth;
        labelType = ' drop-down-btn-label ';

        if (title.length > 0) {
          dropLabel = React.createElement("div", null, React.createElement("span", {
            className: "drop-down-btn-title"
          }, title), React.createElement("span", {
            className: "drop-down-btn-svg"
          }, React.createElement(DropdownNormalIcon, {
            width: 10,
            height: 4
          })));
        } else {
          dropLabel = '';
        }
      } else {
        labelType = ' drop-down-btn-icon ';
        var hoverClass = hoverName && btnActive ? activeName : hovering ? this.props.iconName : notBtnIcon;
        iconLabel = React.createElement("span", {
          ref: "dropDownIcon",
          className: 'drop-down-icon ' + (isBtnStyle || isBtnStyle == undefined ? iconName : hoverClass)
        });
      }

      if (hidden) {
        return React.createElement("div", null);
      } else {
        return React.createElement("div", {
          ref: "dropBtnComponent",
          className: "feild drop-down-button"
        }, React.createElement("div", {
          ref: "dropDownView",
          className: 'drop-down-btn-list ' + (isBtnStyle || isBtnStyle == undefined ? '' : 'is-not-btn-style') + (listShow ? 'drop-down-list-active ' : ' ') + btnDirection
        }, React.createElement("div", {
          ref: "dropdownbtn",
          style: {
            maxWidth: maxBtnWidth
          },
          className: btnSize + btnStyle + btnDisabled + labelType,
          onClick: this.onClick,
          onMouseOver: this.btnMouseMove,
          onMouseOut: this.btnMouseOut
        }, dropLabel, IconComponent ? React.createElement(IconComponent, null) : iconLabel)));
      }
    }
  }]);

  return DropDownButton;
}(Component);

DropDownButton.defaultProps = {
  deviationLeft: 0,
  panelWidth: 170
};
export { DropDownButton as default };