diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx
index 344e89bb..7d589be4 100644
--- a/src/components/UI/Generator.tsx
+++ b/src/components/UI/Generator.tsx
@@ -9,63 +9,95 @@ import {
SelectTrigger,
SelectValue,
} from "@components/UI/Select.js";
+import type { LucideIcon } from "lucide-react";
export interface GeneratorProps extends React.BaseHTMLAttributes
{
+ hide?: boolean;
devicePSKBitCount?: number;
value: string;
variant: "default" | "invalid";
buttonText?: string;
+ bits?: { text: string; value: string; key: string }[];
selectChange: (event: string) => void;
inputChange: (event: React.ChangeEvent) => void;
buttonClick: React.MouseEventHandler;
+ action?: {
+ icon: LucideIcon;
+ onClick: () => void;
+ };
+ disabled?: boolean;
}
const Generator = React.forwardRef(
(
{
+ hide = true,
devicePSKBitCount,
variant,
value,
buttonText,
+ bits = [
+ { text: "256 bit", value: "32", key: "bit256" },
+ { text: "128 bit", value: "16", key: "bit128" },
+ { text: "8 bit", value: "1", key: "bit8" },
+ ],
selectChange,
inputChange,
buttonClick,
+ action,
+ disabled,
...props
},
ref,
) => {
+ const inputRef = React.useRef(null);
+
+ // Invokes onChange event on the input element when the value changes from the parent component
+ React.useEffect(() => {
+ if (!inputRef.current) return;
+ const setValue = Object.getOwnPropertyDescriptor(
+ HTMLInputElement.prototype,
+ "value",
+ )?.set;
+
+ if (!setValue) return;
+ inputRef.current.value = "";
+ setValue.call(inputRef.current, value);
+ inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+ }, [value]);
return (
<>