@adcops/autocore-react 3.0.39 → 3.0.40

package/dist/components/IndicatorButton.d.ts

@@ -1,156 +1,41 @@
-import { Component } from 'react';
-import { ButtonProps } from 'primereact/button';
-import { EventEmitterContextType } from '../core/EventEmitterContext';
+import React from "react";
+import { ButtonProps } from "primereact/button";
 import { IndicatorColor } from "../core/IndicatorColor";
 export { IndicatorColor };
-import { ActionMode } from '../core/ActionMode';
+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.
-     */
+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.
-     *
-     */
+    /** State to be displayed. */
     value?: boolean | number | string;
-    /**
-     * Color for the button when the state is TRUE.
-     */
+    /** Color for the button when the state is TRUE. */
     onColor?: IndicatorColor;
-    /**
-     * Color for the button when the state is FALSE.
-     */
+    /** Color for the button when the state is FALSE. */
     offColor?: IndicatorColor;
-    /**
-     * 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.
-     */
+    /** Labels for available options (see docs). */
     options?: IndicatorButtonOptionsType;
-    /**
-     * Icon to be displayed on the button. Overrideen by onIcon or offIcon if those
-     * are not undefined.
-     */
+    /** Base icon class (overridden by onIcon/offIcon). */
     icon?: string;
-    /**
-     * Icon displayed when the state is TRUE. Falls back to `icon` if undefined.
-     */
+    /** Icon when TRUE. */
     onIcon?: string;
-    /**
-     * Icon displayed when the state is FALSE. Falls back to `icon` if undefined.
-     */
+    /** Icon when FALSE. */
     offIcon?: string;
-    /**
-     * Name of the command to invoke on button events.
-     * If command is "*", then the commandTopic will be dispatched
-     * internally.
-     */
+    /** Name of the command to invoke on button events. */
     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.'
-     */
+    /** Optional topic sent with the command payload. */
     commandTopic?: string;
-    /**
-     * Optional arguments sent with the command.
-     */
+    /** Optional args sent with the command payload. */
     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).
-     */
+    /** Input mode (Tap, Pressed, Released). */
     actionMode?: ActionMode;
