@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/TextInput.tsx

@@ -1,195 +1,195 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-03-20 13:05:42
- * -----
- * Last Modified: 2025-09-09 15:32:12
- * -----
- * 
- */
-
-import React, { useEffect, useMemo, useState } from "react";
-import { InputText, type InputTextProps } from "primereact/inputtext";
-import { Button } from "primereact/button";
-import type { KeyFilterType } from "primereact/keyfilter";
-
-// Props
-interface TextInputProps extends Omit<InputTextProps, "prefix" | "value" | "onChange"> {
-    /** The label for the field (shown in an addon). */
-    label?: React.ReactNode;
-
-    /** Controlled value from parent. */
-    value?: string;
-
-    /**
-     * PrimeReact key filter (lowercase) or RegExp.
-     * Examples: "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"
-     */
-    keyfilter?: KeyFilterType;
-
-    /** Optional prefix addon before the input. */
-    prefix?: React.ReactNode;
-
-    /** Optional suffix addon after the input. */
-    suffix?: React.ReactNode;
-
-    /** Small, advisory text below the field. */
-    description?: React.ReactNode;
-
-    /** Disable entire control. */
-    disabled?: boolean;
-
-    /** Placeholder string. */
-    placeholder?: string;
-
-    /** Called when the user ACCEPTS a new value (Enter or ✔). */
-    onValueChanged?(newValue: string): void;
-
-    /** Regex validation used on accept (not on each keystroke). */
-    validator?: RegExp;
-}
-
-function toStr(v?: string | null) {
-    return v ?? "";
-}
-
-/**
- * A styled text input field with support for labels, prefixes/suffixes,
- * validation, key filters, and accept/reset actions.
- *
- * This component wraps PrimeReact's <InputText> in a p-inputgroup with
- * optional ✔ and ✖ buttons for committing or cancelling edits.
- *
- * Features:
- * - Label, prefix, and suffix addons for context
- * - Optional `keyfilter` for keystroke-level restrictions (PrimeReact presets or RegExp)
- * - Optional `validator` RegExp applied when accepting a value
- * - Calls `onValueChanged(newValue)` only when the user accepts (Enter key or ✔ button)
- * - Escape key or ✖ button reverts to the last accepted value
- * - Controlled input: always provide a string `value` (defaults to `""`)
- *
- * ## Example
- *
- * ```tsx
- * import { useState } from "react";
- * import { TextInput } from "./TextInput";
- *
- * export function ExampleForm() {
- *   const [partNumber, setPartNumber] = useState("ADC-0001");
- *
- *   return (
- *     <TextInput
- *       label="Part Number"
- *       value={partNumber}
- *       onValueChanged={setPartNumber}
- *       placeholder="Enter part number"
- *       keyfilter="alphanum"
- *       validator={/^[A-Z0-9-]+$/}
- *       description="Use only uppercase letters, digits, and dashes."
- *       prefix={<i className="pi pi-tag" />}
- *     />
- *   );
- * }
- * ```
- */
-export const TextInput: React.FC<TextInputProps> = (props) => {
-    const {
-        label,
-        value,
-        keyfilter, // <- keep lowercase for PrimeReact
-        prefix,
-        suffix,
-        description,
-        disabled = false,
-        placeholder,
-        onValueChanged,
-        validator,
-        // DO NOT forward custom props below to the <InputText>
-        // Everything else is safe to spread.
-        ...restInputProps
-    } = props;
-
-
-    // Local edit buffer & validity; parent value is the source of truth after "accept".
-    const [entryValue, setEntryValue] = useState<string>(toStr(value));
-    const [editing, setEditing] = useState<boolean>(false);
-    const [isValid, setIsValid] = useState<boolean>(value ? validateValue(value, validator) : true);
-
-    // Sync incoming prop value (e.g., external changes/reset)
-    useEffect(() => {
-        setEntryValue(toStr(value));
-        setEditing(false);
-        setIsValid(value ? validateValue(value, validator) : true);
-    }, [value, validator]);
-
-    // Validate only when asked to accept
-    function validateValue(val: string, re?: RegExp) {
-        if (!re) return true;
-        return re.test(val);
-    }
-
-    function accept() {
-        const val = entryValue;
-        const ok = validateValue(val, validator);
-        setIsValid(ok);
-        if (!ok) return;
-
-        setEditing(false);
-        onValueChanged?.(val);
-    }
-
-    function reset() {
-        const v = toStr(value);
-        setEntryValue(v);
-        setEditing(false);
-        setIsValid(v ? validateValue(v, validator) : true);
-    }
-
-    // Keep the DOM value a string at all times (no uncontrolled→controlled flip)
-    const domValue = useMemo(() => toStr(entryValue), [entryValue]);
-
-    return (
-        <div>
-            <div className="p-inputgroup flex-1">
-                <span className="p-inputgroup-addon">{label}</span>
-
-                {prefix !== undefined && <span className="p-inputgroup-addon">{prefix}</span>}
-
-                <InputText
-                    {...restInputProps}
-                    keyfilter={keyfilter}
-                    placeholder={placeholder}
-                    value={domValue}
-                    onChange={(e) => {
-                        setEntryValue(e.target.value);
-                        setEditing(true);
-                    }}
-                    className={isValid ? restInputProps.className ?? "" : `${restInputProps.className ?? ""} p-invalid`}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter") accept();
-                        else if (e.key === "Escape") reset();
-                    }}
-                    disabled={disabled}
-                />
-
-                {suffix !== undefined && <span className="p-inputgroup-addon">{suffix}</span>}
-
-                <Button
-                    icon="pi pi-check"
-                    disabled={disabled || !editing}
-                    className="p-button-success"
-                    onClick={accept}
-                    visible={editing}
-                />
-                <Button
-                    icon="pi pi-times"
-                    disabled={disabled || !editing}
-                    className="p-button-danger"
-                    onClick={reset}
-                    visible={editing}
-                />
-            </div>
-
-            {description !== undefined && <small>{description}</small>}
-        </div>
-    );
-};
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-20 13:05:42
+ * -----
+ * Last Modified: 2025-09-09 15:32:12
+ * -----
+ * 
+ */
+
+import React, { useEffect, useMemo, useState } from "react";
+import { InputText, type InputTextProps } from "primereact/inputtext";
+import { Button } from "primereact/button";
+import type { KeyFilterType } from "primereact/keyfilter";
+
+// Props
+interface TextInputProps extends Omit<InputTextProps, "prefix" | "value" | "onChange"> {
+    /** The label for the field (shown in an addon). */
+    label?: React.ReactNode;
+
+    /** Controlled value from parent. */
+    value?: string;
+
+    /**
+     * PrimeReact key filter (lowercase) or RegExp.
+     * Examples: "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"
+     */
+    keyfilter?: KeyFilterType;
+
+    /** Optional prefix addon before the input. */
+    prefix?: React.ReactNode;
+
+    /** Optional suffix addon after the input. */
+    suffix?: React.ReactNode;
+
+    /** Small, advisory text below the field. */
+    description?: React.ReactNode;
+
+    /** Disable entire control. */
+    disabled?: boolean;
+
+    /** Placeholder string. */
+    placeholder?: string;
+
+    /** Called when the user ACCEPTS a new value (Enter or ✔). */
+    onValueChanged?(newValue: string): void;
+
+    /** Regex validation used on accept (not on each keystroke). */
+    validator?: RegExp;
+}
+
+function toStr(v?: string | null) {
+    return v ?? "";
+}
+
+/**
+ * A styled text input field with support for labels, prefixes/suffixes,
+ * validation, key filters, and accept/reset actions.
+ *
+ * This component wraps PrimeReact's <InputText> in a p-inputgroup with
+ * optional ✔ and ✖ buttons for committing or cancelling edits.
+ *
+ * Features:
+ * - Label, prefix, and suffix addons for context
+ * - Optional `keyfilter` for keystroke-level restrictions (PrimeReact presets or RegExp)
+ * - Optional `validator` RegExp applied when accepting a value
+ * - Calls `onValueChanged(newValue)` only when the user accepts (Enter key or ✔ button)
+ * - Escape key or ✖ button reverts to the last accepted value
+ * - Controlled input: always provide a string `value` (defaults to `""`)
+ *
+ * ## Example
+ *
+ * ```tsx
+ * import { useState } from "react";
+ * import { TextInput } from "./TextInput";
+ *
+ * export function ExampleForm() {
+ *   const [partNumber, setPartNumber] = useState("ADC-0001");
+ *
+ *   return (
+ *     <TextInput
+ *       label="Part Number"
+ *       value={partNumber}
+ *       onValueChanged={setPartNumber}
+ *       placeholder="Enter part number"
+ *       keyfilter="alphanum"
+ *       validator={/^[A-Z0-9-]+$/}
+ *       description="Use only uppercase letters, digits, and dashes."
+ *       prefix={<i className="pi pi-tag" />}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const TextInput: React.FC<TextInputProps> = (props) => {
+    const {
+        label,
+        value,
+        keyfilter, // <- keep lowercase for PrimeReact
+        prefix,
+        suffix,
+        description,
+        disabled = false,
+        placeholder,
+        onValueChanged,
+        validator,
+        // DO NOT forward custom props below to the <InputText>
+        // Everything else is safe to spread.
+        ...restInputProps
+    } = props;
+
+
+    // Local edit buffer & validity; parent value is the source of truth after "accept".
+    const [entryValue, setEntryValue] = useState<string>(toStr(value));
+    const [editing, setEditing] = useState<boolean>(false);
+    const [isValid, setIsValid] = useState<boolean>(value ? validateValue(value, validator) : true);
+
+    // Sync incoming prop value (e.g., external changes/reset)
+    useEffect(() => {
+        setEntryValue(toStr(value));
+        setEditing(false);
+        setIsValid(value ? validateValue(value, validator) : true);
+    }, [value, validator]);
+
+    // Validate only when asked to accept
+    function validateValue(val: string, re?: RegExp) {
+        if (!re) return true;
+        return re.test(val);
+    }
+
+    function accept() {
+        const val = entryValue;
+        const ok = validateValue(val, validator);
+        setIsValid(ok);
+        if (!ok) return;
+
+        setEditing(false);
+        onValueChanged?.(val);
+    }
+
+    function reset() {
+        const v = toStr(value);
+        setEntryValue(v);
+        setEditing(false);
+        setIsValid(v ? validateValue(v, validator) : true);
+    }
+
+    // Keep the DOM value a string at all times (no uncontrolled→controlled flip)
+    const domValue = useMemo(() => toStr(entryValue), [entryValue]);
+
+    return (
+        <div>
+            <div className="p-inputgroup">
+                <span className="p-inputgroup-addon">{label}</span>
+
+                {prefix !== undefined && <span className="p-inputgroup-addon">{prefix}</span>}
+
+                <InputText
+                    {...restInputProps}
+                    keyfilter={keyfilter}
+                    placeholder={placeholder}
+                    value={domValue}
+                    onChange={(e) => {
+                        setEntryValue(e.target.value);
+                        setEditing(true);
+                    }}
+                    className={isValid ? restInputProps.className ?? "" : `${restInputProps.className ?? ""} p-invalid`}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") accept();
+                        else if (e.key === "Escape") reset();
+                    }}
+                    disabled={disabled}
+                />
+
+                {suffix !== undefined && <span className="p-inputgroup-addon">{suffix}</span>}
+
+                <Button
+                    icon="pi pi-check"
+                    disabled={disabled || !editing}
+                    className="p-button-success"
+                    onClick={accept}
+                    visible={editing}
+                />
+                <Button
+                    icon="pi pi-times"
+                    disabled={disabled || !editing}
+                    className="p-button-danger"
+                    onClick={reset}
+                    visible={editing}
+                />
+            </div>
+
+            {description !== undefined && <small>{description}</small>}
+        </div>
+    );
+};