@hw-component/form 0.0.8-beta-v1 → 0.0.8-beta-v2

package/es/Form/FormItem/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { HFormInstance, HItemProps } from "../modal";
-export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, ...props }: import("../modal").HFormItemProps) => JSX.Element;
+export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
 interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
     form: HFormInstance;
 }

package/es/Form/config.d.ts

@@ -19,12 +19,13 @@ declare const componentConfig: {
         requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
     };
     timePicker: ({ value, format, onChange, disabledDate, ...props }: import("../TDPicker/modal").HTimePickerProps) => JSX.Element;
-    input: ({ ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
+    input: ({ copy, value, addonAfter, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
     upload: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
     urlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("../Upload/modal").IUrlUploadProps) => JSX.Element;
     submit: ({ text, type, form, loading, position, reset, ...props }: import("../Submit").ISubmitProps) => JSX.Element;
     textArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
     colorInput: ({ value, onChange, defaultColor, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
     cascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("../Cascader").HCascaderProps) => JSX.Element;
+    verificationCodeInput: () => JSX.Element;
 };
 export default componentConfig;

package/es/Form/config.js

@@ -17,9 +17,10 @@ import HSubmit from '../Submit/index.js';
 import TextArea from '../TextArea/index.js';
 import ColorInput from '../Input/ColorInput/index.js';
 import Cascader from '../Cascader/index.js';
+import HVerificationCodeInput from '../Input/VerificationCodeInput.js';
 
 var placeholderConfig = {
-  inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
+  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput"],
   selectType: ["select", "datePicker", "timePicker", "colorInput"]
 };
 var componentConfig = {
@@ -40,7 +41,8 @@ var componentConfig = {
   submit: HSubmit,
   textArea: TextArea,
   colorInput: ColorInput,
-  cascader: Cascader
+  cascader: Cascader,
+  verificationCodeInput: HVerificationCodeInput
 };
 
 export { componentConfig as default, placeholderConfig };

package/es/Input/VerificationCodeInput.d.ts

@@ -0,0 +1,8 @@
+import type { HFormInstance } from "@/components/Form/modal";
+import type { InputProps } from "antd";
+interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
+    request?: (value: any) => Promise<any>;
+    form?: HFormInstance;
+}
+declare const _default: ({ value, request, form, onChange, ...props }: IVerificationCodeInputProps) => JSX.Element;
+export default _default;

package/es/Input/VerificationCodeInput.js

@@ -0,0 +1,110 @@
+// welcome to hoo hoo hoo
+import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.promise.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.get-own-property-descriptor.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.get-own-property-descriptors.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import Index from './ButtonInput.js';
+import { useRequest } from 'ahooks';
+
+var _excluded = ["value", "request", "form", "onChange"];
+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; }
+var HVerificationCodeInput = (function (_ref) {
+  var value = _ref.value,
+    request = _ref.request,
+    form = _ref.form,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    countdown = _useState2[0],
+    setCountdown = _useState2[1];
+  var timer = useMemo(function () {
+    return {
+      time: undefined
+    };
+  }, []);
+  var timerControl = useCallback(function () {
+    timer.time = setInterval(function () {
+      setCountdown(function () {
+        var oldVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        var newVal = oldVal - 1;
+        if (newVal <= 0) {
+          clearInterval(timer.time);
+        }
+        return newVal;
+      });
+    }, 1000);
+  }, []);
+  var _useRequest = useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var val, result;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (request) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", Promise.resolve({}));
+          case 2:
+            val = form === null || form === void 0 ? void 0 : form.getFieldsValue();
+            _context.next = 5;
+            return request === null || request === void 0 ? void 0 : request(val);
+          case 5:
+            result = _context.sent;
+            if (result) {
+              setCountdown(60);
+            }
+            timerControl();
+            return _context.abrupt("return", result);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), {
+      manual: true
+    }),
+    run = _useRequest.run,
+    loading = _useRequest.loading;
+  useEffect(function () {
+    return function () {
+      clearInterval(timer.time);
+    };
+  }, []);
+  var text = function text() {
+    if (!countdown) {
+      return "获取验证码";
+    }
+    var countdownStr = "".concat(countdown);
+    if (countdown < 10) {
+      countdownStr = "0".concat(countdownStr);
+    }
+    return "".concat(countdownStr, "\u79D2\u540E\u91CD\u65B0\u83B7\u53D6");
+  };
+  return jsx(Index, _objectSpread(_objectSpread({
+    value: value,
+    onChange: onChange,
+    buttonProps: {
+      onClick: run,
+      loading: loading,
+      disabled: !!countdown
+    }
+  }, props), {}, {
+    children: text()
+  }));
+});
+
+export { HVerificationCodeInput as default };
+// powered by hdj

