@adcops/autocore-react 3.0.6 → 3.0.8

package/dist/components/ValueIndicator.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-22 06:26:45
+ * -----
+ * Last Modified: 2024-03-22 07:07:50
+ * -----
+ * 
+ */
+
+
+
+ .value-indicator-container {
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--surface-ground);
+    border-color: var(--surface-border);
+    border-radius: var(--border-radius);
+    border-width: 1px;
+    border-style: solid;
+    justify-content: center;
+    align-items: center;
+    padding: 2mm;
+    flex-grow: 1; /* Allow the item to grow to fill available space */
+    flex-shrink: 0; /* Allow the item to shrink if necessary */
+    flex-basis: 0; /* Start with 0 width and then grow as needed, equal distribution */
+    min-width: 0; /* Prevents flex items from overflowing their container */
+}
+
+.value-indicator-label {
+    padding-bottom: 1mm;
+}      

package/dist/components/ValueIndicator.d.ts

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import type { NumerableFormatOptions } from '../core/NumerableTypes';
+import "./ValueIndicator.css";
 /**
  * Properties of the ValueDisplay component.
  */
@@ -34,6 +35,10 @@ interface ValueIndicatorProps {
      * The topic to monitor to display. Optional.
      */
     topic?: string;
+    /**
+     * Optional style properties.
+     */
+    style?: React.CSSProperties | undefined;
 }
 /**
  * State of the ValueDisplay component.

package/dist/components/ValueIndicator.js

@@ -1 +1 @@
-import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Component}from"react";import{Tooltip}from"primereact/tooltip";import{ValueDisplay}from"./ValueDisplay";export class ValueIndicator extends Component{constructor(r){super(r),this.state={}}render(){return _jsxs(_Fragment,{children:[_jsxs("style",{children:["\n                        .value-indicator-container {\n\n                            background-color: var(--surface-ground);\n                            border-color: var(--surface-border);\n                            border-radius: var(--border-radius);\n                            border-width: 1px;\n                            border-style: solid;\n                            display: flex;\n                            flex-direction: column;\n                            justify-content: center;\n                            align-items: center;\n                            padding: 2mm;\n                        }\n\n                        .value-indicator-label {\n                            padding-bottom: 1mm;\n                        }            \n                    ","'"]}),_jsx(Tooltip,{target:".value-indicator-tooltip"}),_jsx("span",{className:"value-indicator-tooltip",children:_jsxs("div",{className:"value-indicator-container",children:[void 0!==this.props.label&&_jsx("div",{className:"value-indicator-label",children:this.props.label}),_jsx(ValueDisplay,{className:this.props.className,value:this.props.value,format:this.props.format,formatOptions:this.props.formatOptions,topic:this.props.topic,"data-pr-tooltip":this.props.tooltip,"data-pr-position":"down","data-pr-mousetrack":!0,"data-pr-showDelay":2e3})]})})]})}}export default ValueIndicator;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{Tooltip}from"primereact/tooltip";import{ValueDisplay}from"./ValueDisplay";import"./ValueIndicator.css";export class ValueIndicator extends Component{constructor(t){super(t),this.state={}}render(){return _jsxs("div",{className:"value-indicator-container",style:this.props.style,children:[_jsx(Tooltip,{target:".value-indicator-container"}),void 0!==this.props.label&&_jsx("div",{className:"value-indicator-label",children:this.props.label}),_jsx(ValueDisplay,{className:this.props.className,value:this.props.value,format:this.props.format,formatOptions:this.props.formatOptions,topic:this.props.topic,"data-pr-tooltip":this.props.tooltip,"data-pr-position":"down","data-pr-mousetrack":!0,"data-pr-showDelay":2e3})]})}}export default ValueIndicator;

package/dist/core/EventEmitterContext.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useState,useMemo}from"react";import{createHub,Hub}from"../hub";export{Hub};export const EventEmitterContext=createContext({state:{subscriptions:{},nextSubscriptionId:1},dispatch:()=>{},subscribe:()=>0,invoke:async(t,s)=>Promise.resolve({}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[]});export const EventEmitterProvider=({children:t})=>{const[s,e]=useState({subscriptions:{},nextSubscriptionId:1}),i=useMemo((()=>createHub()),[]),r=t=>{const{topic:s,payload:i}=t;e((t=>(t.subscriptions[s]?.forEach((t=>t.callback(i))),{...t,eventData:i})))},n=(t,i)=>{const r=s.nextSubscriptionId;return e((s=>({...s,subscriptions:{...s.subscriptions,[t]:[...s.subscriptions[t]||[],{id:r,callback:i}]},nextSubscriptionId:s.nextSubscriptionId+1}))),r},o=t=>{e((s=>{const e={...s.subscriptions};for(const s in e)e.hasOwnProperty(s)&&(e[s]=e[s].filter((s=>s.id!==t)),0===e[s].length&&delete e[s]);return{...s,subscriptions:e}}))},c=t=>t?s.subscriptions[t]||[]:s.subscriptions,u=useMemo((()=>({state:s,dispatch:r,subscribe:n,unsubscribe:o,invoke:i.invoke,hub:i,getSubscriptions:c})),[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}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)=>Promise.resolve({}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[]});export const EventEmitterProvider=({children:t})=>{const[s,e]=useState({subscriptions:{},nextSubscriptionId:1}),i=useMemo((()=>createHub()),[]),r=t=>{const{topic:s,payload:i}=t;e((t=>(t.subscriptions[s]?.forEach((t=>t.callback(i))),{...t,eventData:i})))},o=(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},n=t=>{e((s=>{const e={...s.subscriptions};for(const s in e)e.hasOwnProperty(s)&&(e[s]=e[s].filter((s=>s.id!==t)),0===e[s].length&&delete e[s]);return{...s,subscriptions:e}}))},c=t=>t?s.subscriptions[t]||[]:s.subscriptions,u=useMemo((()=>({state:s,dispatch:r,subscribe:o,unsubscribe:n,invoke:i.invoke,hub:i,getSubscriptions:c})),[s,i]);return i.setContext(u),_jsx(EventEmitterContext.Provider,{value:u,children:t})};

package/package.json

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

package/src/components/ValueIndicator.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-22 06:26:45
+ * -----
+ * Last Modified: 2024-03-22 07:07:50
+ * -----
+ * 
+ */
+
+
+
+ .value-indicator-container {
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--surface-ground);
+    border-color: var(--surface-border);
+    border-radius: var(--border-radius);
+    border-width: 1px;
+    border-style: solid;
+    justify-content: center;
+    align-items: center;
+    padding: 2mm;
+    flex-grow: 1; /* Allow the item to grow to fill available space */
+    flex-shrink: 0; /* Allow the item to shrink if necessary */
+    flex-basis: 0; /* Start with 0 width and then grow as needed, equal distribution */
+    min-width: 0; /* Prevents flex items from overflowing their container */
+}
+
+.value-indicator-label {
+    padding-bottom: 1mm;
+}      

