@ucloud-fe/react-components 1.5.17 → 1.5.19

package/lib/components/Icon/Icon.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../../components/ConfigProvider/ConfigContext"));
+
+var _style = require("./style");
+
+var _excluded = ["type", "spin", "prefix", "className"];
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** 图标控件 */
+var Icon = function Icon(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var type = _ref.type,
+      spin = _ref.spin,
+      prefix = _ref.prefix,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var configContext = (0, _react.useContext)(_ConfigContext.default);
+  var finalPrefix = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    return prefix || configContext.iconDefaultPrefix || 'icon__';
+  }.bind(this), [configContext.iconDefaultPrefix, prefix]);
+  return /*#__PURE__*/_react.default.createElement(_style.IconWrap, (0, _extends2.default)({
+    className: (0, _classnames.default)(_style.prefixCls, "".concat(finalPrefix).concat(type), spin && "".concat(_style.prefixCls, "-spin"), className),
+    spin: spin
+  }, rest));
+}.bind(void 0);
+
+Icon.propTypes = {
+  type: _propTypes.default.string.isRequired,
+  spin: _propTypes.default.bool,
+  prefix: _propTypes.default.string
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Icon);
+
+exports.default = _default;

package/lib/components/Icon/index.d.ts

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;

package/lib/components/Icon/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _default = _Icon.default;
+exports.default = _default;