package/es/index.d.ts

@@ -6,7 +6,7 @@ export { useHDialogForm } from "./DialogForm/hooks";
 export { default as HFormConnect } from "./Form/HFormConnect";
 export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
 export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
-export declare const HInput: ({ ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
+export declare const HInput: ({ copy, value, addonAfter, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
 export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;
@@ -25,3 +25,4 @@ export declare const HColorInput: ({ value, onChange, defaultColor, ...props }:
 export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
 export declare const HDrawerForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, onValuesChange, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
 export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
+export declare const HVerificationCodeInput: () => JSX.Element;

package/es/index.js

@@ -29,6 +29,7 @@ var HColorInput = componentConfig.colorInput;
 var HModalForm = ModalForm;
 var HDrawerForm = DrawerForm;
 var HCascader = componentConfig.cascader;
+var HVerificationCodeInput = componentConfig.verificationCodeInput;
 
-export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, HTextArea, HTimePicker, HUpload, HUrlUpload };
+export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, HTextArea, HTimePicker, HUpload, HUrlUpload, HVerificationCodeInput };
 // powered by hdj

package/lib/Form/FormItem/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { HFormInstance, HItemProps } from "../modal";
-export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, ...props }: import("../modal").HFormItemProps) => JSX.Element;
+export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
 interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
     form: HFormInstance;
 }

package/lib/Form/config.d.ts

@@ -19,12 +19,13 @@ declare const componentConfig: {
         requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
     };
     timePicker: ({ value, format, onChange, disabledDate, ...props }: import("../TDPicker/modal").HTimePickerProps) => JSX.Element;
