@adcops/autocore-react 3.0.0

package/src/components/Osk.tsx

@@ -0,0 +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>
+    );
+};
+
+export default Osk;

package/src/components/OskDialog.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Dialog } from 'primereact/dialog';
+import {Button} from "primereact/button";
+import { Osk } from './Osk';
+
+interface OskDialogProps {
+    isVisible: boolean;
+    onAccept?: (value: string) => void;
+    onReject?: () => void;
+    onChange?: (value: string) => void;
+    isNumPad?: boolean;
+    maxWidth?: number;
+    input?: string;
+    label?: string;
+    description?: string;
+    inputPattern?: RegExp;
+    textMode?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    minLength?: number;
+}
+
+interface OskDialogState {
+    input: string;
+    errorMessage: string;
+}
+
+export class OskDialog extends React.Component<OskDialogProps, OskDialogState> {
+    private container: HTMLDivElement | null = null;
+
+    constructor(props: OskDialogProps) {
+        super(props);
+        this.state = {
+            input: props.input || "",
+            errorMessage: ""
+        };
+    }
+
+    componentWillUnmount() {
+        if (this.container) {
+            document.body.removeChild(this.container);
+        }
+    }
+
+    checkValue = (value: string): string => {
+        // Checks the value against settings and returns an error message
+        // if invalid. If the value is valid and should be accepted,
+        // a blank error message is returned.
+
+        var ok = true;
+
+        if (value !== undefined && value !== null && value.length > 0) {
+
+            if (this.props.inputPattern !== undefined) {
+                ok = this.props.inputPattern.test(value);
+            }
+            else if (!this.props.textMode) {
+
+                if (value.length < 0)
+                    ok = false;
+
+                if (isNaN(parseFloat(value)))
+                    ok = false;
+
+
+                var checkValue = parseFloat(value);
+
+                if (this.props.minValue !== undefined && this.props.minValue !== null) {
+                    if (checkValue < this.props.minValue)
+                        ok = false;
+
+                }
+
+                if (this.props.maxValue !== undefined && this.props.maxValue !== null) {
+                    if (checkValue > this.props.maxValue)
+                        ok = false;
+                }
+            }
+            else {
+                if (this.props.minLength !== undefined
+                    && value.length < this.props.minLength
+                ) {
+                    ok = false;
+                }
+            }
+        }
+        else {
+            ok = false;
+        }
+
+        if (ok) {
+            return "";
+        }
+        else {
+            return "Invalid value.";
+        }
+    }
+
+    onAccepted = () => {
+        const error = this.checkValue(this.state.input);
+        if (!error) {
+            this.props.onAccept?.(this.state.input);
+            this.closeDialog();
+        } else {
+            this.setState({ errorMessage: error });
+        }
+    }
+
+    onChanged = (val: string) => {
+        this.setState({ input: val, errorMessage: "" });
+        if (this.props.onChange) {
+            this.props.onChange(val);
+        }
+    }
+
+    closeDialog = () => {
+        if (this.container) {
+            ReactDOM.unmountComponentAtNode(this.container);
+            this.container = null;
+        }
+        this.props.onReject?.();
+    }
+
+    show = () => {
+        if (!this.container) {
+            this.container = document.createElement('div');
+            document.body.appendChild(this.container);
+        }
+
+        const footerContent = (
+            <div>
+                <Button label="Cancel" icon="pi pi-times" onClick={() => this.closeDialog()} className="p-button-text" />
+                <Button label="Accept" icon="pi pi-check" onClick={() => this.onAccepted()} autoFocus />
+            </div>
+        );
+
+
+        ReactDOM.render(
+            <Dialog
+                visible={this.props.isVisible}
+                onHide={this.closeDialog}
+                header={this.props.label}
+                style={{ width: this.props.maxWidth || '50vw' }}
+                footer={footerContent}
+            >
+                <Osk
+                    onChange={this.onChanged}
+                    isNumPad={this.props.isNumPad}
+                    inputPattern={this.props.inputPattern}
+                    input={this.state.input}
+                />
+                {this.state.errorMessage && <div className="error-message">{this.state.errorMessage}</div>}
+            </Dialog>,
+            this.container
+        );
+    }
+
+    render() {
+        // The actual rendering is handled by the show method.
+        return null;
+    }
+}
+
+export default OskDialog;