package/lib/components/Icon/style/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const prefixCls: string;
+export declare const IconWrap: import("react").ForwardRefExoticComponent<{
+    spin?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/Icon/style/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconWrap = exports.prefixCls = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
+var _style = require("../../../style");
+
+var _config = _interopRequireDefault(require("../../../config"));
+
+var _this = void 0;
+
+var _prefixCls = _config.default.prefixCls;
+var prefixCls = _prefixCls + '-icon';
+exports.prefixCls = prefixCls;
+var iconSpinMixin = /*#__PURE__*/(0, _core.css)(_style.spinMixin, ";line-height:normal;;label:iconSpinMixin;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ljb24vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU3lCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ljb24vc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IHsgc3Bpbk1peGluLCBzV3JhcCB9IGZyb20gJ3NyYy9zdHlsZSc7XG5pbXBvcnQgY29uZmlnIGZyb20gJ3NyYy9jb25maWcnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuZXhwb3J0IGNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLWljb24nO1xuXG5jb25zdCBpY29uU3Bpbk1peGluID0gY3NzYFxuICAgICR7c3Bpbk1peGlufTtcbiAgICBsaW5lLWhlaWdodDogbm9ybWFsO1xuYDtcblxuZXhwb3J0IGNvbnN0IEljb25XcmFwID0gc1dyYXA8eyBzcGluPzogYm9vbGVhbiB9Pih7fSkoXG4gICAgc3R5bGVkKCdpJykocHJvcHMgPT4ge1xuICAgICAgICBjb25zdCB7IHNwaW4gfSA9IHByb3BzO1xuXG4gICAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICAgICB2ZXJ0aWNhbC1hbGlnbjogYmFzZWxpbmU7XG4gICAgICAgICAgICAmJiYge1xuICAgICAgICAgICAgICAgICR7c3BpbiAmJiBpY29uU3Bpbk1peGlufTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgYDtcbiAgICB9KVxuKTtcbiJdfQ== */"));
+var IconWrap = (0, _style.sWrap)({})(( /*#__PURE__*/0, _styledBase.default)('i', {
+  target: "ehhwjce0",
+  label: "IconWrap"
+})(function (props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var spin = props.spin;
+  return /*#__PURE__*/(0, _core.css)("vertical-align:baseline;&&&{", spin && iconSpinMixin, ";};label:IconWrap;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ljb24vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9JY29uL3N0eWxlL2luZGV4LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IHNwaW5NaXhpbiwgc1dyYXAgfSBmcm9tICdzcmMvc3R5bGUnO1xuaW1wb3J0IGNvbmZpZyBmcm9tICdzcmMvY29uZmlnJztcblxuY29uc3QgeyBwcmVmaXhDbHM6IF9wcmVmaXhDbHMgfSA9IGNvbmZpZztcbmV4cG9ydCBjb25zdCBwcmVmaXhDbHMgPSBfcHJlZml4Q2xzICsgJy1pY29uJztcblxuY29uc3QgaWNvblNwaW5NaXhpbiA9IGNzc2BcbiAgICAke3NwaW5NaXhpbn07XG4gICAgbGluZS1oZWlnaHQ6IG5vcm1hbDtcbmA7XG5cbmV4cG9ydCBjb25zdCBJY29uV3JhcCA9IHNXcmFwPHsgc3Bpbj86IGJvb2xlYW4gfT4oe30pKFxuICAgIHN0eWxlZCgnaScpKHByb3BzID0+IHtcbiAgICAgICAgY29uc3QgeyBzcGluIH0gPSBwcm9wcztcblxuICAgICAgICByZXR1cm4gY3NzYFxuICAgICAgICAgICAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xuICAgICAgICAgICAgJiYmIHtcbiAgICAgICAgICAgICAgICAke3NwaW4gJiYgaWNvblNwaW5NaXhpbn07XG4gICAgICAgICAgICB9XG4gICAgICAgIGA7XG4gICAgfSlcbik7XG4iXX0= */"));
+}.bind(void 0), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ljb24vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZUkiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbi9zdHlsZS9pbmRleC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuXG5pbXBvcnQgeyBzcGluTWl4aW4sIHNXcmFwIH0gZnJvbSAnc3JjL3N0eWxlJztcbmltcG9ydCBjb25maWcgZnJvbSAnc3JjL2NvbmZpZyc7XG5cbmNvbnN0IHsgcHJlZml4Q2xzOiBfcHJlZml4Q2xzIH0gPSBjb25maWc7XG5leHBvcnQgY29uc3QgcHJlZml4Q2xzID0gX3ByZWZpeENscyArICctaWNvbic7XG5cbmNvbnN0IGljb25TcGluTWl4aW4gPSBjc3NgXG4gICAgJHtzcGluTWl4aW59O1xuICAgIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvbldyYXAgPSBzV3JhcDx7IHNwaW4/OiBib29sZWFuIH0+KHt9KShcbiAgICBzdHlsZWQoJ2knKShwcm9wcyA9PiB7XG4gICAgICAgIGNvbnN0IHsgc3BpbiB9ID0gcHJvcHM7XG5cbiAgICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgICAgIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbiAgICAgICAgICAgICYmJiB7XG4gICAgICAgICAgICAgICAgJHtzcGluICYmIGljb25TcGluTWl4aW59O1xuICAgICAgICAgICAgfVxuICAgICAgICBgO1xuICAgIH0pXG4pO1xuIl19 */"));
+exports.IconWrap = IconWrap;

package/lib/components/Input/.recodo/interaction.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _interactionDemo = _interopRequireWildcard(require("interaction-demo"));
+
+var _reactComponents = require("@ucloud-fe/react-components");
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var config = {
+  size: ['sm', 'md', 'lg'],
+  clearable: 'boolean',
+  disabled: 'boolean',
+  block: _interactionDemo.USE_DEFINE,
+  status: _interactionDemo.USE_DEFINE,
+  prefix: {
+    type: 'boolean',
+    optionToProps: function optionToProps(prefix) {
+      (0, _newArrowCheck2.default)(this, _this);
+      return prefix ? /*#__PURE__*/_react.default.createElement(_reactComponents.Icon, {
+        type: "circle"
+      }) : undefined;
+    }.bind(void 0)
+  },
+  suffix: {
+    type: 'boolean',
+    optionToProps: function optionToProps(suffix) {
+      (0, _newArrowCheck2.default)(this, _this);
+      return suffix ? /*#__PURE__*/_react.default.createElement(_reactComponents.Icon, {
+        type: "circle"
+      }) : undefined;
+    }.bind(void 0)
+  }
+};
+var searchConfig = {
+  size: ['sm', 'md', 'lg'],
+  clearable: 'boolean',
+  disabled: 'boolean',
+  block: 'boolean',
+  prefix: {
+    type: 'boolean',
+    optionToProps: function optionToProps(prefix) {
+      (0, _newArrowCheck2.default)(this, _this);
+      return prefix ? /*#__PURE__*/_react.default.createElement(_reactComponents.Icon, {
+        type: "circle"
+      }) : undefined;
+    }.bind(void 0)
+  }
+};
+var list = [{
+  title: 'Input',
+  children: /*#__PURE__*/_react.default.createElement(_interactionDemo.default, {
+    config: config,
+    initialState: {
+      value: ''
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactComponents.Input, {
+    onChange: console.log
+  }))
+}, {
+  title: 'Search',
+  children: /*#__PURE__*/_react.default.createElement(_interactionDemo.default, {
+    config: searchConfig,
+    initialState: {
+      value: ''
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactComponents.Input.Search, {
+    onChange: console.log
+  }))
+}];
+
+var Demo = function Demo() {
+  (0, _newArrowCheck2.default)(this, _this);
+  return /*#__PURE__*/_react.default.createElement(_interactionDemo.Group, {
+    list: list
+  });
+}.bind(void 0);
+
+var _default = Demo;
+exports.default = _default;

package/lib/components/Input/Input.d.ts

@@ -0,0 +1,45 @@
+import React, { InputHTMLAttributes, ReactNode } from 'react';
+import { Size } from '../../type';
+export interface DefinedInputProps {
+    /**
+     * @deprecated 使用 suffix 替换
+     * 图标，传入 string 时为图标类型，也可直接传入图标组件
+     */
+    icon?: string | ReactNode;
+    /** 前缀 */
+    prefix?: ReactNode;
+    /** 后缀 */
+    suffix?: ReactNode;
+    /** 是否可清空 */
+    clearable?: boolean | {
+        autoFocus?: boolean;
+        callOnChange?: boolean;
+    };
+    /** 尺寸 */
+    size?: Size;
+    /** 状态 */
+    status?: 'default' | 'error' | string;
+    /** 展示变更为块占位 */
+    block?: boolean;
+    /** 点击 clear 按钮回调 */
+    onClear?: () => void;
+    /** 自定义样式 */
+    customStyle?: {
+        border?: string;
+        boxShadow?: string;
+        background?: string;
+    };
+    /** @ignore */
+    onFocus?: InputHTMLAttributes<HTMLInputElement>['onFocus'];
+    /** @ignore */
+    onBlur?: InputHTMLAttributes<HTMLInputElement>['onBlur'];
+}
+export declare type InputRef = {
+    /** input 焦点 */
+    focus: (options?: FocusOptions) => void;
+    /** input 元素 */
+    input?: HTMLInputElement | null;
+};
+export declare type InputProps = DefinedInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof DefinedInputProps>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DefinedInputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof DefinedInputProps> & React.RefAttributes<InputRef>>>;
+export default _default;

package/lib/components/Input/Input.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ControllerContext = _interopRequireDefault(require("../../components/Form/ControllerContext"));
+
+var _noop = _interopRequireDefault(require("../../utils/noop"));
+
+var _useUncontrolled3 = _interopRequireDefault(require("../../hooks/useUncontrolled"));
+
+var _style = require("./style");
+
+var _excluded = ["value", "defaultValue", "onChange", "disabled", "size", "icon", "prefix", "suffix", "clearable", "block", "style", "status", "customStyle", "className", "onFocus", "onBlur", "onClear"];
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var _value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      _onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      icon = _ref.icon,
+      prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      clearable = _ref.clearable,
+      block = _ref.block,
+      style = _ref.style,
+      _status = _ref.status,
+      customStyle = _ref.customStyle,
+      className = _ref.className,
+      _ref$onFocus = _ref.onFocus,
+      onFocus = _ref$onFocus === void 0 ? _noop.default : _ref$onFocus,
+      _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? _noop.default : _ref$onBlur,
+      _ref$onClear = _ref.onClear,
+      onClear = _ref$onClear === void 0 ? _noop.default : _ref$onClear,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var valueGetter = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    return e.target.value;
+  }.bind(this), []);
+
+  var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue || '', _onChange, {
+    getter: valueGetter
+  }),
+      _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
+      value = _useUncontrolled2[0],
+      onChange = _useUncontrolled2[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  var focus = (0, _react.useCallback)(function (options) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    inputRef.current && inputRef.current.focus(options);
+  }.bind(this), []);
+  (0, _react.useImperativeHandle)(ref, function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    return {
+      input: inputRef.current,
+      focus: focus
+    };
+  }.bind(this), [focus]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    setFocused(true);
+    onFocus(e);
+  }.bind(this), [onFocus]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    setFocused(false);
+    onBlur(e);
+  }.bind(this), [onBlur]);
+  var handleClearMouseDown = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    e.preventDefault();
+    e.stopPropagation();
+  }.bind(this), []);
+  var handleClear = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    if (disabled) return;
+    e.stopPropagation();
+    onClear();
+    var input = inputRef.current;
+    if (!input) return;
+    e.target = input;
+    e.currentTarget = input;
+    var cacheV = input.value;
+
+    if ((clearable === null || clearable === void 0 ? void 0 : clearable.callOnChange) !== false) {
+      input.value = '';
+      onChange(e);
+      input.value = cacheV;
+    }
+
+    if ((clearable === null || clearable === void 0 ? void 0 : clearable.autoFocus) !== false) {
+      input.focus();
+    }
+  }.bind(this), [clearable, disabled, onChange, onClear]);
+  var handleWrapMouseDown = (0, _react.useCallback)(function (e) {
+    var _inputRef$current;
+
+    (0, _newArrowCheck2.default)(this, _this2);
+    // 避免影响输入框的选中、移动光标等操作
+    if (e.target === inputRef.current) return;
+    e.preventDefault();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }.bind(this), []);
+
+  var _useContext = (0, _react.useContext)(_ControllerContext.default),
+      status = _useContext.status;
+
+  return /*#__PURE__*/_react.default.createElement(_style.InputWrap, {
+    size: size,
+    focused: focused,
+    style: style,
+    disabled: disabled,
+    status: _status || status,
+    customStyle: customStyle,
+    block: block,
+    className: className,
+    empty: !value,
+    onMouseDown: handleWrapMouseDown
+  }, /*#__PURE__*/_react.default.createElement(_style.Prefix, null, prefix), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.inputBlockWrapCls
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
+    value: value,
+    onChange: onChange,
+    ref: inputRef,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: disabled
+  })), /*#__PURE__*/_react.default.createElement(_style.Clear, {
+    clearable: clearable,
+    onMouseDown: handleClearMouseDown,
+    onClick: handleClear
+  })), /*#__PURE__*/_react.default.createElement(_style.Suffix, {
+    icon: icon
+  }, suffix));
+}.bind(void 0));
+
+var _default = /*#__PURE__*/_react.default.memo(Input);
+
+exports.default = _default;

