@authing/native-js-ui-components 3.1.1 → 3.1.2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@authing/native-js-ui-components",
-  "version": "3.1.1",
+  "version": "3.1.2",
+  "framework": "Native",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "lib/index.d.ts",
   "dependencies": {
-    "@authing/react-ui-components": "^3.1.1",
+    "@authing/react-ui-components": "^3.1.2",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
@@ -165,6 +166,5 @@
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
-  },
-  "gitHead": "2fd4f4170d33b498f325dd026a727bd021f0cf32"
+  }
 }

package/src/App.tsx

@@ -1,18 +1,13 @@
 import React, { useEffect } from "react";
 import "./App.css";
-import { AuthingGuard, GuardMode } from "./components";
+import { Guard, GuardMode } from "./components";
 
 function App() {
   useEffect(() => {
-    const guard = new AuthingGuard(
-      "6191cf610f772aa56dc70637",
-      {
-        target: ".App",
-        appHost: "https://core.dev2.authing-inc.co/",
-        mode: GuardMode.Modal,
-      },
-      "6194a41abf23c1d5268b362a"
-    );
+    const guard = new Guard("6191cf610f772aa56dc70637", {
+      target: ".App",
+      mode: GuardMode.Modal,
+    });
 
     // @ts-ignore
     window.guard = guard;

package/src/components/AuthingGuard/index.tsx

@@ -40,11 +40,18 @@ export {
 };
 
 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();
   }
 
@@ -71,14 +78,19 @@ 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") {
@@ -111,7 +123,10 @@ 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

@@ -0,0 +1,143 @@
+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,
+  AuthenticationClient,
+  GuardEventsHandlerKebab,
+  GuardEventsCamelToKebabMap,
+  AuthenticationClientOptions,
+} 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,
+  AuthenticationClientOptions,
+};
+
+export {
+  GuardMode,
+  GuardScenes,
+  LoginMethods,
+  getAuthClient,
+  initAuthClient,
+  RegisterMethods,
+  GuardEventsCamelToKebabMap,
+};
+
+export type GuardEventListeners = {
+  [key in keyof GuardEventsHandlerKebab]: Exclude<
+    Required<GuardEventsHandlerKebab>[key],
+    undefined
+  >[];
+};
+
+export class Guard {
+  constructor(
+    private appId: string,
+    private config?: Partial<GuardLocalConfig>
+  ) {
+    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 GuardEventListeners
+  );
+
+  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 as GuardEvents)}
+        appId={this.appId}
+        config={this.config as GuardComponentConfig}
+        visible={this.visible}
+      />,
+      Guard.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();
+  }
+}

package/src/components/index.ts

@@ -1 +1,7 @@
-export * from './AuthingGuard'
+// export * from "./Guard";
+import { Guard } from "./Guard";
+import { GuardConfig, GuardLocalConfig } from "@authing/react-ui-components";
+export * from "./AuthingGuard";
+
+export { Guard };
+export type { GuardConfig, GuardLocalConfig };

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Authing
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.