@adcops/autocore-react 3.3.36 → 3.3.39

package/dist/components/IndicatorButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndicatorButton.d.ts","sourceRoot":"","sources":["../../src/components/IndicatorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAK7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,OAAO,MAAM,0BAA0B,GAC1C,MAAM,EAAE,GACR,SAAS,EAAE,GACX,SAAS,CAAC;AAEd,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACtE,2GAA2G;IAC3G,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAElC,mDAAmD;IACnD,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,0BAA0B,CAAC;IAErC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,GAAG,CAAC;IAElB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE3D,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAKD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkK1D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IndicatorButton.d.ts","sourceRoot":"","sources":["../../src/components/IndicatorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAK7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,OAAO,MAAM,0BAA0B,GAC1C,MAAM,EAAE,GACR,SAAS,EAAE,GACX,SAAS,CAAC;AAEd,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACtE,2GAA2G;IAC3G,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAElC,mDAAmD;IACnD,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,0BAA0B,CAAC;IAErC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,GAAG,CAAC;IAElB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE3D,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAKD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwK1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/IndicatorButton.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import React,{useCallback,useContext,useEffect,useState}from"react";import clsx from"clsx";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};import"./IndicatorButton.css";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:s,command:a,commandTopic:l,commandArgs:d,actionMode:u,invert:f,className:m,label:p,style:x,disabled:C,hidden:b,flash:I,onPress:h,onRelease:v,momentary:g,...M})=>{const{subscribe:y,unsubscribe:E,dispatch:A}=useContext(EventEmitterContext),[S,k]=useState(void 0),[B,T]=useState(!1);useEffect(()=>{if(!o||!y)return;const t=y(o,o=>k(o));return()=>{try{E&&void 0!==t&&E(t)}catch{}}},[o,y,E]);const j=void 0!==t?t:S,P=(()=>{if(!r||0===r.length)return p;if(r.length>2){if("number"==typeof j){const o=Math.trunc(j);if(o>=0&&o<r.length&&null!=r[o])return String(r[o])}else if("string"==typeof j){const o=r.findIndex(o=>o===j);if(o>=0)return String(r[o])}return p}const o=j?r[1]:r[0];return null!=o&&String(o).length>0?String(o):p})(),R=toPrimeIcon((j?c:s)??i);let w=j?e:n;void 0===j&&(w=IndicatorColor.IndicatorInvalid);const N=useCallback(o=>{if(!a||!A)return;const t={topic:l,value:f?!o:o,...d??{}};A({topic:a,payload:t})},[a,A,f,d,l]),_=useCallback(o=>{B||C||(T(!0),g&&g(!0),h&&h(o),u!==ActionMode.Tap&&u!==ActionMode.Pressed||N(!0))},[B,C,u,N,h,g]),D=useCallback(o=>{B&&!C&&(T(!1),g&&g(!1),v&&v(o),u===ActionMode.Tap?N(!1):u===ActionMode.Released&&N(!0))},[B,C,u,N,v,g]),G={color:"white",backgroundColor:I?void 0:w,display:b?"none":void 0,...I?{"--flash-on":e,"--flash-off":n}:{},...x??{}};return _jsx(Button,{...M,label:P,icon:R,className:clsx(m,I&&"indicator-button-flash"),style:G,disabled:!!C,onMouseDown:_,onTouchStart:_,onMouseUp:D,onTouchEnd:D,onMouseLeave:D})};export default IndicatorButton;
+import{jsx as _jsx}from"react/jsx-runtime";import React,{useCallback,useContext,useEffect,useState}from"react";import clsx from"clsx";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};import"./IndicatorButton.css";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:s,command:a,commandTopic:l,commandArgs:d,actionMode:u,invert:f,className:m,label:p,style:x,disabled:C,hidden:b,flash:I,onPress:h,onRelease:v,momentary:g,...M})=>{const{subscribe:y,unsubscribe:E,dispatch:A}=useContext(EventEmitterContext),[S,k]=useState(void 0),[B,T]=useState(!1);useEffect(()=>{if(!o||!y)return;const t=y(o,o=>k(o));return()=>{try{E&&void 0!==t&&E(t)}catch{}}},[o,y,E]);const j=void 0!==t?t:S,P=(()=>{if(!r||0===r.length)return p;if(r.length>2){if("number"==typeof j){const o=Math.trunc(j);if(o>=0&&o<r.length&&null!=r[o])return String(r[o])}else if("string"==typeof j){const o=r.findIndex(o=>o===j);if(o>=0)return String(r[o])}return p}const o=j?r[1]:r[0];return null!=o&&String(o).length>0?String(o):p})(),R=toPrimeIcon((j?c:s)??i);let w=j?e:n;void 0===j&&(w=IndicatorColor.IndicatorInvalid);const N=useCallback(o=>{if(!a||!A)return;const t={topic:l,value:f?!o:o,...d??{}};A({topic:a,payload:t})},[a,A,f,d,l]),_=useCallback(o=>{B||C||(T(!0),g&&g(!0),h&&h(o),u!==ActionMode.Tap&&u!==ActionMode.Pressed||N(!0))},[B,C,u,N,h,g]),D=useCallback(o=>{B&&(T(!1),g&&g(!1),v&&v(o),u===ActionMode.Tap?N(!1):u===ActionMode.Released&&N(!0))},[B,u,N,v,g]),G={color:"white",backgroundColor:I?void 0:w,display:b?"none":void 0,...I?{"--flash-on":e,"--flash-off":n}:{},...x??{}},L=!!C&&!B;return _jsx(Button,{...M,label:P,icon:R,className:clsx(m,I&&"indicator-button-flash"),style:G,disabled:L,onMouseDown:_,onTouchStart:_,onMouseUp:D,onTouchEnd:D,onMouseLeave:D})};export default IndicatorButton;

