@authing/react-ui-components 3.0.1-alpha → 3.0.1-beta.0

package/es/Register/core/WithPhone.js

@@ -0,0 +1,208 @@
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import "antd/lib/form/style";
+import _Form from "antd/lib/form";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAsyncFn } from 'react-use';
+import { useGuardAuthClient } from '../../Guard/authClient';
+import { SendCode } from '../../SendCode';
+import { fieldRequiredRule, getDeviceName, getUserRegisterParams } from '../../_utils';
+import { Agreements } from '../components/Agreements';
+import SubmitButton from '../../SubmitButton';
+import { InputNumber } from '../../InputNumber';
+import CustomFormItem // ValidatorFormItemProps,
+from '../../ValidatorRules';
+import { IconFont } from '../../IconFont'; // import { Rule } from 'antd/lib/form'
+
+export var RegisterWithPhone = function RegisterWithPhone(_ref) {
+  var _publicConfig$verifyC;
+
+  var onRegister = _ref.onRegister,
+      agreements = _ref.agreements,
+      publicConfig = _ref.publicConfig;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var submitButtonRef = useRef(null);
+  var authClient = useGuardAuthClient();
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      phone = _useState2[0],
+      setPhone = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      acceptedAgreements = _useState4[0],
+      setAcceptedAgreements = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      validated = _useState6[0],
+      setValidated = _useState6[1];
+
+  var ref = useRef(null);
+  var verifyCodeLength = (_publicConfig$verifyC = publicConfig === null || publicConfig === void 0 ? void 0 : publicConfig.verifyCodeLength) !== null && _publicConfig$verifyC !== void 0 ? _publicConfig$verifyC : 4;
+
+  var _useAsyncFn = useAsyncFn( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var _phone, _values$password, password, _code, user, _code2, _data, _message2;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              submitButtonRef.current.onSpin(true);
+              _context.next = 4;
+              return form.validateFields();
+
+            case 4:
+              setValidated(true);
+
+              if (!(agreements !== null && agreements !== void 0 && agreements.length && !acceptedAgreements)) {
+                _context.next = 9;
+                break;
+              }
+
+              _message.error(t('common.protocolTips'));
+
+              submitButtonRef.current.onError(); // submitButtonRef.current.onSpin(false)
+
+              return _context.abrupt("return");
+
+            case 9:
+              _phone = values.phone, _values$password = values.password, password = _values$password === void 0 ? '' : _values$password, _code = values.code; // 注册
+
+              _context.next = 12;
+              return authClient.registerByPhoneCode(_phone, _code, password, {
+                browser: typeof navigator !== 'undefined' ? navigator.userAgent : null,
+                device: getDeviceName()
+              }, {
+                generateToken: true,
+                params: getUserRegisterParams()
+              });
+
+            case 12:
+              user = _context.sent;
+              submitButtonRef.current.onSpin(false);
+              onRegister(200, user);
+              _context.next = 24;
+              break;
+
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](0);
+              _code2 = _context.t0.code;
+              _data = _context.t0.data;
+              _message2 = _context.t0.message;
+              submitButtonRef.current.onError(); // submitButtonRef.current.onSpin(false)
+
+              onRegister(_code2, _data, _message2);
+
+            case 24:
+              _context.prev = 24;
+              submitButtonRef.current.onSpin(false);
+              return _context.finish(24);
+
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 17, 24, 27]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [form, acceptedAgreements], {
+    loading: false
+  }),
+      _useAsyncFn2 = _slicedToArray(_useAsyncFn, 2),
+      onFinish = _useAsyncFn2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-register-email"
+  }, /*#__PURE__*/React.createElement(_Form, {
+    form: form,
+    name: "emailRegister",
+    autoComplete: "off",
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    },
+    onValuesChange: function onValuesChange(values) {
+      var _ref$current;
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.check(values);
+    }
+  }, /*#__PURE__*/React.createElement(CustomFormItem.Phone, {
+    ref: ref,
+    key: "phone",
+    name: "phone",
+    className: "authing-g2-input-form",
+    validateFirst: true,
+    form: form,
+    checkRepeat: true,
+    required: true
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    className: "authing-g2-input",
+    onChange: function onChange(e) {
+      setPhone(e.target.value);
+    },
+    size: "large",
+    placeholder: t('login.inputPhone') // prefix={<UserOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "authing-a-user-line1",
+      style: {
+        color: '#878A95'
+      }
+    }),
+    maxLength: 11
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    key: "code",
+    name: "code",
+    validateTrigger: ['onBlur', 'onChange'],
+    rules: fieldRequiredRule(t('common.captchaCode')),
+    className: "authing-g2-input-form",
+    validateFirst: true
+  }, /*#__PURE__*/React.createElement(SendCode, {
+    className: "authing-g2-input",
+    autoComplete: "one-time-code",
+    size: "large",
+    placeholder: t('common.inputFourVerifyCode', {
+      length: verifyCodeLength
+    }),
+    maxLength: verifyCodeLength // prefix={<SafetyOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "authing-a-shield-check-line1",
+      style: {
+        color: '#878A95'
+      }
+    }),
+    method: "phone",
+    onSendCodeBefore: function onSendCodeBefore() {
+      return form.validateFields(['phone']);
+    },
+    data: phone
+  })), Boolean(agreements === null || agreements === void 0 ? void 0 : agreements.length) && /*#__PURE__*/React.createElement(Agreements, {
+    onChange: setAcceptedAgreements,
+    agreements: agreements,
+    showError: validated
+  }), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(SubmitButton, {
+    text: t('common.register'),
+    ref: submitButtonRef
+  }))));
+};

