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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/es/DialogForm/DrawerForm/index.d.ts +1 -1
  2. package/es/DialogForm/DrawerForm/index.js +5 -2
  3. package/es/DialogForm/ModalForm.d.ts +1 -1
  4. package/es/DialogForm/ModalForm.js +6 -2
  5. package/es/DialogForm/hooks.d.ts +1 -1
  6. package/es/DialogForm/hooks.js +5 -2
  7. package/es/DialogForm/modal.d.ts +2 -0
  8. package/es/Form/FormItem/hooks.d.ts +1 -1
  9. package/es/Form/config.d.ts +2 -1
  10. package/es/Form/config.js +4 -2
  11. package/es/Input/VerificationCodeInput.d.ts +8 -0
  12. package/es/Input/VerificationCodeInput.js +110 -0
  13. package/es/index.d.ts +2 -1
  14. package/es/index.js +2 -1
  15. package/lib/DialogForm/DrawerForm/index.d.ts +1 -1
  16. package/lib/DialogForm/DrawerForm/index.js +5 -2
  17. package/lib/DialogForm/ModalForm.d.ts +1 -1
  18. package/lib/DialogForm/ModalForm.js +6 -2
  19. package/lib/DialogForm/hooks.d.ts +1 -1
  20. package/lib/DialogForm/hooks.js +5 -2
  21. package/lib/DialogForm/modal.d.ts +2 -0
  22. package/lib/Form/FormItem/hooks.d.ts +1 -1
  23. package/lib/Form/config.d.ts +2 -1
  24. package/lib/Form/config.js +4 -2
  25. package/lib/Input/VerificationCodeInput.d.ts +8 -0
  26. package/lib/Input/VerificationCodeInput.js +113 -0
  27. package/lib/index.d.ts +2 -1
  28. package/lib/index.js +2 -0
  29. package/package.json +1 -1
  30. package/src/components/DialogForm/DrawerForm/index.tsx +2 -0
  31. package/src/components/DialogForm/ModalForm.tsx +4 -1
  32. package/src/components/DialogForm/hooks.ts +4 -1
  33. package/src/components/DialogForm/modal.ts +2 -0
  34. package/src/components/Form/config.ts +10 -1
  35. package/src/components/Input/VerificationCodeInput.tsx +74 -0
  36. package/src/components/Select/hooks/changeHooks.tsx +1 -1
  37. package/src/components/index.tsx +1 -0
  38. package/src/pages/DrawerForm/index.tsx +11 -0
  39. package/src/pages/Form/index.tsx +10 -0
  40. package/src/pages/Input/index.tsx +6 -0
  41. package/src/pages/ModalForm/index.tsx +11 -0
  42. package/src/pages/Select/index.tsx +6 -3
@@ -1,3 +1,3 @@
1
1
  import type { DialogFormProps } from "../modal";
2
- declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, onValuesChange, ...props }: DialogFormProps) => JSX.Element;
2
+ declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, onValuesChange, autoClear, ...props }: DialogFormProps) => JSX.Element;
3
3
  export default _default;
@@ -18,7 +18,7 @@ import Title from './Title.js';
18
18
  import Footer from './Footer.js';
19
19
  import Index, { useFormConfigContext } from '../../Form/Context/FormConfigProvider.js';
20
20
 
21
- var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "closable", "initialValues", "labelWidth", "onOk", "onFinish", "size", "form", "footer", "params", "onValuesChange"];
21
+ var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "closable", "initialValues", "labelWidth", "onOk", "onFinish", "size", "form", "footer", "params", "onValuesChange", "autoClear"];
22
22
  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; }
23
23
  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; }
24
24
  var DrawerForm = (function (_ref) {
@@ -41,6 +41,8 @@ var DrawerForm = (function (_ref) {
41
41
  var footer = _ref.footer,
42
42
  params = _ref.params,
43
43
  onValuesChange = _ref.onValuesChange,
44
+ _ref$autoClear = _ref.autoClear,
45
+ autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
44
46
  props = _objectWithoutProperties(_ref, _excluded);
45
47
  var currentForm = useCurrentForm(dialogForm);
46
48
  var providerConfig = useFormConfigContext();
@@ -51,7 +53,8 @@ var DrawerForm = (function (_ref) {
51
53
  dialogForm: currentForm,
52
54
  params: params,
53
55
  title: title,
54
- onCancel: onCancel
56
+ onCancel: onCancel,
57
+ autoClear: autoClear
55
58
  }),
56
59
  modalVisible = _useModifyProps.modalVisible,
57
60
  modalFormData = _useModifyProps.modalFormData,
@@ -1,3 +1,3 @@
1
1
  import type { DialogFormProps } from "./modal";
2
- declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, ...props }: DialogFormProps) => JSX.Element;
2
+ declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, autoClear, ...props }: DialogFormProps) => JSX.Element;
3
3
  export default _default;
@@ -16,7 +16,7 @@ import HForm from '../Form/index.js';
16
16
  import Index, { useFormConfigContext } from '../Form/Context/FormConfigProvider.js';
17
17
  import { useCurrentForm, useModifyProps, useSub } from './hooks.js';
18
18
 
