@beisen-phoenix/select/lib/components/Select.js

## 概述

import "core-js/modules/es7.array.includes";
import "core-js/modules/es6.string.includes";
import _typeof from "@babel/runtime/helpers/typeof";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 from "react";
import Tooltip from "@beisen-phoenix/tooltip";
import SwitchArrow from "./SwitchArrow";
import DeleteInputTxt from "./DelnputTxtIcon";
import Tags from "./Tags";
import utils from "@beisen-phoenix/common-utils";
var classes = utils.BEMClass("select");
import "./index.css";
var IE = /(msie\s|trident.*rv:)([\w.]+)/.test(navigator.userAgent.toLowerCase());

var Select =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Select, _React$PureComponent);

  function Select(props) {
    var _this;

    _classCallCheck(this, Select);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, props));
    _this.inputRef = React.createRef();
    _this.hiddenSpanRef = React.createRef();
    _this.ulRef = React.createRef();
    _this.clickDelet = false;

    _this.emitPropsChangeMethod = function () {
      var onChange = _this.props.onChange;
      var _this$state = _this.state,
          value = _this$state.value,
          searchWord = _this$state.searchWord;
      onChange && onChange({
        value: value,
        searchWord: searchWord
      });
    };

    _this.handleValue = function () {
      var isMultiSelect = _this.props.isMultiSelect;
      var value = _this.state.value;
      return Array.isArray(value) && isMultiSelect ? value : "";
    };

    _this.isShowToolTip = function () {
      var _assertThisInitialize = _assertThisInitialized(_this),
          hiddenSpanRef = _assertThisInitialize.hiddenSpanRef,
          inputRef = _assertThisInitialize.inputRef;

      var active = _this.props.hasOwnProperty("isActive") ? _this.props.isActive : _this.state.isFocus;

      if (hiddenSpanRef.current && inputRef.current && !active) {
        var spanCurrent = hiddenSpanRef.current;
        var inputCurrent = inputRef.current;

        if (inputCurrent.clientWidth < spanCurrent.clientWidth) {
          _this.setState({
            isHasTooltip: true
          });

          return;
        }
      }

      _this.state.isHasTooltip && _this.setState({
        isHasTooltip: false
      });
    };

    _this.adjustArrow = function () {
      if (IE && _this.props.isMultiSelect) {
        var current = _this.ulRef.current;
        var clientHeight = current.clientHeight;
        var scrollHeight = current.scrollHeight;

        if (scrollHeight > clientHeight) {
          !_this.state.adjustArrow && _this.setState({
            adjustArrow: true
          });
        } else {
          _this.state.adjustArrow && _this.setState({
            adjustArrow: false
          });
        }

        return;
      }

      _this.state.adjustArrow && _this.setState({
        adjustArrow: false
      });
    };

    _this.resetStatus = function () {
      _this.setState({
        isFocus: false,
        visibleTxt: true,
        inputValue: "",
        searchWord: "",
        value: _this.props.value
      });
    };

    _this.inputing = function (evt) {
      var searchWord = evt.target.value;
      var _this$props = _this.props,
          isSearch = _this$props.isSearch,
          onSearch = _this$props.onSearch,
          readOnly = _this$props.readOnly;
      if (!isSearch || readOnly) return;

      _this.setState({
        searchWord: searchWord,
        inputValue: searchWord // value: this.handleValue()

      }, function () {
        _this.inputRef.current.style.width = "".concat(_this.handleInputWidth(), "px");
      });

      onSearch && onSearch(searchWord);
    };

    _this.onBlur = function (e) {
      var isActive = !_this.props.disabled && _this.props.isActive;

      _this.setState({
        isFocus: isActive ? true : false,
        visibleTxt: isActive ? false : true,
        inputValue: "",
        searchWord: "",
        value: _this.clickDelet ? "" : _this.props.value
      }, function () {
        _this.clickDelet = false;

        if (_this.props.isMultiSelect) {
          _this.inputRef && _this.inputRef.current && (_this.inputRef.current.style.width = "10px");
        }
      });
    };

    _this.onKeyDown = function (e) {
      var keyCode = e.keyCode,
          target = e.target;

      if (keyCode === 8 && !target.value) {
        _this.removeItem(-1);
      }
    };

    _this.onWrapperClick = function (e) {
      var _this$props2 = _this.props,
          disabled = _this$props2.disabled,
          isSearch = _this$props2.isSearch,
          isMultiSelect = _this$props2.isMultiSelect;
      if (disabled) return;
      _this.props.onClick && _this.props.onClick(e);

      _this.setState({
        visibleTxt: false
      });

      if (_this.inputRef && _this.inputRef.current && isSearch) {
        var value = isMultiSelect ? _this.state.value : "";

        _this.setState({
          isFocus: true,
          value: value
        });

        _this.inputRef.current.focus();
      }
    };

    _this.onWrapperMouseEnter = function () {
      _this.setState({
        hover: true
      });
    };

    _this.onWrapperMouseLeave = function () {
      _this.setState({
        hover: false
      });
    };

    _this.deleteTxt = function (e) {
      var _this$props3 = _this.props,
          onDelete = _this$props3.onDelete,
          isMultiSelect = _this$props3.isMultiSelect,
          isSearch = _this$props3.isSearch,
          onSearch = _this$props3.onSearch,
          isActive = _this$props3.isActive;

      if (!isMultiSelect && isSearch && _this.state.isFocus) {
        _this.onWrapperClick(e);

        _this.setState({
          inputValue: "",
          searchWord: ""
        }, function () {
          onSearch && onSearch("");
        });

        return;
      }

      _this.clickDelet = true;

      _this.setState({
        inputValue: "",
        value: _this.handleValue()
      }, _this.emitPropsChangeMethod);

      onDelete && onDelete("");
    };

    _this.removeItem = function (item) {
      var value = _this.state.value;
      var onDelete = _this.props.onDelete;

      if (Array.isArray(value)) {
        var copied = _toConsumableArray(value);

        if (typeof item === "number" && !isNaN(item)) {
          var temp = copied[item] || copied[copied.length - 1];
          !temp.disabled && copied.splice(item, 1);
        } else if (_typeof(item) === "object" && copied.includes(item) && !item.disabled) {
          copied.splice(copied.indexOf(item), 1);
        }

        if (copied.length !== value.length) {
          _this.setState({
            value: copied
          }, _this.emitPropsChangeMethod);

          onDelete && onDelete(copied);
        }
      }
    };

    _this.renderMutiItems = function () {
      var _this$props4 = _this.props,
          isMultiSelect = _this$props4.isMultiSelect,
          disabled = _this$props4.disabled,
          size = _this$props4.size;
      var value = _this.state.value;

      if (Array.isArray(value) && isMultiSelect) {
        return value.map(function (item, index) {
          return React.createElement(Tags, {
            selectDisabled: disabled,
            key: "".concat(item.value).concat(index),
            item: item,
            onClick: _this.removeItem,
            size: size
          });
        });
      }
    };

    _this.renderTxt = function () {
      var _this$props5 = _this.props,
          size = _this$props5.size,
          disabled = _this$props5.disabled,
          isSearch = _this$props5.isSearch,
          isActive = _this$props5.isActive;
      var _this$state2 = _this.state,
          isFocus = _this$state2.isFocus,
          value = _this$state2.value,
          isHasTooltip = _this$state2.isHasTooltip,
          inputValue = _this$state2.inputValue,
          visibleTxt = _this$state2.visibleTxt,
          hover = _this$state2.hover;

      if (typeof value === "string" && value.length) {
        if (inputValue) return null;
        var editable = !disabled;
        var active = editable && (_this.props.hasOwnProperty("isActive") ? isActive : isFocus);
        var txtVisible = _this.props.hasOwnProperty("isActive") ? !isActive : visibleTxt;
        var tipWrapperCls = classes({
          element: "tipWrapper",
          modifiers: {
            visible: txtVisible,
            large: size === "large",
            isSearch: isSearch,
            disabled: disabled,
            active: active
          }
        });
        var tipCls = classes({
          element: "tipEle",
          modifiers: {
            isSearch: isSearch
          }
        });
        var TempComponent = React.createElement("span", {
          className: tipWrapperCls
        }, React.createElement("span", {
          className: tipCls
        }, value));
        return value && isHasTooltip ? React.createElement(Tooltip, {
          title: value,
          visible: hover && !active
        }, TempComponent) : TempComponent;
      }
    };

    _this.handleInputWidth = function () {
      if (_this.props.isMultiSelect) {
        var _assertThisInitialize2 = _assertThisInitialized(_this),
            hiddenSpanRef = _assertThisInitialize2.hiddenSpanRef;

        if (hiddenSpanRef.current) {
          var current = hiddenSpanRef.current;
          return current.clientWidth || 10;
        }

        return 10;
      }
    };

    _this.switchDropDown = function () {// this.emitPropsChangeMethod();
    };

    _this.isShowPlaceHolder = function () {
      var _this$state3 = _this.state,
          inputValue = _this$state3.inputValue,
          value = _this$state3.value;
      if (inputValue) return;
      if (value && typeof value === "string") return;
      if (Array.isArray(value) && value.length) return;
      return true;
    };

    _this.getInputValue = function () {
      var _this$state4 = _this.state,
          inputValue = _this$state4.inputValue,
          value = _this$state4.value;
      if (inputValue) return inputValue;

      if (value && typeof value === "string" && !_this.props.disabled) {
        return value;
      }

      return "";
    };

    var _value = _this.props.value;
    _this.state = {
      value: _value,
      inputValue: "",
      isFocus: false,
      isHasTooltip: false,
      visibleTxt: true,
      hover: false,
      searchWord: "",
      inputWidth: 10,
      adjustArrow: false
    };
    return _this;
  }

  _createClass(Select, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.isShowToolTip();
      this.adjustArrow();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      "value" in nextProps && this.props.value !== nextProps.value && this.setState({
        value: nextProps.value
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      this.isShowToolTip();
      this.adjustArrow();

      if (this.props.isSearch && this.props.hasOwnProperty("isActive") && !this.props.disabled) {
        if (this.props.hasOwnProperty("exitSearch") && this.props.exitSearch || !this.props.isActive) {
          this.resetStatus();
        }
      }
    }
  }, {
    key: "getDeleteIconState",
    value: function getDeleteIconState() {
      var _this$state5 = this.state,
          inputValue = _this$state5.inputValue,
          value = _this$state5.value;
      var _this$props6 = this.props,
          disabled = _this$props6.disabled,
          readOnly = _this$props6.readOnly,
          showDelete = _this$props6.showDelete,
          isMultiSelect = _this$props6.isMultiSelect;
      if (!showDelete || isMultiSelect) return false;
      if (disabled || readOnly) return false;
      if (inputValue) return true;
      if (value && typeof value === "string") return true;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props7 = this.props,
          placeHolder = _this$props7.placeHolder,
          size = _this$props7.size,
          disabled = _this$props7.disabled,
          isMultiSelect = _this$props7.isMultiSelect,
          isSearch = _this$props7.isSearch,
          error = _this$props7.error,
          isActive = _this$props7.isActive,
          _this$props7$translat = _this$props7.translation,
          translation = _this$props7$translat === void 0 ? {} : _this$props7$translat,
          inputRef = _this$props7.inputRef,
          extraCls = _this$props7.extraCls,
          suffix = _this$props7.suffix;
      var _this$state6 = this.state,
          inputValue = _this$state6.inputValue,
          value = _this$state6.value,
          isFocus = _this$state6.isFocus;
      var multiValueLength = isMultiSelect && Array.isArray(value) ? value.length : void 0;
      var isShowDeleteIcon = this.getDeleteIconState();
      var editable = !disabled;
      var borderColorable = !disabled && !error;
      var active = editable && (this.props.hasOwnProperty("isActive") ? isActive : isFocus);
      var hideInput = disabled && isMultiSelect || !isSearch && multiValueLength && isMultiSelect;
      var singleSearch = !isMultiSelect && isSearch;
      var wrapperCls = classes({
        element: "",
        modifiers: {
          editable: editable,
          borderColorable: borderColorable,
          singleSearch: singleSearch,
          multi: isMultiSelect,
          error: error,
          active: active,
          disabled: disabled,
          small: size === "small",
          large: size === "large",
          normal: size === "normal",
          exsitMultiValue: multiValueLength
        },
        extra: extraCls
      });
      var calcEleCls = classes({
        element: "calcEle"
      });
      var placeHolderCls = classes({
        element: "placeHolder",
        modifiers: {
          active: active,
          large: size === "large",
          show: this.isShowPlaceHolder()
        }
      });
      var inputWrapperCls = classes({
        element: "inputWrapper",
        modifiers: {
          emptyMultiValue: !multiValueLength,
          isSearch: isSearch
        }
      });
      var inputCls = classes({
        element: "input",
        modifiers: {
          disabled: disabled,
          large: size === "large",
          unText: !isSearch,
          multiInput: multiValueLength
        }
      });
      return React.createElement("div", {
        className: wrapperCls,
        onMouseEnter: this.onWrapperMouseEnter,
        onMouseLeave: this.onWrapperMouseLeave,
        onClick: this.onWrapperClick
      }, React.createElement("span", {
        className: calcEleCls,
        ref: this.hiddenSpanRef
      }, inputValue || (typeof value === "string" ? value : " ")), React.createElement("div", {
        className: placeHolderCls
      }, this.props.value && !isMultiSelect ? this.props.value : placeHolder || translation.placeHolder), React.createElement("ul", {
        ref: this.ulRef,
        className: classes({
          element: "content"
        })
      }, this.renderMutiItems(), !hideInput && React.createElement("li", {
        className: inputWrapperCls
      }, React.createElement("input", {
        disabled: this.props.disabled,
        ref: function ref(ele) {
          inputRef && inputRef(ele);
          _this2.inputRef = {
            current: ele
          };
        },
        className: inputCls,
        value: this.getInputValue(),
        onChange: this.inputing,
        onKeyDown: this.onKeyDown
      })), this.renderTxt()), React.createElement(SwitchArrow, {
        disabled: disabled,
        hide: isShowDeleteIcon,
        onClick: this.switchDropDown,
        adjustArrow: this.state.adjustArrow,
        suffix: suffix
      }), React.createElement(DeleteInputTxt, {
        onClick: this.deleteTxt,
        isShowDeleteIcon: isShowDeleteIcon
      }));
    }
  }]);

  return Select;
}(React.PureComponent);

Select.defaultProps = {
  size: "normal",
  disabled: false,
  isMultiSelect: false,
  placeHolder: "",
  isSearch: false,
  readOnly: false,
  showDelete: true,
  translation: {}
};
export { Select as default };