@beisen/recruit-auto-tree/lib/autoForm_Input.js

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 debounce from '@beisen/es6-promise-debounce';
import CommonInput from '@beisen-platform/common-input';
import EditFilters from './edit_Filters.js';
import { decode, judgeBrowser } from '@beisen-platform/common-func';
import CloseIcon from '@beisen-platform/react-icons/lib/icons/Close.js';

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

  function AutoForm_Input(props) {
    var _this;

    _classCallCheck(this, AutoForm_Input);

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

    _this.resizeInputWidth = function () {
      var inputNode = _this.refs.autoFormInput;

      if (inputNode != undefined && inputNode.clientWidth != 0) {
        inputNode.clientWidth <= 270 ? _this.setState({
          isMinWidth: true
        }) : _this.setState({
          isMinWidth: false
        });
      }
    };

    _this.onMouseTip = function () {
      var self = _assertThisInitialized(_this); //解决点击输入框时光标错位，引起原因是输入框上有层div导致


      setTimeout(function () {
        self.setState({
          mouseTips: true
        });
      }, 100);
    };

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

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

    _this.handlerOver = function () {
      _this.props.handlerOver();
    };

    _this.handlerOut = function (e) {
      _this.setState({
        mouseTips: false,
        hoverFocusing: false
      });

      clearToolTipDom();

      _this.props.handlerOut(e);
    };

    _this.state = {
      isMinWidth: false,
      pointerEvent: "auto",
      showHiddenTips: 'block',
      mouseTips: false
    };
    return _this;
  }

  _createClass(AutoForm_Input, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          status = _this$props.status,
          showDropDown = _this$props.showDropDown;
      var self = this; //编辑态双排排列时 根据宽度自适应

      if (status == 'edit' && showDropDown == true) {
        this.resizeInputWidth();
        window.addEventListener('resize', debounce(function () {
          self.resizeInputWidth();
        }, 200), false);
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this$props2 = this.props,
          commmonInput_Data = _this$props2.commmonInput_Data,
          single = _this$props2.single,
          defaultValue = _this$props2.defaultValue,
          inputValue = _this$props2.inputValue,
          disabled = _this$props2.disabled;

      if (defaultValue != nextProps.defaultValue && single && !disabled) {
        this.refs.autoTreeInput.value = decode(nextProps.defaultValue);
      }

      if (inputValue != nextProps.inputValue && single && !disabled) {
        this.refs.autoTreeInput.value = decode(nextProps.inputValue);
      }

      if (commmonInput_Data.selectDate && nextProps.selectDate) {
        var updateSelectData = commmonInput_Data.selectDate.length != nextProps.selectDate.length ? true : false;
        if (updateSelectData) this.setState({});
      }

      if (commmonInput_Data.isActive && nextProps.isActive && commmonInput_Data.isActive != nextProps.isActive) {
        this.setState({});
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          disabled = _this$props3.disabled,
          status = _this$props3.status,
          isShowMouseOverIcon = _this$props3.isShowMouseOverIcon,
          showDropDown = _this$props3.showDropDown,
          DropDownData = _this$props3.DropDownData,
          placeholder = _this$props3.placeholder,
          inputValue = _this$props3.inputValue,
          defaultValue = _this$props3.defaultValue,
          isFocus = _this$props3.isFocus,
          errorStatus = _this$props3.errorStatus,
          errorMsg = _this$props3.errorMsg,
          single = _this$props3.single,
          showText = _this$props3.showText,
          commmonInput_Data = _this$props3.commmonInput_Data,
          isSearchAutoTreeEdit = _this$props3.isSearchAutoTreeEdit,
          readOnly = _this$props3.readOnly;
      var _this$state = this.state,
          isMinWidth = _this$state.isMinWidth,
          pointerEvent = _this$state.pointerEvent,
          showHiddenTips = _this$state.showHiddenTips,
          mouseTips = _this$state.mouseTips;
      var isMinClass, inutClassStyle, inputClass, isDisabled, inputStyle, autoInput_class, closeBtnClass, dropDownIcon, iconOrText, erroStyle, notDropDown, baseStyle;
      var _autoTreeLeft_Class = '';
      isMinClass = isMinWidth ? 'leftInput-showDropDown isMinWidth' : 'leftInput-showDropDown notMin';
      inutClassStyle = status == 'edit' ? showDropDown ? isMinWidth ? 'auto-form-input-active-showDropDownisMin ' : 'auto-form-input-active-showDropDown ' : 'auto-form-input-active-notShowDropDown ' : 'auto-form-input-active-seach ';
      inputClass = !errorStatus && isFocus && single ? inutClassStyle : '';
      closeBtnClass = status == 'search' ? 'icon-close date-time-close-search closeBtn-search' : showDropDown ? 'icon-close date-time-close closeBtn-edit-showDropDown' : 'icon-close date-time-close closeBtn-edit-notShowDropDown';
      if (status == 'search') erroStyle = {
        'height': '45px'
      };
      if (!errorStatus) baseStyle = {
        'height': '0px'
      };
      var showClose = inputValue.length > 0 && (isFocus == true || isShowMouseOverIcon) ? 'block' : 'none';

      if (disabled == false || disabled == undefined) {
        isDisabled = '';
        inputStyle = {
          'paddingRight': '33px'
        };
      } else {
        isDisabled = 'disabled';
        inputStyle = {
          'background': 'rgb(245, 248, 250)',
          'border': '1px solid rgb(228, 235, 240)',
          'borderRadius': '5px',
          'fontFamily': 'PingFangSC-Regular',
          'fontSize': '12px',
          'color': '#3E4E59',
          'letterSpacing': '0px',
          'lineHeight': '20px',
          'textAlign': 'left',
          'cursor': 'no-drop'
        };
      }

      if (disabled) {
        dropDownIcon = '';
      } else {
        dropDownIcon = React.createElement("span", {
          className: showDropDown ? 'autoTreeIcon-showDropDown pc-sys-arrowdown-nomal-svg' : 'autoTreeIcon-notShowDropDown pc-sys-arrowdown-nomal-svg',
          onClick: this.props.editInput_focus
        });
      }

      if (status == 'edit') {
        iconOrText = dropDownIcon;
        autoInput_class = single ? 'auto-input-edit' : 'auto-input-edit_muit';
        _autoTreeLeft_Class = !single ? '' : 'autoTreeLeftInput-single ';
        notDropDown = isSearchAutoTreeEdit ? ' auto-tree__input_not-dropdown' : '';
      } else {
        autoInput_class = 'auto-input-search';
        iconOrText = React.createElement("div", {
          className: "findAll"
        }, React.createElement("label", {
          onClick: this.props.findAll
        }, "\u5168\u90E8\u67E5\u627E"));
      }

      var decodeValue = decode(defaultValue);
      console.log(decodeValue);
      return React.createElement("div", {
        ref: "autoFormInput",
        className: "field-right auto-rightinput auto-form-input " + inputClass + autoInput_class + notDropDown,
        style: erroStyle
      }, React.createElement("div", {
        ref: "leftInput",
        className: status == 'edit' ? showDropDown && !isSearchAutoTreeEdit ? isMinClass : 'leftInput-notShowDropDown' : ''
      }, single && status == 'edit' || status == 'search' ? isDisabled ? React.createElement(CommonInput, {
        readonly: true,
        errorStatus: errorStatus,
        errorMsg: errorMsg,
        defaultValue: decodeValue
      }) : React.createElement("div", {
        onMouseOver: this.handlerOver,
        onMouseOut: this.handlerOut
      }, mouseTips ? null : React.createElement(ToolTip, {
        title: inputValue
      }, React.createElement("div", {
        className: "form-item_is-hidden-tips",
        onMouseEnter: this.onMouseTip,
        style: {
          pointerEvents: pointerEvent,
          display: showHiddenTips
        },
        onClick: this.tipsClick
      }, inputValue)), React.createElement("input", {
        className: 'autoTreeLeftInput ' + _autoTreeLeft_Class + (status == 'edit' ? '' : 'autoTree-search-input'),
        type: "text",
        ref: "autoTreeInput",
        placeholder: disabled ? '' : placeholder,
        defaultValue: decodeValue,
        onClick: this.props.addClass,
        onBlur: this.props.removeClass,
        onChange: this.props.onChange,
        onFocus: this.props.addClass,
        disabled: isDisabled,
        readOnly: readOnly,
        style: inputStyle
      }), React.createElement("span", {
        style: {
          "display": showClose,
          "top": judgeBrowser().isIe10 ? '0' : 'none'
        },
        className: closeBtnClass,
        ref: "mouseIconClose",
        onClick: this.props.clearData
      }, React.createElement(CloseIcon, null)), iconOrText, status == 'edit' ? React.createElement("div", {
        className: "base-input-show",
        style: baseStyle
      }, React.createElement("span", {
        className: 'base-input-show-text ' + (isFocus ? 'input-pFoucus ' + (errorStatus ? 'input-pError ' : 'input-pRight ') : errorStatus ? 'input-pFoucus input-pError ' : 'input-pBlur input-pRight ')
      }, errorStatus ? errorMsg : showText)) : '') : React.createElement("div", {
        ref: "autoTree_commonInput",
        className: 'autoTreeLeftInput ' + (status == 'edit' ? '' : 'autoTree-search-input')
      }, React.createElement(CommonInput, commmonInput_Data))), !isSearchAutoTreeEdit ? React.createElement(EditFilters, {
        DropDownData: DropDownData,
        isMinWidth: isMinWidth,
        status: status,
        changeFilter: this.props.changeFilter,
        showDropDown: showDropDown
      }) : '');
    }
  }]);

  return AutoForm_Input;
}(Component);

export { AutoForm_Input as default };