@adcops/autocore-react 3.0.39 → 3.1.1

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2025-01-20 19:15:50
+ * Last Modified: 2025-09-05 14:53:22
  * -----
  * 
  */
@@ -21,7 +21,7 @@ import { Column } from 'primereact/column';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
 import { confirmPopup } from 'primereact/confirmpopup';
-import { FileUpload, FileUploadHandlerEvent} from 'primereact/fileupload';
+import { FileUpload, type FileUploadHandlerEvent} from 'primereact/fileupload';
 
 import { EventEmitterContext } from '../core/EventEmitterContext';
 

package/src/components/Indicator.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:39:41
  * -----
- * Last Modified: 2024-03-12 21:53:48
+ * Last Modified: 2025-09-05 14:52:12
  * -----
  * 
  */
@@ -10,7 +10,7 @@
 
 import React, { Component } from 'react';
 //import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
 //import { IPositionContext } from '../core/PositionContext';
 import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}

package/src/components/IndicatorButton.tsx

@@ -1,360 +1,214 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-21 10:33:58
-  * -----
- * Last Modified: 2024-03-12 20:55:17
- * Modified By: ADC
- * -----
- * 
- */
-
-
-import { Component } from 'react';
-import { Button, ButtonProps} from 'primereact/button';
-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 declare type IndicatorButtonOptionsType = string[] | undefined[] | undefined;
-
-
-/**
- * Common properties for an indicating button, toggle or similar component. 
- * These types of components both indicate a state and execute commands/signals.
- * This type of component is very common in industrial HMIs.
- * 
- * These properties support displaying values of boolean, number and string states.
- * 
- * Available boolean states: **on**, **off** and **not available**:
- *
- * * `true` is treated as **on**
- * * `false` is treated as **off**
- * * `undefined` is treated as **not available**
- * 
- * Numeric values can be used. When there is only 2 or less possible states,
- * 0 will be considered false (OFF), anything else will be considered true (ON).
- * Undefined will be treated as "not available.""
- * 
- * When the indicator contains more than 2 states, then the number will be matched
- * to the available state, in order. More than two states requires usage of the
- * options field, and declaring more than two states there.
- * 
- * If a string state is used, it will be matched exactly to the matching
- * label in the `options` field.
- * 
- * 
- * For more information on the AutoCore Button API Specification, see 
- * [Additional Documentation](../additional-docs/ButtonApiSpecs.md).
- */
-export interface IndicatorButtonProps extends Omit<ButtonProps, 'value'> {
-    
-    /**
-     * Topic name to monitor for state indication.
-     * If `value` field is not undefined, then that value is used instead.
-     */
-    topic?: string;
-
-    /**
-     * State to be displayed. 
-     * 
-     */
-    value?: boolean | number | string;
-
-    /**
-     * Color for the button when the state is TRUE.
-     */
-    onColor?: IndicatorColor;
-
-    /**
-     * Color for the button when the state is FALSE.
-     */
-    offColor?: IndicatorColor;
-
-    // /**
-    //  * Text displayed when the state is TRUE. Falls back to `label` if undefined.
-    //  */
-    // onLabel?: string;
-
-    // /**
-    //  * Text displayed when the state is FALSE. Falls back to `label` if undefined.
-    //  */
-    // offLabel?: string;
-
-
-    /**
-     * An array of string labels to display as the available options.
-     * 
-     * For items with 2 states or less:
-     * Index 0 is the label when value is OFF.
-     * Index 1 is the label when value is ON.
-     * 
-     * If only only value is given (Index 0), then that value is used for all states.
-     * For many controls, this is the same as setting the `label` field and leaving this
-     * field undefined. 
-     */
-    options? : IndicatorButtonOptionsType;
-
-
-    /**
-     * Icon to be displayed on the button. Overrideen by onIcon or offIcon if those
-     * are not undefined.
-     */
-    icon? : string;
-
-    /**
-     * Icon displayed when the state is TRUE. Falls back to `icon` if undefined.
-     */
-    onIcon? : string;
-
-    /**
-     * Icon displayed when the state is FALSE. Falls back to `icon` if undefined.
-     */    
-    offIcon? : string;
-
-
-    /**
-     * 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;
-}
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { Button, type ButtonProps } from "primereact/button";
+import {
+  EventEmitterContext,
+  type EventEmitterContextType,
+} from "../core/EventEmitterContext";
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+import { ActionMode } from "../core/ActionMode";
+export { ActionMode };
 
+export declare type IndicatorButtonOptionsType =
+  | string[]
+  | undefined[]
+  | undefined;
 
+export interface IndicatorButtonProps extends Omit<ButtonProps, "value"> {
+  /** Topic name to monitor for state indication. If `value` is not undefined, that value is used instead. */
+  topic?: string;
 
-export class IndicatorButton extends Component<IndicatorButtonProps, IndicatorButtonState> {
-    static contextType = EventEmitterContext;
+  /** State to be displayed. */
+  value?: boolean | number | string;
 
-    // Define default props
-    static defaultProps = {
-        onColor: IndicatorColor.IndicatorGreen,
-        offColor: "gray",  // Default offColor
-        // ... other default values for props ...
-    };    
+  /** Color for the button when the state is TRUE. */
+  onColor?: IndicatorColor;
 
-    constructor(props: IndicatorButtonProps) {
-        super(props);
-        this.state = {
-            currentValue: undefined,
-            isDisabled: false,
-            isInvisible: false,
-            isPressed: false
-        };
-    }
+  /** Color for the button when the state is FALSE. */
+  offColor?: IndicatorColor;
 
-    componentDidMount() {
-        this.setupSubscriptions();
-    }
+  /** Labels for available options (see docs). */
+  options?: IndicatorButtonOptionsType;
 
-    componentDidUpdate(prevProps: IndicatorButtonProps) {
-        prevProps;
-        // Logic to handle updates in props, if necessary        
-    }
+  /** Base icon class (overridden by onIcon/offIcon). */
+  icon?: string;
 
-    componentWillUnmount() {
-        // Unsubscribe logic if needed
-    }
+  /** Icon when TRUE. */
+  onIcon?: string;
 
-    /**
-     * Sets up subscriptions based on provided topics.
-     */
-    private setupSubscriptions() {
-        const { topic, disableTopic, invisibleTopic } = this.props;
-        const { subscribe } = this.context as EventEmitterContextType;
+  /** Icon when FALSE. */
+  offIcon?: string;
 
-        if (topic) {
-            // Subscribe to the main topic
-            subscribe(topic, this.handleTopicUpdate);
-        }
+  /** Name of the command to invoke on button events. */
+  command?: string;
 
-        if (disableTopic) {
-            // Subscribe to the disable topic
-            subscribe(disableTopic, this.handleDisableTopicUpdate);
-        }
+  /** Optional topic sent with the command payload. */
+  commandTopic?: string;
 
-        if (invisibleTopic) {
-            // Subscribe to the invisible topic
-            subscribe(invisibleTopic, this.handleInvisibleTopicUpdate);
-        }
-    }
+  /** Optional args sent with the command payload. */
+  commandArgs?: any;
 
-    /**
-     * Handles updates for the main topic.
-     */
-    private handleTopicUpdate = (value: boolean) => {
-        this.setState({ currentValue: value });
-    };
+  /** Input mode (Tap, Pressed, Released). */
+  actionMode?: ActionMode;
 
-    /**
-     * Handles updates for the disable topic.
-     */
-    private handleDisableTopicUpdate = (value: boolean) => {
-        this.setState({ isDisabled: value });
-    };
+  /** Inverts values for Tap/Pressed/Released dispatches. */
+  invert?: boolean;
 
-    /**
-     * Handles updates for the invisible topic.
-     */
-    private handleInvisibleTopicUpdate = (value: boolean) => {
-        this.setState({ isInvisible: value });
-    };
+  /** Directly disables the button (replaces old disableTopic). */
+  disabled?: boolean;
 
-    /**
-     * 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);
-            }
-        }
-    }
+  /** Hides the button (replaces old invisibleTopic/hiddenTopic). */
+  hidden?: boolean;
+}
 
-    /**
-     * 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);
-            }
+const toPrimeIcon = (cls?: string) =>
+  cls ? (cls.includes("pi ") ? cls : `pi ${cls}`) : undefined;
+
+export const IndicatorButton: React.FC<IndicatorButtonProps> = ({
+  topic,
+  value,
+  onColor = IndicatorColor.IndicatorGreen,
+  offColor = "gray",
+  options,
+  icon,
+  onIcon,
+  offIcon,
+  command,
+  commandTopic,
+  commandArgs,
+  actionMode,
+  invert,
+  className,
+  label,
+  style,
+  disabled,
+  hidden,
+  ...restProps
+}) => {
+  const { subscribe, unsubscribe, dispatch } = useContext(
+    EventEmitterContext
+  ) as EventEmitterContextType;
+
+  const [currentValue, setCurrentValue] = useState<
+    boolean | number | string | undefined
+  >(undefined);
+  const [isPressed, setIsPressed] = useState(false);
+
+  // Subscribe using autocore-react pattern: subscribe() returns a token; unsubscribe(token)
+  useEffect(() => {
+    if (!topic || !subscribe) return;
+
+    const token = subscribe(topic, (val: any) => setCurrentValue(val));
+
+    return () => {
+      try {
+        if (unsubscribe && token !== undefined) {
+          unsubscribe(token);
         }
-    }
-
-    /**
-     * 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;
+      } catch {
+        /* no-op */
+      }
+    };
+  }, [topic, subscribe, unsubscribe]);
 
