@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/IndicatorButton.tsx

@@ -1,214 +1,214 @@
-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;
-
-  /** 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;
-
-  /** Labels for available options (see docs). */
-  options?: IndicatorButtonOptionsType;
-
-  /** Base icon class (overridden by onIcon/offIcon). */
-  icon?: string;
-
-  /** Icon when TRUE. */
-  onIcon?: string;
-
-  /** Icon when FALSE. */
-  offIcon?: string;
-
-  /** Name of the command to invoke on button events. */
-  command?: string;
-
-  /** Optional topic sent with the command payload. */
-  commandTopic?: string;
-
-  /** Optional args sent with the command payload. */
-  commandArgs?: any;
-
-  /** Input mode (Tap, Pressed, Released). */
-  actionMode?: ActionMode;
-
-  /** Inverts values for Tap/Pressed/Released dispatches. */
-  invert?: boolean;
-
-  /** Directly disables the button (replaces old disableTopic). */
-  disabled?: boolean;
-
-  /** Hides the button (replaces old invisibleTopic/hiddenTopic). */
-  hidden?: boolean;
-}
-
-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);
-        }
-      } catch {
-        /* no-op */
-      }
-    };
-  }, [topic, subscribe, unsubscribe]);
-
-  // Decide which value to show (prop wins over topic-driven value)
-  const displayValue = value !== undefined ? value : currentValue;
-
-  // 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]);
-
-  const handleOnReleased = useCallback(() => {
-    if (!isPressed) return;
-    setIsPressed(false);
-
-    if (actionMode === ActionMode.Tap) {
-      dispatchCommand(false);
-    } else if (actionMode === ActionMode.Released) {
-      dispatchCommand(true);
-    }
-  }, [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;
+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;
+
+  /** 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;
+
+  /** Labels for available options (see docs). */
+  options?: IndicatorButtonOptionsType;
+
+  /** Base icon class (overridden by onIcon/offIcon). */
+  icon?: string;
+
+  /** Icon when TRUE. */
+  onIcon?: string;
+
+  /** Icon when FALSE. */
+  offIcon?: string;
+
+  /** Name of the command to invoke on button events. */
+  command?: string;
+
+  /** Optional topic sent with the command payload. */
+  commandTopic?: string;
+
+  /** Optional args sent with the command payload. */
+  commandArgs?: any;
+
+  /** Input mode (Tap, Pressed, Released). */
+  actionMode?: ActionMode;
+
+  /** Inverts values for Tap/Pressed/Released dispatches. */
+  invert?: boolean;
+
+  /** Directly disables the button (replaces old disableTopic). */
+  disabled?: boolean;
+
+  /** Hides the button (replaces old invisibleTopic/hiddenTopic). */
+  hidden?: boolean;
+}
+
+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);
+        }
+      } catch {
+        /* no-op */
+      }
+    };
+  }, [topic, subscribe, unsubscribe]);
+
+  // Decide which value to show (prop wins over topic-driven value)
+  const displayValue = value !== undefined ? value : currentValue;
+
+  // 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]);
+
+  const handleOnReleased = useCallback(() => {
+    if (!isPressed) return;
+    setIsPressed(false);
+
+    if (actionMode === ActionMode.Tap) {
+      dispatchCommand(false);
+    } else if (actionMode === ActionMode.Released) {
+      dispatchCommand(true);
+    }
+  }, [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;