@adcops/autocore-react 3.0.3 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -11,7 +11,7 @@
         "generate-docs": "typedoc",
         "build": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs && npm run minify",
         "prestart": "tsc",
-        "publish-package": "npm run build && npm version patch && npm run generate-docs && npm publish",
+        "publish-package": "npm run build && npm version patch && npm publish",
         "release:patch": "npm version patch && npm publish",
         "release:minor": "npm version minor && npm publish",
         "release:major": "npm version major && npm publish",

package/src/components/JogPanel.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 13:17:23
   * -----
- * Last Modified: 2024-03-19 21:20:59
+ * Last Modified: 2024-03-20 13:16:29
  * -----
  * 
  */
@@ -122,15 +122,18 @@ interface JogPanelState {
 
 
 /**
- * Default X, Y, Z configuration.
+ * A default jog button configuration for linear 3D motion.
  */
-export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+export const DefaultLinearJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
     [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
     [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
     [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
 ];
 
-export const kRotationButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+/**
+ * A default jog button configuration for rotational 3D motion.
+ */
+export const DefaultRotationJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
     [{ icon: "pi", action: JogPanelAction.bPositive, alt: "Rot B Positive" }, { icon: "pi", action: JogPanelAction.cPositive, alt: "Rot C Positive" }, undefined],
     [{ icon: "pi", action: JogPanelAction.aNegative, alt: "Rot A Negative" }, undefined, { icon: "pi", action: JogPanelAction.aPositive, alt: "Rot A Positive" }],
     [undefined, { icon: "pi", action: JogPanelAction.cNegative, alt: "Rot C Negative" }, { icon: "pi ", action: JogPanelAction.bNegative, alt: "Rot B Negative" }],
@@ -165,7 +168,7 @@ export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
     static defaultProps : JogPanelProps = {
         onClicked: undefined,
         onJogDistanceChanged: undefined,
-        buttonDefinitions: kDefaultButtonDefinitions,
+        buttonDefinitions: DefaultLinearJogButtons,
         defaultJogDistance : JogDistanceAction.Short,
         defaultJogSpeed : JogSpeedAction.Medium,
         showDistanceControl : true,

package/src/components/ValueInput.tsx

@@ -0,0 +1,261 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-20 13:05:42
+ * -----
+ * Last Modified: 2024-03-20 16:22:06
+ * -----
+ * 
+ */
+
+
+import React from "react";
+
+import { InputText } from 'primereact/inputtext';
+import { Button } from "primereact/button";
+
+import { EventEmitterContext } from "../core/EventEmitterContext.js";
+import { KeyFilterType } from "primereact/keyfilter";
+
+/**
+ * Properties of the Configuration View
+ */
+interface ValueInputProps {
+
+    /**
+     * The label for the ValueInput field.
+     */
+    label : React.ReactNode | undefined;
+
+
+    /**
+     * The value for the field.
+     */
+    value : string | undefined;
+
+
+    /** 
+     * Optional filter for key entry. Not a validator, but won't accept keystrokes outside the filter. 
+     * @type {RegExp | "pint" | "int" | "pnum" | "money" | "num" | "hex" | "email" | "alpha" | "alphanum"}
+     */
+    keyFilter : KeyFilterType | undefined;
+    
+    
+    /**
+     * An optional prefix before the data entry field.
+     */
+    prefix : React.ReactNode | undefined;
+
+    /**
+     * An optional prefix before the data entry field.
+     */
+    suffix : React.ReactNode | undefined;
+
+    /**
+     * A small, advisory text below the field.
+     */
+    description : React.ReactNode | undefined;
+
+    /**
+     * If true, all functions of the field will be disabled.
+     */
+    disabled : boolean | undefined;
+    
+    /** Topic on which the value will be dispatched through the user interfave on successful data entry. */
+    dispatchTopic : string | undefined;
+
+    /**
+     * Placeholder string to display if the value is empty.
+     */
+    placeholder : string | undefined;
+
+    /**
+     * The user has accepted a new value.
+     * @param newValue New value accepted by the user.
+     */ 
+    onValueChanged?(newValue: string) : void;
+    /** Regular expression used to validate the value before it is broadcast */
+    validator : RegExp;
+}
+
+/**
+ * State variables of the Configuration View
+ */
+interface ValueInputState {
+    
+    entryValue : string | undefined;
+    isValid : boolean;
+    editing : boolean;
+}
+
+
+/**
+ * A convenient field with all the usual features of inputing values. 
+ * Wraps the common features of use of a InputText, p-inputgroup, some icon buttons,
+ * accepting and rejecting values and keyboard management.
+ */
+export class ValueInput extends React.Component<ValueInputProps, ValueInputState> {
+
+    // Here's an example of using the Application-wide EventEmitter con
+    // Define the contextType for the class to access the context
+    static contextType = EventEmitterContext;
+    // After specifying contextType, you can declare the context's type for the TypeScript compiler.
+    // Basically, we're telling TypeScript the type of the context; this line doesn't
+    // actually do any linking linking to the EventEmitterContext.    
+    declare context: React.ContextType<typeof EventEmitterContext>;
+
+
+    
+
+    /**
+     * Default properties for the component.
+     */
+    static defaultProps = {
+        label : '',        
+        value : undefined,
+        keyFilter : undefined,
+        writeTopic : undefined,
+        onValueChanged : undefined,
+        description: undefined,
+        prefix: undefined,
+        suffix : undefined,
+        disabled : false,
+        dispatchTopic : undefined,
+        placeholder : undefined,
+        validator : undefined
+    };
+
+    /**
+     * 
+     * @param {FooterViewProps} props 
+     */
+    constructor(props : ValueInputProps) {
+        super(props);
+        this.state = {
+            entryValue : props.value,
+            isValid : props.value !== undefined ? this.validateValue(props.value) : false,
+            editing : false
+        };
+    }
+
+    /**
+     * The component has been loaded into the DOM.
+     */
+    componentDidMount() {        
+    }    
+
+    
+
+    /**
+     * Check the new value against the validator RegEx, if one was specified.
+     * @param val The new value.
+     * @returns True if no validator specified or the value is valid, false if not valid.
+     */
+    private validateValue = (val : string) => {
+
+        if (this.props.validator !== undefined && this.props.validator !== null) {
+            return this.props.validator.test(val);
+        }
+        else {
+            return true;
+        }
+        
+    };    
+
+
+    /**
+     * The user has elected to accept the input value. Validate and store, if valid.
+     */
+    private onAcceptValue() {
+        if (this.state.entryValue !== undefined ) {
+            if (this.validateValue(this.state.entryValue) ) {
+                this.setState({isValid : true, editing : false});
+                
+                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});
+                }
+
+            }
+            else {
+                this.setState({isValid : false});            
+            }    
+        }
+        else {
+            this.setState({isValid: false});            
+        }
+    }
+
+    /**
+     * The user wishes to reset/cancel the previous value.
+     */
+    private onResetValue() {
+        this.setState({
+            entryValue: this.props.value, 
+            isValid: this.props.value !== undefined ? this.validateValue(this.props.value) : false,
+            editing : false
+        });
+    }
+
+
+    render() {
+
+        return(
+            <div>
+                <div className="p-inputgroup flex-1" >
+                    <span className="p-inputgroup-addon">
+                        {this.props.label}
+                    </span>
+                    { this.props.prefix !== undefined && 
+                        <span className="p-inputgroup-addon">
+                            {this.props.prefix}
+                        </span>
+                    }                    
+                    <InputText 
+                        keyfilter={this.props.keyFilter}                         
+                        placeholder={this.props.placeholder} 
+                        value={this.state.entryValue}
+                        onChange={(e) => {this.setState({entryValue: e.target.value, editing : true})} }
+                        className={this.state.isValid ? '' : 'p-invalid'}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                this.onAcceptValue();
+                            }
+                            else if (e.key === 'Escape') {
+                                this.onResetValue();
+                            }
+                        }}     
+                        disabled={this.props.disabled}                   
+                    />
+                    { this.props.suffix !== undefined && 
+                        <span className="p-inputgroup-addon">
+                            {this.props.suffix}
+                        </span>
+                    }                    
+                    <Button 
+                        icon="pi pi-check" 
+                        disabled={this.props.disabled || !this.state.editing}
+                        className="p-button-success" 
+                        onClick={() => this.onAcceptValue()} 
+                    />
+
+                    <Button 
+                        icon="pi pi-times" 
+                        disabled={this.props.disabled || !this.state.editing}
+                        className="p-button-danger" 
+                        onClickCapture={()=>this.onResetValue()} 
+                    />
+                </div>
+                
+                {this.props.description !== undefined &&
+                    <small>{this.props.description}</small>
+                }
+                
+
+            </div>
+
+        );
+    }
+
+}

