@adcops/autocore-react 3.0.16 → 3.0.19

package/dist/components/FileList.d.ts

@@ -12,6 +12,7 @@ import React from 'react';
 type FileListProps = {
     domain?: string;
     enableUpload?: boolean;
+    subdir?: string;
 };
 /**
  * `FileList` is a React functional component that displays a list of files retrieved from a specified domain

package/dist/components/FileList.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{MessageSeverity}from"primereact/api";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1})=>{const{invoke:a,dispatch:o}=useContext(EventEmitterContext),[r,i]=useState(),s=async()=>{try{let t=await a(e,"list_files",{}),o=[];for(let e=0;e<t.data.length;++e){const a=t.data[e];o.push({id:e+1,name:a})}i(o)}catch(e){o({topic:"autocore-react/alert/error",payload:{message:`Failed to upload file list: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}},n=`${e} File Listing`,l=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:n})}),m=_jsxs(React.Fragment,{children:[t&&_jsx(Button,{icon:"pi pi-upload",className:"p-button-rounded p-mr-2","aria-label":"Upload",size:"small",rounded:!0,text:!0}),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{s()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),c=(t,r)=>{confirmPopup({target:r.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{try{await a(e,"delete_file",{file_name:t})}catch(e){o({topic:"autocore-react/alert/error",payload:{message:`Failed deleting file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}s()})(t.name)})};return useEffect((()=>(s(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:l,end:m,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:r,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{try{await a(e,"download_file",{file_name:t.name})}catch(e){o({topic:"autocore-react/alert/error",payload:{message:`Failed to downloading file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>c(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{MessageSeverity}from"primereact/api";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:a})=>{const{invoke:o,dispatch:r}=useContext(EventEmitterContext),[i,s]=useState(),n=async()=>{try{const t=void 0!==a?{subdir:a}:{};let r=await o(e,"list_files",t),i=[];for(let e=0;e<r.data.length;++e){const t=r.data[e];i.push({id:e+1,name:t})}s(i)}catch(e){r({topic:"autocore-react/alert/error",payload:{message:`Failed to upload file list: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}},l=`File Listing [/${void 0!==a?a:""}]`,c=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:l})}),m=_jsxs(React.Fragment,{children:[t&&_jsx(Button,{icon:"pi pi-upload",className:"p-button-rounded p-mr-2","aria-label":"Upload",size:"small",rounded:!0,text:!0}),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{n()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),p=(t,a)=>{confirmPopup({target:a.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{try{await o(e,"delete_file",{file_name:t})}catch(e){r({topic:"autocore-react/alert/error",payload:{message:`Failed deleting file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}n()})(t.name)})};return useEffect((()=>(n(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:c,end:m,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:i,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{try{await o(e,"download_file",{file_name:t.name})}catch(e){r({topic:"autocore-react/alert/error",payload:{message:`Failed to downloading file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>p(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;

package/dist/components/FileSelect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type FileSelectProps = {
+    domain?: string;
+    subdir?: string;
+    onFileSelected?: (fileName: string) => void;
+    onAccept?: (fileName: string) => void;
+    onCancel?: () => void;
+};
+export declare const FileSelect: React.FC<FileSelectProps>;
+export default FileSelect;

package/dist/components/FileSelect.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileSelect=({domain:e="DATASTORE",subdir:t,onFileSelected:n,onAccept:a,onCancel:l})=>{const{invoke:i}=useContext(EventEmitterContext),[o,s]=useState([]),[c,m]=useState(null),r=e=>{m(e),n&&n(e.name)};return useEffect((()=>{(async()=>{try{const n=t?{subdir:t}:{},a=(await i(e,"list_files",n)).data.map(((e,t)=>({id:t+1,name:e})));s(a)}catch(e){}})()}),[e,t]),_jsxs("div",{children:[_jsxs(DataTable,{value:o,selectionMode:"single",selection:c,onSelectionChange:e=>r(e.value),children:[_jsx(Column,{field:"name",header:"File Name"}),_jsx(Column,{body:e=>_jsx(Button,{label:c?.name===e.name?"Selected":"Select",icon:c?.name===e.name?"pi pi-check-circle":"pi pi-circle-off",onClick:()=>r(e),className:"p-button-rounded "+(c?.name===e.name?"p-button-success":"p-button-outlined"),"aria-label":"Select",size:"small"}),header:"Select"})]}),_jsxs("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:"10px"},children:[_jsx(Button,{label:"Cancel",icon:"pi pi-times",className:"p-button-text",onClick:l}),_jsx(Button,{label:"Accept",icon:"pi pi-check",className:"p-button",onClick:()=>{void 0!==a&&null!==c&&a(null!==c?void 0!==t?`${t}/${c.name}`:c.name:"")},disabled:!c})]})]})};export default FileSelect;

package/dist/components/ProgressBarWithValue.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:35
+ * -----
+ * Last Modified: 2024-04-27 13:10:43
+ * -----
+ * 
+ */
+
+
+
+ .custom-progress-bar {
+    position: relative;
+    width: 100%; /* Ensure the progress bar fills the container */
+  }
+  
+  .centered-value {
+    position: absolute;
+    width: 100%; 
+    text-align: center;
+    font-weight: 600;   
+    z-index: 10; 
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Centering magic */
+  }
+

package/dist/components/ProgressBarWithValue.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './ProgressBarWithValue.css';
+interface ProgressBarWithValueProps {
+    value: number;
+    max?: number;
+    label?: string;
+}
+export declare const ProgressBarWithValue: React.FC<ProgressBarWithValueProps>;
+export default ProgressBarWithValue;

package/dist/components/ProgressBarWithValue.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{ProgressBar}from"primereact/progressbar";import"./ProgressBarWithValue.css";export const ProgressBarWithValue=({value:r,max:e,label:s})=>{let a=r,t=!1;return void 0!==e&&(e>0?a=r/e*100:(a=0,t=!0)),_jsxs("div",{className:"custom-progress-bar",children:[_jsx(ProgressBar,{showValue:!1,value:a,mode:t?"indeterminate":"determinate"}),_jsxs("div",{className:"centered-value",children:[s?`${s} `:""," ",r," ",e?`of ${e}`:""]})]})};export default ProgressBarWithValue;

package/dist/components/TextInput.d.ts

@@ -90,6 +90,7 @@ export declare class TextInput extends React.Component<TextInputProps, TextInput
      * The component has been loaded into the DOM.
      */
     componentDidMount(): void;
