@beisen-platform/lookup-v2/lib/input.js

import "core-js/modules/es6.function.name";
import _extends from "@babel/runtime/helpers/extends";
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 _inherits from "@babel/runtime/helpers/inherits";
import React, { Component } from 'react';
import omit from 'lodash/omit';
import ToolTip from '@beisen-platform/tool-tip';
import { decode } from '@beisen-platform/common-func';
import CommonInput from '@beisen-platform/common-input';
import CloseIcon from '@beisen-platform/react-icons/lib/icons/Close.js';
import ArrowDownIcon from '@beisen-platform/react-icons/lib/icons/ArrowdownNomal.js';

function empty() {}

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

  function Input(props) {
    var _this;

    _classCallCheck(this, Input);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Input).call(this, props));

    _this.fixControlledValue = function (value, tempValue) {
      if (!value) {
        return tempValue ? " " : ""; //空值占位处理
      } else {
        return value;
      }
    };

    _this.handlerKeyDown = function (event) {
      if (_this.props.readOnly || !_this.props.isShowFindAll) return;

      if (event.keyCode == 13) {
        _this.props.onKeyDown(event);

        _this.props.setComState('isShowDoropList', false);

        if (Array.isArray(_this.props.listValue) && !_this.props.listValue.length) {
          _this.refs.input.blur();

          _this.setState({
            isFocus: false
          });

          _this.props.handlerFindAll(event);
        }
      }
    };

    _this.handlerBlur = function (event) {
      if (_this.props.readOnly) return;

      if (_this.isActiveClear) {
        _this.isActiveClear = false;

        _this.refs.input.focus();

        return;
      }

      _this.setState({
        isFocus: false,
        pointerEvent: 'auto'
      });

      _this.props.onBlur(event);
    };

    _this.handlerFocus = function (event) {
      if (_this.props.readOnly) return;

      if (_this.props.onlyShowAdvanced) {
        _this.props.handlerFindAll();

        _this.refs.input.blur();

        return;
      }

      _this.refs.input.focus();

      _this.setState({
        isFocus: true
      });

      _this.props.setComState('isShowDoropList', true);

      _this.props.onFocus(event);
    };

    _this.handlerChange = function (event) {
      _this.props.onChange(event);
    };

    _this.handlerMouseOver = function (event) {
      if (_this.props.readOnly || _this.props.disabled) return;

      _this.setState({
        isHover: true
      });
    };

    _this.handlerMouseOut = function (event) {
      if (_this.props.readOnly || _this.props.disabled) return;
      var node = event.target;

      if (node.nodeName.toLowerCase() == 'i') {
        return;
      } else {
        _this.setState({
          isHover: false
        });
      }
    };

    _this.clearValue = function (event) {
      if (_this.state.isFocus) _this.isActiveClear = true;

      _this.props.onChange('', true);
    };

    _this.clearMultiValue = function (event) {
      if (_this.props.readOnly || _this.props.disabled) return;
      var node = event.target;
      var index;

      if (node.nodeName.toLowerCase() == 'i') {
        index = node.getAttribute('data-index');

        _this.props.multipleClear(parseInt(index));
      }
    };

    _this.tipsClick = function () {
      _this.setState({
        pointerEvent: "none"
      });

      _this.refs.input.focus();
    };

    _this.state = {
      isFocus: false,
      isHover: false,
      defaultValue: '',
      pointerEvent: "auto"
    };

    if (props.status == 'search') {
      _this.state.isFocus = true;
    }

    _this.isShowClose = false;
    return _this;
  }

  _createClass(Input, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.status == 'search') {
        this.refs.input.focus();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.props.status == 'edit' && !this.props.readOnly && !this.props.disabled) {
        var wrapperDom = this.refs.wrapper;

        var _expectHeight = this.props.promptMsg || this.props.errorMsg ? 46 : 26;

        if (wrapperDom.offsetHeight > _expectHeight) {} else {
          if (this.refs && this.refs.topIcon) this.refs.topIcon.style.display = 'block';
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var self = this;
      var props = Object.assign({}, this.props);
      var otherProps = omit(props, ['title', 'required', 'multiple']);

      if ('value' in props) {
        otherProps.value = decode(this.fixControlledValue(props.value, props.tempValue));
        delete otherProps.defaultValue;
      }

      var _className1 = this.state.isFocus ? " form-item__control_is-active " : "";

      if (otherProps.value && otherProps.value.length && (this.state.isFocus || this.state.isHover)) {
        this.isShowClose = true;
      } else {
        this.isShowClose = false;
      }

      var isHaveMsg;

      if (props.promptMsg || props.errorMsg) {
        isHaveMsg = true;
      } else {
        isHaveMsg = false;
      }

      var _className2 = props.readOnly ? " form-item__control_is-readonly " : "";

      var _className3 = props.disabled ? " form-item__control_is-disabled " : "";

      var _className4 = isHaveMsg ? props.promptMsg ? " form-item__control_has-info" : " form-item__control_is-active form-item__control_has-info form-item__control_has-error" : "";

      var _className5 = props.multiple && props.multiValue && props.multiValue.length > 5 ? ' lookupv2__is-multiple ' : '';

      var _iconCloseHeight = isHaveMsg ? 25 : 5;

      if (props.readOnly) otherProps.placeholder = '';

      if ((props.readOnly || props.disabled) && !props.multiple) {
        return React.createElement(CommonInput, {
          readonly: true,
          errorStatus: isHaveMsg,
          errorMsg: props.errorMsg,
          defaultValue: decode(otherProps.value)
        });
      } else {
        return React.createElement("div", {
          className: "form-item__control" + _className1 + _className2 + _className3 + _className4 + _className5,
          ref: "wrapper",
          onMouseOut: this.handlerMouseOut,
          onMouseOver: this.handlerMouseOver
        }, React.createElement("ul", {
          className: "list_horizontal list_wrap form-item__multi-list lookupv2__select-list",
          onClick: this.clearMultiValue
        }, props.multiple && props.multiValue.map(function (item, index) {
          return React.createElement(MultiItem, _extends({
            key: index
          }, item, {
            index: index,
            readOnly: props.readOnly,
            disabled: props.disabled
          }));
        }), !props.multiple ? React.createElement(ToolTip, {
          title: decode(otherProps.value),
          hidden: otherProps.value == ' ' ? true : false
        }, React.createElement("div", {
          className: "form-item_is-hidden-tips",
          style: {
            pointerEvents: this.state.pointerEvent
          },
          onClick: this.tipsClick
        }, decode(otherProps.value))) : "", !props.multiple ? React.createElement("input", _extends({}, otherProps, {
          defaultValue: decode(otherProps.value),
          type: "text",
          className: "u-input",
          ref: "input",
          onKeyDown: this.handlerKeyDown,
          onFocus: this.handlerFocus,
          onBlur: this.handlerBlur
        })) : props.readOnly || props.disabled ? "" : React.createElement("input", _extends({}, otherProps, {
          type: "text",
          className: "u-input",
          ref: "input",
          onKeyDown: this.handlerKeyDown,
          onFocus: this.handlerFocus,
          onBlur: this.handlerBlur
        }))), React.createElement("span", {
          className: "form-item__right-icon"
        }, props.multiple ? "" : React.createElement("i", {
          className: "u-icon icon-close",
          ref: "topIcon",
          onMouseDown: this.clearValue,
          style: this.isShowClose ? {
            visibility: 'visible'
          } : {
            visibility: 'hidden'
          }
        }, React.createElement(CloseIcon, null)), props.status == 'edit' ? React.createElement("i", {
          className: "u-icon icon-arrowdown",
          onClick: this.handlerFocus,
          onBlur: this.handlerBlur
        }, React.createElement(ArrowDownIcon, {
          width: 11,
          height: 6
        })) : null), isHaveMsg ? React.createElement("span", {
          className: "form-item__explain"
        }, props.promptMsg || props.errorMsg) : null);
      }
    }
  }]);

  return Input;
}(Component);

