@authing/react-ui-components 3.1.36 → 3.1.37-beta.0

package/lib/index.d.ts

@@ -1943,9 +1943,8 @@ declare module '@authing/react-ui-components/components/Login/core/withAppQrcode
   interface LoginWithAppQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
-      qrCodeScanOptions: any;
   }
-  export const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element;
+  export const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element | null;
   export {};
 
 }
@@ -2074,9 +2073,8 @@ declare module '@authing/react-ui-components/components/Login/core/withWechatMin
   interface LoginWithWechatMiniQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
-      qrCodeScanOptions: any;
   }
-  export const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element;
+  export const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element | null;
   export {};
 
 }
@@ -2085,9 +2083,8 @@ declare module '@authing/react-ui-components/components/Login/core/withWechatmpQ
   interface LoginWithWechatmpQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
-      qrCodeScanOptions: any;
   }
-  export const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element;
+  export const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element | null;
   export {};
 
 }
@@ -2432,6 +2429,233 @@ declare module '@authing/react-ui-components/components/NeedHelpView/index' {
   /// <reference types="react" />
   export const GuardNeedHelpView: (props: any) => JSX.Element;
 
+}
+declare module '@authing/react-ui-components/components/Qrcode/UiQrCode' {
+  import React from 'react';
+  import './index.less';
+  import { CodeStatusDescriptions } from '@authing/react-ui-components/components/Qrcode/WorkQrCode';
+  export type CodeStatus = 'loading' | 'ready' | 'already' | 'success' | 'error' | 'expired' | 'cancel' | 'MFA';
+  export const prefix = "refactor";
+  export interface UiQrProps {
+      /**
+       * Loading 组件
+       */
+      loadingComponent?: React.ReactElement;
+      /**
+       * 二维码组件三种状态
+       * ready 准备状态
+       * already 已扫描状态
+       * success 扫描成功/登录成功状态
+       * error 错误状态（超时、网络错误）
+       */
+      status: CodeStatus;
+      /**
+       * 二维码 URL
+       */
+      src?: string;
+      /**
+       * 二维码底部内容
+       */
+      descriptions: CodeStatusDescriptions;
+      /**
+       * 外层 container 样式
+       */
+      containerStyle?: React.CSSProperties;
+      /**
+       * 内层 container 样式(图片)
+       */
+      imageStyle?: React.CSSProperties;
+      /**
+       * 二维码图片准备好的回调
+       */
+      onLoad?: () => void;
+      /**
+       * 点击遮罩中的内容区
+       * status 当前组件所处状态
+       */
+      onClickMaskEl?: (status: CodeStatus) => void;
+      /**
+       * 点击全部遮罩区域
+       * status 当前组件所处状态
+       */
+      onMaskContent?: (status: CodeStatus) => void;
+  }
+  const UiQrCode: React.NamedExoticComponent<UiQrProps>;
+  export { UiQrCode };
+
+}
+declare module '@authing/react-ui-components/components/Qrcode/WorkQrCode' {
+  import React from 'react';
+  import { QrCodeResponse } from '@authing/react-ui-components/components/Qrcode/hooks/usePostQrCode';
+  import { CodeStatus, UiQrProps } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
+  /**
+   * 二维码不同状态下的底部描述文字
+   */
+  export type CodeStatusDescriptions = Partial<Record<Exclude<CodeStatus, 'loading'>, React.ReactNode | ((referQrCode?: () => void) => React.ReactNode)>>;
+  export interface WorkQrCodeRef {
+      referQrCode: () => Promise<{
+          random: string;
+          url: string;
+      } | undefined>;
+  }
+  interface WorkQrCodeProps extends Omit<UiQrProps, 'description' | 'status'> {
+      /**
+       * 二维码场景
+       */
+      scene: 'WXAPP_AUTH' | 'APP_AUTH' | 'WECHATMP_AUTH';
+      /**
+       * 不同状态请求文字
+       */
+      descriptions: CodeStatusDescriptions;
+      /**
+       * 睡眠时间 默认 1000
+       */
+      sleepTime?: number;
+      /**
+       * 每当状态变化时，触发的 callback 。
+       */
+      onStatusChange?: (status: CodeStatus, data: QrCodeResponse) => void;
+      /**
+       * 不同状态下点击遮罩中间区域方法
+       */
+      onClickMaskContent?: (status: CodeStatus) => void;
+  }
+  const WorkQrCode: React.ForwardRefExoticComponent<WorkQrCodeProps & React.RefAttributes<any>>;
+  export { WorkQrCode };
+
+}
+declare module '@authing/react-ui-components/components/Qrcode/hooks/useImage' {
+  const useImage: (src: string | undefined, options: {
+      onLoad?: (() => void) | undefined;
+  }) => (string | undefined)[];
+  export { useImage };
+
+}
+declare module '@authing/react-ui-components/components/Qrcode/hooks/usePostQrCode' {
+  /// <reference types="react" />
+  import { AuthingGuardResponse, AuthingResponse } from '@authing/react-ui-components/components/_utils/http';
+  import { CodeStatus } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
+  import { CodeStatusDescriptions } from '@authing/react-ui-components/components/Qrcode/WorkQrCode';
+  import { ReducerType, RootState } from '@authing/react-ui-components/components/Qrcode/hooks/usePreQrCode';
+  export interface QrCodeResponse {
+      /**
+       * 根据状态确定不同的流程
+       */
+      status: number;
+      /**
+       * 返回的随机值
+       */
+      random: number;
+      /**
+       * 返回的用户信息
+       */
+      userInfo?: any;
+      /**
+       * 扫码成功后 Tick 换取用户信息
+       */
+      ticket?: string;
+      /**
+       * MFA 状态下的返回
+       */
+      scannedResult?: AuthingResponse;
+  }
+  /**
+   * 二维码请求相关
+   */
+  interface QrCodeRequest {
+      genCodeRequest?: () => Promise<AuthingGuardResponse<{
+          random: string;
+          url: string;
+      }>>;
+      /**
+       * 未扫码下的请求方法
+       */
+      readyCheckedRequest?: () => Promise<AuthingGuardResponse<QrCodeResponse>>;
+      /**
+       * 已经扫码下的请求方法（待确认）
+       */
+      alreadyCheckedRequest?: () => Promise<AuthingGuardResponse<QrCodeResponse>>;
+      /**
+       * 使用 ticket 交换用户信息
+       */
+      exchangeUserInfo?: (ticket: string) => Promise<any>;
+  }
+  interface QrCodeOptions {
+      state: RootState;
+      dispatch: React.Dispatch<{
+          type: ReducerType;
+          payload: Partial<RootState>;
+      }>;
+      descriptions: CodeStatusDescriptions;
+      sleepTime?: number;
+      /**
+       * 状态改变时触发事件，仅在 Server 返回的二维码状态改变时进行触发
+       */
+      onStatusChange?: (status: CodeStatus, data: QrCodeResponse) => void;
+  }
+  /**
+   * 二维码处理阶段
+   * 二维码处理阶段分为两个主要流程
+   * 1. 同一状态下的轮询逻辑处理
+   * 2. 根据不同返回状态码进行处理
+   */
+  export const useQrCode: (options: QrCodeOptions, request: QrCodeRequest) => void;
+  export {};
+
+}
+declare module '@authing/react-ui-components/components/Qrcode/hooks/usePreQrCode' {
+  /// <reference types="react" />
+  import { CodeStatus } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
+  export type ReducerType = 'change' | 'changeStatus' | 'changeDesc';
+  export type RootState = {
+      /**
+       * 状态
+       */
+      status: CodeStatus;
+      /**
+       * 底部描述
+       */
+      /**
+       * 当前二维码 URL
+       */
+      src?: string;
+      /**
+       * 二维码随机值
+       */
+      random?: string;
+  };
+  /**
+   * QrCode 准备阶段 Hook
+   */
+  const usePreQrCode: () => {
+      state: RootState;
+      dispatch: import("react").Dispatch<{
+          type: ReducerType;
+          payload: Partial<RootState>;
+      }>;
+  };
+  export { usePreQrCode };
+
+}
+declare module '@authing/react-ui-components/components/Qrcode/hooks/useStatus' {
+  import { CodeStatus } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
+  /**
+   * 根据不同状态添加不同的元素
+   * 维护不同状态的处理
+   */
+  const useStatus: (status: CodeStatus) => ({} | null | undefined)[];
+  export { useStatus };
+
+}
+declare module '@authing/react-ui-components/components/Qrcode/index' {
+  import { UiQrCode } from '@authing/react-ui-components/components/Qrcode/UiQrCode';
+  import { WorkQrCode } from '@authing/react-ui-components/components/Qrcode/WorkQrCode';
+  type IQrCode = typeof WorkQrCode & {
+      UI: typeof UiQrCode;
+  };
+  const QrCode: IQrCode;
+  export { QrCode };
+
 }
 declare module '@authing/react-ui-components/components/RecoveryCode/businessRequest' {
   export enum TotpRecoveryCodeBusinessAction {
@@ -2998,6 +3222,8 @@ declare module '@authing/react-ui-components/components/_utils/config/index' {
               expired?: string | undefined;
               retry?: string | undefined;
               failed?: string | undefined;
+              middleTitle?: string | undefined;
+              referText?: string | undefined;
           } | undefined;
           onAuthFlow?: ((flow: Record<string, any>) => {}) | undefined;
           customData?: {
@@ -3283,11 +3509,7 @@ declare module '@authing/react-ui-components/components/_utils/index' {
    * @param ...sources
    */
   export function deepMerge<T extends any = any>(target: T, ...sources: any[]): T;
-  /**
-   *  在托管页下上传query中指定的用户自定义字段进行补全
-   * @param params 指定上传的用户自定义字段
-   */
-  export const getUserRegisterParams: (params?: string[] | undefined) => {
+  export const getUserRegisterParams: () => {
       key: string;
       value: string | string[] | qs.ParsedQs | qs.ParsedQs[] | undefined;
   }[];
@@ -3541,7 +3763,7 @@ declare module '@authing/react-ui-components/components/version/index' {
 
 }
 declare module '@authing/react-ui-components/components/version/version' {
-  const _default: "3.1.36";
+  const _default: "3.1.37-beta.0";
   export default _default;
 
 }