[WIP] added demo for zxing-scanner

example/controller/generated-router.ts

@@ -12,7 +12,7 @@ function qsStringify(queries: { [k: string]: any }) {
 
 // generated
 
-// Generated with router-code-generator@0.2.5
+// Generated with router-code-generator@0.2.6
 
 export let genRouter = {
   qrCode: {
@@ -45,6 +45,36 @@ export let genRouter = {
     path: () => `/mixed-scanner-popup`,
     go: () => switchPath(`/mixed-scanner-popup`),
   },
+  zxingScanner: {
+    name: "zxing-scanner",
+    raw: "zxing-scanner",
+    path: () => `/zxing-scanner`,
+    go: () => switchPath(`/zxing-scanner`),
+  },
+  zxingScannerPopup: {
+    name: "zxing-scanner-popup",
+    raw: "zxing-scanner-popup",
+    path: () => `/zxing-scanner-popup`,
+    go: () => switchPath(`/zxing-scanner-popup`),
+  },
+  fileMixedScanner: {
+    name: "file-mixed-scanner",
+    raw: "file-mixed-scanner",
+    path: () => `/file-mixed-scanner`,
+    go: () => switchPath(`/file-mixed-scanner`),
+  },
+  zxingWasmScanner: {
+    name: "zxing-wasm-scanner",
+    raw: "zxing-wasm-scanner",
+    path: () => `/zxing-wasm-scanner`,
+    go: () => switchPath(`/zxing-wasm-scanner`),
+  },
+  zxingWasmScannerPopup: {
+    name: "zxing-wasm-scanner-popup",
+    raw: "zxing-wasm-scanner-popup",
+    path: () => `/zxing-wasm-scanner-popup`,
+    go: () => switchPath(`/zxing-wasm-scanner-popup`),
+  },
   $: {
     name: "home",
     raw: "",
@@ -59,6 +89,11 @@ export type GenRouterTypeMain =
   | GenRouterTypeTree["zbarScanner"]
   | GenRouterTypeTree["mixedScanner"]
   | GenRouterTypeTree["mixedScannerPopup"]
+  | GenRouterTypeTree["zxingScanner"]
+  | GenRouterTypeTree["zxingScannerPopup"]
+  | GenRouterTypeTree["fileMixedScanner"]
+  | GenRouterTypeTree["zxingWasmScanner"]
+  | GenRouterTypeTree["zxingWasmScannerPopup"]
   | GenRouterTypeTree["$"];
 
 export interface GenRouterTypeTree {
@@ -92,6 +127,36 @@ export interface GenRouterTypeTree {
     query: {};
     next: null;
   };
+  zxingScanner: {
+    name: "zxing-scanner";
+    params: {};
+    query: {};
+    next: null;
+  };
+  zxingScannerPopup: {
+    name: "zxing-scanner-popup";
+    params: {};
+    query: {};
+    next: null;
+  };
+  fileMixedScanner: {
+    name: "file-mixed-scanner";
+    params: {};
+    query: {};
+    next: null;
+  };
+  zxingWasmScanner: {
+    name: "zxing-wasm-scanner";
+    params: {};
+    query: {};
+    next: null;
+  };
+  zxingWasmScannerPopup: {
+    name: "zxing-wasm-scanner-popup";
+    params: {};
+    query: {};
+    next: null;
+  };
   $: {
     name: "home";
     params: {};

example/global.d.ts

@@ -0,0 +1 @@
+declare module "*.wasm";

example/main.tsx

@@ -10,6 +10,9 @@ import { routerRules } from "./models/router-rules";
 import Container from "./pages/container";
 import { GenRouterTypeMain } from "controller/generated-router";
 
+// 提供 Go runtime 相关代码
+import "../src/zxing-wasm-scanner/go-wasm-exec";
+
 const renderApp = () => {
   let routerTree = parseRoutePath(window.location.hash.slice(1), routerRules) as GenRouterTypeMain;
 

example/models/router-rules.ts

@@ -6,5 +6,10 @@ export const routerRules: IRouteRule[] = [
   { path: "zbar-scanner" },
   { path: "mixed-scanner" },
   { path: "mixed-scanner-popup" },
+  { path: "zxing-scanner" },
+  { path: "zxing-scanner-popup" },
+  { path: "file-mixed-scanner" },
+  { path: "zxing-wasm-scanner" },
+  { path: "zxing-wasm-scanner-popup" },
   { path: "", name: "home" },
 ];

example/pages/container.tsx

@@ -10,6 +10,11 @@ import DemoQRCodePopup from "./demo-qrcode-popup";
 import DemoZbarScanner from "./demo-zbar-scanner";
 import DemoMixedScanner from "./demo-mixed-scanner";
 import DemoMixedScannerPopup from "./demo-mixed-scanner-popup";
+import DemoZxingScanner from "./demo-zxing-scanner";
+import DemoZxingScannerPopup from "./demo-zxing-scanner-popup";
+import DemoFileMixedScanner from "./demo-file-mixed-scanner";
+import DemoZxingWasmScanner from "./demo-zxing-wasm-scanner";
+import DemoZxingWasmScannerPopup from "./demo-zxing-wasm-scanner-popup";
 
 let items: ISidebarEntry[] = [
   {
@@ -29,8 +34,24 @@ let items: ISidebarEntry[] = [
     path: genRouter.mixedScannerPopup.name,
   },
   {
-    title: "TODO",
-    path: genRouter.zbarScanner.name,
+    title: "Zxing Scanner",
+    path: genRouter.zxingScanner.name,
+  },
+  {
+    title: "Zxing Scanner Popup",
+    path: genRouter.zxingScannerPopup.name,
+  },
+  {
+    title: "File Mixed Scanner",
+    path: genRouter.fileMixedScanner.name,
+  },
+  {
+    title: "Zxing Wasm Scanner",
+    path: genRouter.zxingWasmScanner.name,
+  },
+  {
+    title: "Zxing Wasm Scanner Popuop",
+    path: genRouter.zxingWasmScannerPopup.name,
   },
 ];
 
@@ -46,12 +67,18 @@ const renderChildPage = (routerTree: GenRouterTypeMain) => {
       return <DemoMixedScanner />;
     case "mixed-scanner-popup":
       return <DemoMixedScannerPopup />;
+    case "zxing-scanner":
+      return <DemoZxingScanner />;
+    case "zxing-scanner-popup":
+      return <DemoZxingScannerPopup />;
+    case "file-mixed-scanner":
+      return <DemoFileMixedScanner />;
+    case "zxing-wasm-scanner":
+      return <DemoZxingWasmScanner />;
+    case "zxing-wasm-scanner-popup":
+      return <DemoZxingWasmScannerPopup />;
     default:
-      return (
-        <HashRedirect to={genRouter.qrCode.path()} delay={1}>
-          1s to redirect
-        </HashRedirect>
-      );
+      return <HashRedirect to={genRouter.qrCode.path()} noDelay></HashRedirect>;
   }
 
   return <div>NOTHING</div>;

example/pages/demo-file-mixed-scanner.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+import { css } from "emotion";
+import { DocDemo } from "@jimengio/doc-frame";
+import FileMixedScanner from "../../src/file-mixed-scanner";
+
+let DemoFileMixedScanner: FC<{ className?: string }> = React.memo((props) => {
+  /** Plugins */
+  /** Methods */
+  /** Effects */
+  /** Renderers */
+  return (
+    <div className={props.className}>
+      <DocDemo title={"Demo file mixed scanner"}>
+        <FileMixedScanner />
+      </DocDemo>
+    </div>
+  );
+});
+
+export default DemoFileMixedScanner;

example/pages/demo-mixed-scanner.tsx

@@ -19,6 +19,7 @@ let DemoMixedScanner: FC<{}> = React.memo((props) => {
           width={300}
           height={300}
           onCodeDetected={(detected, codeKind) => {
+            console.log("got code", JSON.stringify(detected));
             setCode(detected);
             setKind(codeKind);
           }}

example/pages/demo-zxing-scanner-popup.tsx

@@ -0,0 +1,58 @@
+import React, { FC, useState } from "react";
+import { css } from "emotion";
+import { DocDemo, DocSnippet } from "@jimengio/doc-frame";
+import { usePopupZxingScanner } from "../../src/popup-zxing-scanner";
+
+let DemoMixedScannerPopup: FC<{}> = React.memo((props) => {
+  let [result, setResult] = useState("");
+
+  /** Plugins */
+
+  let popupScanner = usePopupZxingScanner({
+    errorLocale: "扫码错误: 无法获取相机图像 无法获取相机图像(可能是因为没有 HTTPS 权限)",
+    onCodeDetected: (code, codeType) => {
+      console.log(code, codeType);
+    },
+  });
+
+  /** Methods */
+  /** Effects */
+  /** Renderers */
+  return (
+    <div>
+      <DocDemo title={"Mixed Scanner Popup"}>
+        <button
+          onClick={() => {
+            popupScanner.popup((code, codeType) => {
+              console.log("got code", JSON.stringify(code));
+              setResult(code);
+            });
+          }}
+        >
+          Scan
+        </button>
+        <div>Result: {result || "-"}</div>
+
+        <DocSnippet code={exampleCode} />
+      </DocDemo>
+
+      {popupScanner.ui}
+    </div>
+  );
+});
+
+export default DemoMixedScannerPopup;
+
+let exampleCode = `
+let popupScanner = usePopupMixedScanner({
+  onCodeDetected: (code, codeType) => {
+    console.log(code, codeType);
+  },
+});
+
+popupScanner.ui // UI Part
+
+popupScanner.popup((code, codeType) => {
+  console.log("got code", code, codeType);
+});
+`;

example/pages/demo-zxing-scanner.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useState } from "react";
+import { css } from "emotion";
+import { DocDemo, DocSnippet } from "@jimengio/doc-frame";
+
+import ZxingScanner from "../../src/zxing-scanner";
+
+let DemoZxingScanner: FC<{}> = React.memo((props) => {
+  let [code, setCode] = useState("");
+  let [kind, setKind] = useState(null);
+
+  /** Plugins */
+  /** Methods */
+  /** Effects */
+  /** Renderers */
+  return (
+    <div className={styleContainer}>
+      <DocDemo title="Mixed Quagga2 and jsqr">
+        <ZxingScanner
+          onCodeDetected={(detected, codeKind) => {
+            console.log("got code", JSON.stringify(detected));
+            setCode(detected);
+            setKind(codeKind);
+          }}
+        />
+        <div>
+          Scan result: {code} - {kind}
+        </div>
+
+        <DocSnippet code={exampleCode} />
+      </DocDemo>
+    </div>
+  );
+});
+
+export default DemoZxingScanner;
+
+let styleContainer = css``;
+
+let exampleCode = `
+<MixedScanner
+  width={300}
+  height={300}
+  onCodeDetected={(detected, codeKind) => {
+    setCode(detected);
+    setKind(codeKind);
+  }}
+/>
+
+`;

example/pages/demo-zxing-wasm-scanner-popup.tsx

@@ -0,0 +1,59 @@
+import React, { FC, useState } from "react";
+import { css } from "emotion";
+import { DocDemo, DocSnippet } from "@jimengio/doc-frame";
+import { usePopupZxingWasmScanner } from "../../src/popup-zxing-wasm-scanner";
+
+let DemoMixedScannerPopup: FC<{}> = React.memo((props) => {
+  let [result, setResult] = useState("");
+
+  /** Plugins */
+
+  let popupScanner = usePopupZxingWasmScanner({
+    errorLocale: "扫码错误: 无法获取相机图像 无法获取相机图像(可能是因为没有 HTTPS 权限)",
+    zxingWasmPath: "wasm/zxing-go.wasm",
+    onCodeDetected: (code, codeType) => {
+      console.log(code, codeType);
+    },
+  });
+
+  /** Methods */
+  /** Effects */
+  /** Renderers */
+  return (
+    <div>
+      <DocDemo title={"Mixed Scanner Popup"}>
+        <button
+          onClick={() => {
+            popupScanner.popup((code, codeType) => {
+              console.log("got code", JSON.stringify(code));
+              setResult(code);
+            });
+          }}
+        >
+          Scan
+        </button>
+        <div>Result: {result || "-"}</div>
+
+        <DocSnippet code={exampleCode} />
+      </DocDemo>
+
+      {popupScanner.ui}
+    </div>
+  );
+});
+
+export default DemoMixedScannerPopup;
+
+let exampleCode = `
+let popupScanner = usePopupMixedScanner({
+  onCodeDetected: (code, codeType) => {
+    console.log(code, codeType);
+  },
+});
+
+popupScanner.ui // UI Part
+
+popupScanner.popup((code, codeType) => {
+  console.log("got code", code, codeType);
+});
+`;