package/src/components/ValueDisplay.tsx

@@ -0,0 +1,181 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2024-03-08 07:48:42
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+
+
+import {Component} from 'react';
+//import useFitText from 'use-fit-text';
+import { format as numerableFormat } from 'numerable';
+import clsx from 'clsx';
+import { EventEmitterContext, EventEmitterContextType} from '../core/EventEmitterContext';
+
+import {IPositionContext} from '../core/PositionContext';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface Props {
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+    /**
+     * X position (in pixels)
+     */
+    x?: number;
+    /**
+     * Y position (in pixels)
+     */
+    y?: number;
+    /**
+     * Width (in pixels)
+     */
+    width?: number;
+    /**
+     * Height (in pixels)<br/>
+     * @default width
+     */
+    height?: number;
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+    /**
+     * Enable absolute positioning for the component, allowing it to be
+     * placed on a specific position of its parent. This is useful when
+     * laying components over an image or wireframe.
+     */
+    useAbsolutePositioning?: boolean;
+
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+}
+
+/**
+ * State of the ValueDisplay component.
+ */
+interface State {
+    subscribedValue?: string | number | null;
+    fontSize?: string;
+}
+
+
+
+/**
+ * `ValueDisplay` is a React component that subscribes to a value from an `EventEmitterContext` and renders it.
+ * This component adjusts its display based on the provided properties, including positioning and styling adjustments
+ * based on its context. It is designed to work within a system that provides dynamic updates to values via an event emitter.
+ */
+class ValueDisplay extends Component<Props, State> {
+    
+    /** Defines the context type to subscribe to changes using EventEmitter. */
+    static contextType = EventEmitterContext;
+
+   
+    /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
+    protected unsubscribeTopicId: number | null = null;
+
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param props The properties passed to the component, including initial value and other display options.
+     */    
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            subscribedValue: props.value,
+            fontSize: '100%'  // Initial font size, adjust as needed
+        };
+    }
+
+    /**
+     * Upon mounting, the component subscribes to updates on the specified topic if it exists,
+     * updating its state with the new value when the topic publishes updates.
+     */    
+    componentDidMount() {
+        const { topic } = this.props;
+        if (topic) {
+            const { subscribe } = this.context as EventEmitterContextType;
+            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
+                this.setState({ subscribedValue: value });
+            });
+        }
+    }
+
+    /**
+     * If the value prop changes, the component updates its state with the new value.
+     * This ensures that the component remains in sync with its props.
+     * @param prevProps The previous properties for comparison to detect changes.
+     */    
+    componentDidUpdate(prevProps: Props) {
+        // Check if the value prop has changed
+        if (this.props.value !== prevProps.value) {
+            // Update the state with the new value
+            this.setState({ subscribedValue: this.props.value });
+        }
+    }    
+
+    /**
+     * Before the component is unmounted, it unsubscribes from the topic to prevent memory leaks
+     * and unnecessary updates from occurring.
+     */    
+    componentWillUnmount() {
+        if (this.unsubscribeTopicId) {
+            const { unsubscribe } = this.context as EventEmitterContextType;
+            unsubscribe(this.unsubscribeTopicId);
+        }
+    }
+
+    /**
+     * Renders the component with styling and formatting based on the provided properties and state.
+     * Supports absolute or relative positioning and scales the display based on the context's dimensions.
+     * @returns A styled `div` element displaying the formatted value.
+     */    
+    render() {
+        const { x, y, width, height, format, formatOptions, className, useAbsolutePositioning } = this.props;
+        const { subscribedValue, fontSize } = this.state;
+        const { scale, xOffset, yOffset } = this.context as IPositionContext;
+
+        const style : React.CSSProperties = {
+            position: useAbsolutePositioning ? 'absolute' : 'relative',
+            display: useAbsolutePositioning ? "" : "inline-block",
+            verticalAlign: 'middle',
+            fontSize: fontSize && scale > 1 ? `${scale * 100}%` : fontSize,
+            top: useAbsolutePositioning && y ? `${yOffset + scale * y}px` : undefined,
+            left: useAbsolutePositioning && x ? `${xOffset + scale * x}px` : undefined,
+            width: width ? `${width * scale}px` : undefined,
+            height: height ? `${height * scale}px` : undefined,
+            lineHeight: height ? `${height * scale}px` : undefined,
+            whiteSpace: 'nowrap',
+        };
+
+        return (
+            <div className={clsx(className)} style={style}>
+                {numerableFormat(subscribedValue, format, formatOptions)}
+            </div>
+        );
+    }
+}
+
+export { ValueDisplay, NumerableFormatOptions };

