@adcops/autocore-react 3.0.19 → 3.0.21

package/dist/components/FileList.d.ts

@@ -6,6 +6,9 @@
  * using specific commands via websockets.
  */
 import React from 'react';
+/**
+ * Defines properties for the file list.
+ */
 /**
  * Defines properties for the file list.
  */
@@ -13,6 +16,36 @@ type FileListProps = {
     domain?: string;
     enableUpload?: boolean;
     subdir?: string;
+    /**
+     * A comma-separated list of file MIME types or file extensions.
+     * Default: .json
+     *
+     * ### Example: Filter by Extension:
+     * ```
+     * accept=".jpg,.png,.pdf"  // Restricts uploads to JPG, PNG, and PDF files only
+     * ```
+     *
+     * ### Example: Filter by mime type.
+     * ```
+     * accept="image/*,application/pdf"  // Allows any image type and PDF files
+     * ```
+     *
+     * ### Example: All files
+     * ```
+     * accept="/*"
+     * ```
+     *
+     */
+    filter?: string;
+    /**
+     * Callback when an operation completes successfully.
+     * @returns void
+     */
+    onSuccess?: (message: string) => void;
+    /***
+     * Callback when an operation results in an error.
+     */
+    onError?: (message: string) => void;
 };
 /**
  * `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,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;
+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{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,m]=useState(),d=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})}m(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=d(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}),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})]}),_=(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=d(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"}}),_jsx(ConfirmPopup,{}),_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=d(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=>_(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;

package/dist/components/ValueDisplay.d.ts

@@ -59,9 +59,55 @@ interface State {
     fontSize?: string;
 }
 /**
- * `ValueDisplay` is a React component that subscribes to a value from an `EventEmitterContext` and renders it.
- * This component adjusts its display based on the provided properties, including positioning and styling adjustments
- * based on its context. It is designed to work within a system that provides dynamic updates to values via an event emitter.
+ * `ValueDisplay` is a React component designed to display a value which can be a string, number, or null.
+ * It supports formatting numeric values using the `numerableFormat` function, and is capable of dynamic positioning
+ * and sizing within its parent container. The component integrates with an `EventEmitterContext` to listen for
+ * updates to its value based on a specified topic, making it ideal for real-time data display scenarios.
+ *
+ * The component can be absolutely positioned based on `x` and `y` props, and its size can be adjusted using
+ * `width` and `height` props. If `useAbsolutePositioning` is true, it will position itself based on the provided
+ * coordinates; otherwise, it will position relatively.
+ *
+ * ### Props:
+ * - `value`: The initial value to display, which can be updated via props or context events.
+ * - `x`, `y`: Coordinates for absolute positioning within the parent container.
+ * - `width`, `height`: Dimensions of the component. If height is not provided, it defaults to the width.
+ * - `format`: A string specifying the format for numeric values (see numerable.js documentation for format strings).
+ * - `formatOptions`: Additional formatting options as per numerable.js.
+ * - `className`: Custom class for CSS styling.
+ * - `useAbsolutePositioning`: Boolean to toggle absolute positioning.
+ * - `topic`: Optional string to subscribe to context updates for dynamic value changes.
+ *
+ * ### Usage Example:
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import { ValueDisplay } from './components/ValueDisplay';
+ *
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <ValueDisplay
+ *         value={1234.56}
+ *         x={100}
+ *         y={200}
+ *         width={150}
+ *         height={50}
+ *         format="0,0.00"
+ *         className="numeric-display"
+ *         useAbsolutePositioning={true}
+ *         topic="priceUpdate"
+ *       />
+ *     </div>
+ *   );
+ * };
+ *
+ * ReactDOM.render(<App />, document.getElementById('root'));
+ * ```
+ *
+ * In this example, `ValueDisplay` is used to show a numeric value formatted as a string with two decimal places.
+ * It is positioned absolutely at coordinates (100, 200) with a specified width and height. The component listens
+ * for updates on the "priceUpdate" topic to dynamically update its displayed value.
  */
 declare class ValueDisplay extends Component<Props, State> {
     /** Defines the context type to subscribe to changes using EventEmitter. */

package/dist/components/ValueDisplay.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{format as numerableFormat}from"numerable";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";class ValueDisplay 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){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){this.props.value!==e.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId)}}render(){const{x:e,y:t,width:i,height:s,format:o,formatOptions:r,className:n,useAbsolutePositioning:a}=this.props,{subscribedValue:l,fontSize:c}=this.state,{scale:u,xOffset:p,yOffset:b}=this.context,m={position:a?"absolute":"relative",display:a?"":"inline-block",verticalAlign:"middle",fontSize:c&&u>1?100*u+"%":c,top:a&&t?`${b+u*t}px`:void 0,left:a&&e?`${p+u*e}px`:void 0,width:i?i*u+"px":void 0,height:s?s*u+"px":void 0,lineHeight:s?s*u+"px":void 0,whiteSpace:"nowrap"};return _jsx("div",{className:clsx(n),style:m,children:numerableFormat(l,o,r)})}}Object.defineProperty(ValueDisplay,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});export{ValueDisplay};
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{format as numerableFormat}from"numerable";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";class ValueDisplay 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){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){this.props.value!==e.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId)}}render(){const{x:e,y:t,width:i,height:s,format:o,formatOptions:r,className:n,useAbsolutePositioning:a}=this.props,{subscribedValue:l,fontSize:u}=this.state,{scale:c,xOffset:p,yOffset:b}=this.context,m={position:a?"absolute":"relative",display:a?"":"inline-block",verticalAlign:"middle",fontSize:u&&c>1?100*c+"%":u,top:a&&t?`${b+c*t}px`:void 0,left:a&&e?`${p+c*e}px`:void 0,width:i?i*c+"px":void 0,height:s?s*c+"px":void 0,lineHeight:s?s*c+"px":void 0,whiteSpace:"nowrap"};let d;return d="number"==typeof l||"string"==typeof l&&!isNaN(Number(l))?numerableFormat(l,o,r):l,_jsx("div",{className:clsx(n),style:m,children:d})}}Object.defineProperty(ValueDisplay,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});export{ValueDisplay};

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

@@ -66,6 +66,55 @@ export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any
  * };
  */
 export declare function useAdsWriteValue(symbolName: string): (value: object | boolean | number | string) => Promise<void>;