package/lib/components/Input/Search.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InputRef } from './Input';
+export interface SearchProps {
+    /** 搜索回调，回车/点击搜索按钮触发 */
+    onSearch?: (value: string) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<SearchProps & import("./Input").DefinedInputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof import("./Input").DefinedInputProps> & React.RefAttributes<InputRef>>>;
+export default _default;

package/lib/components/Input/Search.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _KeyCode = _interopRequireDefault(require("../../utils/KeyCode"));
+
+var _noop = _interopRequireDefault(require("../../utils/noop"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _style = require("./style");
+
+var _excluded = ["onSearch", "onKeyDown", "disabled"];
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// eslint-disable-next-line react/display-name
+var Search = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var _onSearch = _ref.onSearch,
+      onKeyDown = _ref.onKeyDown,
+      disabled = _ref.disabled,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var inputRef = (0, _react.useRef)(null);
+  var onSearch = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    !disabled && _onSearch && _onSearch(inputRef.current && inputRef.current.input && inputRef.current.input.value || '');
+  }.bind(this), [_onSearch, disabled]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    return inputRef.current || {
+      focus: _noop.default,
+      input: null
+    };
+  }.bind(this), []);
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, rest, {
+    onKeyDown: function (e) {
+      (0, _newArrowCheck2.default)(this, _this2);
+
+      if (e.keyCode === _KeyCode.default['ENTER']) {
+        onSearch();
+        e.preventDefault();
+      }
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+    }.bind(this),
+    disabled: disabled,
+    ref: inputRef,
+    suffix: /*#__PURE__*/_react.default.createElement(_style.SearchIcon, {
+      type: "search",
+      disabled: disabled,
+      onClick: onSearch
+    })
+  }));
+}.bind(void 0));
+
+var _default = /*#__PURE__*/_react.default.memo(Search);
+
+exports.default = _default;