package/src/components/osk.css

@@ -0,0 +1,123 @@
+/*
+ * Customized by Thomas C. Bitsky Jr. Automated Design Corporation.
+ *
+ * Original file:
+ *
+ *   simple-keyboard v2.32.100
+ *   https://github.com/hodgef/simple-keyboard
+ * 
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
+ */
+
+.hg-theme-default {
+    width: 100%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    touch-action: manipulation
+}
+
+.hg-theme-default .hg-button span {
+    pointer-events: none
+}
+
+.hg-theme-default button.hg-button {
+    border-width: 0;
+    outline: 0;
+    font-size: inherit
+}
+
+.hg-theme-default {
+    background-color: #ececec;
+    padding: 5px;
+    border-radius: 5px
+}
+
+.hg-theme-default .hg-button {
+    display: inline-block;
+    flex-grow: 1
+}
+
+.hg-theme-default .hg-row {
+    display: flex
+}
+
+.hg-theme-default .hg-row:not(:last-child) {
+    margin-bottom: 5px
+}
+
+.hg-theme-default .hg-row .hg-button-container,
+.hg-theme-default .hg-row .hg-button:not(:last-child) {
+    margin-right: 5px
+}
+
+.hg-theme-default .hg-row>div:last-child {
+    margin-right: 0
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+    display: flex
+}
+
+.hg-theme-default .hg-button {
+    /* box-shadow: 0 0 3px -1px rgba(0, 0, 0, .3); */  /* use the shadow for an ios look */
+    font-weight: 600;
+    font-size: large;
+    height: 40px;
+    border-radius: 3px;  /* set to 5 for ios look, 3 for microsoft look */
+    box-sizing: border-box;
+    padding: 5px;
+    color: white; /* color of the button text */
+    background: #444444;    /* background of the button text */
+    border: 1px solid black;
+    cursor:pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+}
+
+.hg-theme-default .hg-button.hg-activeButton {
+background: #efefef
+}
+
+.hg-theme-default.hg-layout-numeric .hg-button {
+width: 33.3%;
+height: 60px;
+align-items: center;
+display: flex;
+justify-content: center
+}
+
+.hg-theme-default .hg-button.hg-button-numpadadd,
+.hg-theme-default .hg-button.hg-button-numpadenter {
+height: 85px
+}
+
+.hg-theme-default .hg-button.hg-button-numpad0 {
+width: 105px
+}
+
+.hg-theme-default .hg-button.hg-button-com {
+max-width: 85px
+}
+
+.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
+max-width: 45px
+}
+
+.hg-theme-default .hg-button.hg-selectedButton {
+background: rgba(5, 25, 70, .53);
+color: #fff
+}
+
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
+max-width: 82px
+}
+
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
+max-width: 60px
+}