@authing/native-js-ui-components 3.1.39-rc.2 → 4.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authing/native-js-ui-components",
-  "version": "3.1.39-rc.2",
+  "version": "4.0.0-alpha.3",
   "framework": "Native",
   "private": false,
   "main": "lib/index.min.js",
@@ -165,7 +165,8 @@
     "workbox-webpack-plugin": "5.1.4"
   },
   "dependencies": {
-    "@authing/react-ui-components": "^3.1.39",
-    "authing-js-sdk": "4.23.30-alpha.3"
-  }
-}
+    "@authing/react-ui-components": "^4.0.0-alpha.3",
+    "authing-js-sdk": "4.23.36-alpha.1"
+  },
+  "gitHead": "7d5996215b996fcd8ee63d3ea7627bef1f37b706"
+}

package/public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -34,30 +31,26 @@
 
     <script>
       window.onload = () => {
-        const guard = new window.AuthingNativeJsUIComponents.AuthingGuard(
-          '59f86b4832eb28071bdd9214',
-          {
-            target: '#root',
+        const guard = new window.AuthingNativeJsUIComponents.Guard("5f6265c67ff6fdae64ec516e", {
+          target: "#root",
 
-            apiHost: 'http://console.authing.localhost:3000',
-            // loginMethods: Object.values(LoginMethods),
-            logo:
-              'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png',
-            title: 'Authing',
-            defaultLoginMethod: 'password',
-            // registerMethods: Object.values(RegisterMethods),
-            // defaultRegisterMethod: RegisterMethods.Email,
-            defaultScenes: 'login',
-            // socialConnections: Object.values(SocialConnections),
-            // enterpriseConnections: ["oidc1"],
-            appId: '5fa5053e252697ad5302ce7e',
-            // autoRegister: true,
-          }
-        )
-        guard.on('load', (a) => {
-          console.log('加载完成', a)
-        })
-      }
+          // apiHost: 'http://console.authing.localhost:3000',
+          // loginMethods: Object.values(LoginMethods),
+          logo: "https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png",
+          title: "Authing",
+          defaultLoginMethod: "password",
+          // registerMethods: Object.values(RegisterMethods),
+          // defaultRegisterMethod: RegisterMethods.Email,
+          defaultScenes: "login",
+          // socialConnections: Object.values(SocialConnections),
+          // enterpriseConnections: ["oidc1"],
+          appId: "5fa5053e252697ad5302ce7e",
+          // autoRegister: true,
+        });
+        guard.on("load", (a) => {
+          console.log("加载完成", a);
+        });
+      };
     </script>
     <!--
       This HTML file is a template.

package/src/App.tsx