19
- var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "initialValues", "onFinish", "params", "onOk", "onValuesChange"];
19
+ var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "initialValues", "onFinish", "params", "onOk", "onValuesChange", "autoClear"];
20
20
  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; }
21
21
  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; }
22
22
  var ModalForm = (function (_ref) {
@@ -33,6 +33,8 @@ var ModalForm = (function (_ref) {
33
33
  params = _ref.params,
34
34
  onOk = _ref.onOk,
35
35
  onValuesChange = _ref.onValuesChange,
36
+ _ref$autoClear = _ref.autoClear,
37
+ autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
36
38
  props = _objectWithoutProperties(_ref, _excluded);
37
39
  var currentForm = useCurrentForm(dialogForm);
38
40
  var providerConfig = useFormConfigContext();
@@ -69,7 +71,9 @@ var ModalForm = (function (_ref) {
69
71
  onCancel: cancel,
70
72
  confirmLoading: loading,
71
73
  afterClose: function afterClose() {
72
- currentForm.clear();
74
+ if (autoClear) {
75
+ currentForm.clear();
76
+ }
73
77
  _afterClose === null || _afterClose === void 0 || _afterClose();
74
78
  }
75
79
  }, props), {}, {
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { DialogFormProps, HDialogFormInstance, ModifyPropsModal } from "./modal";
3
- export declare const useModifyProps: ({ visible, configData, initialValues, dialogForm, afterClose, params, title, onCancel, }: ModifyPropsModal) => {
3
+ export declare const useModifyProps: ({ visible, configData, initialValues, dialogForm, afterClose, params, title, onCancel, autoClear }: ModifyPropsModal) => {
4
4
  modalFormData: import("../Form/modal").HItemProps[];
5
5
  modalVisible: boolean | undefined;
6
6
  setModalVisible: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
@@ -24,7 +24,8 @@ var useModifyProps = function useModifyProps(_ref) {
24
24
  afterClose = _ref.afterClose,
25
25
  params = _ref.params,
26
26
  title = _ref.title,
27
- onCancel = _ref.onCancel;
27
+ onCancel = _ref.onCancel,
28
+ autoClear = _ref.autoClear;
28
29
  var _useState = useState(visible),
29
30
  _useState2 = _slicedToArray(_useState, 2),
30
31
  modalVisible = _useState2[0],
@@ -48,7 +49,9 @@ var useModifyProps = function useModifyProps(_ref) {
48
49
  var onAfterClose = function onAfterClose() {
49
50
  onCancel === null || onCancel === void 0 || onCancel();
50
51
  setTimeout(function () {
51
- dialogForm.clear();
52
+ if (autoClear) {
53
+ dialogForm.clear();
54
+ }
52
55
  afterClose === null || afterClose === void 0 || afterClose();
53
56
  }, 100);
54
57
  };
@@ -11,6 +11,7 @@ export interface ModifyPropsModal<P = any> {
11
11
  params?: P;
12
12
  title?: DialogFormProps["title"];
13
13
  onCancel?: VoidFunction;
14
+ autoClear?: boolean;
14
15
  }
15
16
  export interface ShowParamsModal<P = any, T = any> {
16
17
  configData?: HItemProps[];
@@ -30,5 +31,6 @@ export interface DialogFormProps<P = any, T = any> extends Omit<RootProps, "onFi
30
31
  onCancel?: VoidFunction;
31
32
  onOk?: (data: T, params: P) => boolean | void;
32
33
  infoRequest?: (params: P) => Promise<T>;
34
+ autoClear?: boolean;
33
35
  }
34
36
  export {};
@@ -1,5 +1,5 @@
1
1
  import type { HFormInstance, HItemProps } from "../modal";
2
- export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, ...props }: import("../modal").HFormItemProps) => JSX.Element;
2
+ export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
3
3
  interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
4
4
  form: HFormInstance;
5
5
  }
@@ -19,12 +19,13 @@ declare const componentConfig: {
19
19
  requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
20
20
  };
21
21
  timePicker: ({ value, format, onChange, disabledDate, ...props }: import("../TDPicker/modal").HTimePickerProps) => JSX.Element;
22
- input: ({ ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
22
+ input: ({ copy, value, addonAfter, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
23
23
  upload: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
24
24
  urlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("../Upload/modal").IUrlUploadProps) => JSX.Element;
25
25
  submit: ({ text, type, form, loading, position, reset, ...props }: import("../Submit").ISubmitProps) => JSX.Element;
26
26
  textArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
27
27
  colorInput: ({ value, onChange, defaultColor, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
28
28
  cascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("../Cascader").HCascaderProps) => JSX.Element;
29
+ verificationCodeInput: () => JSX.Element;
29
30
  };
30
31
  export default componentConfig;
package/es/Form/config.js CHANGED
@@ -17,9 +17,10 @@ import HSubmit from '../Submit/index.js';
17
17
  import TextArea from '../TextArea/index.js';
18
18
  import ColorInput from '../Input/ColorInput/index.js';
19
19
  import Cascader from '../Cascader/index.js';
20
+ import HVerificationCodeInput from '../Input/VerificationCodeInput.js';
20
21
 
21
22
  var placeholderConfig = {
22
- inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
23
+ inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput"],
23
24
  selectType: ["select", "datePicker", "timePicker", "colorInput"]
24
25
  };
25
26
  var componentConfig = {
@@ -40,7 +41,8 @@ var componentConfig = {
40
41
  submit: HSubmit,
41
42
  textArea: TextArea,
42
43
  colorInput: ColorInput,
43
- cascader: Cascader
44
+ cascader: Cascader,
45
+ verificationCodeInput: HVerificationCodeInput
44
46
  };
45
47
 
46
48
  export { componentConfig as default, placeholderConfig };
@@ -0,0 +1,8 @@
1
+ import type { HFormInstance } from "@/components/Form/modal";
2
+ import type { InputProps } from "antd";
3
+ interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
4
+ request?: (value: any) => Promise<any>;
5
+ form?: HFormInstance;
6
+ }
7
+ declare const _default: ({ value, request, form, onChange, ...props }: IVerificationCodeInputProps) => JSX.Element;
8
+ export default _default;
@@ -0,0 +1,110 @@
1
+ // welcome to hoo hoo hoo
2
+ import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
3
+ import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
4
+ import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
5
+ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
6
+ import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
7
+ import 'core-js/modules/es.object.to-string.js';
8
+ import 'core-js/modules/es.promise.js';
9
+ import 'core-js/modules/es.object.keys.js';
10
+ import 'core-js/modules/es.symbol.js';
11
+ import 'core-js/modules/es.array.filter.js';
12
+ import 'core-js/modules/es.object.get-own-property-descriptor.js';
13
+ import 'core-js/modules/web.dom-collections.for-each.js';
14
+ import 'core-js/modules/es.object.get-own-property-descriptors.js';
15
+ import { jsx } from 'react/jsx-runtime';
16
+ import { useState, useMemo, useCallback, useEffect } from 'react';
17
+ import Index from './ButtonInput.js';
18
+ import { useRequest } from 'ahooks';
19
+
20
+ var _excluded = ["value", "request", "form", "onChange"];
21
+ 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; }
22
+ 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; }
23
+ var HVerificationCodeInput = (function (_ref) {
24
+ var value = _ref.value,
25
+ request = _ref.request,
26
+ form = _ref.form,
27
+ onChange = _ref.onChange,
28
+ props = _objectWithoutProperties(_ref, _excluded);
29
+ var _useState = useState(0),
30
+ _useState2 = _slicedToArray(_useState, 2),
31
+ countdown = _useState2[0],
32
+ setCountdown = _useState2[1];
33
+ var timer = useMemo(function () {
34
+ return {
35
+ time: undefined
36
+ };
37
+ }, []);
38
+ var timerControl = useCallback(function () {
39
+ timer.time = setInterval(function () {
40
+ setCountdown(function () {
41
+ var oldVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
42
+ var newVal = oldVal - 1;
43
+ if (newVal <= 0) {
44
+ clearInterval(timer.time);
45
+ }
46
+ return newVal;
47
+ });
48
+ }, 1000);
49
+ }, []);
50
+ var _useRequest = useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
51
+ var val, result;
52
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
53
+ while (1) switch (_context.prev = _context.next) {
54
+ case 0:
55
+ if (request) {
56
+ _context.next = 2;
57
+ break;
58
+ }
59
+ return _context.abrupt("return", Promise.resolve({}));
60
+ case 2:
61
+ val = form === null || form === void 0 ? void 0 : form.getFieldsValue();
62
+ _context.next = 5;
63
+ return request === null || request === void 0 ? void 0 : request(val);
64
+ case 5:
65
+ result = _context.sent;
66
+ if (result) {
67
+ setCountdown(60);
68
+ }
69
+ timerControl();
70
+ return _context.abrupt("return", result);
71
+ case 9:
72
+ case "end":
73
+ return _context.stop();
74
+ }
75
+ }, _callee);
76
+ })), {
77
+ manual: true
78
+ }),
79
+ run = _useRequest.run,
80
+ loading = _useRequest.loading;
81
+ useEffect(function () {
82
+ return function () {
83
+ clearInterval(timer.time);
84
+ };
85
+ }, []);
86
+ var text = function text() {
87
+ if (!countdown) {
88
+ return "获取验证码";
89
+ }
90
+ var countdownStr = "".concat(countdown);
91
+ if (countdown < 10) {
92
+ countdownStr = "0".concat(countdownStr);
93
+ }
94
+ return "".concat(countdownStr, "\u79D2\u540E\u91CD\u65B0\u83B7\u53D6");
95
+ };
96
+ return jsx(Index, _objectSpread(_objectSpread({
97
+ value: value,
98
+ onChange: onChange,
99
+ buttonProps: {
100
+ onClick: run,
101
+ loading: loading,
102
+ disabled: !!countdown
103
+ }
104
+ }, props), {}, {
105
+ children: text()
106
+ }));
107
+ });
108
+
109
+ export { HVerificationCodeInput as default };
110
+ // powered by hdj
package/es/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export { useHDialogForm } from "./DialogForm/hooks";
6
6
  export { default as HFormConnect } from "./Form/HFormConnect";
7
7
  export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
8
8
  export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
9
- export declare const HInput: ({ ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
9
+ export declare const HInput: ({ copy, value, addonAfter, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
10
10
  export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
11
11
  export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
12
12
  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 }:
25
25
  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;
26
26
  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;
27
27
  export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
28
+ export declare const HVerificationCodeInput: () => JSX.Element;
package/es/index.js CHANGED
@@ -29,6 +29,7 @@ var HColorInput = componentConfig.colorInput;
29
29
  var HModalForm = ModalForm;
30
30
  var HDrawerForm = DrawerForm;
31
31
  var HCascader = componentConfig.cascader;
32
+ var HVerificationCodeInput = componentConfig.verificationCodeInput;
32
33
 
33
- export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, HTextArea, HTimePicker, HUpload, HUrlUpload };
34
+ export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, HTextArea, HTimePicker, HUpload, HUrlUpload, HVerificationCodeInput };
34
35
  // powered by hdj
@@ -1,3 +1,3 @@
1
1
  import type { DialogFormProps } from "../modal";
2
- declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, onValuesChange, ...props }: DialogFormProps) => JSX.Element;
2
+ declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, onValuesChange, autoClear, ...props }: DialogFormProps) => JSX.Element;
3
3
  export default _default;
