@adcops/autocore-react 3.0.32 → 3.0.34

package/dist/components/FileList.js

@@ -1 +1,218 @@
-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}from"primereact/confirmpopup";import{FileUpload}from"primereact/fileupload";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:o,filter:a=".json",onSuccess:n,onError:i})=>{const[r,l]=useState(0),{invoke:s}=useContext(EventEmitterContext),[c,d]=useState(),m=e=>null!==e?void 0!==o?`${o}/${e}`:e:"",p=async()=>{try{const t=void 0!==o?{subdir:o}:{};let a=await s(e,"list_files",t),n=[];for(let e=0;e<a.data.length;++e){const t=a.data[e];n.push({id:e+1,name:t})}d(n)}catch(e){i&&i(`Failed to upload file list: ${e}`)}};const u=()=>{l((e=>e+1))},f=`File Listing [/${void 0!==o?o:""}]`,x=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:f})}),b=_jsxs(React.Fragment,{children:[t&&_jsx(FileUpload,{customUpload:!0,auto:!0,uploadHandler:async t=>{const o=t.files[0];let a=m(o.name);const r=new FileReader;r.onload=async t=>{const r=t.target?.result,l=function c(e){let t="",o=new Uint8Array(e),a=o.byteLength;for(let e=0;e<a;e++)t+=String.fromCharCode(o[e]);return window.btoa(t)}(r);try{await s(e,"write_file",{file_name:a,value:l,options:{base64:!0}}),n&&n(`Uploaded file ${o.name}`),p()}catch(e){i&&i(`Failed to upload file: ${e}`)}u()},r.onerror=e=>{i&&i(`Error reading file: ${e}`)},r.readAsArrayBuffer(o)},accept:a,maxFileSize:25e3,mode:"basic",chooseLabel:"",chooseOptions:{icon:"pi pi-upload",className:"p-button-icon-only p-button-text p-button-rounded p-mr-2"}},r),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{p()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),h=(t,o)=>{confirmPopup({target:o.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=>{let o=m(t);try{await s(e,"delete_file",{file_name:o}),n&&n(`Deleted file: ${t}`),p()}catch(e){i&&i(`Failed to delete file: ${e}`)}p()})(t.name)})};return useEffect((()=>(p(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:x,end:b,style:{padding:"1mm"}}),_jsxs(DataTable,{value:c,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{let o=m(t.name);try{await s(e,"download_file",{file_name:o}),n&&n(`Downloaded file: ${t.name}`)}catch(e){i&&i(`Failed downloading file: ${e}`)}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>h(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";
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-24 16:01:53
+ * -----
+ * Last Modified: 2025-01-20 19:15:50
+ * -----
+ *
+ */
+/** @file FileList
+ * FileList allows a user to view the contents of a DataStore in the autocore-server.
+ * Files can be downloaded, deleted and optionally uploaded (if enabled).
+ *
+ * The FileList requires the autocore-server to be the backend, as files are transferred
+ * using specific commands via websockets.
+ */
+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 } from 'primereact/confirmpopup';
+import { FileUpload } from 'primereact/fileupload';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+/**
+ * `FileList` is a React functional component that displays a list of files retrieved from a specified domain
+ * in an autocore-server.
+ * It allows users to download and delete files. The component also supports file uploads, if enabled.
+ *
+ * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
+ * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
+ *
+ * Requires
+ * ```tsx
+ * <ConfirmPopup />
+ * ```
+ * somewhere in a top-level page.
+ *
+ * Props:
+ * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
+ *      Default: "DATASTORE"
+ * - `enableUpload` (boolean): If true, enables an upload button allowing files to be uploaded to the datastore.
+ *      Default: false
+ *
+ * Example Usage:
+ * ```tsx
+ * <FileList domain="MyDomain" enableUpload={true} />
+ * ```
+ *
+ * @param {FileListProps} props The properties passed to the component.
+ */
+export const FileList = ({ domain = "DATASTORE", enableUpload = false, subdir, filter = ".json", onSuccess, onError }) => {
+    const [uploadKey, setUploadKey] = useState(0);
+    const { invoke } = useContext(EventEmitterContext);
+    const [files, setFiles] = useState();
+    const makeTargetName = (s) => {
+        if (s !== null) {
+            if (subdir !== undefined) {
+                return `${subdir}/${s}`;
+            }
+            else {
+                return s;
+            }
+        }
+        else {
+            return "";
+        }
+    };
+    /**
+     * Retrieve a list of files from an autocore-server DataStoreServelet.
+     */
+    const listFiles = async () => {
+        try {
+            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) {
+                const item = res.data[i];
+                items.push({
+                    id: i + 1,
+                    name: item
+                });
+            }
+            setFiles(items);
+        }
+        catch (error) {
+            if (onError)
+                onError(`Failed to upload file list: ${error}`);
+        }
+    };
+    /**
+     * Handles when the download button is clicked on a list item.
+     * @param file The file item selected in the DataTable
+     */
+    const handleDownload = async (file) => {
+        let target = makeTargetName(file.name);
+        try {
+            await invoke(domain, "download_file", { file_name: target });
+            if (onSuccess)
+                onSuccess(`Downloaded file: ${file.name}`);
+        }
+        catch (error) {
+            if (onError)
+                onError(`Failed downloading file: ${error}`);
+        }
+    };
+    /**
+     * Sends the command to the autocore-server domain to delete the file.
+     * @param file_name Name of the file to delete.
+     */
+    const handleDelete = async (file_name) => {
+        let target = makeTargetName(file_name);
+        try {
+            await invoke(domain, "delete_file", { file_name: target });
+            if (onSuccess)
+                onSuccess(`Deleted file: ${file_name}`);
+            listFiles(); // Refresh the file list after successful upload
+        }
+        catch (error) {
+            if (onError)
+                onError(`Failed to delete file: ${error}`);
+        }
+        listFiles();
+    };
+    /**
+     * Handles the upload of files selected through the PrimeReact FileUpload component.
+     * This function is triggered when a user selects files for upload and it processes each file asynchronously.
+     *
+     * The function reads the selected file as an ArrayBuffer, converts it to a Base64-encoded string, and then
+     * sends it to the server using a custom function `invoke` which interacts with the server via API calls.
+     * Upon successful upload, a success message is dispatched to the application's notification system. If the
+     * upload fails, an error message is similarly dispatched.
+     *
+     * Usage of this function requires that it be attached to a FileUpload component's event handler in the React component.
+     *
+     * @param {FileUploadSelectEvent} event - The event object provided by the FileUpload component, containing the files selected by the user.
+     *
+     * The `FileUploadSelectEvent` type should include:
+     * - `files`: An array of `File` objects that the user has selected for upload.
+     *
+     * This function utilizes the `FileReader` API to read the contents of the file. It checks if the read result
+     * is an instance of `ArrayBuffer` before proceeding to convert it to a Base64 string. Errors during file reading
+     * or uploading are caught and appropriate actions are taken (e.g., logging the error, dispatching error notifications).
+     *
+     * Note:
+     * - Ensure that the `invoke` function is properly implemented to handle the API request for file uploading.
+     * - Adjust the maximum file size and the types of files accepted by the FileUpload component according to your application's requirements.
+     * - This handler assumes a single file handling scenario. If multiple file uploads are needed, modifications to the iteration over `event.files` may be required.
+     */
+    const handleUpload = async (event) => {
+        const files = event.files;
+        const file = files[0]; // Assuming single file upload
+        let target = makeTargetName(file.name);
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+            // Convert array buffer to base64
+            const arrayBuffer = e.target?.result;
+            const base64String = arrayBufferToBase64(arrayBuffer);
+            try {
+                await invoke(domain, "write_file", { file_name: target, value: base64String, options: { "base64": true } });
+                if (onSuccess)
+                    onSuccess(`Uploaded file ${file.name}`);
+                // Refresh the file list after successful upload
+                listFiles();
+            }
+            catch (error) {
+                if (onError)
+                    onError(`Failed to upload file: ${error}`);
+            }
+            // Reset upload state of button so it show the file upload dialog again.
+            resetUpload();
+        };
+        reader.onerror = (error) => {
+            if (onError)
+                onError(`Error reading file: ${error}`);
+        };
+        reader.readAsArrayBuffer(file);
+    };
+    function arrayBufferToBase64(buffer) {
+        let binary = '';
+        let bytes = new Uint8Array(buffer);
+        let len = bytes.byteLength;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa(binary);
+    }
+    const resetUpload = () => {
+        setUploadKey(prevKey => prevKey + 1); // Increment key to force re-render
+    };
+    const title = `File Listing [/${subdir !== undefined ? subdir : ''}]`;
+    const toolbarStartContents = (_jsx(React.Fragment, { children: _jsx("span", { style: { fontWeight: 600 }, children: title }) }));
+    const toolbarEndContents = (_jsxs(React.Fragment, { children: [enableUpload && (_jsx(FileUpload, { customUpload: true, auto: true, uploadHandler: handleUpload, accept: filter, maxFileSize: 25000, mode: "basic", chooseLabel: "", chooseOptions: {
+                    icon: 'pi pi-upload',
+                    className: 'p-button-icon-only p-button-text p-button-rounded p-mr-2'
+                } }, uploadKey)), _jsx(Button, { icon: "pi pi-refresh", onClick: () => { listFiles(); }, className: "p-button-rounded p-mr-2", "aria-label": "Refresh", size: "small", rounded: true, text: true })] }));
+    /**
+     * Confirm that the user really wants to delete.
+     * @param event
+     */
+    const confirmDelete = (file, event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: `Are you want to delete file ${file.name}?\nWARNING: This cannot be undone.`,
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => handleDelete(file.name)
+        });
+    };
+    useEffect(() => {
+        listFiles();
+        return () => {
+        };
+    }, [domain, enableUpload]);
+    return (_jsxs("div", { children: [_jsx(Toolbar, { start: toolbarStartContents, end: toolbarEndContents, style: { padding: "1mm" } }), _jsxs(DataTable, { value: files, children: [_jsx(Column, { field: "name", header: "Name" }), _jsx(Column, { body: (rowData) => (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-download", onClick: () => handleDownload(rowData), className: "p-button-rounded p-button-success p-mr-2", style: { marginRight: "2mm" }, size: "small" }), _jsx(Button, { icon: "pi pi-trash", onClick: (e) => confirmDelete(rowData, e), className: "p-button-rounded p-button-danger", size: "small" })] })), header: "Actions" })] })] }));
+};
+export default FileList;

package/dist/components/FileSelect.js

@@ -1 +1,63 @@
-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,filter:n,onFileSelected:l,onAccept:i,onCancel:o})=>{const{invoke:a}=useContext(EventEmitterContext),[s,c]=useState([]),[r,m]=useState(null),u=e=>{m(e),l&&l(e.name)};return useEffect((()=>{(async()=>{try{let l;l=null!=n?t?{subdir:t,options:{filter:n}}:{options:{filter:n}}:t?{subdir:t}:{};const i=(await a(e,"list_files",l)).data.map(((e,t)=>({id:t+1,name:e})));c(i)}catch(e){}})()}),[e,t]),_jsxs("div",{children:[_jsxs(DataTable,{value:s,selectionMode:"single",selection:r,onSelectionChange:e=>u(e.value),children:[_jsx(Column,{field:"name",header:"File Name"}),_jsx(Column,{body:e=>_jsx(Button,{label:r?.name===e.name?"Selected":"Select",icon:r?.name===e.name?"pi pi-check-circle":"pi pi-circle-off",onClick:()=>u(e),className:"p-button-rounded "+(r?.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:o}),_jsx(Button,{label:"Accept",icon:"pi pi-check",className:"p-button",onClick:()=>{void 0!==i&&null!==r&&i(null!==r?void 0!==t?`${t}/${r.name}`:r.name:"")},disabled:!r})]})]})};export default FileSelect;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-28 16:06:59
+ * -----
+ * Last Modified: 2024-06-12 14:40:20
+ * -----
+ *
+ */
+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 = "DATASTORE", subdir, filter, onFileSelected, onAccept, onCancel }) => {
+    const { invoke } = useContext(EventEmitterContext);
+    const [files, setFiles] = useState([]);
+    const [selectedFile, setSelectedFile] = useState(null);
+    const listFiles = async () => {
+        try {
+            let args;
+            if (filter !== undefined && filter !== null) {
+                args = subdir ? { "subdir": subdir, options: { "filter": filter } } : { options: { "filter": filter } };
+            }
+            else {
+                args = subdir ? { "subdir": subdir } : {};
+            }
+            const res = await invoke(domain, "list_files", args);
+            const items = res.data.map((item, index) => ({
+                id: index + 1,
+                name: item
+            }));
+            setFiles(items);
+        }
+        catch (error) {
+            console.error("Failed to list files:", error);
+        }
+    };
+    const handleSelect = (file) => {
+        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 (_jsxs("div", { children: [_jsxs(DataTable, { value: files, selectionMode: "single", selection: selectedFile, onSelectionChange: e => handleSelect(e.value), children: [_jsx(Column, { field: "name", header: "File Name" }), _jsx(Column, { body: (rowData) => (_jsx(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" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }, children: [_jsx(Button, { label: "Cancel", icon: "pi pi-times", className: "p-button-text", onClick: onCancel }), _jsx(Button, { label: "Accept", icon: "pi pi-check", className: "p-button", onClick: () => { if (onAccept !== undefined && selectedFile !== null)
+                            onAccept(makeReturnFileName()); }, disabled: !selectedFile })] })] }));
+};
+export default FileSelect;

package/dist/components/FitText.js

@@ -1 +1,13 @@
-import{jsx as _jsx}from"react/jsx-runtime";import useFitText from"use-fit-text";export const FitText=({children:t})=>{const{fontSize:e,ref:i}=useFitText();return _jsx("div",{ref:i,style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:_jsx("p",{style:{fontSize:e},children:t})})};export default FitText;
+import { jsx as _jsx } from "react/jsx-runtime";
+import useFitText from 'use-fit-text';
+/**
+ * FitText dynamically adjusts the font size of its children to fit the parent container.
+ *
+ * @param {FitTextProps} props The props for the FitText component.
+ * @returns A div element that resizes its child text to fit.
+ */
+export const FitText = ({ children }) => {
+    const { fontSize, ref } = useFitText();
+    return (_jsx("div", { ref: ref, style: { width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx("p", { style: { fontSize }, children: children }) }));
+};
+export default FitText;

package/dist/components/Indicator.js

@@ -1 +1,113 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};export class Indicator extends Component{constructor(e){super(e),Object.defineProperty(this,"unsubscribeTopicId",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.state={subscribedValue:e.value,fontSize:"100%"}}componentDidMount(){const{topic:e}=this.props;if(e&&null===this.unsubscribeTopicId){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){e.value!==this.props.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(null!==this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId),this.unsubscribeTopicId=null}}render(){const{label:e,value:t,onColor:o,offColor:r,invalidColor:s}=this.props,{subscribedValue:i}=this.state;let n,a=i;switch(void 0!==t&&(a=t),a){case!0:n=o;break;case!1:n=r;break;default:n=s}return _jsxs("div",{className:"p-inputgroup flex-1",style:{alignItems:"center !important"},children:[_jsx("span",{className:"p-inputgroup-addon",style:{backgroundColor:n,width:"22px"},children:" "}),_jsx("span",{className:"p-inputgroup-addon",children:e})]})}}Object.defineProperty(Indicator,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(Indicator,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:"green",offColor:"gray",invalidColor:"black"}});export default Indicator;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:39:41
+ * -----
+ * Last Modified: 2024-03-12 21:53:48
+ * -----
+ *
+ */
+import { Component } from 'react';
+//import clsx from 'clsx';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+//import { IPositionContext } from '../core/PositionContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+export class Indicator extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "unsubscribeTopicId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.state = {
+            subscribedValue: props.value,
+            fontSize: "100%"
+        };
+    }
+    componentDidMount() {
+        const { topic } = this.props;
+        if (topic && this.unsubscribeTopicId === null) {
+            const { subscribe } = this.context;
+            this.unsubscribeTopicId = subscribe(topic, (value) => {
+                this.setState({ subscribedValue: value });
+            });
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ subscribedValue: this.props.value });
+        }
+    }
+    componentWillUnmount() {
+        if (this.unsubscribeTopicId !== null) {
+            const { unsubscribe } = this.context;
+            unsubscribe(this.unsubscribeTopicId);
+            this.unsubscribeTopicId = null;
+        }
+    }
+    render() {
+        const { label, value, onColor, offColor, invalidColor } = this.props;
+        const { subscribedValue } = this.state;
+        //
+        // Load the value from the proper source.
+        // If the `value` property is undefined, that takes precedence.
+        // 
+        let displayValue = subscribedValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }
+        let color;
+        switch (displayValue) {
+            case true:
+                color = onColor;
+                break;
+            case false:
+                color = offColor;
+                break;
+            default:
+                color = invalidColor;
+                break;
+        }
+        // const style: React.CSSProperties = {
+        //     position: useAbsolutePositioning ? 'absolute' : 'relative',
+        //     display: useAbsolutePositioning ? "" : "inline-block",
+        //     verticalAlign: 'middle',
+        //     top: useAbsolutePositioning && y ? `${yOffset + adjScale * y}px` : undefined,
+        //     left: useAbsolutePositioning && x ? `${xOffset + adjScale * x}px` : undefined,
+        //     width: adjWidth ? `${adjWidth * adjScale}px` : undefined,
+        //     height: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+        //     lineHeight: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+        //     backgroundColor: color,
+        //     borderRadius: "20px"
+        // };
+        const groupStyle = {
+            alignItems: "center !important"
+        };
+        const lampDivStyle = {
+            backgroundColor: color,
+            width: "22px"
+        };
+        return (_jsxs("div", { className: "p-inputgroup flex-1", style: groupStyle, children: [_jsx("span", { className: "p-inputgroup-addon", style: lampDivStyle, children: "\u00A0" }), _jsx("span", { className: "p-inputgroup-addon", children: label })] }));
+    }
+}
+Object.defineProperty(Indicator, "contextType", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: EventEmitterContext
+});
+// Define default properties
+Object.defineProperty(Indicator, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        onColor: "green",
+        offColor: "gray",
+        invalidColor: "black"
+    }
+});
+export default Indicator;

package/dist/components/IndicatorButton.js

@@ -1 +1,187 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};import{ActionMode}from"../core/ActionMode";export{ActionMode};export class IndicatorButton extends Component{constructor(e){super(e),Object.defineProperty(this,"handleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({currentValue:e})}}),Object.defineProperty(this,"handleDisableTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isDisabled:e})}}),Object.defineProperty(this,"handleInvisibleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({isInvisible:e})}}),this.state={currentValue:void 0,isDisabled:!1,isInvisible:!1,isPressed:!1}}componentDidMount(){this.setupSubscriptions()}componentDidUpdate(e){}componentWillUnmount(){}setupSubscriptions(){const{topic:e,disableTopic:t,invisibleTopic:o}=this.props,{subscribe:i}=this.context;e&&i(e,this.handleTopicUpdate),t&&i(t,this.handleDisableTopicUpdate),o&&i(o,this.handleInvisibleTopicUpdate)}handleOnPressed(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e||(this.setState({isPressed:!0}),t!==ActionMode.Tap&&t!==ActionMode.Pressed||this.dispatchCommand(!0))}handleOnReleased(){const{isPressed:e}=this.state,{actionMode:t}=this.props;e&&(this.setState({isPressed:!1}),t===ActionMode.Tap?this.dispatchCommand(!1):t===ActionMode.Released&&this.dispatchCommand(!0))}dispatchCommand(e){const{command:t,commandTopic:o,commandArgs:i}=this.props,{dispatch:n}=this.context;if(null!=t&&t.length>0){n({topic:t,payload:{topic:o,value:e,...i}})}}render(){const{currentValue:e,isDisabled:t,isInvisible:o}=this.state,{className:i,severity:n,label:s,raised:a,value:r,onColor:l,offColor:d,options:c,topic:p,command:u,commandArgs:h,disableTopic:m,invisibleTopic:b,inputMode:f,invert:v,onIcon:C,offIcon:I,icon:T,...x}=this.props;let P,M=e;void 0!==r&&(M=r),null!=c?(P=M?c[1]:c[0],null!=P&&0!==P.length||(P=s)):P=s;let g=M?C:I;null!=g&&0!==g.length||(g=T);let y=M?l:d;return void 0===M&&(y=IndicatorColor.IndicatorInvalid),_jsx(Button,{...x,label:P,icon:`pi ${g}`,className:i,style:{color:"white",backgroundColor:y,display:o?"none":"block"},disabled:t,onMouseDown:()=>this.handleOnPressed(),onTouchStart:()=>this.handleOnPressed(),onMouseUp:()=>this.handleOnReleased(),onTouchEnd:()=>this.handleOnReleased(),value:m,raised:!0})}}Object.defineProperty(IndicatorButton,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(IndicatorButton,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:IndicatorColor.IndicatorGreen,offColor:"gray"}});export default IndicatorButton;
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-21 10:33:58
+  * -----
+ * Last Modified: 2024-03-12 20:55:17
+ * Modified By: ADC
+ * -----
+ *
+ */
+import { Component } from 'react';
+import { Button } from 'primereact/button';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+import { ActionMode } from '../core/ActionMode';
+export { ActionMode };
+export class IndicatorButton extends Component {
+    constructor(props) {
+        super(props);
+        /**
+         * Handles updates for the main topic.
+         */
+        Object.defineProperty(this, "handleTopicUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (value) => {
+                this.setState({ currentValue: value });
+            }
+        });
+        /**
+         * Handles updates for the disable topic.
+         */
+        Object.defineProperty(this, "handleDisableTopicUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (value) => {
+                this.setState({ isDisabled: value });
+            }
+        });
+        /**
+         * Handles updates for the invisible topic.
+         */
+        Object.defineProperty(this, "handleInvisibleTopicUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (value) => {
+                this.setState({ isInvisible: value });
+            }
+        });
+        this.state = {
+            currentValue: undefined,
+            isDisabled: false,
+            isInvisible: false,
+            isPressed: false
+        };
+    }
+    componentDidMount() {
+        this.setupSubscriptions();
+    }
+    componentDidUpdate(prevProps) {
+        prevProps;
+        // Logic to handle updates in props, if necessary        
+    }
+    componentWillUnmount() {
+        // Unsubscribe logic if needed
+    }
+    /**
+     * Sets up subscriptions based on provided topics.
+     */
+    setupSubscriptions() {
+        const { topic, disableTopic, invisibleTopic } = this.props;
+        const { subscribe } = this.context;
+        if (topic) {
+            // Subscribe to the main topic
+            subscribe(topic, this.handleTopicUpdate);
+        }
+        if (disableTopic) {
+            // Subscribe to the disable topic
+            subscribe(disableTopic, this.handleDisableTopicUpdate);
+        }
+        if (invisibleTopic) {
+            // Subscribe to the invisible topic
+            subscribe(invisibleTopic, this.handleInvisibleTopicUpdate);
+        }
+    }
+    /**
+     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
+     */
+    handleOnPressed() {
+        const { isPressed } = this.state;
+        const { actionMode } = this.props;
+        if (!isPressed) {
+            this.setState({ isPressed: true });
+            if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
+                this.dispatchCommand(true);
+            }
+        }
+    }
+    /**
+     * Handle the button being released. Used for TAP and RELEASED action modes.
+     */
+    handleOnReleased() {
+        const { isPressed } = this.state;
+        const { actionMode } = this.props;
+        if (isPressed) {
+            this.setState({ isPressed: false });
+            if (actionMode === ActionMode.Tap) {
+                this.dispatchCommand(false);
+            }
+            else if (actionMode === ActionMode.Released) {
+                this.dispatchCommand(true);
+            }
+        }
+    }
+    /**
+     * Dispatch a value to any listeners.
+     * @param value The value to dispatch as part of the payload.
+     */
+    dispatchCommand(value) {
+        const { command, commandTopic, commandArgs } = this.props;
+        const { dispatch } = this.context;
+        if (command !== undefined && command !== null && command.length > 0) {
+            const payload = {
+                topic: commandTopic,
+                value: value,
+                ...commandArgs
+            };
+            dispatch({
+                topic: command,
+                payload: payload
+            });
+        }
+    }
+    render() {
+        const { currentValue, isDisabled, isInvisible } = this.state;
+        const { className, severity, label, raised, value, onColor, offColor, options, topic, command, commandArgs, disableTopic, invisibleTopic, inputMode, invert, onIcon, offIcon, icon, ...restProps } = this.props;
+        //
+        // Load the value from the proper source.
+        // If the `value` property is undefined, that takes precedence.
+        // 
+        let displayValue = currentValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }
+        // Determine the label and color based on the current state
+        let btnLabel = undefined;
+        if (options !== undefined && options !== null) {
+            btnLabel = displayValue ? options[1] : options[0];
+            if (btnLabel === undefined || btnLabel === null || btnLabel.length === 0)
+                btnLabel = label;
+        }
+        else {
+            btnLabel = label;
+        }
+        let btnIcon = displayValue ? onIcon : offIcon;
+        if (btnIcon === undefined || btnIcon === null || btnIcon.length === 0)
+            btnIcon = icon;
+        let color = displayValue ? onColor : offColor;
+        // Handle special cases like undefined state or specific input modes
+        if (displayValue === undefined) {
+            color = IndicatorColor.IndicatorInvalid;
+        }
+        return (_jsx(Button, { ...restProps, label: btnLabel, icon: `pi ${btnIcon}`, className: className, style: { color: "white", backgroundColor: color, display: isInvisible ? 'none' : 'block' }, disabled: isDisabled, onMouseDown: () => this.handleOnPressed(), onTouchStart: () => this.handleOnPressed(), onMouseUp: () => this.handleOnReleased(), onTouchEnd: () => this.handleOnReleased(), value: disableTopic, raised: true }));
+    }
+}
+Object.defineProperty(IndicatorButton, "contextType", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: EventEmitterContext
+});
+// Define default props
+Object.defineProperty(IndicatorButton, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        onColor: IndicatorColor.IndicatorGreen,
+        offColor: "gray", // Default offColor
+        // ... other default values for props ...
+    }
+});
+export default IndicatorButton;