@adcops/autocore-react 3.0.6 → 3.0.10

package/src/components/ValueIndicator.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:17:02
  * -----
- * Last Modified: 2024-03-21 15:24:54
+ * Last Modified: 2024-03-22 06:42:57
  * Modified By: ADC
  * -----
  * 
@@ -17,7 +17,7 @@ import { Tooltip } from "primereact/tooltip";
 import { ValueDisplay } from './ValueDisplay';
 import type { NumerableFormatOptions } from '../core/NumerableTypes';
 
-
+import "./ValueIndicator.css";
 
 
 /**
@@ -62,6 +62,12 @@ interface ValueIndicatorProps {
      * The topic to monitor to display. Optional. 
      */
     topic?: string;
+
+
+    /**
+     * Optional style properties.
+     */
+    style?: React.CSSProperties | undefined; 
 }
 
 /**
@@ -94,56 +100,34 @@ export class ValueIndicator extends Component<ValueIndicatorProps, ValueIndicato
      * Renders the component into the DOM.
      * @returns A styled `div` element displaying the indicator.
      */
-    render() {
 
 
+
+    render() {
+
         return (
-            <>
-                <style>
-                    {`
-                        .value-indicator-container {
-
-                            background-color: var(--surface-ground);
-                            border-color: var(--surface-border);
-                            border-radius: var(--border-radius);
-                            border-width: 1px;
-                            border-style: solid;
-                            display: flex;
-                            flex-direction: column;
-                            justify-content: center;
-                            align-items: center;
-                            padding: 2mm;
-                        }
-
-                        .value-indicator-label {
-                            padding-bottom: 1mm;
-                        }            
-                    `}'
-                </style>
-                <Tooltip target=".value-indicator-tooltip" />
-                <span className="value-indicator-tooltip" >
-                    <div className='value-indicator-container'>
-
-                        {this.props.label !== undefined &&
-                            <div className="value-indicator-label">
-                                {this.props.label}
-                            </div>
-                        }
-
-                        <ValueDisplay
-                            className={this.props.className}
-                            value={this.props.value}
-                            format={this.props.format}
-                            formatOptions={this.props.formatOptions}
-                            topic={this.props.topic}
-                            data-pr-tooltip={this.props.tooltip}
-                            data-pr-position="down"
-                            data-pr-mousetrack={true}
-                            data-pr-showDelay={2000}
-                        />
-                    </div>
-                </span>
-            </>
+            <div className='value-indicator-container' style={this.props.style}>
+                <Tooltip target=".value-indicator-container" />
+
+                    {this.props.label !== undefined &&
+                        <div className="value-indicator-label">
+                            {this.props.label}
+                        </div>
+                    }
+
+                    <ValueDisplay
+                        className={this.props.className}
+
+                        value={this.props.value}
+                        format={this.props.format}
+                        formatOptions={this.props.formatOptions}
+                        topic={this.props.topic}
+                        data-pr-tooltip={this.props.tooltip}
+                        data-pr-position="down"
+                        data-pr-mousetrack={true}
+                        data-pr-showDelay={2000}
+                    />
+            </div>            
         );
     }
 }

package/src/components/ValueInput.tsx

@@ -2,18 +2,18 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-03-20 13:05:42
  * -----
- * Last Modified: 2024-03-21 09:37:17
+ * Last Modified: 2024-04-16 19:06:17
  * -----
  * 
  */
 
 
-import React from "react";
+import React, { createRef } from "react";
 
-import { InputNumber} from 'primereact/inputnumber';
+import { InputNumber } from 'primereact/inputnumber';
 import { Button } from "primereact/button";
 
-import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { EventEmitterContext } from "../core/EventEmitterContext";
 
 /**
  * Properties of the ValueInput component.
@@ -23,23 +23,23 @@ interface ValueInputProps {
     /**
      * The label for the ValueInput field.
      */
-    label : React.ReactNode | undefined;
+    label: React.ReactNode | undefined;
 
 
     /**
      * The value for the field.
      */
-    value : number | null;
+    value: number | null;
 
     /**
      * 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
@@ -49,7 +49,7 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 0
      */