@@ -21,7 +21,7 @@ var Title = require('./Title.js');
21
21
  var Footer = require('./Footer.js');
22
22
  var FormConfigProvider = require('../../Form/Context/FormConfigProvider.js');
23
23
 
24
- var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "closable", "initialValues", "labelWidth", "onOk", "onFinish", "size", "form", "footer", "params", "onValuesChange"];
24
+ var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "closable", "initialValues", "labelWidth", "onOk", "onFinish", "size", "form", "footer", "params", "onValuesChange", "autoClear"];
25
25
  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; }
26
26
  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; }
27
27
  var DrawerForm = (function (_ref) {
@@ -44,6 +44,8 @@ var DrawerForm = (function (_ref) {
44
44
  var footer = _ref.footer,
45
45
  params = _ref.params,
46
46
  onValuesChange = _ref.onValuesChange,
47
+ _ref$autoClear = _ref.autoClear,
48
+ autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
47
49
  props = _objectWithoutProperties(_ref, _excluded);
48
50
  var currentForm = hooks.useCurrentForm(dialogForm);
49
51
  var providerConfig = FormConfigProvider.useFormConfigContext();
@@ -54,7 +56,8 @@ var DrawerForm = (function (_ref) {
54
56
  dialogForm: currentForm,
55
57
  params: params,
56
58
  title: title,
57
- onCancel: onCancel
59
+ onCancel: onCancel,
60
+ autoClear: autoClear
58
61
  }),
59
62
  modalVisible = _useModifyProps.modalVisible,
60
63
  modalFormData = _useModifyProps.modalFormData,
@@ -1,3 +1,3 @@
1
1
  import type { DialogFormProps } from "./modal";
2
- declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, ...props }: DialogFormProps) => JSX.Element;
2
+ declare const _default: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, autoClear, ...props }: DialogFormProps) => JSX.Element;
3
3
  export default _default;
