@beisen/ethos/lib/auto-complete/index.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');

require('./index.scss');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _es6PromiseDebounce = require('../es6-promise-debounce');

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

var _loading = require('../loading');

var _loading2 = _interopRequireDefault(_loading);

var _commonMount = require('../common-mount');

var _commonMount2 = _interopRequireDefault(_commonMount);

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

var _commonInput2 = _interopRequireDefault(_commonInput);

var _commonLabel = require('../common-label');

var _commonLabel2 = _interopRequireDefault(_commonLabel);

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

var _toolTip2 = _interopRequireDefault(_toolTip);

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

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

var defaultTranslation = {
  emptyBgText: '这里什么都没有...'
};
var offset = null;
var AutoComplete = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(AutoComplete, _Component);

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

    var _this = (0, _possibleConstructorReturn3.default)(this, (AutoComplete.__proto__ || (0, _getPrototypeOf2.default)(AutoComplete)).call(this, props));

    _this.addClass = function (event) {
      if (_this.props.disabled) {
        return;
      }
      _this.setState({
        isFocus: true,
        isHover: true
      });
      _this.state.isFocus = true;
      _this.state.isHover = true;
      _this.props.focusCallBack && _this.props.focusCallBack(event);
      if (_this.props.clickShowItems && _this.props.clickShowItems == true) {
        _this.refs.textInput.value = _this.refs.textInput.value;
        _this.onRealChange(event);
      }
    };

    _this.removeClass = function (event) {
      _this.isInputing = false;
      var self = _this;
      event.persist();
      var _event = event;
      if (_this.state.pointerEvent == 'auto') {
        self.domState = false;
        self.isChooseItem = false;
        return;
      }
      // 解决清除按钮失效的问题
      setTimeout(function () {
        if (self.chearFlag) {
          self.chearFlag = false;
          return;
        }
        if (!self.isChooseItem && self.isInputModifiedSinceInitValue) {
          self.isInputModifiedSinceInitValue = false;
          self.refs.textInput.value = '';
          self.props.changeCallBack && self.props.changeCallBack(event, self.state);
        }
        self.isChooseItem = false;
        self.setState({
          isFocus: false,
          isHover: false,
          pointerEvent: 'auto'
        });
        self.domState = false;
        self.CommonMount.unmountBox();
        self.props.blurCallBack && self.props.blurCallBack(_event);
      }, 200);
    };

    _this.onHandleClick = function (event) {
      var _this$props = _this.props,
          readOnly = _this$props.readOnly,
          disabled = _this$props.disabled;

      if (!readOnly && !disabled) {
        document.removeEventListener('mouseup', _this.onClose);
        document.addEventListener('mouseup', _this.onClose);
      }
    };

    _this.onChange = function (event) {
      var self = _this;
      if (_this.state.isFocus) {
        _this.setState({
          inputValue: _this.refs.textInput.value,
          isShow: true,
          isFocus: true
        });
        // document.removeEventListener('mouseup', self.onClose);
        // document.addEventListener('mouseup', self.onClose);
        _this.domState = true;
        _this.tar = _this.refs.textInput;
        //解决同一页面多个选人组件 连续点击的显示问题
        if (_this.refs.textInput.value.length == 0) {
          self.domState = false;
          self.CommonMount.unmountBox();
        } else {
          setTimeout(function () {
            self.renderDom(false, offset);
          }, 200);
        }
        if (_this.props.clickShowItems && _this.props.clickShowItems == true && _this.refs.textInput.value.length == 0) {
          self.state.inputValue = 'SHOWALLDATA';
          self.domState = true; //控制是否渲染
        }
        if (event.type == 'focus' && _this.props.clickShowItems && _this.props.clickShowItems == true) {
          self.state.inputValue = 'SHOWALLDATA';
          self.domState = true; //控制是否渲染
          _this.props.changeCallBack && _this.props.changeCallBack(event, _this.state);
        } else {
          _this.props.changeCallBack && _this.props.changeCallBack(event, _this.state);
        }
      }
    };

    _this.onKeyUp = function (event) {
      _this.setState({
        isKeyUp: true
      });
      var value = _this.refs.textInput.value;
      if (!value) {
        return;
      }
      _this.props.keyUpCallBack && _this.props.keyUpCallBack(event, value);
    };

    _this.handlerOver = function (event) {
      if (_this.refs.textInput.value !== "") {
        _this.setState({ isHover: true });
      }
    };

    _this.handlerOut = function (event) {
      var dom = (0, _reactDom.findDOMNode)(_this.refs.mouseIconClose);
      if (dom.className.indexOf('active') > 0) {
        return;
      } else {
        _this.setState({
          isHover: false
        });
      }
    };

    _this.clearInputValue = function (e) {
      var self = _this;
      _this.refs.textInput.focus();
      _this.setState({
        inputValue: ''
      });
      setTimeout(function () {
        self.setState({
          isFocus: true,
          isHover: true
        });
      }, 300);
      _this.refs.textInput.value = "";
      _this.onRealChange(e);
      _this.props.changeCallBack && _this.props.changeCallBack(e, _this.state);
      e.stopPropagation();
      e.cancelBubble = true;
    };

    _this.itemClick = function (event) {
      _this.isInputModifiedSinceInitValue = false;
      var node = event.target;
      var autoResult = document.getElementsByClassName('auto-result')[0];
      if (autoResult.contains(node) && node.nodeName.toLowerCase() == 'span') {
        node = node.parentNode;
      }
      if (node.tagName.toLowerCase() !== 'li') return;

      _this.isChooseItem = true;
      var nodeValue = node.dataset;
      var htmlValue = node.childNodes && node.childNodes[0].textContent ? node.childNodes[0].textContent : node.innerHTML;
      _this.setState({
        nodeValue: nodeValue,
        inputValue: htmlValue,
        isKeyUp: false,
        isFocus: false,
        isHover: false,
        pointerEvent: 'auto'
      });
      var data = {
        nodeValue: nodeValue,
        inputValue: htmlValue,
        isKeyUp: false,
        isFocus: false,
        isHover: false,
        pointerEvent: 'auto'
      };
      _this.refs.textInput.value = htmlValue;
      _this.props.itemCallBack && _this.props.itemCallBack(event, data);
      _this.CommonMount.unmountBox();
      // document.removeEventListener('mouseup', this.onClose);
      _this.onClose();
    };

    _this.onClose = function (event) {
      (0, _commonFunc.clearToolTipDom)();
      var areaUl = document.getElementsByClassName('auto-result')[0];
      if (event != undefined && areaUl != undefined) {
        var tar = event.target;
        if (areaUl.contains(tar)) {
          return;
        }
      }
      if (event == undefined) {
        _this.setState({
          isShow: false
        });
        // document.removeEventListener('mouseup', this.onClose);
        return;
      }

      var area = document.getElementsByClassName('auto-form-input');
      var isContainsTarget = false;
      for (var i = 0; i < area.length; i++) {
        if (area[i].contains(event.target)) {
          isContainsTarget = true;
        }
      }
      if (event != undefined && _this.props.isNeedResetValOnMouseUp) {
        if (_this.state.isKeyUp == true && area && !isContainsTarget) {
          _this.setState({
            inputValue: ''
          });
          _this.refs.textInput.value = '';
        }
      }

      if (area == undefined) {
        _this.setState({
          isShow: true
        });
        return;
      }
      if (!isContainsTarget) {
        _this.setState({
          isShow: false,
          isFocus: false,
          isHover: false,
          pointerEvent: 'auto'
        });
        _this.CommonMount.unmountBox();
        // document.removeEventListener('mouseup', this.onClose);
      }
    };

    _this.onRealChange = function (event) {
      event.persist();
      _this.isInputing = true;
      _this.onChange(event);
    };

    _this.inputChangeHandler = function (event) {
      _this.isInputModifiedSinceInitValue = true; // 值有修改过标志，在失焦时用来判断是否需要清空输入
      _this.onRealChange(event);
    };

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

    _this.translation = (0, _extends3.default)({}, defaultTranslation, props.translation);
    _this.state = {
      isFocus: false, // 输入框样式控制
      inputValue: props && props.inputDefaultValue || '', //input表单值
      isShow: true,
      isKeyUp: false,
      isHover: false,
      pointerEvent: "auto",
      defaultPlaceholder: props && props.placeholder || '输入可进行搜索'
    };
    _this.tar = null;
    _this.chearFlag = false;
    _this.domState = false;
    _this.onChange = (0, _es6PromiseDebounce2.default)(_this.onChange, 300);
    //挂载组件 zyt
    _this.CommonMount = new _commonMount2.default({
      containerId: 'AutoComplete_ul', // 容器ID
      follow: true, // 是否滚动跟随，默认true
      fixed: true // 定位：fixed，false时为absolute
    });
    return _this;
  }

  (0, _createClass3.default)(AutoComplete, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.isFetching) {
        // isInputing 属性是为了解决输入时，短暂出现空数据样式（因为props.isFetching 来的太久）
        // 当 isFetching 有值时，清除 isInputing 标志，从而让 props.isFetching 控制 loading 样式
        this.isInputing = false;
      }
      if (nextProps.inputDefaultValue != this.props.inputDefaultValue) {
        if (nextProps.inputDefaultValue != this.state.inputValue) {
          this.setState({
            inputValue: nextProps.inputDefaultValue
          });
          if (!this.props.readOnly && !this.props.disabled && !this.props.hidden) {
            this.refs.textInput.value = nextProps.inputDefaultValue;
          }
        }
      }
    }
    //请求了新的数据后需要重新渲染组件

  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      if (this.domState) {
        this.renderDom(false, offset);
      };
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.CommonMount.unmountBox();
      document.removeEventListener('mouseup', this.onClose);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      document.removeEventListener('mouseup', this.onClose);
      document.addEventListener('mouseup', this.onClose);
    }

    // input foucs animation


    // input blur animation


    // input keyup callback


    // list click && callback

  }, {
    key: 'renderDom',
    value: function renderDom(temp) {
      var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var _props = this.props,
          defaultItems = _props.defaultItems,
          customResultClassName = _props.customResultClassName;

      var height = defaultItems.length > 10 ? '320px' : 'inherit';
      var setHeight = defaultItems.length > 10 ? '320px' : defaultItems.length * 32 + 'px';
      var _state = this.state,
          inputValue = _state.inputValue,
          isShow = _state.isShow;

      var overflowY = height == 'inherit' ? 'hidden' : 'scroll';
      var findResultChild = defaultItems.length > 0 && inputValue.length > 0 ? defaultItems : '';
      var findResult = defaultItems.length == 0 && inputValue.length > 0 ? _react2.default.createElement(
        'div',
        { className: 'us-no-data' },
        _react2.default.createElement('span', { className: 'u-icon empty-icon', 'data-bg-text': this.translation.emptyBgText })
      ) : findResultChild;
      var showAutoUl = isShow && inputValue.length != 0 ? _react2.default.createElement(
        'ul',
        { className: "auto-result " + customResultClassName, onClick: this.itemClick, onMouseDown: this.itemClick },
        _react2.default.createElement(
          'div',
          { style: { "maxHeight": height, 'overflowY': overflowY, backgroundColor: "#FFF" } },
          findResult
        )
      ) : '';
      if (this.isInputing || this.props.isFetching) {
        showAutoUl = isShow ? _react2.default.createElement(
          'ul',
          { className: 'auto-result', onClick: this.itemClick },
          _react2.default.createElement(
            'div',
            { style: { "maxHeight": height, 'overflowY': overflowY, backgroundColor: "#FFF", height: '200px' } },
            _react2.default.createElement(_loading2.default, { type: 'small' })
          )
        ) : '';
        //解决出现loading时跳动问题。author lsh
        setHeight = "200px";
      }
      if (defaultItems.length == 0 && inputValue.length > 0) setHeight = "200px";
      this.CommonMount.renderDom('mount-box1', // wrap's classname & id
      showAutoUl, // content dom
      this.tar, // 跟随目标
      [this.tar, //挂载目标节点
      { // 挂载元素宽高 {width: '', height: ''}
        width: this.tar.clientWidth, // 挂载宽度
        height: setHeight
      }], false, //labeL和input框是否为竖向结构，会留出对应的label空间
      0, //水平向左偏移量，为负数则向右
      false, //弹层靠左靠右模式，默认为false 靠左模式
      100 //window.onresize执行时间，默认100ms
      , 30);
    }
  }, {
    key: 'render',
    value: function render() {
      var _state2 = this.state,
          isFocus = _state2.isFocus,
          inputValue = _state2.inputValue,
          isHover = _state2.isHover,
          defaultPlaceholder = _state2.defaultPlaceholder,
          pointerEvent = _state2.pointerEvent;
      var _props2 = this.props,
          showText = _props2.showText,
          errorStatus = _props2.errorStatus,
          hidden = _props2.hidden,
          readOnly = _props2.readOnly,
          disabled = _props2.disabled,
          showCloseBtn = _props2.showCloseBtn;

      var errorMsg = this.props.errorMsg;
      var changeText = errorStatus ? errorMsg : showText;
      // 输入框父级DIV类名
      var autoInputDivClass = (0, _classnames2.default)({
        'auto-form-input': true,
        'form-item__control': true,
        'form-item__control_is-active': errorStatus || isFocus,
        'form-item__control_has-info': changeText,
        'form-item__control_has-error': errorStatus
      });
      var closeDisabled = !showCloseBtn || !isHover || this.refs.textInput && this.refs.textInput.value.length <= 0;

      var closeIcon = (0, _classnames2.default)({
        'u-icon': true,
        'sys-icon-close': true,
        'auto-form-btn-close': true,
        'close-hide': closeDisabled
      });

      if (!hidden) {
        return _react2.default.createElement(
          'div',
          { className: 'form-item' },
          _react2.default.createElement(_commonLabel2.default, this.props),
          readOnly || disabled ? _react2.default.createElement(_commonInput2.default, { readonly: true, errorMsg: errorMsg, errorStatus: errorStatus, defaultValue: inputValue }) : _react2.default.createElement(
            'div',
            { className: autoInputDivClass,
              onMouseOver: this.handlerOver, onMouseOut: this.handlerOut, ref: 'mouseIconClose'
            },
            _react2.default.createElement(
              _toolTip2.default,
              { title: inputValue },
              _react2.default.createElement(
                'div',
                { className: 'form-item_is-hidden-tips', style: { pointerEvents: pointerEvent }, onClick: this.tipsClick },
                inputValue
              )
            ),
            _react2.default.createElement('input', {
              className: 'u-input',
              type: 'text',
              style: { maxWidth: inputValue && inputValue.length > 0 ? 'calc(100% - 13px)' : '100%', textOverflow: inputValue && inputValue.length > 0 ? 'ellipsis' : 'clip' },
              readOnly: readOnly,
              disabled: disabled,
              placeholder: !readOnly && !disabled ? defaultPlaceholder : '',
              defaultValue: inputValue,
              onClick: this.onHandleClick,
              onChange: this.inputChangeHandler
              // onKeyUp={this.onKeyUp}
              , onFocus: this.addClass,
              onBlur: this.removeClass,
              ref: 'textInput'
            }),
            _react2.default.createElement(
              'span',
              { className: 'form-item__right-icon auto-complete__btn-group', onClick: this.clearInputValue },
              _react2.default.createElement('i', { className: closeIcon, onClick: this.addClass })
            ),
            (errorStatus || isFocus) && changeText && !readOnly ? _react2.default.createElement(
              'span',
              { className: 'form-item__explain' },
              changeText
            ) : null
          )
        );
      } else {
        return _react2.default.createElement('div', { className: 'field auto-complete' });
      }
    }
  }]);
  return AutoComplete;
}(_react.Component), _class.defaultProps = {
  showCloseBtn: true,
  isFetching: false,
  customResultClassName: '',
  isNeedResetValOnMouseUp: true
}, _temp);


module.exports = AutoComplete;