-
- Version
-
- {outputQr().version} ({outputQr().version * 4 + 17}x
- {outputQr().version * 4 + 17} matrix)
+
+
+
+ Version
+
+ {output().qr!.version} ({output().qr!.version * 4 + 17}x
+ {output().qr!.version * 4 + 17} matrix)
+
+
+
+ Error tolerance{" "}
+
+ {ECL_NAMES[output().qr!.ecl]} ({ECL_LABELS[output().qr!.ecl]})
+
+
+
+ Mask{" "}
+
+ {MASK_KEY[output().qr!.mask]}
+
+
+
+ Encoding{" "}
+
+ {MODE_KEY[output().qr!.mode]}
+
- Error tolerance{" "}
-
- {ECL_NAMES[outputQr().ecl]} ({ECL_LABELS[outputQr().ecl]})
-
-
- Mask{" "}
- {MASK_KEY[outputQr().mask]}
-
-
- Encoding{" "}
- {MODE_KEY[outputQr().mode]}
-
-
+
);
}
@@ -122,14 +152,14 @@ type DownloadProps = {
};
function DownloadButtons(props: DownloadProps) {
- const { outputQr } = useQrContext() as { outputQr: () => OutputQr };
+ const { output } = useQrContext();
const { render, svgParentRefs, canvasRefs } = useRenderContext();
- const filename = () => outputQr().text.slice(0, 32);
+ const filename = () => output().qr!.text.slice(0, 32);
const pngBlob = async (resizeWidth, resizeHeight) => {
// 10px per module assuming 2 module margin
- const minWidth = (outputQr().version * 4 + 17 + 4) * 10;
+ const minWidth = (output().qr!.version * 4 + 17 + 4) * 10;
let outCanvas: HTMLCanvasElement;
if (render()?.type === "canvas") {
@@ -187,6 +217,8 @@ function DownloadButtons(props: DownloadProps) {
URL.revokeObjectURL(url);
};
+ const disabled = () => output().state !== QrState.Ready;
+
return (
@@ -194,6 +226,7 @@ function DownloadButtons(props: DownloadProps) {
{
try {
@@ -213,6 +246,7 @@ function DownloadButtons(props: DownloadProps) {
@@ -222,6 +256,7 @@ function DownloadButtons(props: DownloadProps) {
{
let blob;
@@ -259,7 +294,8 @@ function DownloadButtons(props: DownloadProps) {
diff --git a/src/lib/QrContext.tsx b/src/lib/QrContext.tsx
index d8efc93..41ac388 100644
--- a/src/lib/QrContext.tsx
+++ b/src/lib/QrContext.tsx
@@ -1,12 +1,22 @@
import {
createContext,
createMemo,
+ createSignal,
useContext,
type Accessor,
type JSX,
} from "solid-js";
-import { ECL, Mode, Mask, QrError, QrOptions, Version, generate } from "fuqr";
+import init, {
+ ECL,
+ Mode,
+ Mask,
+ QrError,
+ QrOptions,
+ Version,
+ generate,
+} from "fuqr";
import { createStore, type SetStoreFunction } from "solid-js/store";
+import { isServer } from "solid-js/web";
type InputQr = {
text: string;
@@ -27,10 +37,37 @@ export type OutputQr = Readonly<{
matrix: Uint8Array;
}>;
+type Output =
+ | {
+ state: QrState.Ready;
+ qr: Readonly<{
+ text: string;
+ version: number;
+ ecl: ECL;
+ mode: Mode;
+ mask: Mask;
+ matrix: Uint8Array;
+ }>;
+ }
+ | {
+ state:
+ | QrState.Loading
+ | QrState.InvalidEncoding
+ | QrState.ExceedsMaxCapacity;
+ qr: null;
+ };
+
+export enum QrState {
+ InvalidEncoding = QrError.InvalidEncoding,
+ ExceedsMaxCapacity = QrError.ExceedsMaxCapacity,
+ Loading = 2,
+ Ready = 3,
+}
+
export const QrContext = createContext<{
inputQr: InputQr;
setInputQr: SetStoreFunction;
- outputQr: Accessor;
+ output: Accessor