@adcops/autocore-react 3.0.6 → 3.0.10

package/src/components/ToggleGroup.tsx

@@ -2,428 +2,284 @@
  * 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
+ * Last Modified: 2024-04-16 09:16:59
  * -----
  * 
  */
 
-import { Component } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { SelectButton, SelectButtonProps } from 'primereact/selectbutton';
 import {SelectItemOptionsType} from "primereact/selectitem";
 
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext} from '../core/EventEmitterContext';
 import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}
 import { ActionMode } from '../core/ActionMode';
 export {ActionMode};
 
-import { IndicatorButtonState } from '../core/IndicatorButtonState';
+import clsx from 'clsx';
 
 
 
 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.
-     */
+    label?: React.ReactNode;
     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.
-     */
+    commandTopic?: string;
     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
+export const ToggleGroup: React.FC<ToggleGroupProps> = ({
+    label,
+    topic,
+    onColor,
+    offColor,
+    command,
+    commandTopic,
+    commandArgs,
+    disableTopic,
+    invisibleTopic,
+    actionMode,
+    invert,
+    ...restProps
+}) => {
+
+    const [uniqueId] = useState(() => `toggleGroup-${Math.random().toString(36).substr(2, 9)}`);
+
+    const [currentValue, setCurrentValue] = useState<any>(undefined);
+    const [isDisabled, setIsDisabled] = useState<boolean>(false);
+    const [isInvisible, setIsInvisible] = useState<boolean>(false);
+    const [isPressed, setIsPressed] = useState<boolean>(false);
+    const context = useContext(EventEmitterContext);
+
+    useEffect(() => {
+        const setupSubscriptions = () => {
+            if (topic) {
+                context.subscribe(topic, handleTopicUpdate);
+            }
+            if (disableTopic) {
+                context.subscribe(disableTopic, handleDisableTopicUpdate);
+            }
+            if (invisibleTopic) {
+                context.subscribe(invisibleTopic, handleInvisibleTopicUpdate);
+            }
         };
-    }    
 
-    componentDidMount() {
-        this.setupSubscriptions();
-    }
+        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);
-        }
-    }
+        return () => {
+            // Unsubscribe logic here
+        };
+    }, [topic, disableTopic, invisibleTopic]);
 