-    /**
-     * Inverts the signal values for TAP, PRESSED, and RELEASED modes.
-     */
+    /** 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;
 }
-export declare class IndicatorButton extends Component<IndicatorButtonProps, IndicatorButtonState> {
-    static contextType: import("react").Context<EventEmitterContextType>;
-    static defaultProps: {
-        onColor: IndicatorColor;
-        offColor: string;
-    };
-    constructor(props: IndicatorButtonProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: IndicatorButtonProps): void;
-    componentWillUnmount(): void;
-    /**
-     * Sets up subscriptions based on provided topics.
-     */
-    private setupSubscriptions;
-    /**
-     * Handles updates for the main topic.
-     */
-    private handleTopicUpdate;
-    /**
-     * Handles updates for the disable topic.
-     */
-    private handleDisableTopicUpdate;
-    /**
-     * Handles updates for the invisible topic.
-     */
-    private handleInvisibleTopicUpdate;
-    /**
-     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
-     */
-    protected handleOnPressed(): void;
-    /**
-     * Handle the button being released. Used for TAP and RELEASED action modes.
-     */
-    protected handleOnReleased(): void;
-    /**
-     * Dispatch a value to any listeners.
-     * @param value The value to dispatch as part of the payload.
-     */
-    protected dispatchCommand(value: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const IndicatorButton: React.FC<IndicatorButtonProps>;
 export default IndicatorButton;

package/dist/components/IndicatorButton.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};export class IndicatorButton extends Component{constructor(e){super(e),Object.defineProperty(this,"handleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({currentValue:e})}}),Object.defineProperty(this,"handleDisableTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isDisabled:e})}}),Object.defineProperty(this,"handleInvisibleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isInvisible:e})}}),this.state={currentValue:void 0,isDisabled:!1,isInvisible:!1,isPressed:!1}}componentDidMount(){this.setupSubscriptions()}componentDidUpdate(e){}componentWillUnmount(){}setupSubscriptions(){const{topic:e,disableTopic:t,invisibleTopic:o}=this.props,{subscribe:i}=this.context;e&&i(e,this.handleTopicUpdate),t&&i(t,this.handleDisableTopicUpdate),o&&i(o,this.handleInvisibleTopicUpdate)}handleOnPressed(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e||(this.setState({isPressed:!0}),t!==ActionMode.Tap&&t!==ActionMode.Pressed||this.dispatchCommand(!0))}handleOnReleased(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e&&(this.setState({isPressed:!1}),t===ActionMode.Tap?this.dispatchCommand(!1):t===ActionMode.Released&&this.dispatchCommand(!0))}dispatchCommand(e){const{command:t,commandTopic:o,commandArgs:i}=this.props,{dispatch:n}=this.context;if(null!=t&&t.length>0){n({topic:t,payload:{topic:o,value:e,...i}})}}render(){const{currentValue:e,isDisabled:t,isInvisible:o}=this.state,{className:i,severity:n,label:s,raised:a,value:r,onColor:l,offColor:d,options:c,topic:p,command:u,commandArgs:h,disableTopic:m,invisibleTopic:b,inputMode:f,invert:v,onIcon:C,offIcon:I,icon:T,...x}=this.props;let P,M=e;void 0!==r&&(M=r),null!=c?(P=M?c[1]:c[0],null!=P&&0!==P.length||(P=s)):P=s;let g=M?C:I;null!=g&&0!==g.length||(g=T);let y=M?l:d;return void 0===M&&(y=IndicatorColor.IndicatorInvalid),_jsx(Button,{...x,label:P,icon:`pi ${g}`,className:i,style:{color:"white",backgroundColor:y,display:o?"none":"block"},disabled:t,onMouseDown:()=>this.handleOnPressed(),onTouchStart:()=>this.handleOnPressed(),onMouseUp:()=>this.handleOnReleased(),onTouchEnd:()=>this.handleOnReleased(),value:m,raised:!0})}}Object.defineProperty(IndicatorButton,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(IndicatorButton,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:IndicatorColor.IndicatorGreen,offColor:"gray"}});export default IndicatorButton;
+import{jsx as _jsx}from"react/jsx-runtime";import{useCallback,useContext,useEffect,useState}from"react";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};const toPrimeIcon=o=>o?o.includes("pi ")?o:`pi ${o}`:void 0;export const IndicatorButton=({topic:o,value:t,onColor:e=IndicatorColor.IndicatorGreen,offColor:n="gray",options:r,icon:i,onIcon:c,offIcon:a,command:s,commandTopic:l,commandArgs:d,actionMode:u,invert:m,className:f,label:p,style:C,disabled:b,hidden:I,...x})=>{const{subscribe:g,unsubscribe:v,dispatch:h}=useContext(EventEmitterContext),[M,E]=useState(void 0),[y,A]=useState(!1);useEffect((()=>{if(!o||!g)return;const t=g(o,(o=>E(o)));return()=>{try{v&&void 0!==t&&v(t)}catch{}}}),[o,g,v]);const S=void 0!==t?t:M,k=(()=>{if(!r||0===r.length)return p;if(r.length>2){if("number"==typeof S){const o=Math.trunc(S);if(o>=0&&o<r.length&&null!=r[o])return String(r[o])}else if("string"==typeof S){const o=r.findIndex((o=>o===S));if(o>=0)return String(r[o])}return p}const o=S?r[1]:r[0];return null!=o&&String(o).length>0?String(o):p})(),T=toPrimeIcon((S?c:a)??i);let j=S?e:n;void 0===S&&(j=IndicatorColor.IndicatorInvalid);const B=useCallback((o=>{if(!s||!h)return;const t={topic:l,value:m?!o:o,...d??{}};h({topic:s,payload:t})}),[s,h,m,d,l]),P=useCallback((()=>{y||(A(!0),u!==ActionMode.Tap&&u!==ActionMode.Pressed||B(!0))}),[y,u,B]),w=useCallback((()=>{y&&(A(!1),u===ActionMode.Tap?B(!1):u===ActionMode.Released&&B(!0))}),[y,u,B]),N={color:"white",backgroundColor:j,display:I?"none":"block",...C??{}};return _jsx(Button,{...x,label:k,icon:T,className:f,style:N,disabled:!!b,onMouseDown:P,onTouchStart:P,onMouseUp:w,onTouchEnd:w})};export default IndicatorButton;