@@ -19,7 +19,7 @@ var index = require('../Form/index.js');
19
19
  var FormConfigProvider = require('../Form/Context/FormConfigProvider.js');
20
20
  var hooks = require('./hooks.js');
21
21
 
22
- var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "initialValues", "onFinish", "params", "onOk", "onValuesChange"];
22
+ var _excluded = ["visible", "title", "onCancel", "configData", "infoRequest", "request", "afterClose", "dialogForm", "initialValues", "onFinish", "params", "onOk", "onValuesChange", "autoClear"];
23
23
  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; }
24
24
  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; }
25
25
  var ModalForm = (function (_ref) {
@@ -36,6 +36,8 @@ var ModalForm = (function (_ref) {
36
36
  params = _ref.params,
37
37
  onOk = _ref.onOk,
38
38
  onValuesChange = _ref.onValuesChange,
39
+ _ref$autoClear = _ref.autoClear,
40
+ autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
39
41
  props = _objectWithoutProperties(_ref, _excluded);
40
42
  var currentForm = hooks.useCurrentForm(dialogForm);
41
43
  var providerConfig = FormConfigProvider.useFormConfigContext();
@@ -72,7 +74,9 @@ var ModalForm = (function (_ref) {
72
74
  onCancel: cancel,
73
75
  confirmLoading: loading,
74
76
  afterClose: function afterClose() {
75
- currentForm.clear();
77
+ if (autoClear) {
78
+ currentForm.clear();
79
+ }
76
80
  _afterClose === null || _afterClose === void 0 || _afterClose();
77
81
  }
78
82
  }, props), {}, {
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { DialogFormProps, HDialogFormInstance, ModifyPropsModal } from "./modal";
3
- export declare const useModifyProps: ({ visible, configData, initialValues, dialogForm, afterClose, params, title, onCancel, }: ModifyPropsModal) => {
3
+ export declare const useModifyProps: ({ visible, configData, initialValues, dialogForm, afterClose, params, title, onCancel, autoClear }: ModifyPropsModal) => {
4
4
  modalFormData: import("../Form/modal").HItemProps[];
5
5
  modalVisible: boolean | undefined;
6
6
  setModalVisible: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
@@ -25,7 +25,8 @@ var useModifyProps = function useModifyProps(_ref) {
25
25
  afterClose = _ref.afterClose,
26
26
  params = _ref.params,
27
27
  title = _ref.title,
28
- onCancel = _ref.onCancel;
28
+ onCancel = _ref.onCancel,
29
+ autoClear = _ref.autoClear;
29
30
  var _useState = React.useState(visible),
30
31
  _useState2 = _slicedToArray(_useState, 2),
31
32
  modalVisible = _useState2[0],
@@ -49,7 +50,9 @@ var useModifyProps = function useModifyProps(_ref) {
49
50
  var onAfterClose = function onAfterClose() {
50
51
  onCancel === null || onCancel === void 0 || onCancel();
51
52
  setTimeout(function () {
52
- dialogForm.clear();
53
+ if (autoClear) {
54
+ dialogForm.clear();
55
+ }
53
56
  afterClose === null || afterClose === void 0 || afterClose();
54
57
  }, 100);
55
58
  };
@@ -11,6 +11,7 @@ export interface ModifyPropsModal<P = any> {
11
11
  params?: P;
12
12
  title?: DialogFormProps["title"];
13
13
  onCancel?: VoidFunction;
14
+ autoClear?: boolean;
14
15
  }
15
16
  export interface ShowParamsModal<P = any, T = any> {
16
17
  configData?: HItemProps[];
@@ -30,5 +31,6 @@ export interface DialogFormProps<P = any, T = any> extends Omit<RootProps, "onFi
30
31
  onCancel?: VoidFunction;
31
32
  onOk?: (data: T, params: P) => boolean | void;
32
33
  infoRequest?: (params: P) => Promise<T>;
34
+ autoClear?: boolean;
33
35
  }
34
36
  export {};
@@ -1,5 +1,5 @@
1
1
  import type { HFormInstance, HItemProps } from "../modal";
2
- export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, ...props }: import("../modal").HFormItemProps) => JSX.Element;
2
+ export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
3
3
  interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
4
4
  form: HFormInstance;
5
5
  }
@@ -19,12 +19,13 @@ declare const componentConfig: {
19
19
  requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
20
20
  };
21
21
  timePicker: ({ value, format, onChange, disabledDate, ...props }: import("../TDPicker/modal").HTimePickerProps) => JSX.Element;
22
- input: ({ ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
22
+ input: ({ copy, value, addonAfter, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
23
23
  upload: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
24
24
  urlUpload: ({ placeholder, value, onChange, mediaType, ...props }: import("../Upload/modal").IUrlUploadProps) => JSX.Element;
25
25
  submit: ({ text, type, form, loading, position, reset, ...props }: import("../Submit").ISubmitProps) => JSX.Element;
26
26
  textArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
27
27
  colorInput: ({ value, onChange, defaultColor, ...props }: import("../Input/modal").HInputProps<any>) => JSX.Element;
28
28
  cascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("../Cascader").HCascaderProps) => JSX.Element;
29
+ verificationCodeInput: () => JSX.Element;
29
30
  };
30
31
  export default componentConfig;
@@ -20,9 +20,10 @@ var index$9 = require('../Submit/index.js');
20
20
  var index$a = require('../TextArea/index.js');
21
21
  var index$b = require('../Input/ColorInput/index.js');
22
22
  var index$c = require('../Cascader/index.js');
23
+ var VerificationCodeInput = require('../Input/VerificationCodeInput.js');
23
24
 
24
25
  var placeholderConfig = {
25
- inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
26
+ inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput"],
26
27
  selectType: ["select", "datePicker", "timePicker", "colorInput"]
27
28
  };
28
29
  var componentConfig = {
@@ -43,7 +44,8 @@ var componentConfig = {
43
44
  submit: index$9.default,
44
45
  textArea: index$a.default,
45
46
  colorInput: index$b.default,
46
- cascader: index$c.default
47
+ cascader: index$c.default,
48
+ verificationCodeInput: VerificationCodeInput.default
47
49
  };
48
50
 
49
51
  exports.default = componentConfig;
@@ -0,0 +1,8 @@
1
+ import type { HFormInstance } from "@/components/Form/modal";
2
+ import type { InputProps } from "antd";
3
+ interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
4
+ request?: (value: any) => Promise<any>;
5
+ form?: HFormInstance;
6
+ }
7
+ declare const _default: ({ value, request, form, onChange, ...props }: IVerificationCodeInputProps) => JSX.Element;
8
+ export default _default;
@@ -0,0 +1,113 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
+ var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
7
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
8
+ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
9
+ var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
10
+ require('core-js/modules/es.object.to-string.js');
11
+ require('core-js/modules/es.promise.js');
12
+ require('core-js/modules/es.object.keys.js');
13
+ require('core-js/modules/es.symbol.js');
14
+ require('core-js/modules/es.array.filter.js');
15
+ require('core-js/modules/es.object.get-own-property-descriptor.js');
16
+ require('core-js/modules/web.dom-collections.for-each.js');
17
+ require('core-js/modules/es.object.get-own-property-descriptors.js');
18
+ var jsxRuntime = require('react/jsx-runtime');
19
+ var React = require('react');
20
+ var ButtonInput = require('./ButtonInput.js');
21
+ var ahooks = require('ahooks');
22
+
23
+ var _excluded = ["value", "request", "form", "onChange"];
24
+ 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; }
25
+ 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; }
26
+ var HVerificationCodeInput = (function (_ref) {
27
+ var value = _ref.value,
28
+ request = _ref.request,
29
+ form = _ref.form,
30
+ onChange = _ref.onChange,
31
+ props = _objectWithoutProperties(_ref, _excluded);
32
+ var _useState = React.useState(0),
33
+ _useState2 = _slicedToArray(_useState, 2),
34
+ countdown = _useState2[0],
35
+ setCountdown = _useState2[1];
36
+ var timer = React.useMemo(function () {
37
+ return {
38
+ time: undefined
39
+ };
40
+ }, []);
41
+ var timerControl = React.useCallback(function () {
42
+ timer.time = setInterval(function () {
43
+ setCountdown(function () {
44
+ var oldVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
45
+ var newVal = oldVal - 1;
46
+ if (newVal <= 0) {
47
+ clearInterval(timer.time);
48
+ }
49
+ return newVal;
50
+ });
51
+ }, 1000);
52
+ }, []);
53
+ var _useRequest = ahooks.useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
54
+ var val, result;
55
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
56
+ while (1) switch (_context.prev = _context.next) {
57
+ case 0:
58
+ if (request) {
59
+ _context.next = 2;
60
+ break;
61
+ }
62
+ return _context.abrupt("return", Promise.resolve({}));
63
+ case 2:
64
+ val = form === null || form === void 0 ? void 0 : form.getFieldsValue();
65
+ _context.next = 5;
66
+ return request === null || request === void 0 ? void 0 : request(val);
67
+ case 5:
68
+ result = _context.sent;
69
+ if (result) {
70
+ setCountdown(60);
71
+ }
72
+ timerControl();
73
+ return _context.abrupt("return", result);
74
+ case 9:
75
+ case "end":
76
+ return _context.stop();
77
+ }
78
+ }, _callee);
79
+ })), {
80
+ manual: true
81
+ }),
82
+ run = _useRequest.run,
83
+ loading = _useRequest.loading;
84
+ React.useEffect(function () {
85
+ return function () {
86
+ clearInterval(timer.time);
87
+ };
88
+ }, []);
89
+ var text = function text() {
90
+ if (!countdown) {
91
+ return "获取验证码";
92
+ }
93
+ var countdownStr = "".concat(countdown);
94
+ if (countdown < 10) {
95
+ countdownStr = "0".concat(countdownStr);
96
+ }
97
+ return "".concat(countdownStr, "\u79D2\u540E\u91CD\u65B0\u83B7\u53D6");
98
+ };
99
+ return jsxRuntime.jsx(ButtonInput.default, _objectSpread(_objectSpread({
100
+ value: value,
101
+ onChange: onChange,
102
+ buttonProps: {
103
+ onClick: run,
104
+ loading: loading,
105
+ disabled: !!countdown
106
+ }
107
+ }, props), {}, {
108
+ children: text()
109
+ }));
110
+ });
111
+
112
+ exports.default = HVerificationCodeInput;
113
+ // powered by h
package/lib/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export { useHDialogForm } from "./DialogForm/hooks";
6
6
  export { default as HFormConnect } from "./Form/HFormConnect";