package/lib/components/Input/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import NumberInput from '../../components/NumberInput';
+import Textarea from '../../components/Textarea';
+import { InputProps } from './Input';
+declare const ExportClassInput: import("react").ComponentClass<import("./Input").DefinedInputProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, keyof import("./Input").DefinedInputProps> & import("react").RefAttributes<import("./Input").InputRef>, any> & {
+    Search: import("react").ComponentClass<import("./Search").SearchProps & import("./Input").DefinedInputProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, keyof import("./Input").DefinedInputProps> & import("react").RefAttributes<import("./Input").InputRef>, any>;
+    Number: typeof NumberInput;
+    Textarea: typeof Textarea;
+    Sizes: ["sm", "md", "lg"];
+};
+export type { InputProps };
+export default ExportClassInput;

package/lib/components/Input/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _NumberInput = _interopRequireDefault(require("../../components/NumberInput"));
+
+var _Textarea = _interopRequireDefault(require("../../components/Textarea"));
+
+var _type = require("../../type");
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _Search = _interopRequireDefault(require("./Search"));
+
+// bind to avoid demo crash
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var ExportInput = (0, _type.ExportComponent)(_Input.default, {
+  Search: _Search.default,
+  Number: _NumberInput.default,
+  Textarea: _Textarea.default,
+  Sizes: _type.Sizes
+});
+var ClassInput = (0, _type.FunctionToClassComponent)(_Input.default);
+var ClassSearch = (0, _type.FunctionToClassComponent)(_Search.default);
+var ExportClassInput = (0, _type.ExportComponent)(ClassInput, {
+  Search: ClassSearch,
+  Number: _NumberInput.default,
+  Textarea: _Textarea.default,
+  Sizes: _type.Sizes
+});
+var _default = ExportClassInput;
+exports.default = _default;

