@adcops/autocore-react 3.0.18 → 3.0.20

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

@@ -1,5 +1,52 @@
-import React from "react";
-import { EventEmitterContext } from "../core/EventEmitterContext";
+/** @file
+ * `ValueInput` is a React component for number input that encapsulates various features
+ * such as custom numeric formatting, optional currency formatting, increment and decrement
+ * buttons, and validation. This component uses the PrimeReact `InputNumber` control
+ * to provide a rich input experience, including handling both decimal and currency modes,
+ * with configurable precision and optional prefix/suffix text.
+ *
+ * Properties:
+ * - `label`: Label text displayed on the input field.
+ * - `value`: Current numeric value of the input field.
+ * - `min`: Minimum allowable value.
+ * - `max`: Maximum allowable value.
+ * - `minPrecision`: Minimum number of decimal places to display.
+ * - `maxPrecision`: Maximum number of decimal places allowed.
+ * - `mode`: Determines whether the input is treated as a plain decimal or currency. Defaults to "decimal".
+ * - `currency`: ISO 4217 currency code for formatting the value as currency.
+ * - `prefix`: String to display before the value.
+ * - `suffix`: String to display after the value.
+ * - `showButtons`: Whether to display increment and decrement buttons.
+ * - `step`: The amount by which the value should be incremented or decremented.
+ * - `locale`: Locale code for formatting the value.
+ * - `description`: Additional descriptive text to display below the input.
+ * - `disabled`: Whether the input is disabled.
+ * - `dispatchTopic`: Event topic to dispatch on value change.
+ * - `placeholder`: Placeholder text when the input is empty.
+ * - `onValueChanged`: Callback function that is called when the user accepts a new value.
+ *
+ * Example Usage:
+ * ```tsx
+ * <ValueInput
+ *   label="Quantity"
+ *   value={10}
+ *   min={1}
+ *   max={100}
+ *   minPrecision={0}
+ *   maxPrecision={2}
+ *   mode="decimal"
+ *   showButtons={true}
+ *   step={1}
+ *   locale="en-US"
+ *   onValueChanged={(newValue) => console.log("New Value:", newValue)}
+ * />
+ * ```
+ *
+ * This example creates a `ValueInput` component for entering quantities, with values ranging from 1 to 100,
+ * allowing up to 2 decimal places. Increment and decrement buttons are visible, and the new value is logged
+ * to the console when accepted.
+ */
+import React from 'react';
 /**
  * Properties of the ValueInput component.
  */
@@ -15,11 +62,11 @@ interface ValueInputProps {
     /**
      * Minimum value for the field.
      */
-    min: number | undefined;
+    min?: number | undefined;
     /**
      * Minimum value for the field.
      */
-    max: number | undefined;
+    max?: number | undefined;
     /**
      * Minimum number of decimal points. The user will not
      * be required to type the decimal values, but this minimum
@@ -28,21 +75,21 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 0
      */
-    minPrecision: number | undefined;
+    minPrecision?: number | undefined;
     /**
      * Maximum number of decimal points.
      * Set to 0 for integer-only. Must be greater or equal to than minPrecision, or
      * the component will throw an error.
      * @default 3
      */
-    maxPrecision: number | undefined;
+    maxPrecision?: number | undefined;
     /**
      * Defines the behavior of the component.
      * If set to "currency", then you need to specify the
      * currency type using the currency property.
      * @default "decimal"
      */
-    mode: "currency" | "decimal" | undefined;
+    mode?: "currency" | "decimal" | undefined;
     /**
      * The currency to use in currency formatting. Possible values are the
      * [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency),
@@ -51,117 +98,59 @@ interface ValueInputProps {
      *
      * @default "USD"
      */
-    currency: string;
+    currency?: string;
     /**
      * An optional prefix before the value of the field.
      * Unlike the TextInput control, this prefix is internal to the field.
      */
-    prefix: string | undefined;
+    prefix?: string | undefined;
     /**
      * An optional suffix after the value of the field.
      * Unlike the TextInput control, this prefix is internal to the field.
      */
-    suffix: string | undefined;
+    suffix?: string | undefined;
     /**
      * Set true to display buttons to increment/decrement the value.
      * Use the step property to adjust the amount that the value will change.
      *
      * @default false
      */
-    showButtons: boolean;
+    showButtons?: boolean;
     /**
      * The amount clicking an increment/decrement buttion will change the value.
      */
-    step: number | undefined;
+    step?: number | undefined;
     /**
      * Locale to be used in formatting. Changes how the numbers/separators are displayed
      * for international users. The typical locale codes are used.
      *
      * @default "en-US"
      */
-    locale: string | undefined;
+    locale?: string | undefined;
     /**
      * A small, advisory text below the field.
      */
-    description: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
     /**
      * If true, all functions of the field will be disabled.
      */
-    disabled: boolean | undefined;
+    disabled?: boolean | undefined;
     /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
-    dispatchTopic: string | undefined;
+    dispatchTopic?: string | undefined;
     /**
      * Placeholder string to display if the value is empty.
      */
-    placeholder: string | undefined;
+    placeholder?: string | undefined;
     /**
      * The user has accepted a new value.
      * @param newValue New value accepted by the user.
      */
     onValueChanged?(newValue: number): void;
 }
