@hw-component/form 1.1.9 → 1.2.0

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.
@@ -26,7 +26,7 @@ declare const componentConfig: {
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: ({ value, request, form, onChange, ...props }: import("../Input/VerificationCodeInput").HVerificationCodeInputProps) => JSX.Element;
29
+ verificationCodeInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
30
30
  trimInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
31
31
  trimTextArea: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
32
32
  };
package/es/Form/config.js CHANGED
@@ -17,7 +17,7 @@ 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 VerificationCodeInput from '../Input/VerificationCodeInput.js';
20
+ import VerificationCodeInput from '../Input/VerificationCodeInput/index.js';
21
21
  import TrimInput from '../Input/TrimInput.js';
22
22
  import TrimTextArea from '../TextArea/TrimTextArea.js';
23
23
 
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { ButtonProps } from "./index";
3
+ export declare const useDis: (buttonProps: ButtonProps) => {
4
+ disabled: boolean | undefined;
5
+ setBtnDisabled: ({ changedValues }: {
6
+ changedValues: any;
7
+ }) => void;
8
+ countdown: number;
9
+ setCountdown: import("react").Dispatch<import("react").SetStateAction<number>>;
10
+ };
@@ -0,0 +1,44 @@
1
+ // welcome to hoo hoo hoo
2
+ import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
3
+ import { useState, useEffect } from 'react';
4
+
5
+ var useDis = function useDis(buttonProps) {
6
+ var disabled = buttonProps.disabled;
7
+ var _useState = useState(!!disabled),
8
+ _useState2 = _slicedToArray(_useState, 2),
9
+ btnDis = _useState2[0],
10
+ setBtnDis = _useState2[1];
11
+ var _useState3 = useState(0),
12
+ _useState4 = _slicedToArray(_useState3, 2),
13
+ countdown = _useState4[0],
14
+ setCountdown = _useState4[1];
15
+ var setBtnDisabled = function setBtnDisabled(_ref) {
16
+ var changedValues = _ref.changedValues;
17
+ console.log(changedValues, "changeValue");
18
+ if (!!countdown) {
19
+ return setBtnDis(true);
20
+ }
21
+ if (typeof disabled === "function") {
22
+ var resultDisabled = disabled(changedValues);
23
+ return setBtnDis(resultDisabled);
24
+ }
25
+ return setBtnDis(disabled);
26
+ };
27
+ useEffect(function () {
28
+ setBtnDis(!!countdown);
29
+ }, [countdown]);
30
+ useEffect(function () {
31
+ if (!countdown) {
32
+ setBtnDis(!!disabled);
33
+ }
34
+ }, [disabled]);
35
+ return {
36
+ disabled: btnDis,
37
+ setBtnDisabled: setBtnDisabled,
38
+ countdown: countdown,
39
+ setCountdown: setCountdown
40
+ };
41
+ };
42
+
43
+ export { useDis };
44
+ // powered by hdj
@@ -0,0 +1,16 @@
1
+ import React from "react";
2
+ import type { HFormInstance } from "../../Form/modal";
3
+ import { HButtonInputProps } from "../modal";
4
+ import { argsFn } from "../../Form/modal";
5
+ type disabledFn = (data: any) => boolean;
6
+ export interface ButtonProps extends Omit<HButtonInputProps["buttonProps"], "disabled"> {
7
+ disabled?: boolean | disabledFn;
8
+ }
9
+ export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form" | "buttonProps"> {
10
+ request?: (value: any) => Promise<any>;
11
+ form?: HFormInstance;
12
+ addDispatchListener?: (key: string, fn: argsFn) => void;
13
+ buttonProps?: ButtonProps;
14
+ }
15
+ declare const _default: React.ForwardRefExoticComponent<import("../../Form/modal").HFormItemProps & React.RefAttributes<any>>;
16
+ export default _default;
@@ -1,7 +1,6 @@
1
1
  // welcome to hoo hoo hoo
2
2
  import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
3
3
  import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
4
- import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
5
4
  import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
6
5
  import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
7
6
  import 'core-js/modules/es.object.to-string.js';
@@ -13,25 +12,29 @@ import 'core-js/modules/es.object.get-own-property-descriptor.js';
13
12
  import 'core-js/modules/web.dom-collections.for-each.js';
14
13
  import 'core-js/modules/es.object.get-own-property-descriptors.js';
