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

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _toolTip = require('../tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

var _commonFunc = require('../common-func');

var _commonInput = require('../common-input');

var _commonInput2 = _interopRequireDefault(_commonInput);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function empty() {}

var Input = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(Input, _Component);

  function Input(props) {
    (0, _classCallCheck3.default)(this, Input);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Input.__proto__ || (0, _getPrototypeOf2.default)(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' });
      // fix： 判断onBlur是否配置
      if (typeof _this.props.onBlur === 'function') {
        _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 = void 0;
      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;
  }

  (0, _createClass3.default)(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 = (0, _extends3.default)({}, this.props);
      var otherProps = (0, _omit2.default)(props, ['title', 'required', 'multiple']);
      if ('value' in props) {
        otherProps.value = (0, _commonFunc.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 = void 0;
      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 _react2.default.createElement(_commonInput2.default, { readonly: true, errorStatus: isHaveMsg, errorMsg: props.errorMsg, defaultValue: (0, _commonFunc.decode)(otherProps.value) });
      } else {
        return _react2.default.createElement(
          'div',
          { className: "form-item__control" + _className1 + _className2 + _className3 + _className4 + _className5,
            ref: 'wrapper',
            onMouseOut: this.handlerMouseOut,
            onMouseOver: this.handlerMouseOver
          },
          _react2.default.createElement(
            'ul',
            { className: 'list_horizontal list_wrap form-item__multi-list', onClick: this.clearMultiValue },
            props.multiple && props.multiValue.map(function (item, index) {
              return _react2.default.createElement(MultiItem, (0, _extends3.default)({ key: index }, item, { index: index, readOnly: props.readOnly, disabled: props.disabled }));
            }),
            !props.multiple ? _react2.default.createElement(
              _toolTip2.default,
              { title: (0, _commonFunc.decode)(otherProps.value), hidden: otherProps.value == ' ' ? true : false },
              _react2.default.createElement(
                'div',
                { className: 'form-item_is-hidden-tips lookupv2-show-tip', style: { pointerEvents: this.state.pointerEvent }, onClick: this.tipsClick },
                (0, _commonFunc.decode)(otherProps.value)
              )
            ) : "",
            !props.multiple ? _react2.default.createElement('input', (0, _extends3.default)({}, otherProps, {
              defaultValue: (0, _commonFunc.decode)(otherProps.value),
              type: 'text',
              className: 'u-input',
              ref: 'input',
              onKeyDown: this.handlerKeyDown,
              onFocus: this.handlerFocus,
              onBlur: this.handlerBlur
            })) : props.readOnly || props.disabled ? "" : _react2.default.createElement('input', (0, _extends3.default)({}, otherProps, {
              type: 'text',
              className: 'u-input',
              ref: 'input',
              onKeyDown: this.handlerKeyDown,
              onFocus: this.handlerFocus,
              onBlur: this.handlerBlur
            }))
          ),
          _react2.default.createElement(
            'span',
            { className: 'form-item__right-icon' },
            props.multiple ? "" : _react2.default.createElement('i', { className: 'u-icon sys-icon-close', ref: 'topIcon', onMouseDown: this.clearValue, style: this.isShowClose ? { visibility: 'visible' } : { visibility: 'hidden' } }),
            props.status == 'edit' ? _react2.default.createElement('i', { className: 'u-icon pc-sys-arrowdown-nomal-svg', onClick: this.handlerFocus, onBlur: this.handlerBlur }) : null
          ),
          isHaveMsg ? _react2.default.createElement(
            'span',
            { className: 'form-item__explain' },
            props.promptMsg || props.errorMsg
          ) : null
        );
      }
    }
  }]);
  return Input;
}(_react.Component), _class.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
}, _temp);

var MultiItem = function (_Component2) {
  (0, _inherits3.default)(MultiItem, _Component2);

  function MultiItem() {
    (0, _classCallCheck3.default)(this, MultiItem);
    return (0, _possibleConstructorReturn3.default)(this, (MultiItem.__proto__ || (0, _getPrototypeOf2.default)(MultiItem)).apply(this, arguments));
  }

  (0, _createClass3.default)(MultiItem, [{
    key: 'render',
    value: function render() {
      var props = (0, _extends3.default)({}, this.props);
      return _react2.default.createElement(
        'li',
        { className: 'form-item__multi-item' },
        _react2.default.createElement(
          _toolTip2.default,
          (0, _extends3.default)({}, props, { title: (0, _commonFunc.decode)(props.name) }),
          _react2.default.createElement(
            'span',
            { className: 'form-item__text' },
            (0, _commonFunc.decode)(props.name)
          )
        ),
        !props.readOnly && !props.disabled ? _react2.default.createElement('i', { className: 'u-icon sys-icon-close', 'data-index': props.index }) : ''
      );
    }
  }]);
  return MultiItem;
}(_react.Component);

module.exports = Input;