7
7
  export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
8
8
  export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
9
- export declare const HInput: ({ ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
9
+ export declare const HInput: ({ copy, value, addonAfter, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
10
10
  export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
11
11
  export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
12
12
  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 }:
25
25
  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;
26
26
  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;
27
27
  export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
28
+ export declare const HVerificationCodeInput: () => JSX.Element;
package/lib/index.js CHANGED
@@ -30,6 +30,7 @@ var HColorInput = config.default.colorInput;
30
30
  var HModalForm = ModalForm.default;
31
31
  var HDrawerForm = index$2.default;
32
32
  var HCascader = config.default.cascader;
33
+ var HVerificationCodeInput = config.default.verificationCodeInput;
33
34
 
34
35
  exports.HForm = index.default;
35
36
  exports.useHForm = useHForm.default;
@@ -56,4 +57,5 @@ exports.HTextArea = HTextArea;
56
57
  exports.HTimePicker = HTimePicker;
57
58
  exports.HUpload = HUpload;
58
59
  exports.HUrlUpload = HUrlUpload;
60
+ exports.HVerificationCodeInput = HVerificationCodeInput;
59
61
  // powered by h
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hw-component/form",
3
- "version": "0.0.8-beta-v1",
3
+ "version": "0.0.8-beta-v3",
4
4
  "description": "基于antd二次开发",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,6 +26,7 @@ export default ({
26
26
  footer,
27
27
  params,
28
28
  onValuesChange,
29
+ autoClear=true,
29
30
  ...props
30
31
  }: DialogFormProps) => {
31
32
  const currentForm = useCurrentForm(dialogForm);
@@ -46,6 +47,7 @@ export default ({
46
47
  params,
47
48
  title,
48
49
  onCancel,
50
+ autoClear
49
51
  });
50
52
  const cancel = () => {
51
53
  onAfterClose();
@@ -19,6 +19,7 @@ export default ({
19
19
  params,
20
20
  onOk,
21
21
  onValuesChange,
22
+ autoClear=true,
22
23
  ...props
23
24
  }: DialogFormProps) => {
24
25
  const currentForm = useCurrentForm(dialogForm);
@@ -53,7 +54,9 @@ export default ({
53
54
  onCancel={cancel}
54
55
  confirmLoading={loading}
55
56
  afterClose={() => {
56
- currentForm.clear();
57
+ if (autoClear){
58
+ currentForm.clear();
59
+ }
57
60
  afterClose?.();
58
61
  }}
59
62
  {...props}
@@ -16,6 +16,7 @@ export const useModifyProps = ({
16
16
  params,
17
17
  title,
18
18
  onCancel,
19
+ autoClear
19
20
  }: ModifyPropsModal) => {
20
21
  const [modalVisible, setModalVisible] = useState(visible);
21
22
  const [modalFormData, setModalFormData] = useState(configData);
@@ -25,7 +26,9 @@ export const useModifyProps = ({
25
26
  const onAfterClose = () => {
26
27
  onCancel?.();
27
28
  setTimeout(() => {
28
- dialogForm.clear();
29
+ if (autoClear){
30
+ dialogForm.clear();
31
+ }
29
32
  afterClose?.();
30
33
  }, 100);
31
34
  };
@@ -13,6 +13,7 @@ export interface ModifyPropsModal<P = any> {
13
13
  params?: P;
14
14
  title?: DialogFormProps["title"];
15
15
  onCancel?: VoidFunction;
16
+ autoClear?:boolean;
16
17
  }
17
18
  export interface ShowParamsModal<P = any, T = any> {
18
19
  configData?: HItemProps[];
@@ -34,4 +35,5 @@ export interface DialogFormProps<P = any, T = any>
34
35
  onCancel?: VoidFunction;
35
36
  onOk?: (data: T, params: P) => boolean | void;
36
37
  infoRequest?: (params: P) => Promise<T>;
38
+ autoClear?:boolean;
37
39
  }
@@ -16,8 +16,16 @@ import HSubmit from "../Submit";
16
16
  import TextArea from "../TextArea";
17
17
  import ColorInput from "../Input/ColorInput";
18
18
  import Cascader from "../Cascader";
19
+ import HVerificationCodeInput from "../Input/VerificationCodeInput";
20
+
19
21
  export const placeholderConfig = {
20
- inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
22
+ inputType: [
23
+ "input",
24
+ "inputNumber",
25
+ "selectInput",
26
+ "buttonInput",
27
+ "verificationCodeInput",
28
+ ],
21
29
  selectType: ["select", "datePicker", "timePicker", "colorInput"],
22
30
  };
23
31
  const componentConfig = {
@@ -39,6 +47,7 @@ const componentConfig = {
39
47
  textArea: TextArea,
40
48
  colorInput: ColorInput,
41
49
  cascader: Cascader,
50
+ verificationCodeInput: HVerificationCodeInput,
42
51
  };
43
52
 
44
53
  export default componentConfig;
@@ -0,0 +1,74 @@
1
+ import React, { useCallback, useEffect, useMemo, useState } from "react";
2
+ import ButtonInput from "./ButtonInput";
3
+ import { useRequest } from "ahooks";
4
+ import type { HFormInstance } from "@/components/Form/modal";
5
+ import type { InputProps } from "antd";
6
+ interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
7
+ request?: (value) => Promise<any>;
8
+ form?: HFormInstance;
9
+ }
10
+ export default ({
11
+ value,
12
+ request,
13
+ form,
14
+ onChange,
15
+ ...props
16
+ }: IVerificationCodeInputProps) => {
17
+ const [countdown, setCountdown] = useState<number>(0);
18
+ const timer = useMemo<{ time: any }>(() => {
19
+ return {
20
+ time: undefined,
21
+ };
22
+ }, []);
23
+ const timerControl = useCallback(() => {
24
+ timer.time = setInterval(() => {
25
+ setCountdown((oldVal = 0) => {
26
+ const newVal = oldVal - 1;
27
+ if (newVal <= 0) {
28
+ clearInterval(timer.time);
29
+ }
30
+ return newVal;
31
+ });
32
+ }, 1000);
33
+ }, []);
34
+ const { run, loading } = useRequest(
35
+ async () => {
36
+ if (!request) {
37
+ return Promise.resolve({});
38
+ }
39
+ const val = form?.getFieldsValue();
40
+ const result = await request?.(val);
41
+ if (result) {
42
+ setCountdown(60);
43
+ }
44
+ timerControl();
45
+ return result;
46
+ },
47
+ { manual: true }
48
+ );
49
+ useEffect(() => {
50
+ return () => {
51
+ clearInterval(timer.time);
52
+ };
53
+ }, []);
54
+ const text = () => {
55
+ if (!countdown) {
56
+ return "获取验证码";
57
+ }
58
+ let countdownStr = `${countdown}`;
59
+ if (countdown < 10) {
60
+ countdownStr = `0${countdownStr}`;
61
+ }
62
+ return `${countdownStr}秒后重新获取`;
63
+ };
64
+ return (
65
+ <ButtonInput
66
+ value={value}
67
+ onChange={onChange}
68
+ buttonProps={{ onClick: run, loading, disabled: !!countdown }}
69
+ {...props}
70
+ >
71
+ {text()}
72
+ </ButtonInput>
73
+ );
74
+ };
@@ -104,7 +104,7 @@ const matchNotFind = (
104
104
  return single({ options, value, noMatchItemRender });
105
105
  }
106
106
  if (mode === "multiple") {
107
- return multiple({ options, value, noMatchItemRender }, oldVale)||[];
107
+ return multiple({ options, value, noMatchItemRender }, oldVale) || [];
108
108
  }
109
109
  return tag({ options, value }, oldVale);
110
110
  }; //不匹配
@@ -29,3 +29,4 @@ export const HColorInput = FormConfig.colorInput;
29
29
  export const HModalForm = ModalForm;
30
30
  export const HDrawerForm = DrawerForm;
31
31
  export const HCascader = FormConfig.cascader;
32
+ export const HVerificationCodeInput = FormConfig.verificationCodeInput;
@@ -96,6 +96,16 @@ const data = [
96
96
  type: "urlUpload",
97
97
  rules: [{ required: true }],
98
98
  },
99
+ {
100
+ label: "验证码",
101
+ type: "verificationCodeInput",
102
+ name: "verificationCodeInput",
103
+ itemProps: {
104
+ request: () => {
105
+ return Promise.resolve({ code: 200 });
106
+ },
107
+ },
108
+ },
99
109
  ];
100
110
  export default () => {
101
111
  const modalForm = useHDialogForm();
@@ -124,6 +134,7 @@ export default () => {
124
134
  打开
125
135
  </Button>
126
136
  <HDrawerForm
137
+ autoClear={false}
127
138
  configData={data}
128
139
  labelWidth={88}
129
140
  dialogForm={modalForm}
@@ -147,6 +147,16 @@ const formData = (options) => {
147
147
  ],
148
148
  },
149
149
  },
150
+ {
151
+ label: "验证码",
152
+ type: "verificationCodeInput",
153
+ name: "verificationCodeInput",
154
+ itemProps: {
155
+ request: () => {
156
+ return Promise.resolve({ code: 200 });
157
+ },
158
+ },
159
+ },
150
160
  {
151
161
  type: "submit",
152
162
  },
@@ -4,6 +4,7 @@ import {
4
4
  HButtonInput,
5
5
  HInputNumber,
6
6
  HColorInput,
7
+ HVerificationCodeInput,
7
8
  } from "../../components";
8
9
  import { Space } from "antd";
9
10
  export default () => {
@@ -19,6 +20,11 @@ export default () => {
19
20
  <HButtonInput>点我</HButtonInput>
20
21
  <HInputNumber />
21
22
  <HColorInput />
23
+ <HVerificationCodeInput
24
+ request={() => {
25
+ return Promise.resolve({ code: 200 });
26
+ }}
27
+ />
22
28
  </Space>
23
29
  );
24
30
  };
@@ -120,6 +120,16 @@ const data = [
120
120
  },
121
121
  rules: [{ required: true }],
122
122
  },
123
+ {
124
+ label: "验证码",
125
+ type: "verificationCodeInput",
126
+ name: "verificationCodeInput",
127
+ itemProps: {
128
+ request: () => {
129
+ return Promise.resolve({ code: 200 });
130
+ },
131
+ },
132
+ },
123
133
  ];
124
134
  let num = 0;
125
135
  export default () => {
@@ -165,6 +175,7 @@ export default () => {
165
175
  <HModalForm
166
176
  configData={data}
167
177
  labelWidth={88}
178
+ autoClear={false}
168
179
  request={(val, params) => {
169
180
  console.log(val, params);
170
181
  }}
@@ -1,14 +1,15 @@
1
1
  import { HSelect } from "../../components";
2
2
  import { Space } from "antd";
3
- import {useState} from "react";
3
+ import { useState } from "react";
4
4
  export default () => {
5
- const [selectVal,setSelectVal]=useState([10]);
5
+ const [selectVal, setSelectVal] = useState([10]);
6
6
  return (
7
7
  <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
8
8
  <HSelect
9
9
  options={[{ label: "测试", value: 1 }]}
10
10
  value={100}
11
11
  placeholder="基础"
12
+ allowClear={true}
12
13
  />
13
14
  <HSelect
14
15
  fieldNames={{ label: "name", value: "value" }}
@@ -19,16 +20,18 @@ export default () => {
19
20
  placeholder="多选"
20
21
  value={selectVal}
21
22
  onChange={(val, option) => {
22
- setSelectVal(val);
23
+ setSelectVal(val);
23
24
  }}
24
25
  allSelect={true}
25
26
  mode={"multiple"}
27
+ allowClear={true}
26
28
  showSearch={true}
27
29
  />
28
30
  <HSelect
29
31
  mode={"tags"}
30
32
  placeholder="tags模式"
31
33
  showSearch={true}
34
+ allowClear={true}
32
35
  options={[
33
36
  { label: "测试1", value: 10 },
34
37
  { label: "测试2", value: 20 },