package/package.json

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

package/src/components/IndicatorButton.tsx

@@ -208,7 +208,7 @@ export const IndicatorButton: React.FC<IndicatorButtonProps> = ({
   }, [isPressed, disabled, actionMode, dispatchCommand, onPress, momentary]);
 
   const handleOnReleased = useCallback((e: React.MouseEvent | React.TouchEvent) => {
-    if (!isPressed || disabled) return;
+    if (!isPressed) return;
     setIsPressed(false);
 
     if (momentary) momentary(false);
@@ -219,7 +219,7 @@ export const IndicatorButton: React.FC<IndicatorButtonProps> = ({
     } else if (actionMode === ActionMode.Released) {
       dispatchCommand(true);
     }
-  }, [isPressed, disabled, actionMode, dispatchCommand, onRelease, momentary]);
+  }, [isPressed, actionMode, dispatchCommand, onRelease, momentary]);
 
   const mergedStyle: React.CSSProperties = {
     color: "white",
@@ -234,6 +234,12 @@ export const IndicatorButton: React.FC<IndicatorButtonProps> = ({
     ...(style ?? {}),
   };
 
+  // Final disabled state: 
+  // We MUST NOT disable the underlying HTML element while the user is 
+  // actually holding it down, otherwise the browser will stop sending 
+  // mouseUp/touchEnd events and we will leak a TRUE bit to the server.
+  const isActuallyDisabled = !!disabled && !isPressed;
+
   return (
     <Button
       {...restProps}
@@ -241,7 +247,7 @@ export const IndicatorButton: React.FC<IndicatorButtonProps> = ({
       icon={chosenIcon}
       className={clsx(className, flash && "indicator-button-flash")}
       style={mergedStyle}
-      disabled={!!disabled}
+      disabled={isActuallyDisabled}
       onMouseDown={handleOnPressed}
       onTouchStart={handleOnPressed}
       onMouseUp={handleOnReleased}