diff --git a/package.json b/package.json index 8192ebf..066ea18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne-components/components-admin", - "version": "1.1.32", + "version": "1.1.33", "description": "用于实现一个后台管理系统的必要组件", "scripts": { "init": "husky", @@ -66,7 +66,6 @@ "devDependencies": { "@kne/modules-dev": "^2.2.1", "@kne/react-fetch": "^1.4.3", - "@kne/react-form-antd": "^4.0.2", "@kne/react-scripts": "^5.1.5", "@kne/remote-loader": "^1.2.3", "@testing-library/jest-dom": "^6.4.2", @@ -86,7 +85,6 @@ "dependencies": { "@ant-design/icons": "^6.0.0", "@kne/app-children-router": "^0.1.7", - "@kne/captcha-button": "^1.0.1", "@kne/count-down": "^0.2.2", "@kne/is-empty": "^1.0.1", "@kne/json-view": "^0.1.1", diff --git a/src/components/Account/Register/index.js b/src/components/Account/Register/index.js index 1013aa7..6de7f16 100644 --- a/src/components/Account/Register/index.js +++ b/src/components/Account/Register/index.js @@ -1,7 +1,6 @@ -import { useRef } from 'react'; +import { useRef, useState } from 'react'; import { Button, Col, Row, Space } from 'antd'; import { createWithRemoteLoader } from '@kne/remote-loader'; -import CaptchaButton from '@kne/captcha-button'; import classnames from 'classnames'; import get from 'lodash/get'; import commonStyle from '../style.module.scss'; @@ -11,6 +10,40 @@ import style from './style.module.scss'; import { useIntl } from '@kne/react-intl'; import withLocale from '../withLocale'; +const CaptchaButton = createWithRemoteLoader({ + modules: ['components-core:FormInfo', 'components-core:LoadingButton'] +})(({ remoteModules, children, target, onClick, duration = 60, ...props }) => { + const [FormInfo, LoadingButton] = remoteModules; + const { useFormContext, formUtils } = FormInfo; + const { formState } = useFormContext(); + + const targetField = formUtils.findField(formState, target); + const [time, setTime] = useState(0); + const setCountdown = time => { + setTime(time); + const timer = setInterval(() => { + setTime(time => { + if (time - 1 === 0) { + clearInterval(timer); + } + return time - 1; + }); + }, 1000); + }; + + return ( + 0} + onClick={async () => { + const res = onClick && (await onClick()); + res !== false && setCountdown(duration); + }}> + {time === 0 ? children : `${time}s`} + + ); +}); + const RegisterInner = createWithRemoteLoader({ modules: ['components-core:FormInfo'] })(({ remoteModules, ...p }) => { @@ -55,7 +88,16 @@ const RegisterInner = createWithRemoteLoader({
{title}
- {type === 'phone' && } + {type === 'phone' && ( + + )} {type === 'email' && } diff --git a/src/components/Account/Register/style.module.scss b/src/components/Account/Register/style.module.scss index dad9ad7..9e5da46 100644 --- a/src/components/Account/Register/style.module.scss +++ b/src/components/Account/Register/style.module.scss @@ -1,6 +1,8 @@ .code-field { flex: 1; } + .get-code { vertical-align: 30px; + min-width: 105px; }