@beisen/ethos/lib/input-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;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _toolTip2 = _interopRequireDefault(_toolTip);

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

var _commonInput2 = _interopRequireDefault(_commonInput);

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

var _commonLabel2 = _interopRequireDefault(_commonLabel);

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

require('./index.scss');

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

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

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

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

    _this.handlerChange = function (event) {
      var value = _this.refs.textinput.value;
      _this.callBackValue(event, "handlerChange", value);
      _this.setState({ defaultValue: _this.refs.textinput.value });
    };

    _this.handlerFocus = function (event) {
      var value = _this.refs.textinput.value;
      _this.callBackValue(event, "handlerFocus", value);
      if (!_this.props.commonDate.readonly) {
        _this.setState({
          focusing: true,
          isShowMouseOverIcon: false
        });
      }
    };

    _this.handlerBlur = function (event) {
      var value = _this.refs.textinput.value;
      _this.callBackValue(event, "handlerBlur", value);
      _this.setState({ focusing: false, pointerEvent: 'auto', showHiddenTips: 'block' });
    };

    _this.handlerClick = function (event) {
      var value = _this.refs.textinput.value;
      _this.callBackValue(event, "handlerClick", value);
    };

    _this.controlClick = function (event) {
      if (event.target.className && event.target.className.indexOf('close') >= 0) return;
      var value = _this.refs.textinput.value;
      _this.callBackValue(_this.refs.textinput, "handlerClick", value);
    };

    _this.handlerKeyup = function (event) {
      var value = _this.refs.textinput.value;
      _this.callBackValue(event, "handlerKeyup", value);
    };

    _this.dropClick = function (event) {
      var value = _this.refs.textinput.value;
      _this.props.singleDate.dropClick && _this.props.singleDate.dropClick(event, value, _this.refs.textinput);
    };

    _this.callBackValue = function (event, status, value) {
      if (_this.props.commonDate.disabled || _this.props.commonDate.readonly) {
        return false;
      }
      _this.props.singleDate[status] && _this.props.singleDate[status](event, status, value);
      _this.setState({ defaultValue: value });
    };

    _this.clearDate = function (event, hoverClear) {
      if (_this.props.commonDate.readonly || _this.props.commonDate.disabled) {
        return;
      }
      _this.refs.textinput.value = "";
      _this.setState({ defaultValue: "" });
      // this.callBackValue(event, "handlerBlur", "");
      _this.callBackValue(event, "handlerChange", "");
    };

    _this.editClick = function (event) {
      _this.props.editClick("edit");
    };

    _this.handlerOver = function (event) {
      if (_this.props.commonDate.readonly || _this.props.commonDate.disabled) {
        return;
      }
      if (!_this.props.singleDate.closeBtn) return;
      var dom = (0, _reactDom.findDOMNode)(_this.refs.mouseIconClose);
      if (dom.style.visibility == 'inherit' || _this.state.focusing || !_this.state.defaultValue) {
        return;
      } else {
        _this.setState({
          isShowMouseOverIcon: true
        }, _this.forceUpdate());
      }
    };

    _this.handlerOut = function (event) {
      if (_this.props.commonDate.readonly || _this.props.commonDate.disabled) {
        return;
      }
      if (!_this.props.singleDate.closeBtn) return;
      var node = event.target;
      var dom = (0, _reactDom.findDOMNode)(_this.refs.formItem);
      if (node.nodeName.toLowerCase() == 'i' && !dom.contains(node)) {
        return;
      } else {
        _this.setState({
          isShowMouseOverIcon: false
        }, _this.forceUpdate());
      }
    };

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

    _this.state = {
      defaultValue: props.commonDate.defaultValue,
      focusing: false,
      pointerEvent: "auto",
      showHiddenTips: 'block',
      defaultPlaceholder: props && props.commonDate.placeholder || '请输入'
    };
    return _this;
  }

  (0, _createClass3.default)(App, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.commonDate.defaultValue != this.state.defaultValue) {
        this.setState({ defaultValue: nextProps.commonDate.defaultValue });
        this.refs.textinput && (this.refs.textinput.value = (0, _commonFunc.decode)(nextProps.commonDate.defaultValue));
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          focusing = _state.focusing,
          defaultValue = _state.defaultValue,
          pointerEvent = _state.pointerEvent,
          showHiddenTips = _state.showHiddenTips;
      var _props = this.props,
          status = _props.status,
          multiple = _props.multiple,
          titleDate = _props.titleDate,
          commonDate = _props.commonDate,
          showDate = _props.showDate,
          singleDate = _props.singleDate,
          multiDate = _props.multiDate,
          inputBoxReadonly = _props.inputBoxReadonly;


      var isError = commonDate.errorStatus;
      var isShowTips = commonDate.isShowTips || false;
      var sideTip = commonDate.sideTip || false;
      //默认值不为空时修改errorstatus，只针对于必填，如果有其他错误验证可增加判断条件
      // if (defaultValue != '') {
      //   isError = false;
      // }
      var readonlyClass = commonDate.disabled || commonDate.readonly ? 'form-item__control_is-readonly ' : '';
      var hasinfoClass = isError || commonDate.PromptMsg && (focusing || commonDate.keepActive) ? 'form-item__control_has-info ' : '';
      var activeClass = isError || focusing || commonDate.keepActive ? 'form-item__control_is-active ' : '';
      var errClass = isError ? 'form-item__control_has-error ' : '';
      var self = this;
      var multipleDate = {
        "status": "show",
        "isActive": commonDate.keepActive, //蓝线是否出现
        "placeHolder": this.state.defaultPlaceholder, //input中的placeholder
        "defaultValue": defaultValue, //input中的defaultvalue
        "readonly": commonDate.readonly, //只读态
        "disabled": commonDate.disabled, //只读态
        "errorStatus": isError, //报错
        "errorMsg": commonDate.errorMsg, //报错信息，为空时不显示
        "PromptMsg": "", //报错信息，为空时不显示
        "selectDate": multiDate.selectDate, //数据
        "isShowTips": isShowTips,
        'sideTip': sideTip,
        "hasInput": multiDate.hasInput,
        "showInput": multiDate.showInput,
        "alwaysShowTips": commonDate.alwaysShowTips,
        'inputBoxReadonly': inputBoxReadonly,
        handlerClick: function handlerClick(event, dom) {
          self.props.multiDate.handlerClick && self.props.multiDate.handlerClick(event, dom);
        }, //组件点击事件
        itemClose: function itemClose(event, item, index, selectDate) {
          self.props.multiDate.itemClose && self.props.multiDate.itemClose(event, item, index, selectDate);
        }, //删除按钮回调
        inputChange: function inputChange(event, status, value) {
          self.props.multiDate.inputChange && self.props.multiDate.inputChange(event, status, value);
        }, //input的change事件
        inputClick: function inputClick(event, status, value) {
          self.props.multiDate.inputClick && self.props.multiDate.inputClick(event, status, value);
        }, //input的点击事件
        inputBlur: function inputBlur(event, status, value) {
          self.props.multiDate.inputBlur && self.props.multiDate.inputBlur(event, status, value);
        }, //input的blur事件
        dropClick: function dropClick(event, status, dom) {
          self.props.multiDate.dropClick && self.props.multiDate.dropClick(event, status, dom);
        }
      };

      var mouseIconClose = this.state.isShowMouseOverIcon ? { 'visibility': 'inherit', 'pointerEvents': 'auto' } : { 'visibility': 'hidden', 'pointerEvents': 'auto' };
      var showCloseBtn = singleDate.closeBtn && !commonDate.readonly && !commonDate.disabled;
      var readOnlyStyle = void 0;
      if (commonDate.readonly) {
        readOnlyStyle = {
          'background': '#f5f8fa',
          'border': '1px solid #e4ebf0',
          'borderRadius': '5px',
          'fontFamily': 'PingFangSC-Regular',
          'fontSize': '12px',
          'color': '#3E4E59',
          'letterSpacing': '0',
          'lineHeight': '20px',
          'textAlign': 'left',
          'cursor': 'no-drop'
        };
      } else {
        readOnlyStyle = {
          'maxWidth': 'calc(100% - ' + (showCloseBtn ? 40 : 26) + 'px)',
          'cursor': singleDate.keepValue ? 'pointer' : 'text'
        };
      }
      if (status == "show") {
        return _react2.default.createElement(
          'div',
          { className: 'form-item form-item_is-static' },
          titleDate.title.length > 0 ? _react2.default.createElement(
            'div',
            { className: 'form-item__title' },
            _react2.default.createElement(
              _toolTip2.default,
              { title: titleDate.title, hidden: hiddenTip, side: sideTip },
              _react2.default.createElement(
                'label',
                { htmlFor: '', title: titleDate.title, className: 'form-item__text' },
                titleDate.title
              )
            )
          ) : "",
          _react2.default.createElement(
            'div',
            { className: 'form-item__control' },
            showDate.isLink ? _react2.default.createElement(
              'a',
              { className: 'form-item__link', target: showDate.selfJump ? "_self" : "_block", href: showDate.linkValue
              },
              defaultValue
            ) : _react2.default.createElement(
              'p',
              { className: 'form-item__text' },
              defaultValue
            ),
            _react2.default.createElement(
              'span',
              { className: 'form-item__right-icon' },
              _react2.default.createElement('i', { className: 'u-icon sys-icon-cus-bianji', onClick: this.editClick })
            )
          )
        );
      } else {
        var inputErrorStyle = errClass ? {
          'width': '100%',
          'background': 'rgba(204,41,41,.05)',
          'border': '1px solid #cc2929',
          'border-radius': '5px'
        } : { 'width': '100%' };
        return _react2.default.createElement(
          'div',
          { className: 'form-item ', ref: 'formItem' },
          _react2.default.createElement(_commonLabel2.default, this.props.titleDate),
          !multiple ? commonDate.readonly || commonDate.disabled ? _react2.default.createElement(_commonInput2.default, { readonly: true, errorStatus: commonDate.errorStatus, errorMsg: commonDate.errorMsg, defaultValue: (0, _commonFunc.decode)(defaultValue) }) : _react2.default.createElement(
            'div',
            { className: "form-item__control " + readonlyClass + hasinfoClass + activeClass + errClass, onMouseOver: this.handlerOver,
              onMouseOut: this.handlerOut,
              onClick: this.controlClick
            },
            _react2.default.createElement(
              'div',
              { className: 'input_' + errClass, style: inputErrorStyle },
              _react2.default.createElement(
                _toolTip2.default,
                { title: (0, _commonFunc.decode)(commonDate.customTitle || defaultValue), hidden: !isShowTips, alwaysShowTips: commonDate.alwaysShowTips, side: sideTip },
                _react2.default.createElement(
                  'div',
                  { className: 'form-item_is-hidden-tips', style: { width: commonDate.readonly ? "100%" : 'calc(100% - ' + (showCloseBtn ? 52 : 38) + 'px)', pointerEvents: pointerEvent, 'cursor': singleDate.keepValue ? 'pointer' : 'text', display: showHiddenTips }, onClick: this.tipsClick },
                  (0, _commonFunc.decode)(defaultValue)
                )
              ),
              _react2.default.createElement('input', { type: 'text', className: 'u-input',
                placeholder: commonDate.readonly ? '' : this.state.defaultPlaceholder,
                defaultValue: (0, _commonFunc.decode)(defaultValue),
                readOnly: commonDate.readonly || commonDate.disabled || singleDate.keepValue,
                disabled: commonDate.disabled,
                onFocus: this.handlerFocus,
                onBlur: this.handlerBlur,
                onClick: this.handlerClick,
                onChange: this.handlerChange,
                onKeyUp: this.handlerKeyup,
                ref: 'textinput',
                style: readOnlyStyle
              }),
              _react2.default.createElement(
                'span',
                { className: 'form-item__right-icon', style: { minHeight: 14 } },
                commonDate.readonly ? _react2.default.createElement('i', { className: 'u-icon' }) : _react2.default.createElement('i', { className: 'u-icon sys-icon-close', style: mouseIconClose, ref: 'mouseIconClose', onMouseDown: this.clearDate.bind(true) }),
                showCloseBtn && defaultValue && defaultValue.length > 0 && focusing ? _react2.default.createElement('i', { className: 'u-icon sys-icon-close', onMouseDown: this.clearDate }) : '',
                singleDate.arrowdownBtn && !commonDate.readonly && !commonDate.disabled ? _react2.default.createElement('i', { className: 'u-icon pc-sys-arrowdown-nomal-svg', onMouseDown: this.dropClick }) : "",
                singleDate.symbol ? _react2.default.createElement(
                  'span',
                  { style: { "width": "14px", "height": "14px", "lineHeight": "14px" } },
                  singleDate.symbol
                ) : ""
              )
            ),
            !commonDate.readonly && commonDate.PromptMsg && (this.state.focusing || commonDate.keepActive) || isError ? _react2.default.createElement(
              'span',
              { className: 'form-item__explain' },
              isError ? commonDate.errorMsg : commonDate.PromptMsg
            ) : ''
          ) : _react2.default.createElement(_commonInput2.default, multipleDate)
        );
      }
    }
  }]);
  return App;
}(_react.Component), _class.defaultProps = {
  hiddenTip: false,
  sideTip: false
}, _temp);

module.exports = App;