mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
73 lines • 3.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["start", "initText", "runText", "resetText", "second", "onEnd"];
import React, { useEffect, useRef, useState } from 'react';
import CountDown from 'countdown-pro';
import { useLatest, useUpdateEffect } from 'rc-hooks';
import { Button } from 'antd-mobile';
import { useConfig } from "../BizConfigProvider";
var BizCaptchaButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var _props$start = props.start,
start = _props$start === void 0 ? false : _props$start,
_props$initText = props.initText,
initText = _props$initText === void 0 ? locale.captcha.initText : _props$initText,
_props$runText = props.runText,
runText = _props$runText === void 0 ? locale.captcha.runText : _props$runText,
_props$resetText = props.resetText,
resetText = _props$resetText === void 0 ? locale.captcha.resetText : _props$resetText,
_props$second = props.second,
second = _props$second === void 0 ? 60 : _props$second,
onEnd = props.onEnd,
restProps = _objectWithoutProperties(props, _excluded);
var _useState = useState(second),
_useState2 = _slicedToArray(_useState, 2),
time = _useState2[0],
setTime = _useState2[1];
var completedRef = useRef(false);
var latestOnEnd = useLatest(onEnd);
var countdownRef = useRef(undefined);
if (!countdownRef.current) {
countdownRef.current = new CountDown({
time: second * 1000,
adjustInterval: 10 * 1000,
onChange: function onChange(currentTime) {
setTime(currentTime / 1000);
},
onEnd: function onEnd() {
var _latestOnEnd$current;
completedRef.current = true;
(_latestOnEnd$current = latestOnEnd.current) === null || _latestOnEnd$current === void 0 || _latestOnEnd$current.call(latestOnEnd);
}
});
}
useEffect(function () {
if (start) {
var _countdownRef$current;
(_countdownRef$current = countdownRef.current) === null || _countdownRef$current === void 0 || _countdownRef$current.restart();
} else {
var _countdownRef$current2;
(_countdownRef$current2 = countdownRef.current) === null || _countdownRef$current2 === void 0 || _countdownRef$current2.pause();
}
return function () {
var _countdownRef$current3;
(_countdownRef$current3 = countdownRef.current) === null || _countdownRef$current3 === void 0 || _countdownRef$current3.pause();
};
}, [start]);
useUpdateEffect(function () {
var _countdownRef$current4;
(_countdownRef$current4 = countdownRef.current) === null || _countdownRef$current4 === void 0 || _countdownRef$current4.updateOptions({
time: second * 1000
});
}, [second]);
return /*#__PURE__*/React.createElement(Button, _extends({
loadingText: locale.captcha.loadingText
}, restProps, {
ref: ref,
disabled: start
}), !start && (completedRef.current ? resetText : initText), start && runText.replace(/%s/g, time.toString()));
});
BizCaptchaButton.displayName = 'BizCaptchaButton';
export default BizCaptchaButton;