-/**
- * State variables of the ValueInput component.
- */
-interface ValueInputState {
-    entryValue: number | null;
-    currentValue: number | null;
-    editing: boolean;
-}
 /**
  * A convenient field with all the usual features of inputing numbers.
  * Wraps the common features of use of a InputNumber, p-inputgroup, some icon buttons,
  * accepting and rejecting values and keyboard management.
  */
-export declare class ValueInput extends React.Component<ValueInputProps, ValueInputState> {
-    static contextType: React.Context<import("../core/EventEmitterContext").EventEmitterContextType>;
-    context: React.ContextType<typeof EventEmitterContext>;
-    /**
-     * Default properties for the component.
-     */
-    static defaultProps: {
-        label: string;
-        value: undefined;
-        keyFilter: undefined;
-        writeTopic: undefined;
-        onValueChanged: undefined;
-        description: undefined;
-        prefix: undefined;
-        suffix: undefined;
-        disabled: boolean;
-        dispatchTopic: undefined;
-        placeholder: undefined;
-        validator: undefined;
-        min: undefined;
-        max: undefined;
-        minPrecision: number;
-        maxPrecision: number;
-        mode: string;
-        showButtons: boolean;
-        step: number;
-        locale: string;
-        currency: string;
-    };
-    inputRef: React.RefObject<HTMLInputElement>;
-    /**
-     *
-     * @param {FooterViewProps} props
-     */
-    constructor(props: ValueInputProps);
-    /**
-     * 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.
-     */
-    private onAcceptValue;
-    /**
-     * The user wishes to reset/cancel the previous value.
-     */
-    private onResetValue;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};
+export declare const ValueInput: React.FC<ValueInputProps>;
+export default ValueInput;

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(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"}});
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b})=>{const[h,j]=useState(t),[C,E]=useState(t),[_,S]=useState(t),[g,y]=useState(!1),[N,k]=useState(!1),B=useRef(null),D=useContext(EventEmitterContext);useEffect((()=>{null!==_?(E(_),S(null),k(!1)):t!==C&&(E(t),j(t),y(!1),k(!1))}),[t,C]);const F=()=>{var e;g&&null!==h&&(e=h,void 0!==i&&e>i||void 0!==s&&e<s?k(!0):(E(h),y(!1),b?.(h),k(!1),f&&D.dispatch({topic:f,payload:h})))},I=()=>{g&&(j(null),E(null),y(!1),k(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{ref:B,invalid:N,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:C,onChange:e=>{return t=e.value,g||(S(C),y(!0)),void j(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?F():"Escape"===e.key&&I()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!g,className:"p-button-success",onClick:()=>F(),visible:g,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!g,className:"p-button-danger",onClickCapture:()=>I(),visible:g,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;

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.20",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -50,7 +50,7 @@
         "@types/react-transition-group": "^4.4.1",
         "clsx": "^2.1.0",
         "numerable": "^0.3.15",
-        "primereact": "^10.3.1",
+        "primereact": "^10.6.3",
         "react-blockly": "^8.1.1",
         "react-simple-keyboard": "^3.7.65",
         "react-transition-group": "^4.4.1",

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>