@adcops/autocore-react 3.0.1 → 3.0.4

package/src/components/ToggleGroup.tsx

@@ -0,0 +1,429 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 10:14:48
+ * -----
+ * Last Modified: 2024-03-12 20:40:14
+ * -----
+ * 
+ */
+
+import { Component } from 'react';
+import { SelectButton, SelectButtonProps } from 'primereact/selectbutton';
+import {SelectItemOptionsType} from "primereact/selectitem";
+
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import {IndicatorColor} from "../core/IndicatorColor";
+export {IndicatorColor}
+import { ActionMode } from '../core/ActionMode';
+export {ActionMode};
+
+import { IndicatorButtonState } from '../core/IndicatorButtonState';
+
+
+
+export interface ToggleGroupProps extends SelectButtonProps {
+    
+    /**
+     * Label of the group/row. Can be any element.
+     * 
+     * ## Examples
+     * ```
+     * <ToggleGroup label="Simple Text" />
+     * <ToggleGroup label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
+     * <ToggleGroup label={<YourCustomIconComponent />} />
+     * ```
+     */
+    label? : React.ReactNode;
+
+
+    /**
+     * Topic name to monitor for state indication.
+     * If `value` field is not undefined, then that value is used instead.
+     */
+    topic?: string;
+
+    /**
+     * Color for the button when the state is TRUE.
+     */
+    onColor?: IndicatorColor | IndicatorColor[];
+
+    /**
+     * Color for the button when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+
+
+    /**
+     * Name of the command to invoke on button events.
+     * If command is "*", then the commandTopic will be dispatched
+     * internally.
+     */
+    command?: string;
+
+    /**
+     * Optional topic parameter to send along with the command. 
+     * If set, will automatically be included with commandArgs as 
+     * the value of field 'topic.'
+     */
+    commandTopic? : string;
+
+    /**
+     * Optional arguments sent with the command.
+     */
+    commandArgs?: any;
+
+    /**
+     * Topic to disable button interaction.
+     */
+    disableTopic?: string;
+
+    /**
+     * Topic to control the visibility of the button.
+     */
+    invisibleTopic?: string;
+
+    /**
+     * Mode of input for the button (e.g., TAP, TOGGLE).
+     */
+    actionMode?: ActionMode;
+
+    /**
+     * Inverts the signal values for TAP, PRESSED, and RELEASED modes.
+     */
+    invert?: boolean;
+}
+
+
+/**
+ * 
+ * @param s string | undefined[]
+ * @returns 
+ */
+// function generateSelectButtonOptions(s? : SelectItemOptionsType | undefined) : SelectItemOptionsType | undefined {
+//     if (s !== undefined && s !== null) {
+//         let ret : SelectItemOptionsType = [];
+//         for (let i=0;i<s.length;++i) {
+//             ret.push({label:s[i]});
+//         }
+
+//         return ret;
+//     }
+//     else {
+//         return undefined;
+//     }
+// }
+
+
+/**
+ * 
+ * @param currentValue 
+ * @param options 
+ * @returns 
+ */
+function matchCurrentValue(currentValue : any, options : SelectItemOptionsType | undefined) : any {
+    
+    if (options === undefined || options === null || options.length === 0)
+        return undefined;
+
+    let t = typeof(currentValue);
+    if (t == "boolean" ) {
+        let b = currentValue as boolean;
+        if (b) {
+            if (options.length > 1 )
+                return options[1];
+            else
+                return options[0];
+        }
+        else {
+            return options[0];
+        }
+    }
+    else if (t == "number") {
+        let n = currentValue as number;
+        if (n !== undefined && n < options.length ) {
+            return options[n];
+        }
+    }
+    else if (t == "string") {
+        // The SelectButton should match to this value automatically, if it's in the
+        // options array. No reason to search twice.
+        return currentValue;
+    }
+
+
+    return undefined;
+}
+
+
+
+/**
+ * 
+ * @param currentValue 
+ * @param options 
+ * @returns 
+ */
+
+function selectOnColor(
+    currentValue: any, 
+    options: SelectItemOptionsType | undefined, 
+    onColorProp: IndicatorColor | IndicatorColor[] | undefined
+): IndicatorColor {
+
+    if (!options || options.length === 0)
+        return IndicatorColor.IndicatorInvalid;
+
+    let colorArray = 
+        Array.isArray(onColorProp) ? onColorProp : 
+            onColorProp !== undefined ? [onColorProp] : [IndicatorColor.IndicatorInvalid];
+
+    let t = typeof(currentValue);
+    if (t === "boolean") {
+        return currentValue ? colorArray[0] : colorArray.length > 1 ? colorArray[1] : colorArray[0];
+    }
+    else if (t === "number" && options.length > currentValue) {
+        if (colorArray.length > currentValue) {
+            let index = currentValue as number;
+            return colorArray[index];    
+        }
+        else {
+            return colorArray[0];
+        }
+    }
+    else if (t === "string") {
+        let index = options.indexOf(currentValue);
+        if (index !== -1 && index < colorArray.length)
+            return colorArray[index];
+        else
+            return colorArray[0];
+    }
+
+    if (onColorProp !== undefined && onColorProp !== null) {
+        return Array.isArray(onColorProp) ? onColorProp[0] : onColorProp as IndicatorColor;
+    }
+    else {
+        return IndicatorColor.IndicatorInvalid;
+    }
+    
+}
+
+
+export class ToggleGroup extends Component<ToggleGroupProps, IndicatorButtonState> {
+
+    static contextType = EventEmitterContext;
+
+    constructor(props: ToggleGroupProps) {
+        super(props);
+        this.state = {
+            currentValue: undefined,
+            isDisabled: false,
+            isInvisible: false,
+            isPressed: false
+        };
+    }    
+
+    componentDidMount() {
+        this.setupSubscriptions();
+    }
+
+    componentDidUpdate(prevProps: ToggleGroupProps) {
+        prevProps;
+        // Logic to handle updates in props, if necessary        
+    }
+
+    componentWillUnmount() {
+        // Unsubscribe logic if needed
+    }
+
+    /**
+     * Sets up subscriptions based on provided topics.
+     */
+    private setupSubscriptions() {
+        const { topic, disableTopic, invisibleTopic } = this.props;
+        const { subscribe } = this.context as EventEmitterContextType;
+
+        if (topic) {
+            // Subscribe to the main topic
+            subscribe(topic, this.handleTopicUpdate);
+        }
+
+        if (disableTopic) {
+            // Subscribe to the disable topic
+            subscribe(disableTopic, this.handleDisableTopicUpdate);
+        }
+
+        if (invisibleTopic) {
+            // Subscribe to the invisible topic
+            subscribe(invisibleTopic, this.handleInvisibleTopicUpdate);
+        }
+    }
+
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate = (value: boolean) => {
+        this.setState({ currentValue: value });
+    };
+
+    /**
+     * Handles updates for the disable topic.
+     */
+    private handleDisableTopicUpdate = (value: boolean) => {
+        this.setState({ isDisabled: value });
+    };
+
+    /**
+     * Handles updates for the invisible topic.
+     */
+    private handleInvisibleTopicUpdate = (value: boolean) => {
+        this.setState({ isInvisible: value });
+    };    
+
+
+    /**
+     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
+     */
+    protected handleOnPressed() {
+        const { isPressed } = this.state;
+        const {actionMode} = this.props;
+        
+        if (!isPressed) {
+            this.setState({isPressed: true});
+
+            if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
+                this.dispatchCommand(true);
+            }
+        }
+    }
+
+    /**
+     * Handle the button being released. Used for TAP and RELEASED action modes.
+     */
+    protected handleOnReleased() {
+        const { isPressed } = this.state;
+        const {actionMode} = this.props;
+        
+        if (isPressed) {
+            this.setState({isPressed: false});
+
+            if (actionMode === ActionMode.Tap ) {
+                this.dispatchCommand(false);
+            }
+            else if (actionMode === ActionMode.Released) {
+                this.dispatchCommand(true);
+            }
+        }
+    }
+
+
+    /**
+     * Dispatch a value to any listeners.
+     * @param value The value to dispatch as part of the payload.
+     */
+    protected dispatchCommand(value : any) {
+
+        const {command, commandTopic, commandArgs} = this.props;
+        const { dispatch } = this.context as EventEmitterContextType;
+
+        if (command !== undefined && command !== null && command.length > 0 )
+        {
+            const payload = {
+                topic: commandTopic,
+                value: value,
+                ...commandArgs                        
+            };
+
+            dispatch({
+                topic: command,
+                payload: payload
+            });
+
+        }
+
+    }
+
+
+
+
+    render() {
+        // const { currentValue, isDisabled, isInvisible } = this.state;
+        // const { className, severity, label, raised,
+        //     onColor, offColor, options, topic, command,
+        //     commandArgs, disableTopic, invisibleTopic, inputMode, invert,
+        //     onIcon, offIcon, icon, 
+        //     ...restProps
+        // } = this.props;
+
+
+        const { currentValue, isDisabled, isInvisible} = this.state;
+        const { label, value, disabled, className,
+            onColor, offColor, options,
+            ...restProps
+        } = this.props;
+
+
+        // let btnIcon = currentValue ? onIcon : offIcon;
+        // if (btnIcon === undefined || btnIcon === null || btnIcon.length === 0)
+        //     btnIcon = icon;
+
+
+        //
+        // Load the value from the proper source.
+        // If the `value` property is undefined, that takes precedence.
+        // 
+        let displayValue = currentValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }
+            
+        let color = selectOnColor(displayValue, options, onColor); // displayValue ? onColor : offColor;
+
+        // Handle special cases like undefined state or specific input modes
+        if (displayValue === undefined) {
+            color = IndicatorColor.IndicatorInvalid;
+        }
+
+        const isMultiple = options !== undefined && options !== null && options.length > 2;
+
+
+        return (
+            <div className="flex">
+                
+                <style>{`                
+                    ${offColor !== undefined ? `
+                        .togglegroup-selectbutton-container .p-selectbutton .p-button {
+                            background-color: ${offColor};
+                        }
+                    ` : ''}
+                    .togglegroup-selectbutton-container .p-selectbutton .p-button.p-highlight {
+                        background-color: ${color} !important;
+                        border-color: ${color} !important;
+                    }
+                    .togglegroup-selectbutton-container .p-selectbutton .p-highlight {
+                        background-color: ${color} !important;
+                        border-color: ${color} !important;
+                    }
+                `}
+                </style>
+                <div className='p-inputgroup togglegroup-selectbutton-container'>
+                    <span className="p-inputgroup-addon" style={{flexGrow: 1}}>
+                        {label}
+                    </span>                    
+                    <SelectButton {...restProps}
+                        options={options}
+                        disabled={isDisabled || disabled}     
+                        multiple={isMultiple}
+                        className={`${className || ''} ${displayValue === undefined ? 'p-invalid' : ''}`.trim()}    
+                        {...(isInvisible && { style: { display: 'none' }})}          
+                        value={matchCurrentValue(displayValue, options)}                
+                        allowEmpty={false}                        
+                        onMouseDown={() => this.handleOnPressed() }
+                        onTouchStart={() => this.handleOnPressed() }
+                        onMouseUp={() => this.handleOnReleased() }
+                        onTouchEnd={() => this.handleOnReleased() }                        
+                    />
+                </div>                    
+            </div>
+        );
+    }
+
+}

