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

## 概述

import "core-js/modules/es6.object.assign";
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 defaultTranslation from '../langs';
import { PlaceHolder, InputWrapper, StyledInput, StyledUl, Wrapper, StyledSpan, TipsSapn, StyledHiddenSpan } from './StyledSelect';

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

      if (hiddenSpanRef.current && inputRef.current && !_this.state.isFocus) {
        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.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) {
      _this.setState({
        isFocus: false,
        visibleTxt: 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.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();
      }

      e.nativeEvent.stopImmediatePropagation();
    };

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

      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) {
          return React.createElement(Tags, {
            selectDisabled: disabled,
            key: item.value,
            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;
      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;
      var tempProps = {
        isFocus: isFocus,
        size: size,
        disabled: disabled,
        isSearch: isSearch,
        visibleTxt: visibleTxt
      };

      if (typeof value === 'string' && value.length) {
        if (inputValue) return null;
        var TempComponent = React.createElement(StyledSpan, Object.assign({}, tempProps), React.createElement(TipsSapn, null, value));
        return value && isHasTooltip ? React.createElement(Tooltip, {
          title: value,
          visible: hover && !isFocus
        }, 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
    };
    return _this;
  }

  _createClass(Select, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.isShowToolTip();
      document.addEventListener('click', this.onBlur);
    }
  }, {
    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();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('click', this.onBlur);
    }
  }, {
    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 _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 ? defaultTranslation : _this$props7$translat;
      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 commonProps = {
        disabled: disabled,
        isMultiSelect: isMultiSelect,
        size: size,
        isSearch: isSearch,
        isFocus: isFocus,
        multiValueLength: multiValueLength,
        isShowDeleteIcon: isShowDeleteIcon,
        isActive: isActive
      };
      var hideInput = disabled && isMultiSelect;
      return React.createElement(Wrapper, Object.assign({}, commonProps, {
        onMouseEnter: this.onWrapperMouseEnter,
        onMouseLeave: this.onWrapperMouseLeave,
        onClick: this.onWrapperClick,
        inputValue: inputValue,
        error: error
      }), React.createElement(StyledHiddenSpan, {
        ref: this.hiddenSpanRef
      }, inputValue || (typeof value === 'string' ? value : ' ')), React.createElement(PlaceHolder, Object.assign({}, commonProps, {
        isShowPlaceHolder: this.isShowPlaceHolder()
      }), this.props.value && !isMultiSelect ? this.props.value : placeHolder || translation.placeHolder), React.createElement(StyledUl, Object.assign({}, commonProps, {
        ref: this.ulRef
      }), this.renderMutiItems(), !hideInput && React.createElement(InputWrapper, Object.assign({}, commonProps), React.createElement(StyledInput, Object.assign({}, commonProps, {
        onChange: this.inputing,
        value: this.getInputValue(),
        propsValue: value,
        ref: this.inputRef,
        onKeyDown: this.onKeyDown
      }))), this.renderTxt()), React.createElement(SwitchArrow, Object.assign({}, commonProps, {
        onClick: this.switchDropDown
      })), React.createElement(DeleteInputTxt, {
        onClick: this.deleteTxt
      }));
    }
  }]);

  return Select;
}(React.PureComponent);

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