-    input: ({ ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
+    input: ({ copy, value, addonAfter, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
     upload: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
     urlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("../Upload/modal").IUrlUploadProps) => JSX.Element;
     submit: ({ text, type, form, loading, position, reset, ...props }: import("../Submit").ISubmitProps) => JSX.Element;
     textArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
     colorInput: ({ value, onChange, defaultColor, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
     cascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("../Cascader").HCascaderProps) => JSX.Element;
+    verificationCodeInput: () => JSX.Element;
 };
 export default componentConfig;

package/lib/Form/config.js

@@ -20,9 +20,10 @@ var index$9 = require('../Submit/index.js');
 var index$a = require('../TextArea/index.js');
 var index$b = require('../Input/ColorInput/index.js');
 var index$c = require('../Cascader/index.js');
+var VerificationCodeInput = require('../Input/VerificationCodeInput.js');
 
 var placeholderConfig = {
-  inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
+  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput"],
   selectType: ["select", "datePicker", "timePicker", "colorInput"]
 };
 var componentConfig = {
@@ -43,7 +44,8 @@ var componentConfig = {
   submit: index$9.default,
   textArea: index$a.default,
   colorInput: index$b.default,
-  cascader: index$c.default
+  cascader: index$c.default,
+  verificationCodeInput: VerificationCodeInput.default
 };
 
 exports.default = componentConfig;

package/lib/Input/VerificationCodeInput.d.ts

@@ -0,0 +1,8 @@
+import type { HFormInstance } from "@/components/Form/modal";
+import type { InputProps } from "antd";
+interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
+    request?: (value: any) => Promise<any>;
+    form?: HFormInstance;
+}
+declare const _default: ({ value, request, form, onChange, ...props }: IVerificationCodeInputProps) => JSX.Element;
+export default _default;

package/lib/Input/VerificationCodeInput.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.promise.js');
+require('core-js/modules/es.object.keys.js');
+require('core-js/modules/es.symbol.js');
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.object.get-own-property-descriptor.js');
+require('core-js/modules/web.dom-collections.for-each.js');
+require('core-js/modules/es.object.get-own-property-descriptors.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ButtonInput = require('./ButtonInput.js');
+var ahooks = require('ahooks');
+
+var _excluded = ["value", "request", "form", "onChange"];
+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; }
+var HVerificationCodeInput = (function (_ref) {
+  var value = _ref.value,
+    request = _ref.request,
+    form = _ref.form,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    countdown = _useState2[0],
+    setCountdown = _useState2[1];
+  var timer = React.useMemo(function () {
+    return {
+      time: undefined
+    };
+  }, []);
+  var timerControl = React.useCallback(function () {
+    timer.time = setInterval(function () {
+      setCountdown(function () {
+        var oldVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        var newVal = oldVal - 1;
+        if (newVal <= 0) {
+          clearInterval(timer.time);
+        }
+        return newVal;
+      });
+    }, 1000);
+  }, []);
+  var _useRequest = ahooks.useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var val, result;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (request) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", Promise.resolve({}));
+          case 2:
+            val = form === null || form === void 0 ? void 0 : form.getFieldsValue();
+            _context.next = 5;
+            return request === null || request === void 0 ? void 0 : request(val);
+          case 5:
+            result = _context.sent;
+            if (result) {
+              setCountdown(60);
+            }
+            timerControl();
+            return _context.abrupt("return", result);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), {
+      manual: true
+    }),
+    run = _useRequest.run,
+    loading = _useRequest.loading;
+  React.useEffect(function () {
+    return function () {
+      clearInterval(timer.time);
+    };
+  }, []);
+  var text = function text() {
+    if (!countdown) {
+      return "获取验证码";
+    }
+    var countdownStr = "".concat(countdown);
+    if (countdown < 10) {
+      countdownStr = "0".concat(countdownStr);
+    }
+    return "".concat(countdownStr, "\u79D2\u540E\u91CD\u65B0\u83B7\u53D6");
+  };
+  return jsxRuntime.jsx(ButtonInput.default, _objectSpread(_objectSpread({
+    value: value,
+    onChange: onChange,
+    buttonProps: {
+      onClick: run,
+      loading: loading,
+      disabled: !!countdown
+    }
+  }, props), {}, {
+    children: text()
+  }));
+});
+
+exports.default = HVerificationCodeInput;
+// powered by h

package/lib/index.d.ts

@@ -6,7 +6,7 @@ export { useHDialogForm } from "./DialogForm/hooks";
 export { default as HFormConnect } from "./Form/HFormConnect";
 export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
 export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
-export declare const HInput: ({ ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
+export declare const HInput: ({ copy, value, addonAfter, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
 export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;
@@ -25,3 +25,4 @@ export declare const HColorInput: ({ value, onChange, defaultColor, ...props }:
 export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
 export declare const HDrawerForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, onValuesChange, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
 export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
+export declare const HVerificationCodeInput: () => JSX.Element;

package/lib/index.js

@@ -30,6 +30,7 @@ var HColorInput = config.default.colorInput;
 var HModalForm = ModalForm.default;
 var HDrawerForm = index$2.default;
 var HCascader = config.default.cascader;
+var HVerificationCodeInput = config.default.verificationCodeInput;
 
 exports.HForm = index.default;
 exports.useHForm = useHForm.default;
@@ -56,4 +57,5 @@ exports.HTextArea = HTextArea;
 exports.HTimePicker = HTimePicker;
 exports.HUpload = HUpload;
 exports.HUrlUpload = HUrlUpload;
+exports.HVerificationCodeInput = HVerificationCodeInput;
 // powered by h

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.8-beta-v1",
+  "version": "0.0.8-beta-v2",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Form/config.ts

@@ -16,8 +16,16 @@ import HSubmit from "../Submit";
 import TextArea from "../TextArea";
 import ColorInput from "../Input/ColorInput";
 import Cascader from "../Cascader";
+import HVerificationCodeInput from "../Input/VerificationCodeInput";
+
 export const placeholderConfig = {
-  inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
+  inputType: [
+    "input",
+    "inputNumber",
+    "selectInput",
+    "buttonInput",
+    "verificationCodeInput",
+  ],
   selectType: ["select", "datePicker", "timePicker", "colorInput"],
 };
 const componentConfig = {
@@ -39,6 +47,7 @@ const componentConfig = {
   textArea: TextArea,
   colorInput: ColorInput,
   cascader: Cascader,
+  verificationCodeInput: HVerificationCodeInput,
 };
 
 export default componentConfig;

package/src/components/Input/VerificationCodeInput.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import ButtonInput from "./ButtonInput";
+import { useRequest } from "ahooks";
+import type { HFormInstance } from "@/components/Form/modal";
+import type { InputProps } from "antd";
+interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
+  request?: (value) => Promise<any>;
+  form?: HFormInstance;
+}
+export default ({
+  value,
+  request,
+  form,
+  onChange,
+  ...props
+}: IVerificationCodeInputProps) => {
+  const [countdown, setCountdown] = useState<number>(0);
+  const timer = useMemo<{ time:any }>(() => {
+    return {
+      time: undefined,
+    };
+  }, []);
+  const timerControl = useCallback(() => {
+    timer.time = setInterval(() => {
+      setCountdown((oldVal = 0) => {
+        const newVal = oldVal - 1;
+        if (newVal <= 0) {
+          clearInterval(timer.time);
+        }
+        return newVal;
+      });
+    }, 1000);
+  }, []);
+  const { run, loading } = useRequest(
+    async () => {
+      if (!request) {
+        return Promise.resolve({});
+      }
+      const val = form?.getFieldsValue();
+      const result = await request?.(val);
+      if (result) {
+        setCountdown(60);
+      }
+      timerControl();
+      return result;
+    },
+    { manual: true }
+  );
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.time);
+    };
+  }, []);
+  const text = () => {
+    if (!countdown) {
+      return "获取验证码";
+    }
+    let countdownStr = `${countdown}`;
+    if (countdown < 10) {
+      countdownStr = `0${countdownStr}`;
+    }
+    return `${countdownStr}秒后重新获取`;
+  };
+  return (
+    <ButtonInput
+      value={value}
+      onChange={onChange}
+      buttonProps={{ onClick: run, loading, disabled: !!countdown }}
+      {...props}
+    >
+      {text()}
+    </ButtonInput>
+  );
+};

package/src/components/Select/hooks/changeHooks.tsx

@@ -104,7 +104,7 @@ const matchNotFind = (
     return single({ options, value, noMatchItemRender });
   }
   if (mode === "multiple") {
-    return multiple({ options, value, noMatchItemRender }, oldVale)||[];
+    return multiple({ options, value, noMatchItemRender }, oldVale) || [];
   }
   return tag({ options, value }, oldVale);
 }; //不匹配

package/src/components/index.tsx

@@ -29,3 +29,4 @@ export const HColorInput = FormConfig.colorInput;
 export const HModalForm = ModalForm;
 export const HDrawerForm = DrawerForm;
 export const HCascader = FormConfig.cascader;
+export const HVerificationCodeInput = FormConfig.verificationCodeInput;

package/src/pages/DrawerForm/index.tsx

@@ -96,6 +96,16 @@ const data = [
     type: "urlUpload",
     rules: [{ required: true }],
   },
+  {
+    label: "验证码",
+    type: "verificationCodeInput",
+    name: "verificationCodeInput",
+    itemProps: {
+      request: () => {
+        return Promise.resolve({ code: 200 });
+      },
+    },
+  },
 ];
 export default () => {
   const modalForm = useHDialogForm();

package/src/pages/Form/index.tsx

@@ -147,6 +147,16 @@ const formData = (options) => {
         ],
       },
     },
