@adcops/autocore-react 3.0.18 → 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/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/package.json

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

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 18:57:03
+ * 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/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/dist/hooks/useAdsRegisterSymbol.d.ts

@@ -1,32 +0,0 @@
-/**
- * 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;

package/dist/hooks/useAdsRegisterSymbol.js

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

package/src/hooks/useAdsRegisterSymbol.ts

@@ -1,97 +0,0 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-04-25 09:17:05
- * -----
- * Last Modified: 2024-04-25 16:03:15
- * -----
- * 
- */
-
-
-import { useEffect, useContext, useRef } from 'react';
-import {EventEmitterContext} from "../core/EventEmitterContext";
-
-/**
- * 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
-};