@adcops/autocore-react 3.0.1 → 3.0.3

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/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'
+}

package/src/core/IndicatorButtonState.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 11:08:29
+ * -----
+ * Last Modified: 2024-03-12 11:08:41
+ * -----
+ * 
+ */
+
+
+/**
+ * Common state for the indicator buttons, toggles or similar components.
+ */
+export interface IndicatorButtonState {
+    /**
+     * Current value/state of the button based on the subscribed topic.
+     */
+    currentValue?: boolean | number | string;
+
+    /**
+     * Indicates whether the button is disabled.
+     */
+    isDisabled?: boolean;
+
+    /**
+     * Indicates whether the button is invisible.
+     */
+    isInvisible?: boolean;
+
+    /**
+     * The button is in the "down" state.
+     */
+    isPressed : boolean;
+}

package/tools/copy-distribution-files.cjs

@@ -3,8 +3,8 @@
  * Created Date: 2024-01-08 13:01:16
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-01-15 07:32:57
- * Modified By: Thomas C. Bitsky Jr.
+ * Last Modified: 2024-03-17 12:37:37
+ * Modified By: ADC
  * -----
  * 
  */
@@ -69,5 +69,6 @@ function copyFilesByType(srcDir, destDir, extension) {
 copyFilesByType("./src", "./dist", "css");
 copyFilesByType("./src", "./dist", "ttf");
 copyFilesByType("./src", "./dist", "woff2");
+copyFilesByType("./src", "./dist", "svg");
 // JavaScript files won't be processed by tsc
 //copyFilesByType("./src", "./dist", "js");