+    componentDidUpdate(prevProps: TextInputProps): void;
     /**
      * Check the new value against the validator RegEx, if one was specified.
      * @param val The new value.

package/dist/components/TextInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}componentDidUpdate(t){t.value!==this.props.value&&this.setState({entryValue:this.props.value,editing:!1})}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});

package/dist/components/ToggleGroup.d.ts

@@ -16,6 +16,7 @@ export interface ToggleGroupProps extends SelectButtonProps {
     invisibleTopic?: string;
     actionMode?: ActionMode;
     invert?: boolean;
+    onValueChanged?: (value: boolean | number) => void;
 }
 export declare const ToggleGroup: React.FC<ToggleGroupProps>;
 export default ToggleGroup;

package/dist/components/ToggleGroup.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import{SelectButton}from"primereact/selectbutton";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};import clsx from"clsx";export const ToggleGroup=({label:o,topic:t,onColor:e,offColor:n,command:r,commandTopic:i,commandArgs:l,disableTopic:s,invisibleTopic:a,actionMode:c,invert:d,...u})=>{const[p]=useState((()=>`toggleGroup-${Math.random().toString(36).substr(2,9)}`)),[m,f]=useState(void 0),[g,v]=useState(!1),[x,b]=useState(!1),[h,I]=useState(!1),C=useContext(EventEmitterContext);useEffect((()=>(t&&C.subscribe(t,y),s&&C.subscribe(s,A),a&&C.subscribe(a,j),()=>{})),[t,s,a]);const y=o=>{f(o)},A=o=>{v(o)},j=o=>{b(o)},M=()=>{h||(I(!0),c!==ActionMode.Tap&&c!==ActionMode.Pressed||S(!0))},E=()=>{h&&(I(!1),c===ActionMode.Tap?S(!1):c===ActionMode.Released&&S(!0))},S=o=>{if(r&&r.length>0){const t={topic:i,value:o,...l};C.dispatch({topic:r,payload:t})}};let T=m;void 0!==u.value&&(T=u.value);let $=((o,t,e)=>{if(!t||0===t.length)return IndicatorColor.IndicatorInvalid;let n=Array.isArray(e)?e:void 0!==e?[e]:[IndicatorColor.IndicatorInvalid],r=typeof o;if("boolean"===r)return o?n[0]:n.length>1?n[1]:n[0];if("number"===r&&t.length>o){if(n.length>o){return n[o]}return n[0]}if("string"===r){let e=t.indexOf(o);return-1!==e&&e<n.length?n[e]:n[0]}return null!=e?Array.isArray(e)?e[0]:e:IndicatorColor.IndicatorInvalid})(T,u.options,e);void 0===T&&($=IndicatorColor.IndicatorInvalid);const _=void 0!==u.options&&null!==u.options&&void 0!==u.options.length&&u.options.length>2,N=`${p}-togglegroup-selectbutton-container`;return _jsxs("div",{className:"flex",children:[_jsx("style",{children:`\n                ${void 0!==n?`\n                    .${N} .p-selectbutton .p-button {\n                        background-color: ${n};\n                    }\n                `:""}\n                .${N} .p-selectbutton .p-button.p-highlight {\n                    background-color: ${$} !important;\n                    border-color: ${$} !important;\n                }\n            `}),_jsx("div",{className:N,children:_jsxs("div",{className:"p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",style:{flexGrow:1},children:o}),_jsx(SelectButton,{...u,options:u.options,disabled:g||u.disabled,multiple:_,className:clsx(p,u.className,{"p-invalid":void 0===u.value}),style:x?{display:"none"}:{},value:((o,t)=>{if(null==t||0===t.length)return;let e=typeof o;if("boolean"==e){return o&&t.length>1?t[1]:t[0]}if("number"==e){let e=o;if(void 0!==e&&e<t.length)return t[e]}else if("string"==e)return o})(T,u.options),allowEmpty:!1,onMouseDown:M,onTouchStart:M,onMouseUp:E,onTouchEnd:E})]})})]})};export default ToggleGroup;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import{SelectButton}from"primereact/selectbutton";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};import clsx from"clsx";export const ToggleGroup=({label:o,topic:t,onColor:e,offColor:n,command:r,commandTopic:i,commandArgs:l,disableTopic:s,invisibleTopic:a,actionMode:c,invert:d,onValueChanged:u,...p})=>{const[m]=useState((()=>`toggleGroup-${Math.random().toString(36).substr(2,9)}`)),[f,g]=useState(void 0),[v,h]=useState(!1),[b,x]=useState(!1),[C,I]=useState(!1),y=useContext(EventEmitterContext);useEffect((()=>(t&&y.subscribe(t,A),s&&y.subscribe(s,j),a&&y.subscribe(a,M),()=>{})),[t,s,a]);const A=o=>{g(o)},j=o=>{h(o)},M=o=>{x(o)},E=()=>{C||(I(!0),c!==ActionMode.Tap&&c!==ActionMode.Pressed||T(!0))},S=()=>{C&&(I(!1),c===ActionMode.Tap?T(!1):c===ActionMode.Released&&T(!0))},T=o=>{if(r&&r.length>0){const t={topic:i,value:o,...l};y.dispatch({topic:r,payload:t})}};let $=f;void 0!==p.value&&($=p.value);let _=((o,t,e)=>{if(!t||0===t.length)return IndicatorColor.IndicatorInvalid;let n=Array.isArray(e)?e:void 0!==e?[e]:[IndicatorColor.IndicatorInvalid],r=typeof o;if("boolean"===r)return o?n[0]:n.length>1?n[1]:n[0];if("number"===r&&t.length>o){if(n.length>o){return n[o]}return n[0]}if("string"===r){let e=t.indexOf(o);return-1!==e&&e<n.length?n[e]:n[0]}return null!=e?Array.isArray(e)?e[0]:e:IndicatorColor.IndicatorInvalid})($,p.options,e);void 0===$&&(_=IndicatorColor.IndicatorInvalid);const N=void 0!==p.options&&null!==p.options&&void 0!==p.options.length&&p.options.length>2,G=`${m}-togglegroup-selectbutton-container`;return _jsxs("div",{className:"flex",children:[_jsx("style",{children:`\n                ${void 0!==n?`\n                    .${G} .p-selectbutton .p-button {\n                        background-color: ${n};\n                    }\n                `:""}\n                .${G} .p-selectbutton .p-button.p-highlight {\n                    background-color: ${_} !important;\n                    border-color: ${_} !important;\n                }\n            `}),_jsx("div",{className:G,children:_jsxs("div",{className:"p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",style:{flexGrow:1},children:o}),_jsx(SelectButton,{...p,options:p.options,disabled:v||p.disabled,multiple:N,className:clsx(m,p.className,{"p-invalid":void 0===p.value}),style:b?{display:"none"}:{},value:((o,t)=>{if(null==t||0===t.length)return;let e=typeof o;if("boolean"==e){return o&&t.length>1?t[1]:t[0]}if("number"==e){let e=o;if(void 0!==e&&e<t.length)return t[e]}else if("string"==e)return o})($,p.options),allowEmpty:!1,onMouseDown:E,onTouchStart:E,onMouseUp:S,onTouchEnd:S,onChange:o=>(o=>{if(null!=u)if(void 0===p.options||null===p.options||0===p.options.length)u(!!N&&0);else{let t=0;for(let e=0;e<p.options.length;++e)if(o===p.options[e]){t=e;break}u(N?t:t>0)}})(o.value)})]})})]})};export default ToggleGroup;

package/dist/components/ValueInput.d.ts

@@ -152,6 +152,7 @@ export declare class ValueInput extends React.Component<ValueInputProps, ValueIn
      * The component has been loaded into the DOM.
      */
     componentDidMount(): void;