package/src/core/MaskPatterns.ts

@@ -45,7 +45,13 @@ export const RegExMaskPatterns = {
      * This pattern matches any positive integer without a decimal point, excluding negative numbers.
      * Examples of valid inputs: "123"
      */    
-    IntegerPositive: /^\d+$/
+    IntegerPositive: /^\d+$/,
+
+
+    /**
+     * Regular expression for matching IPV4 address.
+     */
+    Ipv4: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
 } as const;
 
 

package/docs/variables/components_JogPanel.kRotationButtonDefinitions.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>kRotationButtonDefinitions | autocore-react - v3.0.3</title><meta name="description" content="Documentation for autocore-react"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">autocore-react - v3.0.3</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">autocore-react</a></li><li><a href="../modules/components_JogPanel.html">components/JogPanel</a></li><li><a href="components_JogPanel.kRotationButtonDefinitions.html">kRotationButtonDefinitions</a></li></ul><h1>Variable kRotationButtonDefinitions<code class="tsd-tag ts-flagConst">Const</code> </h1></div><div class="tsd-signature"><span class="tsd-kind-variable">k<wbr/>Rotation<wbr/>Button<wbr/>Definitions</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><a href="../interfaces/components_JogPanel.JogPanelButtonDefinition.html" class="tsd-signature-type tsd-kind-interface">JogPanelButtonDefinition</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> = ...</span></div><aside class="tsd-sources"><ul><li>Defined in src/components/JogPanel.tsx:133</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>autocore-react - v3.0.3</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div></body></html>