+/**
+ * useAdsWriteScaledValue is a custom React hook that enables writing scaled numerical values to a backend system.
+ * It applies a specified scale and offset to a numeric value before sending it over an ADS connection.
+ * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
+ * scale factors before being persisted or processed by a backend system.
+ *
+ * @param symbolName The symbol name in the backend system where the value will be written.
+ * @param scale The scale factor to be applied to the value.
+ * @param offset The offset to be applied after scaling the value.
+ * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
+ *
+ * @example
+ * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
+ * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
+ * based on a dynamic scale factor managed in the component's state.
+ *
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { useAdsWriteScaledValue } from './hooks';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *     const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
+ *     const [offset, setOffset] = useState<number>(0); // No offset by default.
+ *
+ *     // The hook is used here with the scale and offset state variables.
+ *     const writeMeasurement = useAdsWriteScaledValue("GIO.axisX.position", scale, offset);
+ *
+ *     // This function is called when the input field value changes.
+ *     const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *         const valueInInches = parseFloat(event.target.value);
+ *         writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
+ *     };
+ *
+ *     return (
+ *         <div>
+ *             <label>Enter measurement in inches:</label>
+ *             <input type="number" onChange={handleMeasurementChange} />
+ *         </div>
+ *     );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
+ * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
+ * dynamically if needed, for instance, based on user selection or other external configurations.
+ */
+export declare function useAdsWriteScaledValue(symbolName: string, scale: number, offset: number): (value: number) => 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.

package/dist/hooks/adsHooks.js

@@ -1 +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){}}}
+import{useContext,useRef,useEffect,useCallback}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 useAdsWriteScaledValue(e,t,n){const{invoke:r}=useContext(EventEmitterContext);return useCallback((async s=>{const o=(s-n)/t;try{await r("ADS","write_value",{symbol_name:e,value:o})}catch(e){}}),[e,t,n,r])}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useAdsRegisterSymbols, useAdsWriteValue, useAdsTapValue } from "./adsHooks";
+export { useScaledValue, kMillimeters2Inches } from './useScaledValue';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export{useAdsRegisterSymbols,useAdsWriteValue,useAdsTapValue}from"./adsHooks";export{useScaledValue,kMillimeters2Inches}from"./useScaledValue";

package/dist/hooks/useScaledValue.d.ts

@@ -0,0 +1,57 @@
+export declare const kMillimeters2Inches: number;
+type UseScaledValueReturn = [number, (newValue: number) => void];
+/**
+ * A custom React hook for converting values between different scales,
+ * with support for dynamically updating the scale and offset. This hook manages values
+ * in a base unit and allows for easy conversion to a display unit, updating
+ * reactively to changes in the conversion factors.
+ *
+ * @param initialValue - The initial value in the base unit.
+ * @param scale - The dynamic scale factor used for conversion to the display unit.
+ * @param offset - An optional offset applied after scaling (default is 0).
+ * @returns A tuple containing the display value and a setter function for updating
+ * the value in the display unit.
+ *
+ * @example
+ * Here's how to use `useScaledValue` in a component that fetches a scale factor from a backend
+ * and allows the user to input values in a converted scale, which are then handled in a base unit:
+ *
+ * ```tsx
+ * import React, { useState, useEffect } from 'react';
+ * import { useScaledValue } from './hooks/useScaledValue';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *   const [units, setUnits] = useState<number>(1); // Start with a default scale of 1
+ *   const [xPosition, setXPosition] = useScaledValue(0, units);
+ *
+ *   useEffect(() => {
+ *     async function fetchScale() {
+ *       try {
+ *         // Simulate fetching scale factor from a backend
+ *         const res = await invoke("GNV", "read_value", { group: "ux", key: "kSelectedUnits" });
+ *         setUnits(res.data); // Update scale based on backend response
+ *       } catch (error) {
+ *         console.error('Failed to fetch units', error);
+ *       }
+ *     }
+ *     fetchScale();
+ *   }, []);
+ *
+ *   return (
+ *     <input
+ *       type="number"
+ *       value={xPosition.toFixed(2)} // Display the value formatted to 2 decimal places
+ *       onChange={(e) => setXPosition(parseFloat(e.target.value))}
+ *     />
+ *   );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this example, `useScaledValue` is used to manage a measurement input in a dynamic unit system.
+ * The component fetches the conversion scale from the backend upon component mounting and updates the
+ * input display accordingly. The user's input is converted back to the base unit before being processed.
+ */
+export declare function useScaledValue(initialValue: number, scale: number, offset?: number): UseScaledValueReturn;
+export {};

package/dist/hooks/useScaledValue.js

@@ -0,0 +1 @@
+import{useCallback,useState}from"react";export const kMillimeters2Inches=1/25.4;export function useScaledValue(e,t,a=0){const[s,c]=useState(e*t+a);return[s,useCallback((e=>{c(e*t+a)}),[t,a])]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.19",
+    "version": "3.0.21",
     "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",