package/lib/components/Input/style/index.d.ts

@@ -0,0 +1,34 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import SvgIcon from '../../../components/SvgIcon';
+import { InputProps } from '../Input';
+export declare const prefixCls: string;
+export declare const focusedCls: string;
+export declare const disabledCls: string;
+export declare const blockCls: string;
+export declare const inputPrefixCls: string;
+export declare const inputSuffixCls: string;
+export declare const clearCls: string;
+export declare const inputBlockWrapCls: string;
+export declare const SearchIcon: import("@emotion/styled-base").StyledComponent<Pick<any, string | number | symbol> & React.RefAttributes<SvgIcon>, Pick<Pick<any, string | number | symbol> & React.RefAttributes<SvgIcon>, string | number | symbol>, object>;
+export declare const Prefix: React.NamedExoticComponent<object>;
+export declare const Suffix: React.NamedExoticComponent<{
+    icon?: string | ReactNode;
+    children?: ReactNode;
+}>;
+export declare const Clear: React.NamedExoticComponent<Pick<InputProps, "clearable"> & React.HTMLAttributes<HTMLSpanElement>>;
+export declare const InputPart: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    stretch?: boolean | undefined;
+    visible?: boolean | undefined;
+}, object>;
+export declare type InputWrapProps = Pick<InputProps, 'block' | 'disabled' | 'status' | 'customStyle'> & Required<Pick<InputProps, 'size'>> & {
+    focused?: boolean;
+    empty?: boolean;
+    cursor?: CSSProperties['cursor'];
+};
+export declare const InputWrap: React.ForwardRefExoticComponent<Pick<InputProps, "block" | "customStyle" | "disabled" | "status"> & Required<Pick<InputProps, "size">> & {
+    focused?: boolean | undefined;
+    empty?: boolean | undefined;
+    cursor?: CSSProperties['cursor'];
+} & React.HTMLAttributes<HTMLSpanElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;