-    minPrecision : number | undefined;
+    minPrecision: number | undefined;
 
 
     /**
@@ -58,7 +58,7 @@ interface ValueInputProps {
      * the component will throw an error.
      * @default 3
      */
-    maxPrecision : number | undefined;
+    maxPrecision: number | undefined;
 
 
     /**
@@ -67,7 +67,7 @@ interface ValueInputProps {
      * currency type using the currency property.
      * @default "decimal"
      */
-    mode : "currency" | "decimal" | undefined;
+    mode: "currency" | "decimal" | undefined;
 
 
     /**
@@ -78,19 +78,19 @@ 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.
@@ -98,12 +98,12 @@ interface ValueInputProps {
      * 
      * @default false
      */
-    showButtons : boolean;
+    showButtons: boolean;
 
     /**
      * The amount clicking an increment/decrement buttion will change the value.
      */
-    step : number | undefined;
+    step: number | undefined;
 
 
     /**
@@ -112,40 +112,41 @@ interface ValueInputProps {
      * 
      * @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;
+     */
+    onValueChanged?(newValue: number): void;
 }
 
 /**
  * State variables of the ValueInput component.
  */
 interface ValueInputState {
-    
-    entryValue : number | null;
-    editing : boolean;
+
+    entryValue: number | null;
+    currentValue: number | null;
+    editing: boolean;
 }
 
 
@@ -165,67 +166,97 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
     declare context: React.ContextType<typeof EventEmitterContext>;
 
 
-    
+
 
     /**
      * Default properties for the component.
      */
     static defaultProps = {
-        label : '',        
-        value : undefined,
-        keyFilter : undefined,
-        writeTopic : undefined,
-        onValueChanged : undefined,
+        label: '',
+        value: undefined,
+        keyFilter: undefined,
+        writeTopic: undefined,
+        onValueChanged: undefined,
         description: undefined,
         prefix: undefined,
-        suffix : undefined,
-        disabled : false,
-        dispatchTopic : undefined,
-        placeholder : undefined,
-        validator : undefined,
-        min : undefined,
-        max : undefined,
-        minPrecision : 0,
-        maxPrecision : 3,
-        mode : "decimal",
-        showButtons : false,
-        step : 1,
-        locale : "en-US",
-        currency : "USD"
+        suffix: undefined,
+        disabled: false,
+        dispatchTopic: undefined,
+        placeholder: undefined,
+        validator: undefined,
+        min: undefined,
+        max: undefined,
+        minPrecision: 0,
+        maxPrecision: 3,
+        mode: "decimal",
+        showButtons: false,
+        step: 1,
+        locale: "en-US",
+        currency: "USD"
     };
+    inputRef: React.RefObject<HTMLInputElement>;
 
     /**
      * 
      * @param {FooterViewProps} props 
      */