-        if (command !== undefined && command !== null && command.length > 0 )
-        {
-            const payload = {
-                topic: commandTopic,
-                value: value,
-                ...commandArgs                        
-            };
+  // Decide which value to show (prop wins over topic-driven value)
+  const displayValue = value !== undefined ? value : currentValue;
 
-            dispatch({
-                topic: command,
-                payload: payload
-            });
+  // Resolve label based on options + value (supports 2-state and multi-state)
+  const resolveLabel = (): string | undefined => {
+    if (!options || options.length === 0) return label;
 
+    // Multi-state: number indexes, string match-by-equality
+    if (options.length > 2) {
+      if (typeof displayValue === "number") {
+        const idx = Math.trunc(displayValue);
+        if (idx >= 0 && idx < options.length && options[idx] != null) {
+          return String(options[idx]);
         }
-
+      } else if (typeof displayValue === "string") {
+        const idx = options.findIndex((s) => s === displayValue);
+        if (idx >= 0) return String(options[idx]);
+      }
+      // Fallback to provided label if no match
+      return label;
     }
 
+    // Two-state (or one): falsey -> options[0], truthy -> options[1]
+    const pick = displayValue ? options[1] : options[0];
+    if (pick !== undefined && pick !== null && String(pick).length > 0) {
+      return String(pick);
+    }
+    return label;
+  };
+
+  const btnLabel = resolveLabel();
+
+  // Icon selection
+  const chosenIcon = toPrimeIcon((displayValue ? onIcon : offIcon) ?? icon);
+
+  // Color selection (undefined -> invalid color)
+  let backgroundColor: string | IndicatorColor | undefined = displayValue
+    ? onColor
+    : offColor;
+  if (displayValue === undefined) {
+    backgroundColor = IndicatorColor.IndicatorInvalid;
+  }
+
+  const dispatchCommand = useCallback(
+    (raw: boolean) => {
+      if (!command || !dispatch) return;
+      const payloadValue = invert ? !raw : raw;
+      const payload = {
+        topic: commandTopic,
+        value: payloadValue,
+        ...(commandArgs ?? {}),
+      };
+      dispatch({ topic: command, payload });
+    },
+    [command, dispatch, invert, commandArgs, commandTopic]
+  );
+
+  const handleOnPressed = useCallback(() => {
+    if (isPressed) return;
+    setIsPressed(true);
+
+    if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
+      dispatchCommand(true);
+    }
+  }, [isPressed, actionMode, dispatchCommand]);
 
