@beisen/ethos/lib/text-box/index.js

beisencloud pc react components

'use strict';

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; /* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _es6PromiseDebounce2 = _interopRequireDefault(_es6PromiseDebounce);

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

var _toolTip2 = _interopRequireDefault(_toolTip);

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

var _commonLabel2 = _interopRequireDefault(_commonLabel);

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

var _commonInput2 = _interopRequireDefault(_commonInput);

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

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

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

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

    _this.tipsClick = function () {
      _this.setState({ pointerEvent: "none", clickFocusing: true, showHiddenTips: 'none' });
      _this.refs.baseInput.focus();
    };

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

    _this.state = {
      defaultValue: props.defaultValue,
      hoverFocusing: false,
      clickFocusing: false,
      pointerEvent: "auto",
      showHiddenTips: 'block',
      mouseTips: false
    };

    _this.clearData = _this.clearData.bind(_this);
    _this.handlerFocus = _this.handlerFocus.bind(_this);
    _this.handlerBlur = _this.handlerBlur.bind(_this);
    _this.handlerClick = _this.handlerClick.bind(_this);
    _this.handlerOver = _this.handlerOver.bind(_this);
    _this.handlerOut = _this.handlerOut.bind(_this);
    _this.handlerChange = (0, _es6PromiseDebounce2.default)(_this.handlerChange, 300);
    return _this;
  }

  (0, _createClass3.default)(Textbox, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.defaultValue != this.state.defaultValue) {
        this.setState({
          defaultValue: nextProps.defaultValue
        });
        if (this.refs.baseInput) {
          this.refs.baseInput.value = nextProps.defaultValue;
        }
      }
    }

    /*获得焦点*/

  }, {
    key: 'handlerFocus',
    value: function handlerFocus(event) {
      this.callBackValue(event, "onFocus");
      this.clearToolTipDom();
      if (!this.props.readonly) {
        this.setState({ clickFocusing: true });
        if (this.refs.baseInput.value !== "") {
          this.setState({ hoverFocusing: true });
        }
      }
    }
  }, {
    key: 'handlerChange',
    value: function handlerChange(event) {
      if (this.props.readonly || this.props.disabled) {
        return;
      }
      this.callBackValue(event, "onChange");
      this.setState({ defaultValue: this.refs.baseInput.value });
    }
  }, {
    key: 'handlerClick',
    value: function handlerClick(event) {
      this.callBackValue(event, "onClick");
    }
  }, {
    key: 'handlerBlur',
    value: function handlerBlur(event) {
      if (this.props.readonly || this.props.disabled) {
        return;
      }
      this.callBackValue(event, "onBlur");
      var self = this;
      setTimeout(function () {
        self.setState({ hoverFocusing: false, clickFocusing: false, pointerEvent: 'auto', showHiddenTips: 'block' });
      }, 300);
    }
  }, {
    key: 'handlerOver',
    value: function handlerOver(event) {
      if (this.props.readonly || this.props.disabled) {
        return;
      }
      if (this.state.clickFocusing) {
        return;
      } else if (this.refs.baseInput.value !== "") {
        this.setState({
          hoverFocusing: true
        });
      }
    }
  }, {
    key: 'handlerOut',
    value: function handlerOut(event) {
      if (this.props.readonly || this.props.disabled) {
        return;
      }
      // let dom = findDOMNode(this.refs.mouseIconClose);
      // if (dom.className.indexOf('active') > 0) {
      //   return;
      // } else {
      this.setState({
        mouseTips: false,
        hoverFocusing: false
      });
      this.clearToolTipDom();
      // }
    }
  }, {
    key: 'clearToolTipDom',
    value: function clearToolTipDom() {
      var dom_1 = document.getElementsByClassName('tooltip')[0];
      var dom_2 = document.getElementsByClassName('tooltip-arrow')[0];
      if (dom_1 && dom_2) {
        var parNode = dom_1.parentNode;
        parNode.removeChild(dom_1);
        parNode.removeChild(dom_2);
      }
    }
  }, {
    key: 'callBackValue',
    value: function callBackValue(event, status) {
      if (this.props.disabled) return false;
      this.props[status] && this.props[status](event, status, this.refs.baseInput.value);
    }
  }, {
    key: 'clearData',
    value: function clearData(event) {
      if (this.props.readonly || this.props.disabled) {
        return;
      }
      this.props.onBlur && this.props.onBlur(event, "onBlur", "");
      this.props.onChange && this.props.onChange(event, "onChange", "");
      this.refs.baseInput.value = "";
    }
  }, {
    key: 'onRealChange',
    value: function onRealChange(event) {
      event.persist();
      this.handlerChange(event);
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          clickFocusing = _state.clickFocusing,
          defaultValue = _state.defaultValue,
          pointerEvent = _state.pointerEvent,
          hoverFocusing = _state.hoverFocusing,
          showHiddenTips = _state.showHiddenTips,
          mouseTips = _state.mouseTips;
      var _props = this.props,
          errorStatus = _props.errorStatus,
          errorMsg = _props.errorMsg,
          showText = _props.showText,
          hidden = _props.hidden,
          hiddenTip = _props.hiddenTip,
          disabled = _props.disabled,
          readonly = _props.readonly,
          placeHolder = _props.placeHolder,
          maxLength = _props.maxLength,
          hasClosebtn = _props.hasClosebtn;

      var inputClassName = 'u-input';
      var closeStyle = !readonly && !disabled && defaultValue && defaultValue.length > 0 && (hoverFocusing || clickFocusing) ? { display: 'block', marginRight: '5px' } : { display: 'none' };
      var _tempSymbol = readonly ? { "height": "14px", "display": "inline-block", "lineHeight": "14px", 'position': 'absolute', 'top': '0', 'right': '20px' } : { "height": "14px", "display": "inline-block", "lineHeight": "14px" };
      if (defaultValue == '') {
        inputClassName = 'u-input u-input-noValue';
      }
      var inputStyle = !readonly && !disabled && defaultValue && defaultValue.length > 0 && (hoverFocusing || clickFocusing) ? { 'maxWidth': 'calc(100% - 22px)', 'paddingRight': errorStatus ? '24px' : '' } : {};
      if (hidden) {
        return _react2.default.createElement('div', null);
      } else {
        return _react2.default.createElement(
          'div',
          { className: 'form-item' },
          _react2.default.createElement(_commonLabel2.default, this.props),
          readonly || disabled ? _react2.default.createElement(_commonInput2.default, { readonly: true, errorStatus: errorStatus, errorMsg: errorMsg, defaultValue: defaultValue }) : _react2.default.createElement(
            'div',
            { className: "form-item__control " + (clickFocusing ? 'form-item__control_is-active ' : '') + (showText && showText.length > 0 ? "form-item__control_has-info " : "") + (errorStatus ? 'form-item__control_is-active form-item__control_has-info form-item__control_has-error' : ''),
              onMouseEnter: this.handlerOver, onMouseLeave: this.handlerOut, ref: 'mouseIconClose'
            },
            mouseTips ? "" : _react2.default.createElement(
              _toolTip2.default,
              { title: defaultValue, hidden: hiddenTip },
              _react2.default.createElement(
                'div',
                { className: 'form-item_is-hidden-tips', onMouseEnter: this.onMouseTip, style: { pointerEvents: pointerEvent, display: showHiddenTips }, onClick: this.tipsClick },
                defaultValue
              )
            ),
            _react2.default.createElement('input', { type: 'text',
              style: inputStyle,
              className: inputClassName,
              placeholder: placeHolder,
              readOnly: readonly,
              disabled: disabled,
              onFocus: this.handlerFocus,
              onBlur: this.handlerBlur,
              onClick: this.handlerClick,
              defaultValue: defaultValue,
              onChange: this.onRealChange.bind(this),
              maxLength: maxLength,
              ref: 'baseInput'
            }),
            _react2.default.createElement(
              'span',
              { className: 'form-item__right-icon', onClick: this.clearData },
              readonly ? _react2.default.createElement('i', { className: 'u-icon pc-sys-bukebianji-nomal-svg disabled-icon', style: { position: 'absolute', right: '-1px', bottom: '-15px', width: '11px', height: '13px' } }) : '',
              hasClosebtn ? _react2.default.createElement('i', { className: 'u-icon sys-icon-close', style: closeStyle }) : '',
              _react2.default.createElement(
                'span',
                { style: _tempSymbol },
                this.props.symbol
              )
            ),
            clickFocusing && showText && showText.length > 0 || errorStatus ? _react2.default.createElement(
              'span',
              { className: 'form-item__explain' },
              errorStatus ? errorMsg : showText
            ) : ''
          )
        );
      }
    }
  }]);
  return Textbox;
}(_react.Component), _class.defaultProps = {
  hasClosebtn: true
}, _temp);


module.exports = Textbox;