+    {
+      label: "验证码",
+      type: "verificationCodeInput",
+      name: "verificationCodeInput",
+      itemProps: {
+        request: () => {
+          return Promise.resolve({ code: 200 });
+        },
+      },
+    },
     {
       type: "submit",
     },

package/src/pages/Input/index.tsx

@@ -4,6 +4,7 @@ import {
   HButtonInput,
   HInputNumber,
   HColorInput,
+  HVerificationCodeInput,
 } from "../../components";
 import { Space } from "antd";
 export default () => {
@@ -19,6 +20,11 @@ export default () => {
       <HButtonInput>点我</HButtonInput>
       <HInputNumber />
       <HColorInput />
+      <HVerificationCodeInput
+        request={() => {
+          return Promise.resolve({ code: 200 });
+        }}
+      />
     </Space>
   );
 };

package/src/pages/ModalForm/index.tsx

@@ -120,6 +120,16 @@ const data = [
     },
     rules: [{ required: true }],
   },
+  {
+    label: "验证码",
+    type: "verificationCodeInput",
+    name: "verificationCodeInput",
+    itemProps: {
+      request: () => {
+        return Promise.resolve({ code: 200 });
+      },
+    },
+  },
 ];
 let num = 0;
 export default () => {

package/src/pages/Select/index.tsx

@@ -1,14 +1,15 @@
 import { HSelect } from "../../components";
 import { Space } from "antd";
-import {useState} from "react";
+import { useState } from "react";
 export default () => {
-  const [selectVal,setSelectVal]=useState([10]);
+  const [selectVal, setSelectVal] = useState([10]);
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HSelect
         options={[{ label: "测试", value: 1 }]}
         value={100}
         placeholder="基础"
+        allowClear={true}
       />
       <HSelect
         fieldNames={{ label: "name", value: "value" }}
@@ -19,16 +20,18 @@ export default () => {
         placeholder="多选"
         value={selectVal}
         onChange={(val, option) => {
-            setSelectVal(val);
+          setSelectVal(val);
         }}
         allSelect={true}
         mode={"multiple"}
+        allowClear={true}
         showSearch={true}
       />
       <HSelect
         mode={"tags"}
         placeholder="tags模式"
         showSearch={true}
+        allowClear={true}
         options={[
           { label: "测试1", value: 10 },
           { label: "测试2", value: 20 },