@@ -4,7 +4,6 @@ import { Guard, GuardEventsCamelToKebabMapping, GuardMode } from "./components";
 
 function App() {
   console.log(GuardEventsCamelToKebabMapping);
-
   useEffect(() => {
     const guard = new Guard("62cd66dc014378042b55154f", {
       target: ".App",

package/src/components/Guard/index.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Guard as ReactAuthingGuard } from '@authing/react-ui-components';
+import React from "react";
+import ReactDOM from "react-dom";
+import { Guard as ReactAuthingGuard } from "@authing/react-ui-components";
 import {
   GuardMode,
   GuardEvents,
   AuthenticationClient,
   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';
+  GuardLocalConfig,
+  GuardProps,
+} 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";
 
 export interface NativeGuardProps {
   appId?: string;
@@ -49,7 +51,7 @@ export class Guard {
     tenantId?: string,
     authClient?: AuthenticationClient
   ) {
-    if (appIdOrProps && typeof appIdOrProps !== 'string') {
+    if (appIdOrProps && typeof appIdOrProps !== "string") {
       const { appId, config: configProps, tenantId: tenantIdProps, authClient: authClientProps } = appIdOrProps;
       this.appId = appId;
       this.config = configProps;
@@ -68,12 +70,12 @@ export class Guard {
   }
 
   static getGuardContainer(selector?: string | HTMLElement) {
-    const defaultId = 'authing_guard_container';
+    const defaultId = "authing_guard_container";
 
     if (!selector) {
       let container = document.querySelector(`#${defaultId}`);
       if (!container) {
-        container = document.createElement('div');
+        container = document.createElement("div");
         container.id = defaultId;
         document.body.appendChild(container);
       }
@@ -81,7 +83,7 @@ export class Guard {
       return container;
     }
 
-    if (typeof selector === 'string') {
+    if (typeof selector === "string") {
       return document.querySelector(selector);
     }
 
@@ -96,18 +98,18 @@ export class Guard {
 
   public render(): void;
   public render(aliginOrCb: () => void): void;
-  public render(aliginOrCb: 'none' | 'center' | 'left' | 'right'): void;
-  public render(aliginOrCb: 'none' | 'center' | 'left' | 'right', callback: () => void): void;
+  public render(aliginOrCb: "none" | "center" | "left" | "right"): void;
+  public render(aliginOrCb: "none" | "center" | "left" | "right", callback: () => void): void;
   public render(aliginOrCb?: any, cb?: any) {
     const l = arguments.length;
-    let align: 'none' | 'center' | 'left' | 'right';
+    let align: "none" | "center" | "left" | "right";
 
     let callback: (() => void) | undefined;
     if (l === 0) {
-      align = 'none';
+      align = "none";
     } else if (l === 1) {
-      if (typeof aliginOrCb === 'function') {
-        align = 'none';
+      if (typeof aliginOrCb === "function") {
+        align = "none";
         callback = aliginOrCb;
       } else {
         align = aliginOrCb;
@@ -116,7 +118,7 @@ export class Guard {
       align = aliginOrCb;
       callback = cb;
     } else {
-      throw new Error('参数格式错误');
+      throw new Error("参数格式错误");
     }
 
     // 两个都有
@@ -133,7 +135,7 @@ export class Guard {
     const evts: GuardEvents = Object.entries(GuardEventsCamelToKebabMapping).reduce((acc, [reactEvt, nativeEvt]) => {
       return Object.assign({}, acc, {
         [reactEvt]: (...rest: any) => {
-          if (nativeEvt === 'close') {
+          if (nativeEvt === "close") {
             this.hide();
           }
 
@@ -153,15 +155,15 @@ export class Guard {
     return ReactDOM.render(
       <div
         style={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           justifyContent: align,
         }}
       >
         <ReactAuthingGuard
           {...(evts as GuardEvents)}
           appId={this.appId}
-          config={this.config as GuardComponentConfig}
+          config={this.config as GuardProps["config"]}
           visible={this.visible}
           tenantId={this.tenantId}
           authClient={this.authClient}

package/src/components/index.ts

@@ -1,51 +1,18 @@
-// export * from "./Guard";
 import { Guard } from "./Guard";
-import { AuthingGuard } from "./AuthingGuard";
 
 import {
   User,
   GuardMode,
-  UserConfig,
-  GuardScenes,
+  GuardModuleType,
   LoginMethods,
-  getAuthClient,
   CommonMessage,
-  initAuthClient,
   RegisterMethods,
-  GuardModuleType,
-  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,
-  GuardModuleType,
-  GuardEventsHandler,
-  AuthenticationClient,
-  GuardEventsHandlerKebab,
-  GuardEventsKebabToCamelType,
-};
+export { Guard, GuardMode, GuardModuleType, LoginMethods, RegisterMethods, GuardEventsCamelToKebabMapping };
+export type { GuardLocalConfig, GuardEvents, User, CommonMessage, AuthenticationClient, GuardEventsKebabToCamelType };

package/tsconfig.json

@@ -3,11 +3,7 @@
     "baseUrl": ".",
     "outDir": "lib/",
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,20 +14,11 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "declaration": true,
     "noEmit": false,
     "jsx": "react",
     "downlevelIteration": true
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.json"
-  ],
-  "exclude": [
-    "node_modules",
-    "lib",
-    "build"
-  ]
-}
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
+  "exclude": ["node_modules", "lib", "build"]
+}

package/src/components/AuthingGuard/index.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { AuthingGuard as ReactAuthingGuard } from "@authing/react-ui-components";
-import {
-  GuardMode,
-  UserConfig,
-  GuardEventsHandler,
-  GuardEventsHandlerKebab,
-  GuardEventsCamelToKebabMap,
-} from "@authing/react-ui-components";
-import "@authing/react-ui-components/lib/index.min.css";
-
-export type EventListeners = {
-  [key in keyof GuardEventsHandlerKebab]: Exclude<Required<GuardEventsHandlerKebab>[key], undefined>[];
-};
-
-export class AuthingGuard {
-  constructor(private appId: string, private config?: UserConfig, private tenantId?: string) {
-    this.render();
-  }
-
-  static getGuardContainer(selector?: string | HTMLElement) {
-    const defaultId = "authing_guard_container";
-
-    if (!selector) {
-      let container = document.querySelector(`#${defaultId}`);
-      if (!container) {
-        container = document.createElement("div");
-        container.id = defaultId;
-        document.body.appendChild(container);
-      }
-
-      return container;
-    }
-
-    if (typeof selector === "string") {
-      return document.querySelector(selector);
-    }
-
-    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 EventListeners);
-
-  private render(cb?: () => void) {
-    const evts: GuardEventsHandler = Object.entries(GuardEventsCamelToKebabMap).reduce((acc, [reactEvt, nativeEvt]) => {
-      return Object.assign({}, acc, {
-        [reactEvt]: (...rest: any) => {
-          if (nativeEvt === "close") {
-            this.hide();
-          }
-
-          // TODO 返回最后一个执行函数的值，实际应该只让监听一次
-          return (
-            this.eventListeners[nativeEvt]
-              // @ts-ignore
-              .map((item: any) => {
-                return item(...rest);
-              })
-              .slice(-1)[0] ?? true
-          );
-        },
-      });
-    }, {} as GuardEventsHandler);
-
-    return ReactDOM.render(
-      <ReactAuthingGuard
-        {...evts}
-        appId={this.appId}
-        tenantId={this.tenantId}
-        config={this.config}
-        visible={this.visible}
-      />,
-      AuthingGuard.getGuardContainer(this.config?.target),
-      cb
-    );
-  }
-
-  on<T extends keyof GuardEventsHandlerKebab>(evt: T, handler: Exclude<GuardEventsHandlerKebab[T], undefined>) {
-    this.eventListeners[evt]!.push(handler as any);
-  }
-
-  show() {
-    this.visible = true;
-    this.render();
-  }
-
-  hide() {
-    this.visible = false;
-    this.render();
-  }
-}