package/es/Register/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GuardRegisterViewProps } from './interface';
+export declare const GuardRegisterView: React.FC<GuardRegisterViewProps>;

package/es/Register/index.js

@@ -0,0 +1,171 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import "antd/lib/tabs/style";
+import _Tabs from "antd/lib/tabs";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["config", "onLangChange", "__changeModule"];
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RegisterMethods } from 'authing-js-sdk';
+import { ChangeLanguage } from '../ChangeLanguage';
+import { useGuardAuthClient } from '../Guard/authClient';
+import { GuardModuleType } from '../Guard/module';
+import { RegisterWithEmail } from './core/WithEmail';
+import { RegisterWithPhone } from './core/WithPhone';
+import { codeMap } from './codemap';
+import { shoudGoToComplete, tabSort } from '../_utils';
+import { i18n } from '../_utils/locales';
+export var GuardRegisterView = function GuardRegisterView(_ref) {
+  var config = _ref.config,
+      onLangChange = _ref.onLangChange,
+      __changeModule = _ref.__changeModule,
+      registerEvents = _objectWithoutProperties(_ref, _excluded);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var agreementEnabled = config === null || config === void 0 ? void 0 : config.agreementEnabled;
+  var langRange = config.langRange;
+  var authClient = useGuardAuthClient();
+
+  var __codePaser = function __codePaser(code) {
+    var action = codeMap[code];
+
+    if (code === 200) {
+      return function (user) {
+        // TODO 用户信息补全 等待后端接口修改
+        if (shoudGoToComplete(user, 'register', config.__publicConfig__)) {
+          __changeModule === null || __changeModule === void 0 ? void 0 : __changeModule(GuardModuleType.COMPLETE_INFO, {
+            context: 'register',
+            user: user
+          });
+        } else {
+          var _registerEvents$onReg;
+
+          (_registerEvents$onReg = registerEvents.onRegister) === null || _registerEvents$onReg === void 0 ? void 0 : _registerEvents$onReg.call(registerEvents, user, authClient);
+          __changeModule === null || __changeModule === void 0 ? void 0 : __changeModule(GuardModuleType.LOGIN, {});
+        }
+      };
+    }
+
+    if (!action) {
+      return function (initData) {
+        _message.error((initData === null || initData === void 0 ? void 0 : initData._message) === 'Network Error' ? t('common.error4network') : initData === null || initData === void 0 ? void 0 : initData._message);
+
+        console.error('未捕获 code', code);
+      };
+    }
+
+    if ((action === null || action === void 0 ? void 0 : action.action) === 'message') {
+      return function (initData) {
+        _message.error(initData === null || initData === void 0 ? void 0 : initData._message);
+      };
+    }
+  };
+
+  var registerContextProps = useMemo(function () {
+    var _config$agreements$fi, _config$agreements;
+
+    return {
+      onRegister: function onRegister(code) {
+        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        var message = arguments.length > 2 ? arguments[2] : undefined;
+        console.log('注册 onRegister');
+
+        var callback = __codePaser(code);
+
+        if (code !== 200) {
+          var _registerEvents$onReg2;
+
+          (_registerEvents$onReg2 = registerEvents.onRegisterError) === null || _registerEvents$onReg2 === void 0 ? void 0 : _registerEvents$onReg2.call(registerEvents, {
+            code: code,
+            data: data,
+            message: message
+          });
+        }
+
+        callback === null || callback === void 0 ? void 0 : callback(_objectSpread(_objectSpread({}, data), {}, {
+          _message: message
+        }));
+      },
+      onBeforeRegister: registerEvents.onBeforeRegister,
+      agreements: agreementEnabled ? (_config$agreements$fi = config === null || config === void 0 ? void 0 : (_config$agreements = config.agreements) === null || _config$agreements === void 0 ? void 0 : _filterInstanceProperty(_config$agreements).call(_config$agreements, function (agree) {
+        return agree.lang === i18n.language;
+      })) !== null && _config$agreements$fi !== void 0 ? _config$agreements$fi : [] : [],
+      publicConfig: config.__publicConfig__
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [agreementEnabled, config === null || config === void 0 ? void 0 : config.agreements, registerEvents.onBeforeRegister, i18n.language]);
+  var tabMapping = useMemo(function () {
+    var _ref2;
+
+    return _ref2 = {}, _defineProperty(_ref2, RegisterMethods.Email, {
+      component: /*#__PURE__*/React.createElement(RegisterWithEmail, registerContextProps),
+      name: t('common.emailLabel')
+    }), _defineProperty(_ref2, RegisterMethods.Phone, {
+      component: /*#__PURE__*/React.createElement(RegisterWithPhone, registerContextProps),
+      name: t('common.phoneLabel')
+    }), _ref2;
+  }, [registerContextProps, t]);
+  var renderTab = useMemo(function () {
+    var _tabSort;
+
+    var registerMethods = config.registerMethods,
+        defaultRegisterMethod = config.defaultRegisterMethod;
+    return (_tabSort = tabSort(defaultRegisterMethod, registerMethods)) === null || _tabSort === void 0 ? void 0 : _mapInstanceProperty(_tabSort).call(_tabSort, function (method) {
+      return /*#__PURE__*/React.createElement(_Tabs.TabPane, {
+        tab: tabMapping[method].name,
+        key: method
+      }, tabMapping[method].component);
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config === null || config === void 0 ? void 0 : config.defaultRegisterMethod, tabMapping]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "g2-view-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "g2-view-header"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: config === null || config === void 0 ? void 0 : config.logo,
+    alt: "",
+    className: "icon"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, t('common.welcomeJoin', {
+    name: config === null || config === void 0 ? void 0 : config.title
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "g2-view-tabs"
+  }, console.log(config, 'config?.defaultRegisterMethod}'), /*#__PURE__*/React.createElement(_Tabs, {
+    defaultActiveKey: config === null || config === void 0 ? void 0 : config.defaultRegisterMethod,
+    onChange: function onChange(activeKey) {
+      var _registerEvents$onReg3;
+
+      (_registerEvents$onReg3 = registerEvents.onRegisterTabChange) === null || _registerEvents$onReg3 === void 0 ? void 0 : _registerEvents$onReg3.call(registerEvents, activeKey);
+    }
+  }, renderTab)), /*#__PURE__*/React.createElement("div", {
+    className: "g2-tips-line"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "back-to-login"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "link-like",
+    onClick: function onClick() {
+      return __changeModule === null || __changeModule === void 0 ? void 0 : __changeModule(GuardModuleType.LOGIN, {});
+    }
+  }, t('common.backLoginPage')))), /*#__PURE__*/React.createElement(ChangeLanguage, {
+    langRange: langRange,
+    onLangChange: onLangChange
+  }));
+};

package/es/Register/interface.d.ts

@@ -0,0 +1,25 @@
+import { RegisterMethods } from 'authing-js-sdk';
+import { IG2FCProps, IG2Config, IG2Events } from '../Type';
+import { AuthenticationClient, User, EmailRegisterParams, PhoneRegisterParams } from '..';
+import { Agreement } from '../AuthingGuard/api';
+export interface RegisterConfig extends IG2Config {
+    disableRegister: boolean;
+    registerMethods: RegisterMethods[];
+    defaultRegisterMethod: RegisterMethods;
+    publicKey?: string;
+    agreementEnabled?: boolean;
+    agreements?: Agreement[];
+}
+export interface RegisterEvents extends IG2Events {
+    onBeforeRegister?: (registerInfo: EmailRegisterParams | PhoneRegisterParams, authClient: AuthenticationClient) => boolean | Promise<boolean>;
+    onRegister?: (user: User, authClient: AuthenticationClient) => void;
+    onRegisterError?: (error: any) => void;
+    onRegisterTabChange?: (activeTab: RegisterMethods) => void;
+}
+export interface GuardRegisterProps extends IG2FCProps, RegisterEvents {
+    config?: Partial<RegisterConfig>;
+}
+export interface GuardRegisterViewProps extends GuardRegisterProps {
+    config: RegisterConfig;
+}
+export declare const getDefaultRegisterConfig: () => RegisterConfig;

package/es/Register/interface.js

@@ -0,0 +1,28 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { RegisterMethods } from 'authing-js-sdk';
+import { getDefaultG2Config } from '../Type';
+
+var defaultConfig = _objectSpread(_objectSpread({}, getDefaultG2Config()), {}, {
+  disableRegister: false,
+  defaultRegisterMethod: RegisterMethods.Email,
+  registerMethods: [RegisterMethods.Email, RegisterMethods.Phone]
+});
+
+var getDefaultConfig = function getDefaultConfig() {
+  return _objectSpread(_objectSpread({}, getDefaultG2Config()), defaultConfig);
+};
+
+export var getDefaultRegisterConfig = getDefaultConfig;

package/es/Register/style/css.js

@@ -0,0 +1 @@
+import './index.css';

package/es/Register/style/index.css

@@ -0,0 +1 @@
+.authing-agreements{margin-top:20px;margin-bottom:20px}.authing-agreements.authing-agreements-error .authing-agreements-item-invalid,.authing-agreements.authing-agreements-error .authing-agreements-item-invalid a{color:#ff4d4f}.authing-agreements.authing-agreements-error .authing-agreements-item-invalid :global(.ant-checkbox-inner){border-color:#ff4d4f}.authing-agreements-item{color:#999;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;font-size:12px}.authing-agreements-item:not(:first-child){margin-top:4px}.authing-agreements-item p{margin-bottom:0;display:inline-block}.authing-agreements-checkbox{margin-bottom:2px}.authing-agreements-checkbox :global(.ant-checkbox-inner){width:14px;height:14px}.authing-agreements-checkbox :global(.ant-checkbox-inner):after{left:20%}.authing-agreements-item-content{line-height:23px}

package/es/Register/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/Register/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/SendCode/SendCodeBtn.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { ButtonProps } from 'antd/lib/button';
+export interface SendCodeProps extends ButtonProps {
+    beforeSend: () => Promise<boolean>;
+    btnRef?: React.RefObject<HTMLButtonElement>;
+    setSent?: (value: boolean) => void;
+    sendDesc?: string;
+}
+export declare const SendCodeBtn: FC<SendCodeProps>;

package/es/SendCode/SendCodeBtn.js

@@ -0,0 +1,138 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+var _excluded = ["sendDesc", "beforeSend", "btnRef", "setSent"];
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _setInterval from "@babel/runtime-corejs3/core-js-stable/set-interval";
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+var TIME = 60;
+
+var useSentCounter = function useSentCounter(effect) {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      countDown = _useState2[0],
+      setCountDown = _useState2[1];
+
+  var timerRef = useRef(0);
+  useEffect(function () {
+    return function () {
+      return clearInterval(timerRef.current);
+    };
+  }, []);
+  useEffect(function () {
+    if (countDown <= 0) {
+      clearInterval(timerRef.current);
+      effect === null || effect === void 0 ? void 0 : effect(false);
+    } else {
+      effect === null || effect === void 0 ? void 0 : effect(true);
+    }
+  }, [countDown, effect]);
+  var enabled = useMemo(function () {
+    return countDown <= 0;
+  }, [countDown]);
+
+  var send = function send() {
+    setCountDown(TIME);
+    timerRef.current = _setInterval(function () {
+      setCountDown(function (prev) {
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  return {
+    enabled: enabled,
+    send: send,
+    countDown: countDown
+  };
+};
+
+export var SendCodeBtn = function SendCodeBtn(props) {
+  var _buttonProps$type;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _props$sendDesc = props.sendDesc,
+      sendDesc = _props$sendDesc === void 0 ? t('login.clickSent') : _props$sendDesc,
+      beforeSend = props.beforeSend,
+      btnRef = props.btnRef,
+      setSent = props.setSent,
+      buttonProps = _objectWithoutProperties(props, _excluded);
+
+  var _useSentCounter = useSentCounter(setSent),
+      enabled = _useSentCounter.enabled,
+      send = _useSentCounter.send,
+      countDown = _useSentCounter.countDown;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var disabled = useMemo(function () {
+    return !enabled || loading;
+  }, [enabled, loading]);
+
+  var onClick = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var beforeStop;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+
+              if (!disabled) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              _context.next = 5;
+              return beforeSend();
+
+            case 5:
+              beforeStop = !_context.sent;
+
+              if (!beforeStop) {
+                _context.next = 9;
+                break;
+              }
+
+              setLoading(false);
+              return _context.abrupt("return");
+
+            case 9:
+              setLoading(false);
+              send();
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onClick(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(_Button, _extends({}, buttonProps, {
+    className: (_buttonProps$type = buttonProps.type) !== null && _buttonProps$type !== void 0 ? _buttonProps$type : 'authing-g2-send-code-btn g2-loading-btn-center',
+    disabled: disabled,
+    loading: loading,
+    onClick: onClick,
+    ref: btnRef
+  }), loading === true && /*#__PURE__*/React.createElement("span", null), loading === false && /*#__PURE__*/React.createElement("span", null, enabled ? sendDesc : t('common.retryAfterTime', {
+    time: countDown
+  })));
+};

package/es/SendCode/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { InputProps } from 'antd/lib/input';
+export interface SendPhoneCodeProps extends InputProps {
+    method: 'phone' | 'email';
+    data: string;
+    form?: any;
+    onSendCodeBefore?: any;
+    fieldName?: string;
+    autoSubmit?: boolean;
+}
+export declare const SendCode: FC<SendPhoneCodeProps>;