@adcops/autocore-react 3.0.5 → 3.0.8

package/dist/components/FitText.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface FitTextProps {
+    /** The children prop expects any valid React node. */
+    children: React.ReactNode;
+}
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ *
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export declare const FitText: React.FC<FitTextProps>;
+export default FitText;

package/dist/components/FitText.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import useFitText from"use-fit-text";export const FitText=({children:t})=>{const{fontSize:e,ref:i}=useFitText();return _jsx("div",{ref:i,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:_jsx("p",{style:{fontSize:e},children:t})})};export default FitText;

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

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+import "./ValueIndicator.css";
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface ValueIndicatorProps {
+    /**
+     * Label for the indicator.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Tooltip to display on hover
+     */
+    tooltip?: string | undefined;
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+    /**
+     * The topic to monitor to display. Optional.
+     */
+    topic?: string;
+    /**
+     * Optional style properties.
+     */
+    style?: React.CSSProperties | undefined;
+}
+/**
+ * State of the ValueDisplay component.
+ */
+interface ValueIndicatorState {
+}
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ *
+ */
+export declare class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicatorState> {
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: ValueIndicatorProps);
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default ValueIndicator;
+export { NumerableFormatOptions };

package/dist/components/ValueIndicator.js

@@ -0,0 +1 @@
+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.5",
+    "version": "3.0.8",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/FitText.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-21 13:03:38
+ * -----
+ * Last Modified: 2024-03-21 13:36:25
+ * -----
+ * 
+ */
+
+
+import React from 'react';
+import useFitText from 'use-fit-text';
+
+interface FitTextProps {
+  /** The children prop expects any valid React node. */
+  children: React.ReactNode;
+}
+
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ * 
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export const FitText: React.FC<FitTextProps> = ({ children }) => {
+  const { fontSize, ref } = useFitText();
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <p style={{ fontSize }}>{children}</p>
+    </div>
+  );
+};
+
+
+export default FitText;

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

@@ -0,0 +1,136 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2024-03-22 06:42:57
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+
+
+import React, { Component } from 'react';
+
+import { Tooltip } from "primereact/tooltip";
+
+import { ValueDisplay } from './ValueDisplay';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+
+import "./ValueIndicator.css";
+
+
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface ValueIndicatorProps {
+
+    /**
+     * Label for the indicator.
+     */
+    label?: React.ReactNode | undefined;
+
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+
+
+    /**
+     * Tooltip to display on hover
+     */
+    tooltip?: string | undefined;
+
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+
+
+    /**
+     * Optional style properties.
+     */
+    style?: React.CSSProperties | undefined; 
+}
+
+/**
+ * State of the ValueDisplay component.
+ */
+interface ValueIndicatorState {
+}
+
+
+
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ * 
+ */
+export class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicatorState> {
+
+
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props: ValueIndicatorProps) {
+        super(props);
+        this.state = {
+        };
+    }
+
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+
+
+
+    render() {
+
+        return (
+            <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>            
+        );
+    }
+}
+
+export default ValueIndicator;
+export { NumerableFormatOptions };

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 };
-        });
+        }); 
     };