package/dist/core/EventEmitterContext.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
 import { Hub } from "../hub";
 import { CommandMessageResult } from "../hub/CommandMessage";
 export { Hub };

package/dist/core/EventEmitterContext.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useState,useMemo,useCallback}from"react";import{createHub,Hub}from"../hub";export{Hub};let globalSubscriptionId=1;export const EventEmitterContext=createContext({state:{subscriptions:{},nextSubscriptionId:1},dispatch:()=>{},subscribe:()=>0,invoke:async(t,s,e)=>Promise.resolve({data:{},success:!1,error_message:""}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[],isConnected:()=>!1});export const EventEmitterProvider=({children:t})=>{const[s,e]=useState({subscriptions:{},nextSubscriptionId:1}),i=useMemo((()=>createHub()),[]),r=useCallback((t=>{const{topic:s,payload:i}=t;e((t=>((t.subscriptions[s]||[]).forEach((t=>t.callback(i))),{...t,eventData:i})))}),[]),o=useCallback(((t,s)=>{globalSubscriptionId+=1;const i=globalSubscriptionId;return e((e=>({...e,subscriptions:{...e.subscriptions,[t]:[...e.subscriptions[t]||[],{id:i,callback:s}]},nextSubscriptionId:globalSubscriptionId+1}))),i}),[]),c=useCallback((t=>{e((s=>{const e={...s.subscriptions};return Object.keys(e).forEach((s=>{e[s]=e[s].filter((s=>s.id!==t)),0===e[s].length&&delete e[s]})),{...s,subscriptions:e}}))}),[]),n=useCallback((t=>t?s.subscriptions[t]||[]:s.subscriptions),[]),u=useMemo((()=>({state:s,dispatch:r,subscribe:o,unsubscribe:c,invoke:i.invoke,hub:i,getSubscriptions:n,isConnected:i.isConnected})),[s,i]);return i.setContext(u),_jsx(EventEmitterContext.Provider,{value:u,children:t})};
+import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useState,useMemo,useCallback,useRef,useEffect}from"react";import{createHub,Hub}from"../hub";export{Hub};let globalSubscriptionId=1;export const EventEmitterContext=createContext({state:{subscriptions:{},nextSubscriptionId:1},dispatch:()=>{},subscribe:()=>0,invoke:async(t,e,s)=>Promise.resolve({data:{},success:!1,error_message:""}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[],isConnected:()=>!1});export const EventEmitterProvider=({children:t})=>{const[e,s]=useState({subscriptions:{},nextSubscriptionId:1}),r=useMemo((()=>createHub()),[]),c=useRef({});useEffect((()=>{c.current=e.subscriptions}),[e.subscriptions]);const o=useCallback((t=>{const{topic:e,payload:r}=t,o=c.current[e]?.slice()??[];for(const t of o)try{t.callback(r)}catch(t){}s((t=>({...t,eventData:r})))}),[]),n=useCallback(((t,e)=>{const r=++globalSubscriptionId,o=[...c.current[t]??[],{id:r,callback:e}];return c.current[t]=o,s((e=>({...e,subscriptions:{...e.subscriptions,[t]:o},nextSubscriptionId:globalSubscriptionId+1}))),r}),[]),i=useCallback((t=>{const e=c.current;for(const s of Object.keys(e)){const r=e[s].filter((e=>e.id!==t));r.length?e[s]=r:delete e[s]}s((t=>({...t,subscriptions:{...e}})))}),[]);import.meta&&import.meta.hot&&import.meta.hot.dispose((()=>{c.current={}}));const u=useMemo((()=>({state:e,dispatch:o,subscribe:n,unsubscribe:i,invoke:r.invoke,hub:r,getSubscriptions:t=>t?c.current[t]??[]:c.current,isConnected:r.isConnected})),[e,r,o,n,i]);return r.setContext(u),_jsx(EventEmitterContext.Provider,{value:u,children:t})};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.39",
+    "version": "3.0.40",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",