package/src/components/ValueIndicator.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:17:02
  * -----
- * Last Modified: 2024-03-21 15:24:54
+ * Last Modified: 2024-03-22 06:42:57
  * Modified By: ADC
  * -----
  * 
@@ -17,7 +17,7 @@ import { Tooltip } from "primereact/tooltip";
 import { ValueDisplay } from './ValueDisplay';
 import type { NumerableFormatOptions } from '../core/NumerableTypes';
 
-
+import "./ValueIndicator.css";
 
 
 /**
@@ -62,6 +62,12 @@ interface ValueIndicatorProps {
      * The topic to monitor to display. Optional. 
      */
     topic?: string;
+
+
+    /**
+     * Optional style properties.
+     */
+    style?: React.CSSProperties | undefined; 
 }
 
 /**
@@ -94,56 +100,34 @@ export class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicato
      * Renders the component into the DOM.
      * @returns A styled `div` element displaying the indicator.
      */
-    render() {
 
 
+
+    render() {
+
         return (
-            <>
-                <style>
-                    {`
-                        .value-indicator-container {
-
-                            background-color: var(--surface-ground);
-                            border-color: var(--surface-border);
-                            border-radius: var(--border-radius);
-                            border-width: 1px;
-                            border-style: solid;
-                            display: flex;
-                            flex-direction: column;
-                            justify-content: center;
-                            align-items: center;
-                            padding: 2mm;
-                        }
-
-                        .value-indicator-label {
-                            padding-bottom: 1mm;
-                        }            
-                    `}'
-                </style>
-                <Tooltip target=".value-indicator-tooltip" />
-                <span className="value-indicator-tooltip" >
-                    <div className='value-indicator-container'>
-
-                        {this.props.label !== undefined &&
-                            <div className="value-indicator-label">
-                                {this.props.label}
-                            </div>
-                        }
-
-                        <ValueDisplay
-                            className={this.props.className}
-                            value={this.props.value}
-                            format={this.props.format}
-                            formatOptions={this.props.formatOptions}
-                            topic={this.props.topic}
-                            data-pr-tooltip={this.props.tooltip}
-                            data-pr-position="down"
-                            data-pr-mousetrack={true}
-                            data-pr-showDelay={2000}
-                        />
-                    </div>
-                </span>
-            </>
+            <div className='value-indicator-container' style={this.props.style}>
+                <Tooltip target=".value-indicator-container" />
+
+                    {this.props.label !== undefined &&
+                        <div className="value-indicator-label">
+                            {this.props.label}
+                        </div>
+                    }
+
+                    <ValueDisplay
+                        className={this.props.className}
+
+                        value={this.props.value}
+                        format={this.props.format}
+                        formatOptions={this.props.formatOptions}
+                        topic={this.props.topic}
+                        data-pr-tooltip={this.props.tooltip}
+                        data-pr-position="down"
+                        data-pr-mousetrack={true}
+                        data-pr-showDelay={2000}
+                    />
+            </div>            
         );
     }
 }

package/src/core/EventEmitterContext.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-17 11:45:10
  * -----
- * Last Modified: 2024-03-08 10:20:46
+ * Last Modified: 2024-03-22 14:25:08
  * Modified By: ADC
  * -----
  * 
@@ -135,6 +135,9 @@ export interface EventEmitterContextType {
     getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];    
 }
 
+
+let globalSubscriptionId = 1; 
+
 /**
  * A global context for managing event emission and subscription.
  *
@@ -324,7 +327,8 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
 
     const subscribe = (topic: string, callback: React.Dispatch<any>) : number => {
 
-        const subscriptionId = state.nextSubscriptionId;
+        globalSubscriptionId += 1;
+        const subscriptionId = globalSubscriptionId; // state.nextSubscriptionId;
 
         setState(prevState => ({
             ...prevState,
@@ -332,7 +336,7 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
               ...prevState.subscriptions,
               [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
             },
-            nextSubscriptionId: prevState.nextSubscriptionId + 1
+            nextSubscriptionId: globalSubscriptionId + 1 // prevState.nextSubscriptionId + 1
           }));
         
           return subscriptionId;
@@ -357,7 +361,7 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
             }
     
             return { ...prevState, subscriptions: newSubscriptions };
-        });
+        }); 
     };