-    constructor(props : ValueInputProps) {
+    constructor(props: ValueInputProps) {
         super(props);
         this.state = {
-            entryValue : props.value,
-            editing : false
+            entryValue: props.value,
+            currentValue: props.value,
+            editing: false
         };
+
+        this.inputRef = createRef();
     }
 
     /**
      * The component has been loaded into the DOM.
      */
-    componentDidMount() {        
-    }    
+    componentDidMount() {
+    }
+
+
+    private onBufferValue(val: number | null) {
+        if (val === null)
+            return;
 
-    
+        if (!this.state.editing) {
+            this.setState({
+                entryValue: this.state.currentValue,
+                editing: true
+            }, () => {
+
+                setTimeout(() => {
+                    if (this.inputRef.current) {
+                      this.inputRef.current.focus();
+                    }
+
+                  }, 0);
+
+            }
+            );
+        }
+        else {
+            this.setState({
+                entryValue: val
+            });
+        }
+    }
 
     /**
      * The user has elected to accept the input value. Validate and store, if valid.
      */
     private onAcceptValue() {
-        if (this.state.entryValue !== null ) {
-            this.setState({editing : false});
-            
+        if (this.state.entryValue !== null) {
+            this.setState({ editing: false, currentValue: this.state.entryValue });
+
             if (this.props.onValueChanged)
                 this.props.onValueChanged(this.state.entryValue);
 
             if (this.props.dispatchTopic !== undefined) {
-                this.context.dispatch({topic: this.props.dispatchTopic, payload:this.state.entryValue});
+                this.context.dispatch({ topic: this.props.dispatchTopic, payload: this.state.entryValue });
             }
 
         }
@@ -235,22 +266,29 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
      * The user wishes to reset/cancel the previous value.
      */
     private onResetValue() {
-        this.setState({
-            entryValue: this.props.value, 
-            editing : false
-        });
+
+        if (this.state.editing) {
+
+            this.setState({
+                currentValue: this.state.currentValue,
+                entryValue: this.state.currentValue,
+                editing: false
+            });
+        }
     }
 
 
     render() {
 
-        return(
+        return (
             <div>
                 <div className="p-inputgroup flex-1" >
                     <span className="p-inputgroup-addon">
                         {this.props.label}
-                    </span>                  
-                    <InputNumber                         
+                    </span>
+                    <InputNumber
+                        inputRef={this.inputRef}
+                        key={this.state.editing ? "editing" : "not-editing"}
                         min={this.props.min}
                         max={this.props.max}
                         minFractionDigits={this.props.minPrecision}
@@ -260,14 +298,14 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                         suffix={this.props.suffix}
                         showButtons={this.props.showButtons}
                         step={this.props.step}
-                        placeholder={this.props.placeholder} 
-                        value={this.state.entryValue}
-                        onChange={(e) => {this.setState({entryValue: e.value, editing : true})} }
+                        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" 
+                        decrementButtonClassName="p-button-danger"
+                        incrementButtonClassName="p-button-success"
+                        incrementButtonIcon="pi pi-plus"
                         decrementButtonIcon="pi pi-minus"
 
                         locale="en-US"
@@ -280,32 +318,35 @@ export class ValueInput extends React.Component<ValueInputProps, ValueInputState
                             else if (e.key === 'Escape') {
                                 this.onResetValue();
                             }
-                        }}     
-                        disabled={this.props.disabled}                                           
-                    />                  
-                    <Button 
-                        icon="pi pi-check" 
+                        }}
+                        disabled={this.props.disabled}
+                        autoFocus={false}
+                    />
+                    <Button
+                        icon="pi pi-check"
                         disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-success" 
-                        onClick={() => this.onAcceptValue()} 
+                        className="p-button-success"
+                        onClick={() => this.onAcceptValue()}
                         visible={this.state.editing}
                         size="small"
+                        autoFocus={false}
                     />
 
-                    <Button 
-                        icon="pi pi-times" 
+                    <Button
+                        icon="pi pi-times"
                         disabled={this.props.disabled || !this.state.editing}
-                        className="p-button-danger" 
-                        onClickCapture={()=>this.onResetValue()} 
+                        className="p-button-danger"
+                        onClickCapture={() => this.onResetValue()}
                         visible={this.state.editing}
                         size="small"
+                        autoFocus={false}
                     />
                 </div>
-                
+
                 {this.props.description !== undefined &&
                     <small>{this.props.description}</small>
                 }
-                
+
 
             </div>
 

package/src/core/EventEmitterContext.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-17 11:45:10
  * -----
- * Last Modified: 2024-03-08 10:20:46
+ * Last Modified: 2024-03-22 14:25:08
  * Modified By: ADC
  * -----
  * 
@@ -135,6 +135,9 @@ export interface EventEmitterContextType {
     getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];    
 }
 
+
+let globalSubscriptionId = 1; 
+
 /**
  * A global context for managing event emission and subscription.
  *
@@ -324,7 +327,8 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
 
     const subscribe = (topic: string, callback: React.Dispatch<any>) : number => {
 
-        const subscriptionId = state.nextSubscriptionId;
+        globalSubscriptionId += 1;
+        const subscriptionId = globalSubscriptionId; // state.nextSubscriptionId;
 
         setState(prevState => ({
             ...prevState,
@@ -332,7 +336,7 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
               ...prevState.subscriptions,
               [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
             },
-            nextSubscriptionId: prevState.nextSubscriptionId + 1
+            nextSubscriptionId: globalSubscriptionId + 1 // prevState.nextSubscriptionId + 1
           }));
         
           return subscriptionId;
@@ -357,7 +361,7 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ childr
             }
     
             return { ...prevState, subscriptions: newSubscriptions };
-        });
+        }); 
     };