ten-design-react/lib/input/input.js

ten(react)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _inputGroup = _interopRequireDefault(require("./input-group"));

var _icon = _interopRequireDefault(require("../icon"));

var _excluded = ["children", "className", "size", "type", "name", "onChange", "onClear", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "autoComplete", "prefix", "suffix", "prefixIcon", "suffixIcon", "inputPrefixRaw", "inputPrefix", "inputSuffix", "inputProps", "getInput"];

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * @visibleName Input 输入框
 */
var Input = /*#__PURE__*/function (_React$Component) {
  _inherits(Input, _React$Component);

  var _super = _createSuper(Input);

  function Input(props) {
    var _this;

    _classCallCheck(this, Input);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "refInputElem", null);

    _defineProperty(_assertThisInitialized(_this), "refInputPrefix", null);

    _defineProperty(_assertThisInitialized(_this), "refInputSuffix", null);

    _defineProperty(_assertThisInitialized(_this), "blurT", 0);

    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
      var onChange = _this.props.onChange;

      if (!('value' in _this.props)) {
        _this.setState({
          value: e.target.value
        });
      }

      onChange && onChange(e);
      requestAnimationFrame(function () {
        _this.context.formChange && _this.context.formChange();
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onClear", function (e) {
      e.stopPropagation();

      _this.props.onClear();

      if (!('value' in _this.props)) {
        _this.setState({
          value: ''
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onInputClick", function () {
      _this.refInputElem.focus();
    });

    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
      var onFocus = _this.props.onFocus;
      clearTimeout(_this.blurT);
      _this.isFocus = true;

      _this.setState({
        focused: true
      });

      onFocus && onFocus(e);
    });

    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
      var onBlur = _this.props.onBlur;
      _this.isFocus = false;
      e.persist();
      _this.blurT = setTimeout(function () {
        if (!_this.isFocus && _this.state.focused) {
          _this.setState({
            focused: false
          });
        }
      }, 150);
      onBlur && onBlur(e);
      requestAnimationFrame(function () {
        _this.context.formBlur && _this.context.formBlur();
      });
    });

    _this.state = {
      value: props.value || props.initialValue || '',
      focused: false
    };
    return _this;
  }

  _createClass(Input, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.blurT);
    }
  }, {
    key: "getContextVal",
    value: function getContextVal(key) {
      return _typeof(this.context) === 'object' ? this.context[key] : undefined;
    }
  }, {
    key: "getContextOrPropVal",
    value: function getContextOrPropVal(key) {
      var contextValue = this.getContextVal(key);
      return contextValue || this.props[key];
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          children = _this$props.children,
          propClassName = _this$props.className,
          propSize = _this$props.size,
          type = _this$props.type,
          name = _this$props.name,
          onChange = _this$props.onChange,
          onClear = _this$props.onClear,
          onKeyDown = _this$props.onKeyDown,
          onKeyPress = _this$props.onKeyPress,
          onKeyUp = _this$props.onKeyUp,
          onFocus = _this$props.onFocus,
          onBlur = _this$props.onBlur,
          placeholder = _this$props.placeholder,
          _this$props$readOnly = _this$props.readOnly,
          readOnly = _this$props$readOnly === void 0 ? false : _this$props$readOnly,
          autoComplete = _this$props.autoComplete,
          prefix = _this$props.prefix,
          suffix = _this$props.suffix,
          prefixIcon = _this$props.prefixIcon,
          propSuffixIcon = _this$props.suffixIcon,
          inputPrefixRaw = _this$props.inputPrefixRaw,
          inputPrefix = _this$props.inputPrefix,
          inputSuffix = _this$props.inputSuffix,
          inputProps = _this$props.inputProps,
          getInput = _this$props.getInput,
          others = _objectWithoutProperties(_this$props, _excluded);

      var _this$state = this.state,
          value = _this$state.value,
          focused = _this$state.focused;
      var disabled = this.getContextOrPropVal('disabled');
      var error = this.getContextOrPropVal('error');
      var size = this.getContextOrPropVal('size');
      var inputPropsFromProps = {
        type: type,
        name: name,
        onKeyDown: onKeyDown,
        onKeyPress: onKeyPress,
        onKeyUp: onKeyUp,
        onFocus: onFocus,
        onBlur: onBlur,
        placeholder: placeholder,
        disabled: disabled,
        readOnly: readOnly,
        autoComplete: autoComplete
      };
      var className = (0, _classnames.default)(propClassName, 'ten-input', "ten-input--size-".concat(size), {
        'ten-input--status-error': error,
        'ten-input--disabled': disabled,
        'ten-input--focused': focused,
        'ten-input--with-prefix': prefix,
        'ten-input--with-suffix': suffix
      });
      var suffixIcon = propSuffixIcon;
      delete others.disabled;
      delete others.error;
      delete others.initialValue;

      if (onClear && !disabled && value) {
        suffixIcon = /*#__PURE__*/_react.default.createElement(_icon.default, {
          className: "ten-input__input-close",
          role: "button",
          tabIndex: 0,
          type: "circle_clear",
          onClick: this.onClear
        });
      }

      var inputWrapClassName = (0, _classnames.default)('ten-input__input', {
        'ten-input__input--status-error': error,
        'ten-input__input--focused': focused,
        'ten-input__input--disabled': disabled,
        'ten-input__input--prefixicon': prefixIcon,
        'ten-input__input--suffixicon': suffixIcon
      });

      var inputRaw = /*#__PURE__*/_react.default.createElement("input", _extends({
        type: "text"
      }, inputPropsFromProps, inputProps, {
        ref: function ref(el) {
          _this2.refInputElem = el;
          getInput && getInput(el);
        },
        className: "ten-input__input-input",
        onChange: this.onChange,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        value: value
      }));

      var input = /*#__PURE__*/_react.default.createElement("div", {
        className: inputWrapClassName,
        onClick: this.onInputClick
      }, prefixIcon ? /*#__PURE__*/_react.default.createElement("span", {
        className: "ten-input__input-icon ten-input__input-icon--prefix"
      }, prefixIcon) : null, inputPrefix ? /*#__PURE__*/_react.default.createElement("span", {
        ref: function ref(el) {
          _this2.refInputPrefix = el;
        },
        className: "ten-input__input-prefix"
      }, inputPrefix) : null, inputPrefixRaw, inputRaw, inputSuffix ? /*#__PURE__*/_react.default.createElement("span", {
        ref: function ref(el) {
          _this2.refInputSuffix = el;
        },
        className: "ten-input__input-suffix"
      }, inputSuffix) : null, suffixIcon ? /*#__PURE__*/_react.default.createElement("span", {
        className: "ten-input__input-icon ten-input__input-icon--suffix"
      }, suffixIcon) : null);

      return /*#__PURE__*/_react.default.createElement("div", _extends({
        className: className
      }, others), prefix ? /*#__PURE__*/_react.default.createElement("span", {
        className: "ten-input__prefix"
      }, prefix) : null, input, suffix ? /*#__PURE__*/_react.default.createElement("span", {
        className: "ten-input__suffix"
      }, suffix) : null, children);
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps) {
      if ('value' in nextProps) {
        return {
          value: nextProps.value
        };
      }

      return null;
    }
  }]);

  return Input;
}(_react.default.Component);

