@adcops/autocore-react 3.3.9 → 3.3.10

package/src/components/Osk.tsx

@@ -1,193 +1,193 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { InputText } from 'primereact/inputtext';
-import Keyboard from "react-simple-keyboard";
-import "./osk.css";
-import { RegExMaskPatterns } from "../core/MaskPatterns";
-
-
-const numpadLayout = {
-    numbers: ["1 2 3", "4 5 6", "7 8 9", "- 0 .", "{symbols} {backspace}"],
-    default: ["! / #", "$ % ^", "& * (", "= ) +", "{numbers} {backspace}"]
-};
-
-
-const englishLayout = {
-    default: [
-        "q w e r t y u i o p",
-        "a s d f g h j k l",
-        "{shift} z x c v b n m {backspace}",
-        "{numbers} {space} {ent}"
-    ],
-    shift: [
-        "Q W E R T Y U I O P",
-        "A S D F G H J K L",
-        "{shift} Z X C V B N M {backspace}",
-        "{numbers} {space} {ent}"
-    ],
-    numbers: ["1 2 3", "4 5 6", "7 8 9", "{abc} 0 {backspace}"]
-};
-
-const keyboardDisplay = {
-    "{numbers}": "123",
-    "{ent}": "return",
-    "{escape}": "esc ⎋",
-    "{tab}": "tab ⇥",
-    "{backspace}": "⌫",
-    "{capslock}": "caps lock ⇪",
-    "{shift}": "⇧",
-    "{controlleft}": "ctrl ⌃",
-    "{controlright}": "ctrl ⌃",
-    "{altleft}": "alt ⌥",
-    "{altright}": "alt ⌥",
-    "{metaleft}": "cmd ⌘",
-    "{metaright}": "cmd ⌘",
-    "{abc}": "ABC",
-    "{space}": "space",
-    "{symbols}": "#+="
-};
-
-
-
-interface OskProps {
-    onAccept?: () => void;
-    onChange?: (value: string) => void;
-    isNumPad?: boolean;
-    input?: string;
-    label?: string;
-    inputPattern?: RegExp;
-    checkValue?: (value: string) => string;
-    description?: string;
-}
-
-export const Osk: React.FC<OskProps> = ({
-    onAccept,
-    onChange,
-    isNumPad = false,
-    input = "",
-    label = "",
-    inputPattern,
-    checkValue,
-    description,
-}) => {
-    const [state, setState] = useState({
-        isVisible: false,
-        layoutName: isNumPad ? "numbers" : "default",
-        minWidth: 500,
-        maxWidth: 800,
-        input,
-        label,
-        isNumPad,
-        inputPattern: inputPattern || RegExMaskPatterns.IntegerPositive,
-        checkValue,
-        description,
-        firstKeyPressed: false,
-        onAccept: onAccept || undefined,
-        onChange: onChange || undefined
-    });
-    const keyboardRef = useRef<any>(null);
-
-    useEffect(() => {
-        return () => {
-            if (keyboardRef.current) {
-                keyboardRef.current.destroy();
-            }
-        };
-    }, []);
-
-    // const setProperty = (key: keyof typeof state, val: any) => {
-    //     setState((prev) => ({ ...prev, [key]: val }));
-    // };
-
-    const onChanged = (val: string) => {
-        let newInput = val;
-        if (!state.firstKeyPressed) {
-            newInput = state.input + val;
-            keyboardRef.current.setInput(newInput);
-        }
-    
-        if (state.onChange) {
-            state.onChange(newInput);
-        }
-    
-        setState(prevState => ({ ...prevState, input: newInput, firstKeyPressed: true }));
-    };
-
-
-    const getLayout = () => {
-        if (state.isNumPad) {
-            if (state.isNumPad) {
-
-                if ( state.inputPattern === undefined || state.inputPattern === null) {
-                   setState(prevState=> ({...prevState, inputPattern:RegExMaskPatterns.IntegerPositive}));
-                }
-    
-                return numpadLayout;
-            }
-            else {
-                return englishLayout;
-            }            
-        }
-    }
-
-
-    const onKeyPress = (button: string) => {
-        if (button === "{shift}" || button === "{lock}" || button == "{symbols}")
-            handleShift();
-
-        if (button === "{numbers}" || button === "{abc}")
-            handleNumbers();
-
-        if (button === "{backspace}" ) {
-            // Backspace was pressed
-
-            if ( !state.firstKeyPressed )
-            {
-                setState(prevState => ({...prevState, input:"",firstKeyPressed:true}));
-            }
-        }
-    };
-
-
-
-    /**
-     * Toggle between the shifted and default display when the shift key is pressed.
-     */
-    const handleShift = () => {
-        let currentLayout = state.layoutName;
-        let shiftToggle = currentLayout === "default" ? "shift" : "default";
-        setState(prevState => ({...prevState, layoutName: shiftToggle }));
-    }
-
-    /**
-     * Toggle between the number and alpha-numeric display when the numbers key is pressed.
-     */
-    const handleNumbers = () => {
-        let currentLayout = state.layoutName;
-        let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";
-        setState(prevState => ({...prevState, layoutName: numbersToggle }));
-    }
-
-    return (
-        <div>
-            <InputText
-                value={state.input}
-                readOnly={true}
-                tooltip={state.description}
-            />
-            <br />
-            <Keyboard
-                keyboardRef={(r) => (keyboardRef.current = r)}
-                name='keyboard'
-                layoutName={state.layoutName}
-                layout={getLayout()}
-                display={keyboardDisplay}
-                physicalKeyboardHighlight={true}
-                physicalKeyboardHighlightPress={true}
-                onChange={(val) => onChanged(val)}
-                onKeyPress={(button) => onKeyPress(button)}
-            />
-        </div>
-    );
-};
-
+import React, { useState, useEffect, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import Keyboard from "react-simple-keyboard";
+import "./osk.css";
+import { RegExMaskPatterns } from "../core/MaskPatterns";
+
+
+const numpadLayout = {
+    numbers: ["1 2 3", "4 5 6", "7 8 9", "- 0 .", "{symbols} {backspace}"],
+    default: ["! / #", "$ % ^", "& * (", "= ) +", "{numbers} {backspace}"]
+};
+
+
+const englishLayout = {
+    default: [
+        "q w e r t y u i o p",
+        "a s d f g h j k l",
+        "{shift} z x c v b n m {backspace}",
+        "{numbers} {space} {ent}"
+    ],
+    shift: [
+        "Q W E R T Y U I O P",
+        "A S D F G H J K L",
+        "{shift} Z X C V B N M {backspace}",
+        "{numbers} {space} {ent}"
+    ],
+    numbers: ["1 2 3", "4 5 6", "7 8 9", "{abc} 0 {backspace}"]
+};
+
+const keyboardDisplay = {
+    "{numbers}": "123",
+    "{ent}": "return",
+    "{escape}": "esc ⎋",
+    "{tab}": "tab ⇥",
+    "{backspace}": "⌫",
+    "{capslock}": "caps lock ⇪",
+    "{shift}": "⇧",
+    "{controlleft}": "ctrl ⌃",
+    "{controlright}": "ctrl ⌃",
+    "{altleft}": "alt ⌥",
+    "{altright}": "alt ⌥",
+    "{metaleft}": "cmd ⌘",
+    "{metaright}": "cmd ⌘",
+    "{abc}": "ABC",
+    "{space}": "space",
+    "{symbols}": "#+="
+};
+
+
+
+interface OskProps {
+    onAccept?: () => void;
+    onChange?: (value: string) => void;
+    isNumPad?: boolean;
+    input?: string;
+    label?: string;
+    inputPattern?: RegExp;
+    checkValue?: (value: string) => string;
+    description?: string;
+}
+
+export const Osk: React.FC<OskProps> = ({
+    onAccept,
+    onChange,
+    isNumPad = false,
+    input = "",
+    label = "",
+    inputPattern,
+    checkValue,
+    description,
+}) => {
+    const [state, setState] = useState({
+        isVisible: false,
+        layoutName: isNumPad ? "numbers" : "default",
+        minWidth: 500,
+        maxWidth: 800,
+        input,
+        label,
+        isNumPad,
+        inputPattern: inputPattern || RegExMaskPatterns.IntegerPositive,
+        checkValue,
+        description,
+        firstKeyPressed: false,
+        onAccept: onAccept || undefined,
+        onChange: onChange || undefined
+    });
+    const keyboardRef = useRef<any>(null);
+
+    useEffect(() => {
+        return () => {
+            if (keyboardRef.current) {
+                keyboardRef.current.destroy();
+            }
+        };
+    }, []);
+
+    // const setProperty = (key: keyof typeof state, val: any) => {
+    //     setState((prev) => ({ ...prev, [key]: val }));
+    // };
+
+    const onChanged = (val: string) => {
+        let newInput = val;
+        if (!state.firstKeyPressed) {
+            newInput = state.input + val;
+            keyboardRef.current.setInput(newInput);
+        }
+    
+        if (state.onChange) {
+            state.onChange(newInput);
+        }
+    
+        setState(prevState => ({ ...prevState, input: newInput, firstKeyPressed: true }));
+    };
+
+
+    const getLayout = () => {
+        if (state.isNumPad) {
+            if (state.isNumPad) {
+
+                if ( state.inputPattern === undefined || state.inputPattern === null) {
+                   setState(prevState=> ({...prevState, inputPattern:RegExMaskPatterns.IntegerPositive}));
+                }
+    
+                return numpadLayout;
+            }
+            else {
+                return englishLayout;
+            }            
+        }
+    }
+
+
+    const onKeyPress = (button: string) => {
+        if (button === "{shift}" || button === "{lock}" || button == "{symbols}")
+            handleShift();
+
+        if (button === "{numbers}" || button === "{abc}")
+            handleNumbers();
+
+        if (button === "{backspace}" ) {
+            // Backspace was pressed
+
+            if ( !state.firstKeyPressed )
+            {
+                setState(prevState => ({...prevState, input:"",firstKeyPressed:true}));
+            }
+        }
+    };
+
+
+
+    /**
+     * Toggle between the shifted and default display when the shift key is pressed.
+     */
+    const handleShift = () => {
+        let currentLayout = state.layoutName;
+        let shiftToggle = currentLayout === "default" ? "shift" : "default";
+        setState(prevState => ({...prevState, layoutName: shiftToggle }));
+    }
+
+    /**
+     * Toggle between the number and alpha-numeric display when the numbers key is pressed.
+     */
+    const handleNumbers = () => {
+        let currentLayout = state.layoutName;
+        let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";
+        setState(prevState => ({...prevState, layoutName: numbersToggle }));
+    }
+
+    return (
+        <div>
+            <InputText
+                value={state.input}
+                readOnly={true}
+                tooltip={state.description}
+            />
+            <br />
+            <Keyboard
+                keyboardRef={(r) => (keyboardRef.current = r)}
+                name='keyboard'
+                layoutName={state.layoutName}
+                layout={getLayout()}
+                display={keyboardDisplay}
+                physicalKeyboardHighlight={true}
+                physicalKeyboardHighlightPress={true}
+                onChange={(val) => onChanged(val)}
+                onKeyPress={(button) => onKeyPress(button)}
+            />
+        </div>
+    );
+};
+
 export default Osk;