+    componentDidUpdate(prevProps: ValueInputProps): void;
     private onBufferValue;
     /**
      * The user has elected to accept the input value. Validate and store, if valid.

package/dist/components/ValueInput.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{createRef}from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export class ValueInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"inputRef",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.state={entryValue:t.value,currentValue:t.value,editing:!1},this.inputRef=createRef()}componentDidMount(){}onBufferValue(t){null!==t&&(this.state.editing?this.setState({entryValue:t}):this.setState({entryValue:this.state.currentValue,editing:!0},(()=>{setTimeout((()=>{this.inputRef.current&&this.inputRef.current.focus()}),0)})))}onAcceptValue(){null!==this.state.entryValue&&(this.setState({editing:!1,currentValue:this.state.entryValue}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue}))}onResetValue(){this.state.editing&&this.setState({currentValue:this.state.currentValue,entryValue:this.state.currentValue,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{inputRef:this.inputRef,min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.currentValue,onChange:t=>{this.onBufferValue(t.value)},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled,autoFocus:!1},this.state.editing?"editing":"not-editing"),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small",autoFocus:!1})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{createRef}from"react";import{InputNumber}from"primereact/inputnumber";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export class ValueInput extends React.Component{constructor(e){super(e),Object.defineProperty(this,"inputRef",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.state={entryValue:e.value,currentValue:e.value,editing:!1},this.inputRef=createRef()}componentDidMount(){}componentDidUpdate(e){e.value!==this.props.value&&this.setState({currentValue:this.props.value,entryValue:this.props.value,editing:!1})}onBufferValue(e){null!==e&&(this.state.editing?this.setState({entryValue:e}):this.setState({entryValue:e,editing:!0},(()=>{setTimeout((()=>{this.inputRef.current&&this.inputRef.current.focus()}),0)})))}onAcceptValue(){null!==this.state.entryValue&&(this.setState({editing:!1,currentValue:this.state.entryValue}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue}))}onResetValue(){this.state.editing&&this.setState({currentValue:this.state.currentValue,entryValue:this.state.currentValue,editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),_jsx(InputNumber,{inputRef:this.inputRef,min:this.props.min,max:this.props.max,minFractionDigits:this.props.minPrecision,maxFractionDigits:this.props.maxPrecision,mode:this.props.mode,prefix:this.props.prefix,suffix:this.props.suffix,showButtons:this.props.showButtons,step:this.props.step,placeholder:this.props.placeholder,value:this.state.currentValue,onChange:e=>{this.onBufferValue(e.value)},buttonLayout:"horizontal",decrementButtonClassName:"p-button-danger",incrementButtonClassName:"p-button-success",incrementButtonIcon:"pi pi-plus",decrementButtonIcon:"pi pi-minus",locale:"en-US",currency:this.props.currency,onKeyDown:e=>{"Enter"===e.key?this.onAcceptValue():"Escape"===e.key&&this.onResetValue()},disabled:this.props.disabled,autoFocus:!1},this.state.editing?"editing":"not-editing"),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing,size:"small",autoFocus:!1})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(ValueInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(ValueInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0,min:void 0,max:void 0,minPrecision:0,maxPrecision:3,mode:"decimal",showButtons:!1,step:1,locale:"en-US",currency:"USD"}});

package/dist/core/EventEmitterContext.d.ts

@@ -102,6 +102,11 @@ export interface EventEmitterContextType {
      * @returns An object containing the current subscriptions, optionally filtered by topic.
      */
     getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];
+    /**
+     * Returns true if the Hub in use is connected to its source.
+     * @returns boolean
+     */
+    isConnected: () => boolean;
 }
 /**
  * A global context for managing event emission and subscription.

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};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:()=>[]});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})};
+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})};

package/dist/hooks/adsHooks.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Custom hook for registering symbols and subscribing to updates on the
+ * ADS domain via the EventEmitterContext.
+ * This hook abstracts the common pattern of registering symbols and handling subscriptions
+ * to updates in components that need real-time data from a backend service.
+ *
+ * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
+ *                related to a symbol, and each value is the setter function for that state.
+ * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
+ *                Each key should match a key in the `setters` object, and each value should be a string
+ *                that represents the symbol name to register and subscribe to.
+ *
+ * ## Usage Example:
+ * ```typescript
+ * const setters = {
+ *     speed: setSpeed,
+ *     temperature: setTemperature
+ * };
+ *
+ * const symbols = {
+ *     speed: "Sensor.speed",
+ *     temperature: "Sensor.temperature"
+ * };
+ *
+ * useRegisterSymbols(setters, symbols);
+ * ```
+ *
+ * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
+ * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
+ * whenever new data is received.
+ */
+export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => null;
+/**
+ * Custom hook to create a function that sends a specified value to a remote device or server.
+ * This hook abstracts the repetitive logic involved in sending these values,
+ * such as invoking the command and handling errors.
+ *
+ * @param {string} domain The domain under which the backend function is grouped.
+ * @param {string} fname The name of the function to be called on the backend.
+ * @param {string} symbolName The symbol name that identifies the specific value or setting in the backend.
+ * @returns {Function} A function that accepts a value (number or boolean) and sends it to the configured backend.
+ *
+ * @example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { Button } from 'primereact/button';
+ * import useWriteValue from './useWriteValue'; // adjust the import path as necessary
+ *
+ * const Component: React.FC = () => {
+ *   const [value, setValue] = useState<number>(0);
+ *   const writeToBackend = useAdsWriteValue("ADS", "write_value", "GNV.mySymbol");
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         type="number"
+ *         value={value}
+ *         onChange={(e) => setValue(Number(e.target.value))}
+ *       />
+ *       <Button
+ *         label="Send to Backend"
+ *         onClick={() => writeToBackend(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ */
+export declare function useAdsWriteValue(symbolName: string): (value: object | boolean | number | string) => Promise<void>;
+/**
+ * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
+ * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.
+ *
+ * @param {string} domain - The domain under which the backend function is grouped.
+ * @param {string} fname - The function name to be called on the backend.
+ * @param {string} symbolName - The symbol name to target for the tap action.
+ * @returns {Function} A function that triggers the tap action.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Button } from 'primereact/button';
+ * import useTapValue from './useTapValue'; // Ensure the correct import path
+ *
+ * const MyComponent: React.FC = () => {
+ *   const sendTapAction = useTapValue("ADS", "write_value", "GNV.myButton");
+ *
+ *   return (
+ *     <Button
+ *       label="Tap Button"
+ *       onClick={() => sendTapAction()}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export declare function useAdsTapValue(symbolName: string): () => Promise<void>;

package/dist/hooks/adsHooks.js

@@ -0,0 +1 @@
+import{useContext,useRef,useEffect}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t)=>{const{invoke:n,subscribe:r,unsubscribe:s,isConnected:o}=useContext(EventEmitterContext),u=useRef([]),c=useRef(!0);return useEffect((()=>{c.current=!0;const a=async()=>{for(const[s,o]of Object.entries(t))try{await n("ADS","register_symbol",{symbol_name:o});const t=r(`ADS/${o}`,(t=>{if(c.current){const n=e[s];n&&n(t.value)}}));u.current.push(t)}catch(e){}await n("ADS","refresh",{})};if(o())a();else{let e=r("HUB/connected",(()=>{a(),s(e)}));u.current.push(e)}return()=>{c.current=!1,u.current.forEach((e=>s(e))),u.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}

package/dist/hub/HubBase.d.ts

@@ -79,6 +79,7 @@ export declare abstract class HubBase {
     protected localFNameToBackendFNameMap: Map<string, string>;
     protected backendFNameToLocalFNameMap: Map<string, string>;
     protected context: EventEmitterContextType | null;
+    protected isConnected_: boolean;
     /**
      * Constructor
      */
