@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/ToggleGroup.tsx

@@ -1,322 +1,322 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-03-12 10:14:48
- * -----
- * Last Modified: 2025-09-05 14:51:30
- * -----
- * 
- */
-
-import React, { useState, useEffect, useContext } from 'react';
-import { SelectButton, type SelectButtonProps } from 'primereact/selectbutton';
-import type {SelectItemOptionsType} from "primereact/selectitem";
-
-import { EventEmitterContext} from '../core/EventEmitterContext';
-import {IndicatorColor} from "../core/IndicatorColor";
-export {IndicatorColor}
-import { ActionMode } from '../core/ActionMode';
-export {ActionMode};
-
-import clsx from 'clsx';
-
-
-
-export interface ToggleGroupProps extends SelectButtonProps {
-    label?: React.ReactNode;
-    topic?: string;
-    onColor?: IndicatorColor | IndicatorColor[];
-    offColor?: IndicatorColor;
-    command?: string;
-    commandTopic?: string;
-    commandArgs?: any;
-    disableTopic?: string;
-    invisibleTopic?: string;
-    actionMode?: ActionMode;
-    invert?: boolean;
-    onValueChanged? : (value: boolean | number) => void;
-}
-
-export const ToggleGroup: React.FC<ToggleGroupProps> = ({
-    label,
-    topic,
-    onColor,
-    offColor,
-    command,
-    commandTopic,
-    commandArgs,
-    disableTopic,
-    invisibleTopic,
-    actionMode,
-    invert,
-    onValueChanged: onValueChange,
-    ...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);
-            }
-        };
-
-        setupSubscriptions();
-
-        return () => {
-            // Unsubscribe logic here
-        };
-    }, [topic, disableTopic, invisibleTopic]);
-
-    const handleTopicUpdate = (value: boolean) => {
-        setCurrentValue(value);
-    };
-
-    const handleDisableTopicUpdate = (value: boolean) => {
-        setIsDisabled(value);
-    };
-
-    const handleInvisibleTopicUpdate = (value: boolean) => {
-        setIsInvisible(value);
-    };
-
-    const handleOnPressed = () => {
-        if (!isPressed) {
-            setIsPressed(true);
-            if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
-                dispatchCommand(true);
-            }
-        }
-    };
-
-    const handleOnReleased = () => {
-        if (isPressed) {
-            setIsPressed(false);
-            if (actionMode === ActionMode.Tap) {
-                dispatchCommand(false);
-            } else if (actionMode === ActionMode.Released) {
-                dispatchCommand(true);
-            }
-        }
-    };
-
-    const dispatchCommand = (value: any) => {
-        if (command && command.length > 0) {
-            const payload = {
-                topic: commandTopic,
-                value: value,
-                ...commandArgs
-            };
-
-            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 => {
-
-        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;
-        }
-
-    }
-
-
-    /**
-     * 
-     * @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];
-            }
-        }
-        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;
-    }
-
-
-    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`;
-
-
-    const handleValueChange = (label : string) => {
-
-        if (onValueChange !== undefined && onValueChange !== null) {
-
-
-            if (restProps.options === undefined || restProps.options === null || restProps.options.length === 0) {
-                if (isMultiple)
-                    onValueChange(0);
-                else
-                    onValueChange(false);
-            }
-            else {
-                let index = 0;
-                for (let i=0;i<restProps.options.length;++i) {
-                    if (label === restProps.options[i] ) {
-                        index = i;
-                        break;
-                    }
-                }             
-
-                if (isMultiple)
-                    onValueChange(index);
-                else
-                    onValueChange(index > 0);            
-                
-            }
-
-            
-        }
-
-
-    }
-
-    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={toggleGroupName}>
-
-                <div className="p-inputgroup">
-
-                    <span className="p-inputgroup-addon" style={{ flexGrow: 1 }}>
-                        {label}
-                    </span>
-                    <SelectButton {...restProps}
-                        options={restProps.options}
-                        disabled={isDisabled || restProps.disabled}
-                        multiple={isMultiple}
-                        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}
-                        onChange={(e) => handleValueChange(e.value)}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default ToggleGroup;
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 10:14:48
+ * -----
+ * Last Modified: 2025-09-05 14:51:30
+ * -----
+ * 
+ */
+
+import React, { useState, useEffect, useContext } from 'react';
+import { SelectButton, type SelectButtonProps } from 'primereact/selectbutton';
+import type {SelectItemOptionsType} from "primereact/selectitem";
+
+import { EventEmitterContext} from '../core/EventEmitterContext';
+import {IndicatorColor} from "../core/IndicatorColor";
+export {IndicatorColor}
+import { ActionMode } from '../core/ActionMode';
+export {ActionMode};
+
+import clsx from 'clsx';
+
+
+
+export interface ToggleGroupProps extends SelectButtonProps {
+    label?: React.ReactNode;
+    topic?: string;
+    onColor?: IndicatorColor | IndicatorColor[];
+    offColor?: IndicatorColor;
+    command?: string;
+    commandTopic?: string;
+    commandArgs?: any;
+    disableTopic?: string;
+    invisibleTopic?: string;
+    actionMode?: ActionMode;
+    invert?: boolean;
+    onValueChanged? : (value: boolean | number) => void;
+}
+
+export const ToggleGroup: React.FC<ToggleGroupProps> = ({
+    label,
+    topic,
+    onColor,
+    offColor,
+    command,
+    commandTopic,
+    commandArgs,
+    disableTopic,
+    invisibleTopic,
+    actionMode,
+    invert,
+    onValueChanged: onValueChange,
+    ...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);
+            }
+        };
+
+        setupSubscriptions();
+
+        return () => {
+            // Unsubscribe logic here
+        };
+    }, [topic, disableTopic, invisibleTopic]);
+
+    const handleTopicUpdate = (value: boolean) => {
+        setCurrentValue(value);
+    };
+
+    const handleDisableTopicUpdate = (value: boolean) => {
+        setIsDisabled(value);
+    };
+
+    const handleInvisibleTopicUpdate = (value: boolean) => {
+        setIsInvisible(value);
+    };
+
+    const handleOnPressed = () => {
+        if (!isPressed) {
+            setIsPressed(true);
+            if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
+                dispatchCommand(true);
+            }
+        }
+    };
+
+    const handleOnReleased = () => {
+        if (isPressed) {
+            setIsPressed(false);
+            if (actionMode === ActionMode.Tap) {
+                dispatchCommand(false);
+            } else if (actionMode === ActionMode.Released) {
+                dispatchCommand(true);
+            }
+        }
+    };
+
+    const dispatchCommand = (value: any) => {
+        if (command && command.length > 0) {
+            const payload = {
+                topic: commandTopic,
+                value: value,
+                ...commandArgs
+            };
+
+            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 => {
+
+        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;
+        }
+
+    }
+
+
+    /**
+     * 
+     * @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];
+            }
+        }
+        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;
+    }
+
+
+    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`;
+
+
+    const handleValueChange = (label : string) => {
+
+        if (onValueChange !== undefined && onValueChange !== null) {
+
+
+            if (restProps.options === undefined || restProps.options === null || restProps.options.length === 0) {
+                if (isMultiple)
+                    onValueChange(0);
+                else
+                    onValueChange(false);
+            }
+            else {
+                let index = 0;
+                for (let i=0;i<restProps.options.length;++i) {
+                    if (label === restProps.options[i] ) {
+                        index = i;
+                        break;
+                    }
+                }             
+
+                if (isMultiple)
+                    onValueChange(index);
+                else
+                    onValueChange(index > 0);            
+                
+            }
+
+            
+        }
+
+
+    }
+
+    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={toggleGroupName}>
+
+                <div className="p-inputgroup">
+
+                    <span className="p-inputgroup-addon">
+                        {label}
+                    </span>
+                    <SelectButton {...restProps}
+                        options={restProps.options}
+                        disabled={isDisabled || restProps.disabled}
+                        multiple={isMultiple}
+                        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}
+                        onChange={(e) => handleValueChange(e.value)}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ToggleGroup;