-    render() {
-        const { currentValue, isDisabled, isInvisible } = this.state;
-        const { className, severity, label, raised, value,
-            onColor, offColor, options, topic, command,
-            commandArgs, disableTopic, invisibleTopic, inputMode, invert,
-            onIcon, offIcon, icon, 
-            ...restProps
-        } = this.props;
-
-
-        //
-        // Load the value from the proper source.
-        // If the `value` property is undefined, that takes precedence.
-        // 
-        let displayValue = currentValue;
-        if (value !== undefined) {
-            displayValue = value;
-        }        
-
-        // Determine the label and color based on the current state
-        let btnLabel = undefined;
-        if (options !== undefined && options !== null) {
-            btnLabel = displayValue ? options[1] : options[0];
-            if (btnLabel === undefined || btnLabel === null || btnLabel.length === 0)
-                btnLabel = label;    
-        }
-        else {
-            btnLabel = label;
-        }
-
-        let btnIcon = displayValue ? onIcon : offIcon;
-        if (btnIcon === undefined || btnIcon === null || btnIcon.length === 0)
-            btnIcon = icon;
-
-        let color = displayValue ? onColor : offColor;
-
-        // Handle special cases like undefined state or specific input modes
-        if (displayValue === undefined) {
-            color = IndicatorColor.IndicatorInvalid;
-        }
-
+  const handleOnReleased = useCallback(() => {
+    if (!isPressed) return;
+    setIsPressed(false);
 
-        return (
-            <Button {...restProps}
-                label={btnLabel}
-                icon={`pi ${btnIcon}`}
-                className={className}
-                style={{ color: "white", backgroundColor: color, display: isInvisible ? 'none' : 'block' }}
-                disabled={isDisabled}
-                onMouseDown={() => this.handleOnPressed() }
-                onTouchStart={() => this.handleOnPressed() }
-                onMouseUp={() => this.handleOnReleased() }
-                onTouchEnd={() => this.handleOnReleased() }
-                value={disableTopic}
-                raised
-            />
-        );
+    if (actionMode === ActionMode.Tap) {
+      dispatchCommand(false);
+    } else if (actionMode === ActionMode.Released) {
+      dispatchCommand(true);
     }
-}
-
-export default IndicatorButton;
+  }, [isPressed, actionMode, dispatchCommand]);
+
+  const mergedStyle: React.CSSProperties = {
+    color: "white",
+    backgroundColor,
+    display: hidden ? "none" : "block",
+    ...(style ?? {}),
+  };
+
+  return (
+    <Button
+      {...restProps}
+      label={btnLabel}
+      icon={chosenIcon}
+      className={className}
+      style={mergedStyle}
+      disabled={!!disabled}
+      onMouseDown={handleOnPressed}
+      onTouchStart={handleOnPressed}
+      onMouseUp={handleOnReleased}
+      onTouchEnd={handleOnReleased}
+    />
+  );
+};
+
+export default IndicatorButton;

package/src/components/IndicatorRect.tsx

@@ -2,13 +2,13 @@
  * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2025-01-20 15:09:55
  * -----
- * Last Modified: 2025-01-20 15:10:06
+ * Last Modified: 2025-09-05 14:51:58
  * -----
  * 
  */
 
 import { Component } from 'react';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
 import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };
 

package/src/components/Lamp.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:39:41
  * -----
- * Last Modified: 2024-03-12 21:12:29
+ * Last Modified: 2025-09-05 14:51:51
  * -----
  * 
  */
@@ -73,8 +73,8 @@
 
 import React, { Component } from 'react';
 import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
-import { IPositionContext } from '../core/PositionContext';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
+import type { IPositionContext } from '../core/PositionContext';
 import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}