@@ -100,6 +101,15 @@ export declare abstract class HubBase {
      * This does NOT get published to the front end.
      */
     abstract invoke(domain: string, fname: string, payload?: object): Promise<CommandMessageResult>;
+    /**
+     * Allos the derived class to set whether the hub is connected to its source.
+     * @param s boolean
+     */
+    protected setIsConnected: (s: boolean) => void;
+    /**
+     * Returns true if the Hub is connected to its source.
+     */
+    isConnected: () => boolean;
     /**
      * Convenience function to invoke a command with an optional topic and optional value.
      * This will invoke the specified command in the backend. It does not broadcast the

package/dist/hub/HubBase.js

@@ -1 +1 @@
-export class HubBase{constructor(){Object.defineProperty(this,"localTopicToBackendTopicMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendTopicToLocalMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"localFNameToBackendFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendFNameToLocalFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"context",{enumerable:!0,configurable:!0,writable:!0,value:null})}setContext(a){this.context=a}invokeTopic(a,e,o,c){const t={topic:o,data:c};return this.invoke(a,e,t)}publish(a,e){const o=this.toLocalTopic(a);this.context?.dispatch({topic:o,payload:e})}mapTopic(a,e){this.localTopicToBackendTopicMap.set(a,e),this.backendTopicToLocalMap.set(e,a)}unmapTopic(a){if(this.localTopicToBackendTopicMap.has(a)){const e=this.localTopicToBackendTopicMap.get(a);this.localTopicToBackendTopicMap.delete(a),null!=e&&this.backendTopicToLocalMap.has(e)&&this.backendTopicToLocalMap.delete(e)}}mapFName(a,e){this.localFNameToBackendFNameMap.set(a,e),this.backendFNameToLocalFNameMap.set(e,a)}unmapFName(a){if(this.localFNameToBackendFNameMap.has(a)){const e=this.localFNameToBackendFNameMap.get(a);this.localFNameToBackendFNameMap.delete(a),null!=e&&this.backendFNameToLocalFNameMap.has(e)&&this.backendFNameToLocalFNameMap.delete(e)}}toBackendTopic(a){if(this.localTopicToBackendTopicMap.has(a)){const e=this.localTopicToBackendTopicMap.get(a);return null!=e?e:a}return a}toBackendFName(a){if(this.localFNameToBackendFNameMap.has(a)){const e=this.localFNameToBackendFNameMap.get(a);return null!=e?e:a}return a}toLocalTopic(a){if(this.backendTopicToLocalMap.has(a)){const e=this.backendTopicToLocalMap.get(a);return null!=e?e:a}return a}toLocalFName(a){if(this.backendFNameToLocalFNameMap.has(a)){const e=this.backendFNameToLocalFNameMap.get(a);return null!=e?e:a}return a}}export default HubBase;
+export class HubBase{constructor(){Object.defineProperty(this,"localTopicToBackendTopicMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendTopicToLocalMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"localFNameToBackendFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"backendFNameToLocalFNameMap",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"context",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"isConnected_",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"setIsConnected",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.isConnected_=e}}),Object.defineProperty(this,"isConnected",{enumerable:!0,configurable:!0,writable:!0,value:()=>this.isConnected_})}setContext(e){this.context=e}invokeTopic(e,a,o,c){const t={topic:o,data:c};return this.invoke(e,a,t)}publish(e,a){const o=this.toLocalTopic(e);this.context?.dispatch({topic:o,payload:a})}mapTopic(e,a){this.localTopicToBackendTopicMap.set(e,a),this.backendTopicToLocalMap.set(a,e)}unmapTopic(e){if(this.localTopicToBackendTopicMap.has(e)){const a=this.localTopicToBackendTopicMap.get(e);this.localTopicToBackendTopicMap.delete(e),null!=a&&this.backendTopicToLocalMap.has(a)&&this.backendTopicToLocalMap.delete(a)}}mapFName(e,a){this.localFNameToBackendFNameMap.set(e,a),this.backendFNameToLocalFNameMap.set(a,e)}unmapFName(e){if(this.localFNameToBackendFNameMap.has(e)){const a=this.localFNameToBackendFNameMap.get(e);this.localFNameToBackendFNameMap.delete(e),null!=a&&this.backendFNameToLocalFNameMap.has(a)&&this.backendFNameToLocalFNameMap.delete(a)}}toBackendTopic(e){if(this.localTopicToBackendTopicMap.has(e)){const a=this.localTopicToBackendTopicMap.get(e);return null!=a?a:e}return e}toBackendFName(e){if(this.localFNameToBackendFNameMap.has(e)){const a=this.localFNameToBackendFNameMap.get(e);return null!=a?a:e}return e}toLocalTopic(e){if(this.backendTopicToLocalMap.has(e)){const a=this.backendTopicToLocalMap.get(e);return null!=a?a:e}return e}toLocalFName(e){if(this.backendFNameToLocalFNameMap.has(e)){const a=this.backendFNameToLocalFNameMap.get(e);return null!=a?a:e}return e}}export default HubBase;

package/dist/hub/HubWebSocket.js

@@ -1 +1 @@
-import{HubBase}from"./HubBase";function b64toBlob(e,t="application/octet-stream",s=512){const n=atob(e),o=[];for(let e=0;e<n.length;e+=s){const t=n.slice(e,e+s),r=new Array(t.length);for(let e=0;e<t.length;e++)r[e]=t.charCodeAt(e);const i=new Uint8Array(r);o.push(i)}return new Blob(o,{type:t})}function downloadBlob(e,t){const s=window.URL.createObjectURL(e),n=document.createElement("a");n.href=s,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(s)}export class HubWebSocket extends HubBase{constructor(){super(),Object.defineProperty(this,"socket",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"requestId",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"pendingRequests",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"invoke",{enumerable:!0,configurable:!0,writable:!0,value:(e,t,s)=>new Promise(((n,o)=>{const r=++this.requestId;this.pendingRequests.set(r,{resolve:n,reject:o});let i={request_id:r,domain:e,fname:t,args:s,result:void 0};this.socket.send(JSON.stringify(i))}))}),Object.defineProperty(this,"handleUnsolicitedMessage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if("BROADCAST"===e.fname&&e.domain.length>=1&&void 0!==e.result&&null!==e.result&&void 0!==e.result.data&&null!==e.result.data){let t=`${e.domain}/${e.result.data.topic}`;this.publish(t,e.result.data)}}}),Object.defineProperty(this,"disconnect",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.socket.close()}}),Object.defineProperty(this,"emit",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.socket.send(JSON.stringify({eventName:e,payload:t}))}});const e=window.location.hostname;let t;const s=`${"https:"===window.location.protocol?"wss://":"ws://"}${e}${t?":"+t:""}/ws/`;this.socket=new WebSocket(s);let n=this;this.socket.onopen=function(){n.publish("HUB/connected",!0)},this.socket.onmessage=e=>{const t=JSON.parse(e.data);if(t.request_id&&this.pendingRequests.has(t.request_id)){const{resolve:e,reject:s}=this.pendingRequests.get(t.request_id);if("FILE_DOWNLOAD"===t.fname&&void 0!==t.args.file_name&&null!==t.args.file_name&&t.args.file_name.length>0){let n=t.args.file_name.split("/");const o=n[n.length-1];if(t.result&&t.result.success){downloadBlob(b64toBlob(t.result.data),o),t.result.data=o,e(t.result)}else s(new Error(t.result?.error_message))}else t.result?.success?e(t.result):s(new Error(t.result?.error_message));this.pendingRequests.delete(t.request_id)}else this.handleUnsolicitedMessage(t)},this.socket.onerror=e=>{},this.socket.onclose=()=>{}}}
+import{HubBase}from"./HubBase";function b64toBlob(e,t="application/octet-stream",s=512){const n=atob(e),o=[];for(let e=0;e<n.length;e+=s){const t=n.slice(e,e+s),r=new Array(t.length);for(let e=0;e<t.length;e++)r[e]=t.charCodeAt(e);const i=new Uint8Array(r);o.push(i)}return new Blob(o,{type:t})}function downloadBlob(e,t){const s=window.URL.createObjectURL(e),n=document.createElement("a");n.href=s,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(s)}export class HubWebSocket extends HubBase{constructor(){super(),Object.defineProperty(this,"socket",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"requestId",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"pendingRequests",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"invoke",{enumerable:!0,configurable:!0,writable:!0,value:(e,t,s)=>new Promise(((n,o)=>{const r=++this.requestId;this.pendingRequests.set(r,{resolve:n,reject:o});let i={request_id:r,domain:e,fname:t,args:s,result:void 0};this.socket.send(JSON.stringify(i))}))}),Object.defineProperty(this,"handleUnsolicitedMessage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if("BROADCAST"===e.fname&&e.domain.length>=1&&void 0!==e.result&&null!==e.result&&void 0!==e.result.data&&null!==e.result.data){let t=`${e.domain}/${e.result.data.topic}`;this.publish(t,e.result.data)}}}),Object.defineProperty(this,"disconnect",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.socket.close()}}),Object.defineProperty(this,"emit",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.socket.send(JSON.stringify({eventName:e,payload:t}))}});const e=window.location.hostname;let t;const s=`${"https:"===window.location.protocol?"wss://":"ws://"}${e}${t?":"+t:""}/ws/`;this.socket=new WebSocket(s);let n=this;this.socket.onopen=function(){n.publish("HUB/connected",!0),n.setIsConnected(!0)},this.socket.onmessage=e=>{const t=JSON.parse(e.data);if(t.request_id&&this.pendingRequests.has(t.request_id)){const{resolve:e,reject:s}=this.pendingRequests.get(t.request_id);if("FILE_DOWNLOAD"===t.fname&&void 0!==t.args.file_name&&null!==t.args.file_name&&t.args.file_name.length>0){let n=t.args.file_name.split("/");const o=n[n.length-1];if(t.result&&t.result.success){downloadBlob(b64toBlob(t.result.data),o),t.result.data=o,e(t.result)}else s(new Error(t.result?.error_message))}else t.result?.success?e(t.result):s(new Error(t.result?.error_message));this.pendingRequests.delete(t.request_id)}else this.handleUnsolicitedMessage(t)},this.socket.onerror=e=>{},this.socket.onclose=()=>{n.setIsConnected(!1)}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.16",
+    "version": "3.0.19",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -78,6 +78,10 @@
         "./components/*": {
             "import": "./dist/components/*",
             "types": "./dist/components/*.d.js"
+        },
+        "./hooks/*": {
+            "import": "./dist/hooks/*",
+            "types": "./dist/hooks/*.d.js"
         }
     }
 }

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2024-04-25 06:40:11
+ * Last Modified: 2024-04-29 11:01:41
  * -----
  * 
  */
@@ -34,7 +34,11 @@ type FileListProps = {
     domain?: string,
     /// Enable the upload button so that files can be uploaded to the datastore.
     /// Default: false
-    enableUpload?: boolean
+    enableUpload?: boolean,
+
+    /// The subdirectory of the datastore to list.
+    /// If blank, the base directory is listed.
+    subdir? : string
 }
 
 /**
@@ -69,7 +73,8 @@ type FileItem = {
  */
 export const FileList: React.FC<FileListProps> = ({
     domain = "DATASTORE",
-    enableUpload = false
+    enableUpload = false,
+    subdir
 }) => {
 
     const { invoke, dispatch } = useContext(EventEmitterContext);
@@ -81,7 +86,8 @@ export const FileList: React.FC<FileListProps> = ({
      */
     const listFiles = async () => {
         try {
-            let res = await invoke(domain, "list_files", {});
+            const args = subdir !== undefined ? {"subdir" : subdir} : {};
+            let res = await invoke(domain, "list_files", args);
 
             let items = [];
             for (let i = 0; i < res.data.length; ++i) {
@@ -157,7 +163,7 @@ export const FileList: React.FC<FileListProps> = ({
         listFiles();
     };
 
-    const title = `${domain} File Listing`;
+    const title = `File Listing [/${subdir !== undefined ? subdir : ''}]`;
     const toolbarStartContents = (
         <React.Fragment>
             <span style={{ fontWeight: 600 }}>{title}</span>

package/src/components/FileSelect.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-28 16:06:59
+ * -----
+ * Last Modified: 2024-04-28 20:05:41
+ * -----
+ * 
+ */
+
+
+import React, { useState, useContext, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+
+import { EventEmitterContext } from "../core/EventEmitterContext";
+
+type FileSelectProps = {
+    domain?: string,
+    subdir?: string,
+    onFileSelected?: (fileName: string) => void,
+    onAccept?: (fileName: string) => void,
+    onCancel?: () => void
+}
+
+type FileItem = {
+    id: number;
+    name: string;
+};
+
+export const FileSelect: React.FC<FileSelectProps> = ({
+    domain = "DATASTORE",
+    subdir,
+    onFileSelected,
+    onAccept,
+    onCancel
+}) => {
+    const { invoke } = useContext(EventEmitterContext);
+    const [files, setFiles] = useState<FileItem[]>([]);
+    const [selectedFile, setSelectedFile] = useState<FileItem | null>(null);
+
+    const listFiles = async () => {
+        try {
+            const args = subdir ? { "subdir": subdir } : {};
+            const res = await invoke(domain, "list_files", args);
+            const items = res.data.map((item: string, index: number) => ({
+                id: index + 1,
+                name: item
+            }));
+            setFiles(items);
+        } catch (error) {
+            console.error("Failed to list files:", error);
+        }
+    };
+
+    const handleSelect = (file: FileItem) => {
+        setSelectedFile(file);
+        if (onFileSelected) onFileSelected(file.name);
+    };
+
+    const makeReturnFileName = () => {
+        if (selectedFile !== null) {
+            if (subdir !== undefined) {
+                return `${subdir}/${selectedFile.name}`;
+            }
+            else {
+                return selectedFile.name;
+            }
+        }
+        else {
+            return "";
+        }
+    }
+
+    useEffect(() => {
+        listFiles();
+    }, [domain, subdir]);
+
+    return (
+        <div>
+            <DataTable 
+                value={files} 
+                selectionMode="single" 
+                selection={selectedFile} 
+                onSelectionChange={e => handleSelect(e.value as FileItem)}
+            >
+                <Column field="name" header="File Name" />
+                <Column body={(rowData: FileItem) => (
+                    <Button
+                        label={selectedFile?.name === rowData.name ? "Selected" : "Select"}
+                        icon={selectedFile?.name === rowData.name ? "pi pi-check-circle" : "pi pi-circle-off"}
+                        onClick={() => handleSelect(rowData)}
+                        className={`p-button-rounded ${selectedFile?.name === rowData.name ? "p-button-success" : "p-button-outlined"}`}
+                        aria-label="Select"
+                        size="small"
+                    />
+                )} header="Select" />
+            </DataTable>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
+                <Button label="Cancel" icon="pi pi-times" className="p-button-text" onClick={onCancel} />
+                <Button
+                    label="Accept"
+                    icon="pi pi-check"
+                    className="p-button"
+                    onClick={() => { if (onAccept !== undefined && selectedFile !== null) onAccept(makeReturnFileName()) }}
+                    disabled={!selectedFile}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default FileSelect;
+
+

package/src/components/ProgressBarWithValue.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:35
+ * -----
+ * Last Modified: 2024-04-27 13:10:43
+ * -----
+ * 
+ */
+
+
+
+ .custom-progress-bar {
+    position: relative;
+    width: 100%; /* Ensure the progress bar fills the container */
+  }
+  
+  .centered-value {
+    position: absolute;
+    width: 100%; 
+    text-align: center;
+    font-weight: 600;   
+    z-index: 10; 
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Centering magic */
+  }
+

package/src/components/ProgressBarWithValue.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:15
+ * -----
+ * Last Modified: 2024-04-27 13:25:56
+ * -----
+ * 
+ */
+
+
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+import './ProgressBarWithValue.css'; // Import your custom CSS
+
+interface ProgressBarWithValueProps {
+    value: number;
+    max?: number;
+    label? : string;
+}
+
+export const ProgressBarWithValue: React.FC<ProgressBarWithValueProps> = ({ value, max, label }) => {
+    let progressValue = value;
+    let indeterminate = false;
+
+    if (max !== undefined) {
+        if (max > 0) {
+            progressValue = (value / max) * 100; // Calculate percentage
+        } 
+        else { // max === 0
+            progressValue = 0;
+            indeterminate = true;
+        }
+    }
+
+    return (
+        <div className="custom-progress-bar">
+            <ProgressBar
+                showValue={false}
+                value={progressValue}
+                mode={indeterminate ? 'indeterminate' : 'determinate'}
+            />
+            <div className="centered-value">
+                {label ? `${label} ` : ''} {value} {max ? `of ${max}` : ''}
+            </div>
+        </div>
+    );
+};
+
+export default ProgressBarWithValue;

package/src/components/TextInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-03-21 08:35:18
+ * Last Modified: 2024-04-27 17:33:46
  * -----
  * 
  */
@@ -143,6 +143,16 @@ export class TextInput extends React.Component<TextInputProps, TextInputState> {
     componentDidMount() {        
     }    
 
+
+    componentDidUpdate(prevProps: TextInputProps) {
+        // Check if the value prop has changed
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                entryValue: this.props.value,
+                editing: false 
+            });
+        }
+    }        
     
 
     /**

package/src/components/ToggleGroup.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-12 10:14:48
  * -----
- * Last Modified: 2024-04-16 09:16:59
+ * Last Modified: 2024-04-29 10:43:49
  * -----
  * 
  */
@@ -33,6 +33,7 @@ export interface ToggleGroupProps extends SelectButtonProps {
     invisibleTopic?: string;
     actionMode?: ActionMode;
     invert?: boolean;
+    onValueChanged? : (value: boolean | number) => void;
 }
 
 export const ToggleGroup: React.FC<ToggleGroupProps> = ({
@@ -47,6 +48,7 @@ export const ToggleGroup: React.FC<ToggleGroupProps> = ({
     invisibleTopic,
     actionMode,
     invert,
+    onValueChanged: onValueChange,
     ...restProps
 }) => {
 
@@ -239,6 +241,40 @@ export const ToggleGroup: React.FC<ToggleGroupProps> = ({
 
     const toggleGroupName = `${uniqueId}-togglegroup-selectbutton-container`;
 
+
+    const handleValueChange = (label : string) => {
+
+        if (onValueChange !== undefined && onValueChange !== null) {
+
+
+            if (restProps.options === undefined || restProps.options === null || restProps.options.length === 0) {
+                if (isMultiple)
+                    onValueChange(0);
+                else
+                    onValueChange(false);
+            }
+            else {
+                let index = 0;
+                for (let i=0;i<restProps.options.length;++i) {
+                    if (label === restProps.options[i] ) {
+                        index = i;
+                        break;
+                    }
+                }             
+
+                if (isMultiple)
+                    onValueChange(index);
+                else
+                    onValueChange(index > 0);            
+                
+            }
+
+            
+        }
+
+
+    }
+
     return (
         <div className="flex">
             {
@@ -275,6 +311,7 @@ export const ToggleGroup: React.FC<ToggleGroupProps> = ({
                         onTouchStart={handleOnPressed}
                         onMouseUp={handleOnReleased}
                         onTouchEnd={handleOnReleased}
+                        onChange={(e) => handleValueChange(e.value)}
                     />
                 </div>
             </div>

package/src/components/ValueInput.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-04-16 19:06:17
+ * Last Modified: 2024-04-25 16:40:53
  * -----
  * 
  */
@@ -217,6 +217,17 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
     componentDidMount() {
     }
 
+    componentDidUpdate(prevProps: ValueInputProps) {
+        // Check if the value prop has changed
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                currentValue: this.props.value,
+                entryValue: this.props.value,
+                editing: false  // Consider whether you want to reset editing state here
+            });
+        }
+    }    
+
 
     private onBufferValue(val: number | null) {
         if (val === null)
@@ -224,7 +235,7 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
 
         if (!this.state.editing) {
             this.setState({
-                entryValue: this.state.currentValue,
+                entryValue: val, //this.state.currentValue,
                 editing: true
             }, () => {
 

package/src/core/EventEmitterContext.tsx

@@ -2,18 +2,18 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-17 11:45:10
  * -----
- * Last Modified: 2024-04-24 12:11:16
+ * Last Modified: 2024-04-25 15:24:53
  * Modified By: ADC
  * -----
  * 
  */
 
 
-import React, { createContext, ReactNode, useState, useMemo } from 'react';
-import {createHub, Hub} from "../hub";
-import {CommandMessageResult} from "../hub/CommandMessage";
+import React, { createContext, ReactNode, useState, useMemo, useCallback } from 'react';
+import { createHub, Hub } from "../hub";
+import { CommandMessageResult } from "../hub/CommandMessage";
 
-export {Hub};
+export { Hub };
 
 /**
  * Represents an event subsription.
@@ -38,7 +38,7 @@ export interface State {
     subscriptions: Record<string, Subscription[]>;
 
     /** Tracks the next subscription ID that will be assigned. */
-    nextSubscriptionId: number; 
+    nextSubscriptionId: number;
 }
 
 /**
@@ -104,7 +104,7 @@ export interface EventEmitterContextType {
      * Invoke/send a message to the back end. 
      * This does NOT get published to the front end.
      */
-    invoke( domain: string, fname: string, payload? : object) : Promise<CommandMessageResult>;
+    invoke(domain: string, fname: string, payload?: object): Promise<CommandMessageResult>;
 
     /**
      * Subscribe to events identified by the topic.
@@ -119,25 +119,32 @@ export interface EventEmitterContextType {
      * @param subscriptionId The id of the subscription returned by the subscribe method.
      * @returns 
      */
-    unsubscribe: (subscriptionId : number) => void;    
+    unsubscribe: (subscriptionId: number) => void;
 
 
     /**
      * Global hub for publishing and receiving events throughout the interface, and for exchanging
      * data with the backend.
      */
-    hub : Hub | null;
+    hub: Hub | null;
 
     /**
      * Retrieves the current subscriptions. Used for debugging purposes.
      * @param topic Optional. The topic to retrieve subscriptions for. If omitted, returns all subscriptions.
      * @returns An object containing the current subscriptions, optionally filtered by topic.
      */
-    getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];    
+    getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];
+
+
+    /**
+     * Returns true if the Hub in use is connected to its source.
+     * @returns boolean
+     */
+    isConnected: () => boolean;
 }
 
 
-let globalSubscriptionId = 1; 
+let globalSubscriptionId = 1;
 
 /**
  * A global context for managing event emission and subscription.
@@ -262,25 +269,27 @@ let globalSubscriptionId = 1;
  * 
  */
 export const EventEmitterContext = createContext<EventEmitterContextType>({
-    state: { subscriptions: {}, nextSubscriptionId : 1 },
+    state: { subscriptions: {}, nextSubscriptionId: 1 },
     dispatch: () => { },
     subscribe: () => { return 0; }, // Placeholder for subscription logic
-    invoke: async (domain: string, fname: string, payload?: object) => { 
+    invoke: async (domain: string, fname: string, payload?: object) => {
         domain;
         fname;
         payload;
-        let ret :CommandMessageResult = {
+        let ret: CommandMessageResult = {
             data: {},
             success: false,
-            error_message : ""            
+            error_message: ""
         };
         // Placeholder for invoke logic
         // Implement the logic to send a message to the backend and return a promise
         return Promise.resolve(ret); // Example placeholder, replace with actual implementation
     },
-    unsubscribe: (subscriptionId: number) => { subscriptionId;}, // Placeholder for unsubscription logic    
+    unsubscribe: (subscriptionId: number) => { subscriptionId; }, // Placeholder for unsubscription logic    
     hub: null,
-    getSubscriptions: () => { return []; } 
+    getSubscriptions: () => { return []; },
+    isConnected: () => { return false }
+
 });
 
 
@@ -318,21 +327,23 @@ export const EventEmitterContext = createContext<EventEmitterContextType>({
  * ``` 
  */
 export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [state, setState] = useState<State>({ subscriptions: {}, nextSubscriptionId : 1 });
+    const [state, setState] = useState<State>({ subscriptions: {}, nextSubscriptionId: 1 });
 
     // Memoize the hub instance so it's only created once
     const hub = useMemo(() => createHub(), []);
 
-    const dispatch = (action: Action) => {
+    const dispatch = useCallback((action: Action) => {
         const { topic, payload } = action;
 
         setState(prevState => {
-            prevState.subscriptions[topic]?.forEach(sub => sub.callback(payload));
+            const callbacks = prevState.subscriptions[topic] || [];
+            callbacks.forEach(sub => sub.callback(payload));
             return { ...prevState, eventData: payload };
-          });
-    };
+        });
+
+    }, []);
 
-    const subscribe = (topic: string, callback: React.Dispatch<any>) : number => {
+    const subscribe = useCallback((topic: string, callback: React.Dispatch<any>): number => {
 
         globalSubscriptionId += 1;
         const subscriptionId = globalSubscriptionId; // state.nextSubscriptionId;
@@ -340,39 +351,31 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
         setState(prevState => ({
             ...prevState,
             subscriptions: {
-              ...prevState.subscriptions,
-              [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
+                ...prevState.subscriptions,
+                [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
             },
             nextSubscriptionId: globalSubscriptionId + 1 // prevState.nextSubscriptionId + 1
-          }));
-        
-          return subscriptionId;
-    };
+        }));
+
+        return subscriptionId;
+    }, []);
 
 
-    const unsubscribe = (subscriptionId: number) => {
+    const unsubscribe = useCallback((subscriptionId: number) => {
         setState(prevState => {
             const newSubscriptions = { ...prevState.subscriptions };
-    
-            // Iterate through all topics
-            for (const topic in newSubscriptions) {
-                if (newSubscriptions.hasOwnProperty(topic)) {
-                    // Filter out the subscription with the given ID
-                    newSubscriptions[topic] = newSubscriptions[topic].filter(sub => sub.id !== subscriptionId);
-    
-                    // If the topic now has no subscriptions, you can optionally delete the topic key
-                    if (newSubscriptions[topic].length === 0) {
-                        delete newSubscriptions[topic];
-                    }
+            Object.keys(newSubscriptions).forEach(topic => {
+                newSubscriptions[topic] = newSubscriptions[topic].filter(sub => sub.id !== subscriptionId);
+                if (newSubscriptions[topic].length === 0) {
+                    delete newSubscriptions[topic];
                 }
-            }
-    
+            });
             return { ...prevState, subscriptions: newSubscriptions };
-        }); 
-    };
+        });
+    }, []);
 
 
-    const getSubscriptions = (topic?: string): Record<string, Subscription[]> | Subscription[] => {
+    const getSubscriptions = useCallback((topic?: string): Record<string, Subscription[]> | Subscription[] => {
         if (topic) {
             // Return subscriptions for the provided topic, or an empty array if the topic doesn't exist
             return state.subscriptions[topic] || [];
@@ -380,18 +383,19 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
             // Return all subscriptions
             return state.subscriptions;
         }
-    };    
+    }, []);
 
     // Provide the memoized hub instance in the context value
     const contextValue = useMemo(() => ({
-        state, 
-        dispatch, 
-        subscribe, 
-        unsubscribe, 
+        state,
+        dispatch,
+        subscribe,
+        unsubscribe,
         invoke: hub.invoke,
         hub,
-        getSubscriptions
-    }), [state, hub]);    
+        getSubscriptions,
+        isConnected: hub.isConnected
+    }), [state, hub]);
 
 
     hub.setContext(contextValue);

package/src/hooks/adsHooks.tsx

@@ -0,0 +1,208 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-26 09:04:40
+ * -----
+ * Last Modified: 2024-04-28 20:07:12
+ * -----
+ * 
+ */
+
+
+
+import { useContext, useRef, useEffect } from 'react';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+
+
+/**
+ * Sleep for a given number of milliseconds.
+ * @param ms Number of milliseconds to sleep.
+ */
+function sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+
+
+
+/**
+ * Custom hook for registering symbols and subscribing to updates on the 
+ * ADS domain via the EventEmitterContext.
+ * This hook abstracts the common pattern of registering symbols and handling subscriptions
+ * to updates in components that need real-time data from a backend service.
+ *
+ * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
+ *                related to a symbol, and each value is the setter function for that state.
+ * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
+ *                Each key should match a key in the `setters` object, and each value should be a string
+ *                that represents the symbol name to register and subscribe to.
+ *
+ * ## Usage Example:
+ * ```typescript
+ * const setters = {
+ *     speed: setSpeed,
+ *     temperature: setTemperature
+ * };
+ *
+ * const symbols = {
+ *     speed: "Sensor.speed",
+ *     temperature: "Sensor.temperature"
+ * };
+ *
+ * useRegisterSymbols(setters, symbols);
+ * ```
+ *
+ * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
+ * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
+ * whenever new data is received.
+ */
+export const useAdsRegisterSymbols = (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => {
+    const { invoke, subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
+    const subscriptions = useRef<number[]>([]);
+    const isMounted = useRef(true);
+
+    useEffect(() => {
+        isMounted.current = true;
+
+        const registerAndSubscribe = async () => {
+            for (const [key, symbolName] of Object.entries(symbols)) {
+                try {
+                    await invoke("ADS", "register_symbol", { symbol_name: symbolName });
+                    //console.log(`Subscribe... ADS/${symbolName}`);
+                    const subscriptionId = subscribe(`ADS/${symbolName}`, (data) => {
+                        if (isMounted.current) {
+                            const setter = setters[key];
+                            if (setter) {
+                                setter(data.value);
+                            }
+                        }
+                    });
+                    subscriptions.current.push(subscriptionId);
+                } catch (err) {
+                    console.error(`Failed to register symbol ${symbolName}: ${err}`);
+                }
+            }
+            await invoke("ADS", "refresh", {});
+        };
+        
+        if (!isConnected() ) {
+            //console.log("SCHEDULE LATER...");
+            let connectionSubId = subscribe("HUB/connected", () => {
+                registerAndSubscribe();
+                unsubscribe(connectionSubId);
+            });
+            subscriptions.current.push(connectionSubId);
+        }
+        else {
+            //console.log("ALREADY CONNECTED...");
+            registerAndSubscribe();
+        }
+        
+
+        return () => {
+            //console.log("UNSUBSCRIBE");
+            isMounted.current = false;
+            subscriptions.current.forEach(subscriptionId => unsubscribe(subscriptionId));
+            subscriptions.current = [];
+        };
+    }, []); // Ensure setters and symbols are included if they can change
+
+    return null; // This hook does not render anything
+};
+
+
+/**
+ * Custom hook to create a function that sends a specified value to a remote device or server.
+ * This hook abstracts the repetitive logic involved in sending these values,
+ * such as invoking the command and handling errors.
+ *
+ * @param {string} domain The domain under which the backend function is grouped.
+ * @param {string} fname The name of the function to be called on the backend.
+ * @param {string} symbolName The symbol name that identifies the specific value or setting in the backend.
+ * @returns {Function} A function that accepts a value (number or boolean) and sends it to the configured backend.
+ *
+ * @example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { Button } from 'primereact/button';
+ * import useWriteValue from './useWriteValue'; // adjust the import path as necessary
+ *
+ * const Component: React.FC = () => {
+ *   const [value, setValue] = useState<number>(0);
+ *   const writeToBackend = useAdsWriteValue("ADS", "write_value", "GNV.mySymbol");
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         type="number"
+ *         value={value}
+ *         onChange={(e) => setValue(Number(e.target.value))}
+ *       />
+ *       <Button
+ *         label="Send to Backend"
+ *         onClick={() => writeToBackend(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ */
+export function useAdsWriteValue(symbolName: string) {
+    const { invoke } = useContext(EventEmitterContext);
+    const domain = "ADS";
+    const fname = "write_value";
+
+    // Return a function that takes a value and sends it to the backend
+    return async (value: object | boolean | number | string ) => {
+        try {
+            await invoke(domain, fname, { symbol_name: symbolName, value });
+        } catch (err) {
+            console.error(`Error writing tag ${symbolName}: ${err}`);
+        }
+    };
+}
+
+
+
+
+/**
+ * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
+ * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.
+ *
+ * @param {string} domain - The domain under which the backend function is grouped.
+ * @param {string} fname - The function name to be called on the backend.
+ * @param {string} symbolName - The symbol name to target for the tap action.
+ * @returns {Function} A function that triggers the tap action.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Button } from 'primereact/button';
+ * import useTapValue from './useTapValue'; // Ensure the correct import path
+ *
+ * const MyComponent: React.FC = () => {
+ *   const sendTapAction = useTapValue("ADS", "write_value", "GNV.myButton");
+ *
+ *   return (
+ *     <Button
+ *       label="Tap Button"
+ *       onClick={() => sendTapAction()}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function useAdsTapValue(symbolName: string): () => Promise<void> {
+    const { invoke } = useContext(EventEmitterContext);
+    const domain = "ADS";
+    const fname = "write_value";
+
+    return async () => {
+        try {
+            await invoke(domain, fname, { symbol_name: symbolName, value: true });
+            await sleep(300); // Sleep for 300ms before writing false
+            await invoke(domain, fname, { symbol_name: symbolName, value: false });
+        } catch (err) {
+            console.error(`Error handling tap action for ${symbolName}: ${err}`);
+        }
+    };
+}
+

package/src/hub/HubBase.ts

@@ -3,7 +3,7 @@
  * Created Date: 2023-12-15 14:21:33
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-04-24 11:56:16
+ * Last Modified: 2024-04-25 14:44:14
  * Modified By: ADC
  * -----
  * 
@@ -95,6 +95,8 @@ export abstract class HubBase {
 
     protected context : EventEmitterContextType | null = null;
 
+    protected isConnected_ : boolean = false;
+
 
     /**
      * Constructor
@@ -125,6 +127,21 @@ export abstract class HubBase {
     abstract invoke(domain: string, fname: string, payload? : object) : Promise<CommandMessageResult>;
 
 
+    /**
+     * Allos the derived class to set whether the hub is connected to its source.
+     * @param s boolean
+     */
+    protected setIsConnected = (s : boolean) => {
+        this.isConnected_ = s;
+    }
+
+    /**
+     * Returns true if the Hub is connected to its source.
+     */
+    isConnected = () : boolean => {
+        return this.isConnected_;
+    }
+
     /**
      * Convenience function to invoke a command with an optional topic and optional value.
      * This will invoke the specified command in the backend. It does not broadcast the

package/src/hub/HubWebSocket.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-17 09:13:07
  * -----
- * Last Modified: 2024-04-25 07:21:33
+ * Last Modified: 2024-04-25 14:42:02
  * -----
  * 
  */
@@ -149,7 +149,7 @@ export class HubWebSocket extends HubBase {
         this.socket.onopen = function() {
             console.log("WebSocket connection established.");
             self.publish("HUB/connected", true);
-            //ws.send("Hello, server!"); // Send a message to the server
+            self.setIsConnected(true);
         };
         
                 
@@ -214,7 +214,8 @@ export class HubWebSocket extends HubBase {
         // The Websocket connection has closed.
         //
         this.socket.onclose = () => {
-            console.log('WebSocket connection closed.');
+            self.setIsConnected(false);
+            console.log('WebSocket connection closed.');            
         };
     }