15
14
  import { jsx } from 'react/jsx-runtime';
16
- import { useState, useMemo, useCallback, useEffect } from 'react';
17
- import Index from './ButtonInput.js';
15
+ import { useMemo, useCallback, useEffect } from 'react';
16
+ import Index$1 from '../ButtonInput.js';
18
17
  import { useRequest } from 'ahooks';
18
+ import HFormConnect from '../../Form/HFormConnect.js';
19
+ import { useDis } from './hooks.js';
19
20
 
20
- var _excluded = ["value", "request", "form", "onChange", "buttonProps"];
21
+ var _excluded = ["value", "request", "form", "onChange", "addDispatchListener", "buttonProps"];
21
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; }
22
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; }
23
- var VerificationCodeInput = (function (_ref) {
24
+ var Index = function Index(_ref) {
24
25
  var value = _ref.value,
25
26
  request = _ref.request,
26
27
  form = _ref.form,
27
28
  onChange = _ref.onChange,
29
+ addDispatchListener = _ref.addDispatchListener,
28
30
  _ref$buttonProps = _ref.buttonProps,
29
31
  buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
30
32
  props = _objectWithoutProperties(_ref, _excluded);
31
- var _useState = useState(0),
32
- _useState2 = _slicedToArray(_useState, 2),
33
- countdown = _useState2[0],
34
- setCountdown = _useState2[1];
33
+ var _useDis = useDis(buttonProps),
34
+ disabled = _useDis.disabled,
35
+ setBtnDisabled = _useDis.setBtnDisabled,
36
+ countdown = _useDis.countdown,
37
+ setCountdown = _useDis.setCountdown;
35
38
  var timer = useMemo(function () {
36
39
  return {
37
40
  time: undefined
@@ -97,17 +100,20 @@ var VerificationCodeInput = (function (_ref) {
97
100
  };
98
101
  var defaultButtonProps = {
99
102
  onClick: run,
100
- loading: loading,
101
- disabled: !!countdown
103
+ loading: loading
102
104
  };
103
- return jsx(Index, _objectSpread(_objectSpread({
105
+ addDispatchListener === null || addDispatchListener === void 0 || addDispatchListener("disabled", setBtnDisabled);
106
+ return jsx(Index$1, _objectSpread(_objectSpread({
104
107
  value: value,
105
108
  onChange: onChange,
106
- buttonProps: _objectSpread(_objectSpread({}, defaultButtonProps), buttonProps)
109
+ buttonProps: _objectSpread(_objectSpread(_objectSpread({}, defaultButtonProps), buttonProps), {}, {
110
+ disabled: disabled
111
+ })
107
112
  }, props), {}, {
108
113
  children: text()
109
114
  }));
110
- });
115
+ };
116
+ var VerificationCodeInput = HFormConnect(Index);
111
117
 
112
118
  export { VerificationCodeInput as default };
113
119
  // powered by hdj
package/es/index.d.ts CHANGED
@@ -22,9 +22,9 @@ export declare const HInputNumber: ({ style, ...props }: import("antd").InputNum
22
22
  export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
23
23
  export declare const HTextArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
24
24
  export declare const HColorInput: ({ value, onChange, defaultColor, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
25
- export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, autoClear, contentRender, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
25
+ export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, autoClear, contentRender, footer, ...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, autoClear, contentRender, ...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: ({ value, request, form, onChange, ...props }: import("./Input/VerificationCodeInput").HVerificationCodeInputProps) => JSX.Element;
28
+ export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
29
29
  export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
30
30
  export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
@@ -26,7 +26,7 @@ declare const componentConfig: {
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: ({ value, request, form, onChange, ...props }: import("../Input/VerificationCodeInput").HVerificationCodeInputProps) => JSX.Element;
29
+ verificationCodeInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
30
30
  trimInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
31
31
  trimTextArea: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
32
32
  };
@@ -20,7 +20,7 @@ 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
+ var index$d = require('../Input/VerificationCodeInput/index.js');
24
24
  var TrimInput = require('../Input/TrimInput.js');
25
25
  var TrimTextArea = require('../TextArea/TrimTextArea.js');
26
26
 
@@ -47,7 +47,7 @@ var componentConfig = {
47
47
  textArea: index$a.default,
48
48
  colorInput: index$b.default,
49
49
  cascader: index$c.default,
50
- verificationCodeInput: VerificationCodeInput.default,
50
+ verificationCodeInput: index$d.default,
51
51
  trimInput: TrimInput.default,
52
52
  trimTextArea: TrimTextArea.default
53
53
  };
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { ButtonProps } from "./index";
3
+ export declare const useDis: (buttonProps: ButtonProps) => {
4
+ disabled: boolean | undefined;
5
+ setBtnDisabled: ({ changedValues }: {
6
+ changedValues: any;
7
+ }) => void;
8
+ countdown: number;
9
+ setCountdown: import("react").Dispatch<import("react").SetStateAction<number>>;
10
+ };
@@ -0,0 +1,45 @@
1
+ 'use strict';
2
+
3
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
4
+ var React = require('react');
5
+
6
+ var useDis = function useDis(buttonProps) {
7
+ var disabled = buttonProps.disabled;
8
+ var _useState = React.useState(!!disabled),
9
+ _useState2 = _slicedToArray(_useState, 2),
10
+ btnDis = _useState2[0],
11
+ setBtnDis = _useState2[1];
12
+ var _useState3 = React.useState(0),
13
+ _useState4 = _slicedToArray(_useState3, 2),
14
+ countdown = _useState4[0],
15
+ setCountdown = _useState4[1];
16
+ var setBtnDisabled = function setBtnDisabled(_ref) {
17
+ var changedValues = _ref.changedValues;
18
+ console.log(changedValues, "changeValue");
19
+ if (!!countdown) {
20
+ return setBtnDis(true);
21
+ }
22
+ if (typeof disabled === "function") {
23
+ var resultDisabled = disabled(changedValues);
24
+ return setBtnDis(resultDisabled);
25
+ }
26
+ return setBtnDis(disabled);
27
+ };
28
+ React.useEffect(function () {
29
+ setBtnDis(!!countdown);
30
+ }, [countdown]);
31
+ React.useEffect(function () {
32
+ if (!countdown) {
33
+ setBtnDis(!!disabled);
34
+ }
35
+ }, [disabled]);
36
+ return {
37
+ disabled: btnDis,
38
+ setBtnDisabled: setBtnDisabled,
39
+ countdown: countdown,
40
+ setCountdown: setCountdown
41
+ };
42
+ };
43
+
44
+ exports.useDis = useDis;
45
+ // powered by h
@@ -0,0 +1,16 @@
1
+ import React from "react";
2
+ import type { HFormInstance } from "../../Form/modal";
3
+ import { HButtonInputProps } from "../modal";
4
+ import { argsFn } from "../../Form/modal";
5
+ type disabledFn = (data: any) => boolean;
6
+ export interface ButtonProps extends Omit<HButtonInputProps["buttonProps"], "disabled"> {
7
+ disabled?: boolean | disabledFn;
8
+ }
9
+ export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form" | "buttonProps"> {
10
+ request?: (value: any) => Promise<any>;
11
+ form?: HFormInstance;
12
+ addDispatchListener?: (key: string, fn: argsFn) => void;
13
+ buttonProps?: ButtonProps;
14
+ }
15
+ declare const _default: React.ForwardRefExoticComponent<import("../../Form/modal").HFormItemProps & React.RefAttributes<any>>;
16
+ export default _default;
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
6
6
  var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
7
- var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
8
7
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
9
8
  var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
10
9
  require('core-js/modules/es.object.to-string.js');
@@ -17,24 +16,28 @@ require('core-js/modules/web.dom-collections.for-each.js');
17
16
  require('core-js/modules/es.object.get-own-property-descriptors.js');
18
17
  var jsxRuntime = require('react/jsx-runtime');
19
18
  var React = require('react');
20
- var ButtonInput = require('./ButtonInput.js');
19
+ var ButtonInput = require('../ButtonInput.js');
21
20
  var ahooks = require('ahooks');
21
+ var HFormConnect = require('../../Form/HFormConnect.js');
22
+ var hooks = require('./hooks.js');
22
23
 
23
- var _excluded = ["value", "request", "form", "onChange", "buttonProps"];
24
+ var _excluded = ["value", "request", "form", "onChange", "addDispatchListener", "buttonProps"];
24
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; }
25
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; }
26
- var VerificationCodeInput = (function (_ref) {
27
+ var Index = function Index(_ref) {
27
28
  var value = _ref.value,
28
29
  request = _ref.request,
29
30
  form = _ref.form,
30
31
  onChange = _ref.onChange,
32
+ addDispatchListener = _ref.addDispatchListener,
31
33
  _ref$buttonProps = _ref.buttonProps,
32
34
  buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
33
35
  props = _objectWithoutProperties(_ref, _excluded);
34
- var _useState = React.useState(0),
35
- _useState2 = _slicedToArray(_useState, 2),
36
- countdown = _useState2[0],
37
- setCountdown = _useState2[1];
36
+ var _useDis = hooks.useDis(buttonProps),
37
+ disabled = _useDis.disabled,
38
+ setBtnDisabled = _useDis.setBtnDisabled,
39
+ countdown = _useDis.countdown,
40
+ setCountdown = _useDis.setCountdown;
38
41
  var timer = React.useMemo(function () {
39
42
  return {
40
43
  time: undefined
@@ -100,17 +103,20 @@ var VerificationCodeInput = (function (_ref) {
100
103
  };
101
104
  var defaultButtonProps = {
102
105
  onClick: run,
103
- loading: loading,
104
- disabled: !!countdown
106
+ loading: loading
105
107
  };
108
+ addDispatchListener === null || addDispatchListener === void 0 || addDispatchListener("disabled", setBtnDisabled);
106
109
  return jsxRuntime.jsx(ButtonInput.default, _objectSpread(_objectSpread({
107
110
  value: value,
108
111
  onChange: onChange,
109
- buttonProps: _objectSpread(_objectSpread({}, defaultButtonProps), buttonProps)
112
+ buttonProps: _objectSpread(_objectSpread(_objectSpread({}, defaultButtonProps), buttonProps), {}, {
113
+ disabled: disabled
114
+ })
110
115
  }, props), {}, {
111
116
  children: text()
112
117
  }));
113
- });
118
+ };
119
+ var VerificationCodeInput = HFormConnect.default(Index);
114
120
 
115
121
  exports.default = VerificationCodeInput;
116
122
  // powered by h
package/lib/index.d.ts CHANGED
@@ -22,9 +22,9 @@ export declare const HInputNumber: ({ style, ...props }: import("antd").InputNum
22
22
  export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
23
23
  export declare const HTextArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
24
24
  export declare const HColorInput: ({ value, onChange, defaultColor, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
25
- export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, autoClear, contentRender, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
25
+ export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, onValuesChange, autoClear, contentRender, footer, ...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, autoClear, contentRender, ...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: ({ value, request, form, onChange, ...props }: import("./Input/VerificationCodeInput").HVerificationCodeInputProps) => JSX.Element;
28
+ export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
29
29
  export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
30
30
  export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hw-component/form",
3
- "version": "1.1.9",
3
+ "version": "1.2.0",
4
4
  "description": "基于antd二次开发",
5
5
  "repository": {
6
6
  "type": "git",
@@ -0,0 +1,33 @@
1
+ import {ButtonProps} from "./index";
2
+ import {useEffect, useState} from "react";
3
+
4
+ export const useDis=(buttonProps:ButtonProps)=>{
5
+ const {disabled}=buttonProps;
6
+ const [btnDis,setBtnDis]=useState<boolean|undefined>(!!disabled);
7
+ const [countdown, setCountdown] = useState<number>(0);
8
+ const setBtnDisabled=({changedValues})=>{
9
+ console.log(changedValues,"changeValue")
10
+ if (!!countdown){
11
+ return setBtnDis(true);
12
+ }
13
+ if (typeof disabled==="function"){
14
+ const resultDisabled=disabled(changedValues);
15
+ return setBtnDis(resultDisabled);
16
+ }
17
+ return setBtnDis(disabled);
18
+ }
19
+ useEffect(() => {
20
+ setBtnDis(!!countdown);
21
+ }, [countdown]);
22
+ useEffect(() => {
23
+ if (!countdown){
24
+ setBtnDis(!!disabled);
25
+ }
26
+ }, [disabled]);
27
+ return {
28
+ disabled:btnDis,
29
+ setBtnDisabled,
30
+ countdown,
31
+ setCountdown
32
+ }
33
+ }
@@ -0,0 +1,96 @@
1
+ import React, { useCallback, useEffect, useMemo, useState } from "react";
2
+ import ButtonInput from "../ButtonInput";
3
+ import { useRequest } from "ahooks";
4
+ import type { HFormInstance } from "../../Form/modal";
5
+ import {HButtonInputProps} from "../modal";
6
+ import HFormConnect from "../../Form/HFormConnect";
7
+ import {argsFn} from "../../Form/modal";
8
+ import {useDis} from "./hooks";
9
+
10
+ type disabledFn=(data:any)=>boolean;
11
+ export interface ButtonProps extends Omit<HButtonInputProps["buttonProps"],"disabled">{
12
+ disabled?:boolean|disabledFn;
13
+ }
14
+
15
+ export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form"|"buttonProps"> {
16
+ request?: (value: any) => Promise<any>;
17
+ form?: HFormInstance;
18
+ addDispatchListener?: (key: string, fn: argsFn) => void;
19
+ buttonProps?:ButtonProps;
20
+ }
21
+ const Index= ({
22
+ value,
23
+ request,
24
+ form,
25
+ onChange,
26
+ addDispatchListener,
27
+ buttonProps={},
28
+ ...props
29
+ }: HVerificationCodeInputProps) => {
30
+ const {disabled,setBtnDisabled,countdown,setCountdown}=useDis(buttonProps);
31
+ const timer = useMemo<{ time: any }>(() => {
32
+ return {
33
+ time: undefined,
34
+ };
35
+ }, []);
36
+ const timerControl = useCallback(() => {
37
+ timer.time = setInterval(() => {
38
+ setCountdown((oldVal = 0) => {
39
+ const newVal = oldVal - 1;
40
+ if (newVal <= 0) {
41
+ clearInterval(timer.time);
42
+ }
43
+ return newVal;
44
+ });
45
+ }, 1000);
46
+ }, []);
47
+ const { run, loading } = useRequest(
48
+ async () => {
49
+ if (!request) {
50
+ return Promise.resolve({});
51
+ }
52
+ const val = form?.getFieldsValue();
53
+ const result = await request?.(val);
54
+ if (result) {
55
+ setCountdown(60);
56
+ }
57
+ timerControl();
58
+ return result;
59
+ },
60
+ { manual: true }
61
+ );
62
+ useEffect(() => {
63
+ return () => {
64
+ clearInterval(timer.time);
65
+ };
66
+ }, []);
67
+ const text = () => {
68
+ if (!countdown) {
69
+ return "获取验证码";
70
+ }
71
+ let countdownStr = `${countdown}`;
72
+ if (countdown < 10) {
73
+ countdownStr = `0${countdownStr}`;
74
+ }
75
+ return `${countdownStr}秒后重新获取`;
76
+ };
77
+
78
+ const defaultButtonProps={
79
+ onClick: run,
80
+ loading,
81
+ }
82
+ addDispatchListener?.("disabled",setBtnDisabled);
83
+ return (
84
+ <ButtonInput
85
+ value={value}
86
+ onChange={onChange}
87
+ buttonProps={{...defaultButtonProps,...buttonProps,disabled}}
88
+ {...props}
89
+ >
90
+ {text()}
91
+ </ButtonInput>
92
+ );
93
+ };
94
+
95
+ export default HFormConnect(Index);
96
+
@@ -7,6 +7,7 @@ const formData = () => {
7
7
  {
8
8
  label: "测试",
9
9
  className: "hdjd",
10
+ name:"nameTest"
10
11
  },
11
12
  {
12
13
  label: "测试1",
@@ -78,9 +79,6 @@ const formData = () => {
78
79
  type: "verificationCodeInput",
79
80
  name:"verificationCodeInput",
80
81
  label:"验证码",
81
- shouldUpdate:(prevValue,curValue)=>{
82
- return prevValue.switch!==curValue.switch;
83
- },
84
82
  itemProps: {
85
83
  request:()=>{
86
84
  return new Promise((resolve)=>{
@@ -88,15 +86,21 @@ const formData = () => {
88
86
  resolve({})
89
87
  },4000);
90
88
  })
89
+ },
90
+ buttonProps:{
91
+ disabled:({nameTest})=>{
92
+ if (nameTest){
93
+ return false;
94
+ }
95
+ return true;
96
+ }
91
97
  }
92
98
  },
93
- render:(item,node,form)=>{
94
- const phone=form.getFieldValue("switch");
95
- if (!phone){
96
- return React.cloneElement(node,{buttonProps:{ghost: true,disabled:true}});
97
- }
98
- return React.cloneElement(node,{buttonProps:{ghost:true}})
99
- }
99
+ dispatch: {
100
+ fnKey: "disabled",
101
+ dependencies: ["nameTest"],
102
+ manual:false
103
+ },
100
104
  },
101
105
  {
102
106
  type: "submit",
@@ -168,15 +172,8 @@ export default () => {
168
172
  onFinish={(value) => {
169
173
  console.log(value);
170
174
  }}
171
- onValuesChange={(val) => {
172
- console.log(val, "onValuesChange");
173
- }}
174
- request={(params) => {
175
- return new Promise<any>((resolve) => {
176
- setTimeout(() => {
177
- resolve(params);
178
- }, 3000);
179
- });
175
+ initialValues={{
176
+ nameTest:"fffff"
180
177
  }}
181
178
  />
182
179
  </HFormConfigProvider>
@@ -1,8 +0,0 @@
1
- import type { HFormInstance } from "../Form/modal";
2
- import { HButtonInputProps } from "@/components/Input/modal";
3
- export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form"> {
4
- request?: (value: any) => Promise<any>;
5
- form?: HFormInstance;
6
- }
7
- declare const _default: ({ value, request, form, onChange, buttonProps, ...props }: HVerificationCodeInputProps) => JSX.Element;
8
- export default _default;
@@ -1,8 +0,0 @@
1
- import type { HFormInstance } from "../Form/modal";
2
- import { HButtonInputProps } from "@/components/Input/modal";
3
- export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form"> {
4
- request?: (value: any) => Promise<any>;
5
- form?: HFormInstance;
6
- }
7
- declare const _default: ({ value, request, form, onChange, buttonProps, ...props }: HVerificationCodeInputProps) => JSX.Element;
8
- export default _default;
@@ -1,80 +0,0 @@
1
- import React, { useCallback, useEffect, useMemo, useState } from "react";
2
- import ButtonInput from "./ButtonInput";
3
- import { useRequest } from "ahooks";
4
- import type { HFormInstance } from "../Form/modal";
5
- import {HButtonInputProps} from "@/components/Input/modal";
6
- export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form"> {
7
- request?: (value: any) => Promise<any>;
8
- form?: HFormInstance;
9
- }
10
- export default ({
11
- value,
12
- request,
13
- form,
14
- onChange,
15
- buttonProps={},
16
- ...props
17
- }: HVerificationCodeInputProps) => {
18
- const [countdown, setCountdown] = useState<number>(0);
19
- const timer = useMemo<{ time: any }>(() => {
20
- return {
21
- time: undefined,
22
- };
23
- }, []);
24
- const timerControl = useCallback(() => {
25
- timer.time = setInterval(() => {
26
- setCountdown((oldVal = 0) => {
27
- const newVal = oldVal - 1;
28
- if (newVal <= 0) {
29
- clearInterval(timer.time);
30
- }
31
- return newVal;
32
- });
33
- }, 1000);
34
- }, []);
35
- const { run, loading } = useRequest(
36
- async () => {
37
- if (!request) {
38
- return Promise.resolve({});
39
- }
40
- const val = form?.getFieldsValue();
41
- const result = await request?.(val);
42
- if (result) {
43
- setCountdown(60);
44
- }
45
- timerControl();
46
- return result;
47
- },
48
- { manual: true }
49
- );
50
- useEffect(() => {
51
- return () => {
52
- clearInterval(timer.time);
53
- };
54
- }, []);
55
- const text = () => {
56
- if (!countdown) {
57
- return "获取验证码";
58
- }
59
- let countdownStr = `${countdown}`;
60
- if (countdown < 10) {
61
- countdownStr = `0${countdownStr}`;
62
- }
63
- return `${countdownStr}秒后重新获取`;
64
- };
65
- const defaultButtonProps={
66
- onClick: run,
67
- loading,
68
- disabled: !!countdown
69
- }
70
- return (
71
- <ButtonInput
72
- value={value}
73
- onChange={onChange}
74
- buttonProps={{...defaultButtonProps,...buttonProps}}
75
- {...props}
76
- >
77
- {text()}
78
- </ButtonInput>
79
- );
80
- };