@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.
- package/es/DialogForm/DrawerForm/index.d.ts +1 -1
- package/es/DialogForm/DrawerForm/index.js +5 -2
- package/es/DialogForm/ModalForm.d.ts +1 -1
- package/es/DialogForm/ModalForm.js +6 -2
- package/es/DialogForm/hooks.d.ts +1 -1
- package/es/DialogForm/hooks.js +5 -2
- package/es/DialogForm/modal.d.ts +2 -0
- package/es/Form/FormItem/hooks.d.ts +1 -1
- package/es/Form/config.d.ts +2 -1
- package/es/Form/config.js +4 -2
- package/es/Input/VerificationCodeInput.d.ts +8 -0
- package/es/Input/VerificationCodeInput.js +110 -0
- package/es/index.d.ts +2 -1
- package/es/index.js +2 -1
- package/lib/DialogForm/DrawerForm/index.d.ts +1 -1
- package/lib/DialogForm/DrawerForm/index.js +5 -2
- package/lib/DialogForm/ModalForm.d.ts +1 -1
- package/lib/DialogForm/ModalForm.js +6 -2
- package/lib/DialogForm/hooks.d.ts +1 -1
- package/lib/DialogForm/hooks.js +5 -2
- package/lib/DialogForm/modal.d.ts +2 -0
- package/lib/Form/FormItem/hooks.d.ts +1 -1
- package/lib/Form/config.d.ts +2 -1
- package/lib/Form/config.js +4 -2
- package/lib/Input/VerificationCodeInput.d.ts +8 -0
- package/lib/Input/VerificationCodeInput.js +113 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -0
- package/package.json +1 -1
- package/src/components/DialogForm/DrawerForm/index.tsx +2 -0
- package/src/components/DialogForm/ModalForm.tsx +4 -1
- package/src/components/DialogForm/hooks.ts +4 -1
- package/src/components/DialogForm/modal.ts +2 -0
- package/src/components/Form/config.ts +10 -1
- package/src/components/Input/VerificationCodeInput.tsx +74 -0
- package/src/components/Select/hooks/changeHooks.tsx +1 -1
- package/src/components/index.tsx +1 -0
- package/src/pages/DrawerForm/index.tsx +11 -0
- package/src/pages/Form/index.tsx +10 -0
- package/src/pages/Input/index.tsx +6 -0
- package/src/pages/ModalForm/index.tsx +11 -0
- 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
|
-
|
|
74
|
+
if (autoClear) {
|
|
75
|
+
currentForm.clear();
|
|
76
|
+
}
|
|
73
77
|
_afterClose === null || _afterClose === void 0 || _afterClose();
|
|
74
78
|
}
|
|
75
79
|
}, props), {}, {
|
package/es/DialogForm/hooks.d.ts
CHANGED
|
@@ -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>>;
|
package/es/DialogForm/hooks.js
CHANGED
|
@@ -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
|
-
|
|
52
|
+
if (autoClear) {
|
|
53
|
+
dialogForm.clear();
|
|
54
|
+
}
|
|
52
55
|
afterClose === null || afterClose === void 0 || afterClose();
|
|
53
56
|
}, 100);
|
|
54
57
|
};
|
package/es/DialogForm/modal.d.ts
CHANGED
|
@@ -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
|
}
|
package/es/Form/config.d.ts
CHANGED
|
@@ -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
|
-
|
|
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>>;
|
package/lib/DialogForm/hooks.js
CHANGED
|
@@ -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
|
-
|
|
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
|
}
|
package/lib/Form/config.d.ts
CHANGED
|
@@ -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/lib/Form/config.js
CHANGED
|
@@ -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
|
@@ -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
|
-
|
|
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
|
-
|
|
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: [
|
|
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
|
}; //不匹配
|
package/src/components/index.tsx
CHANGED
|
@@ -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}
|
package/src/pages/Form/index.tsx
CHANGED
|
@@ -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
|
-
|
|
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 },
|