@authing/native-js-ui-components 3.1.13-rc.8 → 3.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authing/native-js-ui-components",
-  "version": "3.1.13-rc.8",
+  "version": "3.1.15",
   "framework": "Native",
   "private": false,
   "main": "lib/index.min.js",
@@ -165,8 +165,8 @@
     "workbox-webpack-plugin": "5.1.4"
   },
   "dependencies": {
-    "@authing/react-ui-components": "^3.1.13-rc.6",
+    "@authing/react-ui-components": "^3.1.15",
     "authing-js-sdk": "4.23.30-alpha.3"
   },
-  "gitHead": "0f861e93c88d078836a93457e9eb1cbd2d74b7c0"
+  "gitHead": "e8c0c8a0537ae158c58225dafa0adc8e0055ed32"
 }

package/src/App.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from "react";
 import "./App.css";
-import { Guard, GuardMode } from "./components";
+import { Guard, GuardEventsCamelToKebabMapping, GuardMode } from "./components";
 
 function App() {
+  console.log(GuardEventsCamelToKebabMapping);
+
   useEffect(() => {
     const guard = new Guard("6191cf610f772aa56dc70637", {
       target: ".App",

package/src/components/AuthingGuard/index.tsx

@@ -2,54 +2,20 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { AuthingGuard as ReactAuthingGuard } from "@authing/react-ui-components";
 import {
-  User,
   GuardMode,
   UserConfig,
-  GuardScenes,
-  LoginMethods,
-  getAuthClient,
-  CommonMessage,
-  initAuthClient,
-  RegisterMethods,
   GuardEventsHandler,
-  AuthenticationClient,
   GuardEventsHandlerKebab,
   GuardEventsCamelToKebabMap,
 } from "@authing/react-ui-components";
 import "@authing/react-ui-components/lib/index.min.css";
 
-export type {
-  User,
-  UserConfig,
-  CommonMessage,
-  GuardEventsHandler,
-  AuthenticationClient,
-  GuardEventsHandlerKebab,
-};
-
-export {
-  GuardMode,
-  GuardScenes,
-  LoginMethods,
-  getAuthClient,
-  initAuthClient,
-  RegisterMethods,
-  GuardEventsCamelToKebabMap,
-};
-
 export type EventListeners = {
-  [key in keyof GuardEventsHandlerKebab]: Exclude<
-    Required<GuardEventsHandlerKebab>[key],
-    undefined
-  >[];
+  [key in keyof GuardEventsHandlerKebab]: Exclude<Required<GuardEventsHandlerKebab>[key], undefined>[];
 };
 
 export class AuthingGuard {
-  constructor(
-    private appId: string,
-    private config?: UserConfig,
-    private tenantId?: string
-  ) {
+  constructor(private appId: string, private config?: UserConfig, private tenantId?: string) {
     this.render();
   }
 
@@ -76,19 +42,14 @@ export class AuthingGuard {
 
   private visible = this.config?.mode === GuardMode.Modal ? false : true;
 
-  private eventListeners = Object.values(GuardEventsCamelToKebabMap).reduce(
-    (acc, evtName) => {
-      return Object.assign({}, acc, {
-        [evtName]: [],
-      });
-    },
-    {} as EventListeners
-  );
+  private eventListeners = Object.values(GuardEventsCamelToKebabMap).reduce((acc, evtName) => {
+    return Object.assign({}, acc, {
+      [evtName]: [],
+    });
+  }, {} as EventListeners);
 
   private render(cb?: () => void) {
-    const evts: GuardEventsHandler = Object.entries(
-      GuardEventsCamelToKebabMap
-    ).reduce((acc, [reactEvt, nativeEvt]) => {
+    const evts: GuardEventsHandler = Object.entries(GuardEventsCamelToKebabMap).reduce((acc, [reactEvt, nativeEvt]) => {
       return Object.assign({}, acc, {
         [reactEvt]: (...rest: any) => {
           if (nativeEvt === "close") {
@@ -121,10 +82,7 @@ export class AuthingGuard {
     );
   }
 
-  on<T extends keyof GuardEventsHandlerKebab>(
-    evt: T,
-    handler: Exclude<GuardEventsHandlerKebab[T], undefined>
-  ) {
+  on<T extends keyof GuardEventsHandlerKebab>(evt: T, handler: Exclude<GuardEventsHandlerKebab[T], undefined>) {
     this.eventListeners[evt]!.push(handler as any);
   }
 

package/src/components/Guard/index.tsx

@@ -2,58 +2,69 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Guard as ReactAuthingGuard } from "@authing/react-ui-components";
 import {
-  User,
   GuardMode,
-  GuardScenes,
-  LoginMethods,
-  getAuthClient,
-  CommonMessage,
-  initAuthClient,
-  RegisterMethods,
-  GuardEventsHandler,
+  GuardEvents,
   AuthenticationClient,
-  GuardEventsHandlerKebab,
-  GuardEventsCamelToKebabMap,
+  GuardEventsKebabToCamelType,
+  GuardEventsCamelToKebabMapping,
 } from "@authing/react-ui-components";
 import "@authing/react-ui-components/lib/index.min.css";
-import {
-  GuardComponentConfig,
-  GuardLocalConfig,
-} from "@authing/react-ui-components/components/Guard/config";
-import { GuardEvents } from "@authing/react-ui-components/components/Guard/event";
-
-export type {
-  User,
-  CommonMessage,
-  GuardEventsHandler,
-  AuthenticationClient,
-  GuardEventsHandlerKebab,
-};
+import { GuardComponentConfig, GuardLocalConfig } from "@authing/react-ui-components/components/Guard/config";
 
-export {
-  GuardMode,
-  GuardScenes,
-  LoginMethods,
-  getAuthClient,
-  initAuthClient,
-  RegisterMethods,
-  GuardEventsCamelToKebabMap,
-};
+export interface NativeGuardProps {
+  appId?: string;
+  config?: Partial<GuardLocalConfig>;
+  tenantId?: string;
+  authClient?: AuthenticationClient;
+}
+
+export interface NativeGuardConstructor {
+  (
+    appId?: string | NativeGuardProps,
+    config?: Partial<GuardLocalConfig>,
+    tenantId?: string,
+    authClient?: AuthenticationClient
+  ): void;
+
+  (props: NativeGuardProps): void;
+}
 
 export type GuardEventListeners = {
-  [key in keyof GuardEventsHandlerKebab]: Exclude<
-    Required<GuardEventsHandlerKebab>[key],
-    undefined
-  >[];
+  [key in keyof GuardEventsKebabToCamelType]: Exclude<Required<GuardEventsKebabToCamelType>[key], undefined>[];
 };
 
 export class Guard {
+  private appId?: string;
+  private config?: Partial<GuardLocalConfig>;
+  private tenantId?: string;
+  private authClient?: AuthenticationClient;
+
+  private visible?: boolean;
+
+  constructor(props?: NativeGuardProps);
+  constructor(appId?: string, config?: Partial<GuardLocalConfig>, tenantId?: string, authClient?: AuthenticationClient);
+
   constructor(
-    private appId?: string,
-    private config?: Partial<GuardLocalConfig>,
-    private tenantId?: string,
-    private authClient?: AuthenticationClient
+    appIdOrProps?: string | NativeGuardProps,
+    config?: Partial<GuardLocalConfig>,
+    tenantId?: string,
+    authClient?: AuthenticationClient
   ) {
+    if (appIdOrProps && typeof appIdOrProps !== "string") {
+      const { appId, config: configProps, tenantId: tenantIdProps, authClient: authClientProps } = appIdOrProps;
+      this.appId = appId;
+      this.config = configProps;
+      this.tenantId = tenantIdProps;
+      this.authClient = authClientProps;
+    } else {
+      this.appId = appIdOrProps;
+      this.config = config;
+      this.tenantId = tenantId;
+      this.authClient = authClient;
+    }
+
+    this.visible = this.config?.mode === GuardMode.Modal ? false : true;
+
     this.render();
   }
 
@@ -78,21 +89,14 @@ export class Guard {
     return selector;
   }
 
-  private visible = this.config?.mode === GuardMode.Modal ? false : true;
-
-  private eventListeners = Object.values(GuardEventsCamelToKebabMap).reduce(
-    (acc, evtName) => {
-      return Object.assign({}, acc, {
-        [evtName]: [],
-      });
-    },
-    {} as GuardEventListeners
-  );
+  private eventListeners = Object.values(GuardEventsCamelToKebabMapping).reduce((acc, evtName) => {
+    return Object.assign({}, acc, {
+      [evtName as string]: [],
+    });
+  }, {} as GuardEventListeners);
 
   private render(cb?: () => void) {
-    const evts: GuardEventsHandler = Object.entries(
-      GuardEventsCamelToKebabMap
-    ).reduce((acc, [reactEvt, nativeEvt]) => {
+    const evts: GuardEvents = Object.entries(GuardEventsCamelToKebabMapping).reduce((acc, [reactEvt, nativeEvt]) => {
       return Object.assign({}, acc, {
         [reactEvt]: (...rest: any) => {
           if (nativeEvt === "close") {
@@ -101,7 +105,7 @@ export class Guard {
 
           // TODO 返回最后一个执行函数的值，实际应该只让监听一次
           return (
-            this.eventListeners[nativeEvt]
+            (this.eventListeners as any)[nativeEvt as string]
               // @ts-ignore
               .map((item: any) => {
                 return item(...rest);
@@ -110,7 +114,7 @@ export class Guard {
           );
         },
       });
-    }, {} as GuardEventsHandler);
+    }, {} as GuardEvents);
 
     return ReactDOM.render(
       <ReactAuthingGuard
@@ -126,11 +130,8 @@ export class Guard {
     );
   }
 
-  on<T extends keyof GuardEventsHandlerKebab>(
-    evt: T,
-    handler: Exclude<GuardEventsHandlerKebab[T], undefined>
-  ) {
-    this.eventListeners[evt]!.push(handler as any);
+  on<T extends keyof GuardEventsKebabToCamelType>(evt: T, handler: Exclude<GuardEventsKebabToCamelType[T], undefined>) {
+    (this.eventListeners as any)[evt]!.push(handler as any);
   }
 
   show() {

package/src/components/index.ts

@@ -1,7 +1,49 @@
 // export * from "./Guard";
 import { Guard } from "./Guard";
-import { GuardConfig, GuardLocalConfig } from "@authing/react-ui-components";
-export * from "./AuthingGuard";
+import { AuthingGuard } from "./AuthingGuard";
 
-export { Guard };
-export type { GuardConfig, GuardLocalConfig };
+import {
+  User,
+  GuardMode,
+  UserConfig,
+  GuardScenes,
+  LoginMethods,
+  getAuthClient,
+  CommonMessage,
+  initAuthClient,
+  RegisterMethods,
+  GuardEventsHandler,
+  AuthenticationClient,
+  GuardEventsHandlerKebab,
+  GuardEventsCamelToKebabMap,
+  GuardEvents,
+  GuardEventsKebabToCamelType,
+  GuardEventsCamelToKebabMapping,
+  GuardConfig,
+  GuardLocalConfig,
+} from "@authing/react-ui-components";
+
+export {
+  Guard,
+  AuthingGuard,
+  GuardMode,
+  GuardScenes,
+  LoginMethods,
+  getAuthClient,
+  initAuthClient,
+  RegisterMethods,
+  GuardEventsCamelToKebabMap,
+  GuardEventsCamelToKebabMapping,
+};
+export type {
+  GuardConfig,
+  GuardLocalConfig,
+  GuardEvents,
+  User,
+  UserConfig,
+  CommonMessage,
+  GuardEventsHandler,
+  AuthenticationClient,
+  GuardEventsHandlerKebab,
+  GuardEventsKebabToCamelType,
+};