@authing/react-ui-components 4.0.0 → 4.0.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "4.0.0",
+  "version": "4.0.1-beta.0",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "types/index.d.ts",
@@ -12,6 +12,7 @@
   "dependencies": {
     "antd": "^4.8.0",
     "authing-js-sdk": "4.23.35",
+    "classnames": "^2.3.1",
     "fastclick": "^1.0.6",
     "global": "^4.4.0",
     "phone": "^3.1.12",

package/types/Login/core/withAppQrcode.d.ts

@@ -3,8 +3,7 @@ import { StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
 interface LoginWithAppQrcodeProps {
     onLoginSuccess: any;
     canLoop: boolean;
-    qrCodeScanOptions: any;
     multipleInstance?: StoreInstance;
 }
-export declare const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element;
+export declare const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element | null;
 export {};

package/types/Login/core/withWechatMiniQrcode.d.ts

@@ -7,5 +7,5 @@ interface LoginWithWechatMiniQrcodeProps {
     id: string;
     multipleInstance?: StoreInstance;
 }
-export declare const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element;
+export declare const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element | null;
 export {};

package/types/Login/core/withWechatmpQrcode.d.ts

@@ -10,5 +10,5 @@ interface LoginWithWechatmpQrcodeProps {
      */
     multipleInstance?: StoreInstance;
 }
-export declare const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element;
+export declare const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element | null;
 export {};

package/types/Qrcode/UiQrCode.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './index.less';
+import { CodeStatusDescriptions } from './WorkQrCode';
+export declare type CodeStatus = 'loading' | 'ready' | 'already' | 'success' | 'error' | 'expired' | 'cancel' | 'MFA';
+export declare 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;
+}
+declare const UiQrCode: React.NamedExoticComponent<UiQrProps>;
+export { UiQrCode };

package/types/Qrcode/WorkQrCode.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { QrCodeResponse } from './hooks/usePostQrCode';
+import { CodeStatus, UiQrProps } from './UiQrCode';
+/**
+ * 二维码不同状态下的底部描述文字
+ */
+export declare 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;
+    /**
+     * 不同二维码下生成配置
+     */
+    qrCodeScanOptions?: any;
+}
+declare const WorkQrCode: React.ForwardRefExoticComponent<WorkQrCodeProps & React.RefAttributes<any>>;
+export { WorkQrCode };

package/types/Qrcode/hooks/useImage.d.ts

@@ -0,0 +1,4 @@
+declare const useImage: (src: string | undefined, options: {
+    onLoad?: (() => void) | undefined;
+}) => (string | undefined)[];
+export { useImage };

package/types/Qrcode/hooks/usePostQrCode.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { AuthingGuardResponse, AuthingResponse } from '../../_utils/http';
+import { CodeStatus } from '../UiQrCode';
+import { CodeStatusDescriptions } from '../WorkQrCode';
+import { ReducerType, RootState } from './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 declare const useQrCode: (options: QrCodeOptions, request: QrCodeRequest) => void;
+export {};

package/types/Qrcode/hooks/usePreQrCode.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { CodeStatus } from '../UiQrCode';
+export declare type ReducerType = 'change' | 'changeStatus' | 'changeDesc';
+export declare type RootState = {
+    /**
+     * 状态
+     */
+    status: CodeStatus;
+    /**
+     * 底部描述
+     */
+    /**
+     * 当前二维码 URL
+     */
+    src?: string;
+    /**
+     * 二维码随机值
+     */
+    random?: string;
+};
+/**
+ * QrCode 准备阶段 Hook
+ */
+declare const usePreQrCode: () => {
+    state: RootState;
+    dispatch: import("react").Dispatch<{
+        type: ReducerType;
+        payload: Partial<RootState>;
+    }>;
+};
+export { usePreQrCode };

package/types/Qrcode/hooks/useStatus.d.ts

@@ -0,0 +1,7 @@
+import { CodeStatus } from '../UiQrCode';
+/**
+ * 根据不同状态添加不同的元素
+ * 维护不同状态的处理
+ */
+declare const useStatus: (status: CodeStatus) => ({} | null | undefined)[];
+export { useStatus };

package/types/Qrcode/index.d.ts

@@ -0,0 +1,7 @@
+import { UiQrCode } from './UiQrCode';
+import { WorkQrCode } from './WorkQrCode';
+declare type IQrCode = typeof WorkQrCode & {
+    UI: typeof UiQrCode;
+};
+declare const QrCode: IQrCode;
+export { QrCode };

package/types/version/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "4.0.0";
+declare const _default: "4.0.1-beta.0";
 export default _default;

package/types/AccountMerge/UserRadio.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { UserRadioItemProps, UserRadioProps } from './interface';
-import './styles.less';
-export declare const UserRadioItem: React.FC<UserRadioItemProps>;
-export declare const UserRadio: React.FC<UserRadioProps>;

package/types/AccountMerge/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './styles.less';
-export declare const GuardAccountMergeView: React.FC;

package/types/AccountMerge/interface.d.ts

@@ -1,27 +0,0 @@
-export interface BriefUserInfo {
-    displayName: string;
-    avatar: string;
-    phone: string;
-    email: string;
-    username: string;
-    name: string;
-}
-export interface GuardAccountMergeInitData {
-    currentUserInfo: BriefUserInfo;
-    existingUserInfo: BriefUserInfo;
-    mergeToken?: string;
-}
-export interface UserRadioProps {
-    currentUserInfo: BriefUserInfo;
-    existingUserInfo: BriefUserInfo;
-    onChange?: (value: any) => void;
-    value?: any;
-}
-export interface UserRadioItemProps extends BriefUserInfo {
-    value: boolean;
-    selected: boolean;
-    onClick: (value: boolean) => void;
-}
-export declare enum AuthFlowAction {
-    MERGE = "confirm-account-merge"
-}

package/types/AccountMerge/utils.d.ts

@@ -1,3 +0,0 @@
-import { User } from 'authing-js-sdk';
-export declare const getDisplayName: (user: User) => string;
-export declare const getDisplayNameByEmail: (displayName: string) => string;

package/types/CompleteInfo/core/components/TreeSelect.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare type OptionType = {
-    id: string;
-    name: string;
-    children: OptionType[];
-};
-interface TreeSelectProps {
-    options: OptionType[];
-}
-declare const TreeSelect: React.FC<TreeSelectProps>;
-export default TreeSelect;