_defineProperty(Input, "propTypes", {
  /**
   * 是否禁用
   */
  disabled: _propTypes.default.bool,

  /**
   * input onChange 事件
   */
  onChange: _propTypes.default.func,

  /**
   * 是否错误状态
   */
  error: _propTypes.default.bool,

  /**
   * 尺寸
   */
  size: _propTypes.default.oneOf(['default', 'small']),

  /**
   * 如果提供 onClear，则会在输入不为空时显示清除图标以支持清除功能
   */
  onClear: _propTypes.default.func,

  /**
   * 输入框前缀
   */
  prefix: _propTypes.default.node,

  /**
   * 输入框后缀
   */
  suffix: _propTypes.default.node,

  /**
   * 输入框前缀图标
   */
  prefixIcon: _propTypes.default.node,

  /**
   * 输入框后缀图标
   */
  suffixIcon: _propTypes.default.node,

  /**
   * @ignore
   */
  inputSuffix: _propTypes.default.node,

  /**
   * @ignore
   */
  inputPrefix: _propTypes.default.node,

  /**
   * @ignore input 元素前缀内容，不带容器，如用于 inputTag 中的 tags
   */
  inputPrefixRaw: _propTypes.default.node,

  /**
   * 输入框值
   */
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

  /**
   * 初始值
   */
  initialValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

  /**
   * 这些 props 会被直接传入到 input
   */
  inputProps: _propTypes.default.object
});

_defineProperty(Input, "defaultProps", {
  disabled: false,
  error: false,
  size: 'default'
});

_defineProperty(Input, "contextTypes", _objectSpread(_objectSpread({}, _inputGroup.default.childContextTypes), {}, {
  formBlur: _propTypes.default.func,
  formChange: _propTypes.default.func
}));

var _default = Input;
exports.default = _default;