Input.defaultProps = {
  value: '',
  className: '',
  placeholder: '',
  promptMsg: '',
  errorMsg: '',
  multiple: false,
  multiValue: [],
  onKeyDown: empty,
  readOnly: false,
  disabled: false,
  onBlur: empty,
  onFocus: empty,
  onChange: empty,
  unmountBox: empty,
  multipleClear: empty
};
export { Input as default };

var MultiItem =
/*#__PURE__*/
function (_Component2) {
  _inherits(MultiItem, _Component2);

  function MultiItem() {
    _classCallCheck(this, MultiItem);

    return _possibleConstructorReturn(this, _getPrototypeOf(MultiItem).apply(this, arguments));
  }

  _createClass(MultiItem, [{
    key: "render",
    value: function render() {
      var props = Object.assign({}, this.props);
      return React.createElement("li", {
        className: "form-item__multi-item"
      }, React.createElement(ToolTip, _extends({}, props, {
        title: decode(props.name)
      }), React.createElement("span", {
        className: "form-item__text"
      }, decode(props.name))), !props.readOnly && !props.disabled ? React.createElement("i", {
        className: "u-icon icon-close",
        "data-index": props.index
      }, React.createElement(CloseIcon, null)) : '');
    }
  }]);

  return MultiItem;
}(Component);