package/src/components/ValueInput.tsx

@@ -0,0 +1,261 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-20 13:05:42
+ * -----
+ * Last Modified: 2024-03-20 16:22:06
+ * -----
+ * 
+ */
+
+
+import React from "react";
+
+import { InputText } from 'primereact/inputtext';
+import { Button } from "primereact/button";
+
+import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { KeyFilterType } from "primereact/keyfilter";
+
+/**
+ * Properties of the Configuration View
+ */
+interface ValueInputProps {
+
+    /**
+     * The label for the ValueInput field.
+     */
+    label : React.ReactNode | undefined;
+
+
+    /**
+     * The value for the field.
+     */
+    value : string | undefined;
+
+
+    /** 
+     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter. 
+     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
+     */
+    keyFilter : KeyFilterType | undefined;
+    
+    
+    /**
+     * An optional prefix before the data entry field.
+     */
+    prefix : React.ReactNode | undefined;
+
+    /**
+     * An optional prefix before the data entry field.
+     */
+    suffix : React.ReactNode | undefined;
+
+    /**
+     * A small, advisory text below the field.
+     */
+    description : React.ReactNode | undefined;
+
+    /**
+     * If true, all functions of the field will be disabled.
+     */
+    disabled : boolean | undefined;
+    
+    /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
+    dispatchTopic : string | undefined;
+
+    /**
+     * Placeholder string to display if the value is empty.
+     */
+    placeholder : string | undefined;
+
+    /**
+     * The user has accepted a new value.
+     * @param newValue New value accepted by the user.
+     */ 
+    onValueChanged?(newValue: string) : void;
+    /** Regular expression used to validate the value before it is broadcast */
+    validator : RegExp;
+}
+
+/**
+ * State variables of the Configuration View
+ */
+interface ValueInputState {
+    
+    entryValue : string | undefined;
+    isValid : boolean;
+    editing : boolean;
+}
+
+
+/**
+ * A convenient field with all the usual features of inputing values. 
+ * Wraps the common features of use of a InputText, p-inputgroup, some icon buttons,
+ * accepting and rejecting values and keyboard management.
+ */
+export class ValueInput extends React.Component<ValueInputProps, ValueInputState> {
+
+    // Here's an example of using the Application-wide EventEmitter con
+    // Define the contextType for the class to access the context
+    static contextType = EventEmitterContext;
+    // After specifying contextType, you can declare the context's type for the TypeScript compiler.
+    // Basically, we're telling TypeScript the type of the context; this line doesn't
+    // actually do any linking linking to the EventEmitterContext.    
+    declare context: React.ContextType<typeof EventEmitterContext>;
+
+
+    
+
+    /**
+     * Default properties for the component.
+     */
+    static defaultProps = {
+        label : '',        
+        value : undefined,
+        keyFilter : undefined,
+        writeTopic : undefined,
+        onValueChanged : undefined,
+        description: undefined,
+        prefix: undefined,
+        suffix : undefined,
+        disabled : false,
+        dispatchTopic : undefined,
+        placeholder : undefined,
+        validator : undefined
+    };
+
+    /**
+     * 
+     * @param {FooterViewProps} props 
+     */
+    constructor(props : ValueInputProps) {
+        super(props);
+        this.state = {
+            entryValue : props.value,
+            isValid : props.value !== undefined ? this.validateValue(props.value) : false,
+            editing : false
+        };
+    }
+
+    /**
+     * The component has been loaded into the DOM.
+     */
+    componentDidMount() {        
+    }    
+
+    
+
+    /**
+     * Check the new value against the validator RegEx, if one was specified.
+     * @param val The new value.
+     * @returns True if no validator specified or the value is valid, false if not valid.
+     */
+    private validateValue = (val : string) => {
+
+        if (this.props.validator !== undefined && this.props.validator !== null) {
+            return this.props.validator.test(val);
+        }
+        else {
+            return true;
+        }
+        
+    };    
+
+
+    /**
+     * The user has elected to accept the input value. Validate and store, if valid.
+     */
+    private onAcceptValue() {
+        if (this.state.entryValue !== undefined ) {
+            if (this.validateValue(this.state.entryValue) ) {
+                this.setState({isValid : true, editing : false});
+                
+                if (this.props.onValueChanged)
+                    this.props.onValueChanged(this.state.entryValue);
+
+                if (this.props.dispatchTopic !== undefined) {
+                    this.context.dispatch({topic: this.props.dispatchTopic, payload:this.state.entryValue});
+                }
+
+            }
+            else {
+                this.setState({isValid : false});            
+            }    
+        }
+        else {
+            this.setState({isValid: false});            
+        }
+    }
+
+    /**
+     * The user wishes to reset/cancel the previous value.
+     */
+    private onResetValue() {
+        this.setState({
+            entryValue: this.props.value, 
+            isValid: this.props.value !== undefined ? this.validateValue(this.props.value) : false,
+            editing : false
+        });
+    }
+
+
+    render() {
+
+        return(
+            <div>
+                <div className="p-inputgroup flex-1" >
+                    <span className="p-inputgroup-addon">
+                        {this.props.label}
+                    </span>
+                    { this.props.prefix !== undefined && 
+                        <span className="p-inputgroup-addon">
+                            {this.props.prefix}
+                        </span>
+                    }                    
+                    <InputText 
+                        keyfilter={this.props.keyFilter}                         
+                        placeholder={this.props.placeholder} 
+                        value={this.state.entryValue}
+                        onChange={(e) => {this.setState({entryValue: e.target.value, editing : true})} }
+                        className={this.state.isValid ? '' : 'p-invalid'}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                this.onAcceptValue();
+                            }
+                            else if (e.key === 'Escape') {
+                                this.onResetValue();
+                            }
+                        }}     
+                        disabled={this.props.disabled}                   
+                    />
+                    { this.props.suffix !== undefined && 
+                        <span className="p-inputgroup-addon">
+                            {this.props.suffix}
+                        </span>
+                    }                    
+                    <Button 
+                        icon="pi pi-check" 
+                        disabled={this.props.disabled || !this.state.editing}
+                        className="p-button-success" 
+                        onClick={() => this.onAcceptValue()} 
+                    />
+
+                    <Button 
+                        icon="pi pi-times" 
+                        disabled={this.props.disabled || !this.state.editing}
+                        className="p-button-danger" 
+                        onClickCapture={()=>this.onResetValue()} 
+                    />
+                </div>
+                
+                {this.props.description !== undefined &&
+                    <small>{this.props.description}</small>
+                }
+                
+
+            </div>
+
+        );
+    }
+
+}

package/src/core/ActionMode.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 10:28:38
+ * -----
+ * Last Modified: 2024-03-12 10:28:47
+ * -----
+ * 
+ */
+
+
+
+/**
+ * Enum for different input modes of the IndicatorButton.
+ */
+export enum ActionMode {
+    Tap = 'Tap',
+    Toggle = 'Toggle',
+    Pressed = 'Pressed',
+    Released = 'Released'
+}