-    /**
-     * Handles updates for the main topic.
-     */
-    private handleTopicUpdate = (value: boolean) => {
-        this.setState({ currentValue: value });
+    const handleTopicUpdate = (value: boolean) => {
+        setCurrentValue(value);
     };
 
-    /**
-     * Handles updates for the disable topic.
-     */
-    private handleDisableTopicUpdate = (value: boolean) => {
-        this.setState({ isDisabled: value });
+    const handleDisableTopicUpdate = (value: boolean) => {
+        setIsDisabled(value);
     };
 
-    /**
-     * Handles updates for the invisible topic.
-     */
-    private handleInvisibleTopicUpdate = (value: boolean) => {
-        this.setState({ isInvisible: value });
-    };    
-
+    const handleInvisibleTopicUpdate = (value: boolean) => {
+        setIsInvisible(value);
+    };
 
-    /**
-     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
-     */
-    protected handleOnPressed() {
-        const { isPressed } = this.state;
-        const {actionMode} = this.props;
-        
+    const handleOnPressed = () => {
         if (!isPressed) {
-            this.setState({isPressed: true});
-
+            setIsPressed(true);
             if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
-                this.dispatchCommand(true);
+                dispatchCommand(true);
             }
         }
-    }
+    };
 
-    /**
-     * Handle the button being released. Used for TAP and RELEASED action modes.
-     */
-    protected handleOnReleased() {
-        const { isPressed } = this.state;
-        const {actionMode} = this.props;
-        
+    const handleOnReleased = () => {
         if (isPressed) {
-            this.setState({isPressed: false});
-
-            if (actionMode === ActionMode.Tap ) {
-                this.dispatchCommand(false);
-            }
-            else if (actionMode === ActionMode.Released) {
-                this.dispatchCommand(true);
+            setIsPressed(false);
+            if (actionMode === ActionMode.Tap) {
+                dispatchCommand(false);
+            } else if (actionMode === ActionMode.Released) {
+                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 dispatchCommand = (value: any) => {
+        if (command && command.length > 0) {
             const payload = {
                 topic: commandTopic,
                 value: value,
-                ...commandArgs                        
+                ...commandArgs
             };
 
-            dispatch({
+            context.dispatch({
                 topic: command,
                 payload: payload
             });
-
         }
+    };
 
+
+    let displayValue = currentValue;
+    if (restProps.value !== undefined) {
+        displayValue = restProps.value;
     }
 
 
+    /**
+     * 
+     * @param currentValue 
+     * @param options 
+     * @returns 
+     */
 
+    const selectOnColor = (
+        currentValue: any,
+        options: SelectItemOptionsType | undefined,
+        onColorProp: IndicatorColor | IndicatorColor[] | undefined
+    ): IndicatorColor => {
 
-    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;
+        if (!options || options.length === 0)
+            return IndicatorColor.IndicatorInvalid;
 
+        let colorArray =
+            Array.isArray(onColorProp) ? onColorProp :
+                onColorProp !== undefined ? [onColorProp] : [IndicatorColor.IndicatorInvalid];
 
-        const { currentValue, isDisabled, isInvisible} = this.state;
-        const { label, value, disabled, className,
-            onColor, offColor, options,
-            ...restProps
-        } = this.props;
+        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;
+        }
 
-        // 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;
+    /**
+     * 
+     * @param currentValue 
+     * @param options 
+     * @returns 
+     */
+    const 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];
+            }
         }
-            
-        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;
+        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;
         }
 
-        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;
+
+        return undefined;
+    }
+
+
+    let color = selectOnColor(displayValue, restProps.options, onColor);
+
+    if (displayValue === undefined) {
+        color = IndicatorColor.IndicatorInvalid;
+    }
+
+    const isMultiple = restProps.options !== undefined
+        && restProps.options !== null
+        && restProps.options.length !== undefined
+        && restProps.options.length > 2
+        ;
+
+
+    const toggleGroupName = `${uniqueId}-togglegroup-selectbutton-container`;
+
+    return (
+        <div className="flex">
+            {
+                <style>{`
+                ${offColor !== undefined ? `
+                    .${toggleGroupName} .p-selectbutton .p-button {
+                        background-color: ${offColor};
                     }
-                `}
+                ` : ''}
+                .${toggleGroupName} .p-selectbutton .p-button.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}}>
+            }
+
+            <div className={toggleGroupName}>
+
+                <div className="p-inputgroup">
+
+                    <span className="p-inputgroup-addon" style={{ flexGrow: 1 }}>
                         {label}
-                    </span>                    
+                    </span>
                     <SelectButton {...restProps}
-                        options={options}
-                        disabled={isDisabled || disabled}     
+                        options={restProps.options}
+                        disabled={isDisabled || restProps.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() }                        
+                        className={clsx(uniqueId, restProps.className, { 'p-invalid': restProps.value === undefined })}
+                        style={isInvisible ? { display: 'none' } : {}}
+                        value={matchCurrentValue(displayValue, restProps.options)}
+                        allowEmpty={false}
+                        onMouseDown={handleOnPressed}
+                        onTouchStart={handleOnPressed}
+                        onMouseUp={handleOnReleased}
+                        onTouchEnd={handleOnReleased}
                     />
-                </div>                    
+                </div>
             </div>
-        );
-    }
+        </div>
+    );
+};
 
-}
+export default ToggleGroup;

package/src/components/ValueIndicator.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-22 06:26:45
+ * -----
+ * Last Modified: 2024-03-22 07:07:50
+ * -----
+ * 
+ */
+
+
+
+ .value-indicator-container {
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--surface-ground);
+    border-color: var(--surface-border);
+    border-radius: var(--border-radius);
+    border-width: 1px;
+    border-style: solid;
+    justify-content: center;
+    align-items: center;
+    padding: 2mm;
+    flex-grow: 1; /* Allow the item to grow to fill available space */
+    flex-shrink: 0; /* Allow the item to shrink if necessary */
+    flex-basis: 0; /* Start with 0 width and then grow as needed, equal distribution */
+    min-width: 0; /* Prevents flex items from overflowing their container */
+}
+
+.value-indicator-label {
+    padding-bottom: 1mm;
+}