@douyinfe/semi-ui 2.1.1 → 2.1.2

package/lib/cjs/input/index.d.ts

@@ -0,0 +1,170 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InputFoundation from '@douyinfe/semi-foundation/lib/cjs/input/foundation';
+import BaseComponent from '../_base/baseComponent';
+import '@douyinfe/semi-foundation/lib/cjs/input/input.css';
+export { InputGroupProps } from './inputGroup';
+export { TextAreaProps } from './textarea';
+export declare type InputSize = 'small' | 'large' | 'default';
+export declare type InputMode = 'password';
+export declare type ValidateStatus = "default" | "error" | "warning" | "success";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    mode?: InputMode;
+    value?: React.ReactText;
+    defaultValue?: React.ReactText;
+    disabled?: boolean;
+    readonly?: boolean;
+    autofocus?: boolean;
+    type?: string;
+    showClear?: boolean;
+    hideSuffix?: boolean;
+    placeholder?: React.ReactText;
+    insetLabel?: React.ReactNode;
+    size?: InputSize;
+    className?: string;
+    style?: React.CSSProperties;
+    validateStatus?: ValidateStatus;
+    onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onInput?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    inputStyle?: React.CSSProperties;
+    getValueLength?: (value: string) => number;
+    forwardRef?: ((instance: any) => void) | React.MutableRefObject<any> | null;
+}
+export interface InputState {
+    value: React.ReactText;
+    cachedValue: React.ReactText;
+    disabled: boolean;
+    props: Record<string, any>;
+    paddingLeft: string;
+    isFocus: boolean;
+    isHovering: boolean;
+    eyeClosed: boolean;
+    minLength: number;
+}
+declare class Input extends BaseComponent<InputProps, InputState> {
+    static propTypes: {
+        addonBefore: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        addonAfter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        mode: PropTypes.Requireable<"password">;
+        value: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<any>;
+        disabled: PropTypes.Requireable<boolean>;
+        readonly: PropTypes.Requireable<boolean>;
+        autofocus: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+        showClear: PropTypes.Requireable<boolean>;
+        hideSuffix: PropTypes.Requireable<boolean>;
+        placeholder: PropTypes.Requireable<any>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
+        onEnterPress: PropTypes.Requireable<(...args: any[]) => any>;
+        insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        inputStyle: PropTypes.Requireable<object>;
+        getValueLength: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        addonBefore: string;
+        addonAfter: string;
+        prefix: string;
+        suffix: string;
+        disabled: boolean;
+        readonly: boolean;
+        type: string;
+        showClear: boolean;
+        hideSuffix: boolean;
+        placeholder: string;
+        size: string;
+        className: string;
+        onClear: (...args: any[]) => void;
+        onChange: (...args: any[]) => void;
+        onBlur: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onInput: (...args: any[]) => void;
+        onKeyDown: (...args: any[]) => void;
+        onKeyUp: (...args: any[]) => void;
+        onKeyPress: (...args: any[]) => void;
+        onEnterPress: (...args: any[]) => void;
+        validateStatus: string;
+    };
+    inputRef: React.RefObject<HTMLInputElement>;
+    prefixRef: React.RefObject<React.ReactNode>;
+    suffixRef: React.RefObject<React.ReactNode>;
+    foundation: InputFoundation;
+    constructor(props: InputProps);
+    get adapter(): {
+        setValue: (value: string) => void;
+        setEyeClosed: (value: boolean) => void;
+        toggleFocusing: (isFocus: boolean) => void;
+        toggleHovering: (isHovering: boolean) => void;
+        getIfFocusing: () => boolean;
+        notifyChange: (cbValue: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+        notifyBlur: (val: string, e: React.FocusEvent<HTMLInputElement>) => void;
+        notifyFocus: (val: string, e: React.FocusEvent<HTMLInputElement>) => void;
+        notifyInput: (e: React.MouseEvent<HTMLInputElement>) => void;
+        notifyKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        notifyKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        notifyKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        notifyEnterPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        notifyClear: (e: React.MouseEvent<HTMLDivElement>) => void;
+        setPaddingLeft: (paddingLeft: string) => void;
+        setMinLength: (minLength: number) => void;
+        isEventTarget: (e: React.MouseEvent) => boolean;
+        getContext(key: string): any;
+        getContexts(): any;
+        getProp(key: string): any;
+        getProps(): InputProps;
+        getState(key: string): any;
+        getStates(): InputState;
+        setState(s: Pick<InputState, keyof InputState>, callback?: any): void;
+        getCache(c: string): any;
+        getCaches(): any;
+        setCache(key: any, value: any): void;
+        stopPropagation(e: any): void;
+    };
+    static getDerivedStateFromProps(props: InputProps, state: InputState): Partial<InputState>;
+    componentDidUpdate(prevProps: InputProps): void;
+    handleClear: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleModeChange: (mode: string) => void;
+    handleClickEye: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleClickPrefixOrSuffix: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handlePreventMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
+    renderPrepend(): JSX.Element;
+    renderAppend(): JSX.Element;
+    renderClearBtn(): JSX.Element;
+    renderModeBtn(): JSX.Element;
+    renderPrefix(): JSX.Element;
+    showClearBtn(): boolean;
+    renderSuffix(suffixAllowClear: boolean): JSX.Element;
+    render(): JSX.Element;
+}
+declare const ForwardInput: React.ForwardRefExoticComponent<Omit<InputProps, "forwardRef"> & React.RefAttributes<HTMLInputElement>>;
+export default ForwardInput;
+export { Input };

package/lib/cjs/input/index.js

@@ -0,0 +1,503 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = exports.Input = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/input/foundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/input/constants");
+
+var _utils = require("../_utils");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+require("@douyinfe/semi-foundation/lib/cjs/input/input.css");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable no-unused-vars, max-len, @typescript-eslint/no-unused-vars */
+
+
+const prefixCls = _constants.cssClasses.PREFIX;
+const sizeSet = _constants.strings.SIZE;
+const statusSet = _constants.strings.STATUS;
+const modeSet = _constants.strings.MODE;
+
+class Input extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.handleClear = e => {
+      this.foundation.handleClear(e);
+    };
+
+    this.handleClick = e => {
+      this.foundation.handleClick(e);
+    };
+
+    this.handleMouseOver = e => {
+      this.setState({
+        isHovering: true
+      });
+    };
+
+    this.handleMouseLeave = e => {
+      this.setState({
+        isHovering: false
+      });
+    };
+
+    this.handleModeChange = mode => {
+      this.foundation.handleModeChange(mode);
+    };
+
+    this.handleClickEye = e => {
+      this.foundation.handleClickEye(e);
+    };
+
+    this.handleMouseDown = e => {
+      this.foundation.handleMouseDown(e);
+    };
+
+    this.handleMouseUp = e => {
+      this.foundation.handleMouseUp(e);
+    };
+
+    this.handleClickPrefixOrSuffix = e => {
+      this.foundation.handleClickPrefixOrSuffix(e);
+    };
+
+    this.handlePreventMouseDown = e => {
+      this.foundation.handlePreventMouseDown(e);
+    };
+
+    this.state = {
+      value: '',
+      cachedValue: null,
+      disabled: false,
+      props: {},
+      paddingLeft: '',
+      isFocus: false,
+      isHovering: false,
+      eyeClosed: props.mode === 'password',
+      minLength: props.minLength
+    };
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.prefixRef = /*#__PURE__*/_react.default.createRef();
+    this.suffixRef = /*#__PURE__*/_react.default.createRef();
+    this.foundation = new _foundation.default(this.adapter);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setValue: value => this.setState({
+        value
+      }),
+      setEyeClosed: value => this.setState({
+        eyeClosed: value
+      }),
+      toggleFocusing: isFocus => {
+        const input = this.inputRef && this.inputRef.current;
+
+        if (isFocus) {
+          input && input.focus();
+        } else {
+          input && input.blur();
+        }
+
+        this.setState({
+          isFocus
+        });
+      },
+      toggleHovering: isHovering => this.setState({
+        isHovering
+      }),
+      getIfFocusing: () => this.state.isFocus,
+      notifyChange: (cbValue, e) => this.props.onChange(cbValue, e),
+      notifyBlur: (val, e) => this.props.onBlur(e),
+      notifyFocus: (val, e) => this.props.onFocus(e),
+      notifyInput: e => this.props.onInput(e),
+      notifyKeyPress: e => this.props.onKeyPress(e),
+      notifyKeyDown: e => this.props.onKeyDown(e),
+      notifyKeyUp: e => this.props.onKeyUp(e),
+      notifyEnterPress: e => this.props.onEnterPress(e),
+      notifyClear: e => this.props.onClear(e),
+      setPaddingLeft: paddingLeft => this.setState({
+        paddingLeft
+      }),
+      setMinLength: minLength => this.setState({
+        minLength
+      }),
+      isEventTarget: e => e && e.target === e.currentTarget
+    });
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const willUpdateStates = {};
+
+    if (props.value !== state.cachedValue) {
+      willUpdateStates.value = props.value;
+      willUpdateStates.cachedValue = props.value;
+    }
+
+    return willUpdateStates;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      mode
+    } = this.props;
+
+    if (prevProps.mode !== mode) {
+      this.handleModeChange(mode);
+    }
+  }
+
+  renderPrepend() {
+    const {
+      addonBefore
+    } = this.props;
+
+    if (addonBefore) {
+      const prefixWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixCls, "-prepend")]: true,
+        ["".concat(prefixCls, "-prepend-text")]: addonBefore && (0, _isString2.default)(addonBefore),
+        ["".concat(prefixCls, "-prepend-icon")]: (0, _utils.isSemiIcon)(addonBefore)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixWrapperCls
+      }, addonBefore);
+    }
+
+    return null;
+  }
+
+  renderAppend() {
+    const {
+      addonAfter
+    } = this.props;
+
+    if (addonAfter) {
+      const prefixWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixCls, "-append")]: true,
+        ["".concat(prefixCls, "-append-text")]: addonAfter && (0, _isString2.default)(addonAfter),
+        ["".concat(prefixCls, "-append-icon")]: (0, _utils.isSemiIcon)(addonAfter)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixWrapperCls
+      }, addonAfter);
+    }
+
+    return null;
+  }
+
+  renderClearBtn() {
+    const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearbtn"));
+    const allowClear = this.foundation.isAllowClear(); // use onMouseDown to fix issue 1203
+
+    if (allowClear) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: clearCls,
+        onMouseDown: this.handleClear
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+    }
+
+    return null;
+  }
+
+  renderModeBtn() {
+    const {
+      value,
+      isFocus,
+      isHovering,
+      eyeClosed
+    } = this.state;
+    const {
+      mode,
+      disabled
+    } = this.props;
+    const modeCls = (0, _classnames.default)("".concat(prefixCls, "-modebtn"));
+    const modeIcon = eyeClosed ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeClosedSolid, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, null);
+    const showModeBtn = mode === 'password' && value && !disabled && (isFocus || isHovering);
+
+    if (showModeBtn) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: modeCls,
+        onClick: this.handleClickEye,
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp
+      }, modeIcon);
+    }
+
+    return null;
+  }
+
+  renderPrefix() {
+    const {
+      prefix,
+      insetLabel
+    } = this.props;
+    const labelNode = prefix || insetLabel;
+
+    if (!labelNode) {
+      return null;
+    }
+
+    const prefixWrapperCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-prefix")]: true,
+      ["".concat(prefixCls, "-inset-label")]: insetLabel,
+      ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
+      ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixWrapperCls,
+      onMouseDown: this.handlePreventMouseDown,
+      onClick: this.handleClickPrefixOrSuffix
+    }, labelNode);
+  }
+
+  showClearBtn() {
+    const {
+      value,
+      isFocus,
+      isHovering
+    } = this.state;
+    const {
+      disabled,
+      showClear
+    } = this.props;
+    return Boolean(value) && showClear && !disabled && (isFocus || isHovering);
+  }
+
+  renderSuffix(suffixAllowClear) {
+    const {
+      suffix,
+      hideSuffix
+    } = this.props;
+
+    if (!suffix) {
+      return null;
+    }
+
+    const suffixWrapperCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-suffix")]: true,
+      ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+      ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix),
+      ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: suffixWrapperCls,
+      onMouseDown: this.handlePreventMouseDown,
+      onClick: this.handleClickPrefixOrSuffix
+    }, suffix);
+  }
+
+  render() {
+    var _context, _context2;
+
+    const _a = this.props,
+          {
+      addonAfter,
+      addonBefore,
+      autofocus,
+      className,
+      disabled,
+      placeholder,
+      prefix,
+      mode,
+      insetLabel,
+      validateStatus,
+      type,
+      readonly,
+      size,
+      suffix,
+      style,
+      showClear,
+      onEnterPress,
+      onClear,
+      hideSuffix,
+      inputStyle,
+      forwardRef,
+      maxLength,
+      getValueLength
+    } = _a,
+          rest = __rest(_a, ["addonAfter", "addonBefore", "autofocus", "className", "disabled", "placeholder", "prefix", "mode", "insetLabel", "validateStatus", "type", "readonly", "size", "suffix", "style", "showClear", "onEnterPress", "onClear", "hideSuffix", "inputStyle", "forwardRef", "maxLength", "getValueLength"]);
+
+    const {
+      value,
+      paddingLeft,
+      isFocus,
+      minLength: stateMinLength
+    } = this.state;
+    const suffixAllowClear = this.showClearBtn();
+    const suffixIsIcon = (0, _utils.isSemiIcon)(suffix);
+    const ref = forwardRef || this.inputRef;
+    const wrapperPrefix = "".concat(prefixCls, "-wrapper");
+    const wrapperCls = (0, _classnames.default)(wrapperPrefix, className, {
+      ["".concat(prefixCls, "-wrapper__with-prefix")]: prefix || insetLabel,
+      ["".concat(prefixCls, "-wrapper__with-suffix")]: suffix,
+      ["".concat(prefixCls, "-wrapper__with-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix),
+      ["".concat(prefixCls, "-wrapper__with-suffix-icon")]: suffixIsIcon,
+      ["".concat(prefixCls, "-wrapper__with-append")]: addonBefore,
+      ["".concat(prefixCls, "-wrapper__with-prepend")]: addonAfter,
+      ["".concat(prefixCls, "-wrapper__with-append-only")]: addonBefore && !addonAfter,
+      ["".concat(prefixCls, "-wrapper__with-prepend-only")]: !addonBefore && addonAfter,
+      ["".concat(wrapperPrefix, "-readonly")]: readonly,
+      ["".concat(wrapperPrefix, "-disabled")]: disabled,
+      ["".concat(wrapperPrefix, "-warning")]: validateStatus === 'warning',
+      ["".concat(wrapperPrefix, "-error")]: validateStatus === 'error',
+      ["".concat(wrapperPrefix, "-focus")]: isFocus,
+      ["".concat(wrapperPrefix, "-clearable")]: showClear,
+      ["".concat(wrapperPrefix, "-modebtn")]: mode === 'password',
+      ["".concat(wrapperPrefix, "-hidden")]: type === 'hidden',
+      [(0, _concat.default)(_context = "".concat(wrapperPrefix, "-")).call(_context, size)]: size
+    });
+    const inputCls = (0, _classnames.default)(prefixCls, {
+      [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, size)]: size,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-sibling-clearbtn")]: this.foundation.isAllowClear(),
+      ["".concat(prefixCls, "-sibling-modebtn")]: mode === 'password'
+    });
+    const inputValue = value === null || value === undefined ? '' : value;
+    const inputProps = (0, _assign.default)((0, _assign.default)({}, rest), {
+      style: (0, _assign.default)({
+        paddingLeft
+      }, inputStyle),
+      autoFocus: autofocus,
+      className: inputCls,
+      disabled,
+      readOnly: readonly,
+      type: this.foundation.handleInputType(type),
+      placeholder: placeholder,
+      onInput: e => this.foundation.handleInput(e),
+      onChange: e => this.foundation.handleChange(e.target.value, e),
+      onFocus: e => this.foundation.handleFocus(e),
+      onBlur: e => this.foundation.handleBlur(e),
+      onKeyUp: e => this.foundation.handleKeyUp(e),
+      onKeyDown: e => this.foundation.handleKeyDown(e),
+      onKeyPress: e => this.foundation.handleKeyPress(e),
+      value: inputValue
+    });
+
+    if (!(0, _isFunction2.default)(getValueLength)) {
+      inputProps.maxLength = maxLength;
+    }
+
+    if (stateMinLength) {
+      inputProps.minLength = stateMinLength;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls,
+      style: style,
+      onMouseEnter: e => this.handleMouseOver(e),
+      onMouseLeave: e => this.handleMouseLeave(e),
+      onClick: e => this.handleClick(e)
+    }, this.renderPrepend(), this.renderPrefix(), /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, inputProps, {
+      ref: ref
+    })), this.renderClearBtn(), this.renderSuffix(suffixAllowClear), this.renderModeBtn(), this.renderAppend());
+  }
+
+}
+
+exports.Input = Input;
+Input.propTypes = {
+  addonBefore: _propTypes.default.node,
+  addonAfter: _propTypes.default.node,
+  prefix: _propTypes.default.node,
+  suffix: _propTypes.default.node,
+  mode: _propTypes.default.oneOf(modeSet),
+  value: _propTypes.default.any,
+  defaultValue: _propTypes.default.any,
+  disabled: _propTypes.default.bool,
+  readonly: _propTypes.default.bool,
+  autofocus: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  showClear: _propTypes.default.bool,
+  hideSuffix: _propTypes.default.bool,
+  placeholder: _propTypes.default.any,
+  size: _propTypes.default.oneOf(sizeSet),
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  validateStatus: _propTypes.default.oneOf(statusSet),
+  onClear: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onInput: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onKeyUp: _propTypes.default.func,
+  onKeyPress: _propTypes.default.func,
+  onEnterPress: _propTypes.default.func,
+  insetLabel: _propTypes.default.node,
+  inputStyle: _propTypes.default.object,
+  getValueLength: _propTypes.default.func
+};
+Input.defaultProps = {
+  addonBefore: '',
+  addonAfter: '',
+  prefix: '',
+  suffix: '',
+  disabled: false,
+  readonly: false,
+  type: 'text',
+  showClear: false,
+  hideSuffix: false,
+  placeholder: '',
+  size: 'default',
+  className: '',
+  onClear: _noop2.default,
+  onChange: _noop2.default,
+  onBlur: _noop2.default,
+  onFocus: _noop2.default,
+  onInput: _noop2.default,
+  onKeyDown: _noop2.default,
+  onKeyUp: _noop2.default,
+  onKeyPress: _noop2.default,
+  onEnterPress: _noop2.default,
+  validateStatus: 'default'
+};
+
+const ForwardInput = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Input, (0, _assign.default)({}, props, {
+  forwardRef: ref
+})));
+
+var _default = ForwardInput;
+exports.default = _default;