@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/OskDialog.tsx

@@ -1,165 +1,165 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Dialog } from 'primereact/dialog';
-import {Button} from "primereact/button";
-import { Osk } from './Osk';
-
-interface OskDialogProps {
-    isVisible: boolean;
-    onAccept?: (value: string) => void;
-    onReject?: () => void;
-    onChange?: (value: string) => void;
-    isNumPad?: boolean;
-    maxWidth?: number;
-    input?: string;
-    label?: string;
-    description?: string;
-    inputPattern?: RegExp;
-    textMode?: boolean;
-    minValue?: number;
-    maxValue?: number;
-    minLength?: number;
-}
-
-interface OskDialogState {
-    input: string;
-    errorMessage: string;
-}
-
-export class OskDialog extends React.Component<OskDialogProps, OskDialogState> {
-    private container: HTMLDivElement | null = null;
-
-    constructor(props: OskDialogProps) {
-        super(props);
-        this.state = {
-            input: props.input || "",
-            errorMessage: ""
-        };
-    }
-
-    componentWillUnmount() {
-        if (this.container) {
-            document.body.removeChild(this.container);
-        }
-    }
-
-    checkValue = (value: string): string => {
-        // Checks the value against settings and returns an error message
-        // if invalid. If the value is valid and should be accepted,
-        // a blank error message is returned.
-
-        var ok = true;
-
-        if (value !== undefined && value !== null && value.length > 0) {
-
-            if (this.props.inputPattern !== undefined) {
-                ok = this.props.inputPattern.test(value);
-            }
-            else if (!this.props.textMode) {
-
-                if (value.length < 0)
-                    ok = false;
-
-                if (isNaN(parseFloat(value)))
-                    ok = false;
-
-
-                var checkValue = parseFloat(value);
-
-                if (this.props.minValue !== undefined && this.props.minValue !== null) {
-                    if (checkValue < this.props.minValue)
-                        ok = false;
-
-                }
-
-                if (this.props.maxValue !== undefined && this.props.maxValue !== null) {
-                    if (checkValue > this.props.maxValue)
-                        ok = false;
-                }
-            }
-            else {
-                if (this.props.minLength !== undefined
-                    && value.length < this.props.minLength
-                ) {
-                    ok = false;
-                }
-            }
-        }
-        else {
-            ok = false;
-        }
-
-        if (ok) {
-            return "";
-        }
-        else {
-            return "Invalid value.";
-        }
-    }
-
-    onAccepted = () => {
-        const error = this.checkValue(this.state.input);
-        if (!error) {
-            this.props.onAccept?.(this.state.input);
-            this.closeDialog();
-        } else {
-            this.setState({ errorMessage: error });
-        }
-    }
-
-    onChanged = (val: string) => {
-        this.setState({ input: val, errorMessage: "" });
-        if (this.props.onChange) {
-            this.props.onChange(val);
-        }
-    }
-
-    closeDialog = () => {
-        if (this.container) {
-            ReactDOM.unmountComponentAtNode(this.container);
-            this.container = null;
-        }
-        this.props.onReject?.();
-    }
-
-    show = () => {
-        if (!this.container) {
-            this.container = document.createElement('div');
-            document.body.appendChild(this.container);
-        }
-
-        const footerContent = (
-            <div>
-                <Button label="Cancel" icon="pi pi-times" onClick={() => this.closeDialog()} className="p-button-text" />
-                <Button label="Accept" icon="pi pi-check" onClick={() => this.onAccepted()} autoFocus />
-            </div>
-        );
-
-
-        ReactDOM.render(
-            <Dialog
-                visible={this.props.isVisible}
-                onHide={this.closeDialog}
-                header={this.props.label}
-                style={{ width: this.props.maxWidth || '50vw' }}
-                footer={footerContent}
-            >
-                <Osk
-                    onChange={this.onChanged}
-                    isNumPad={this.props.isNumPad}
-                    inputPattern={this.props.inputPattern}
-                    input={this.state.input}
-                />
-                {this.state.errorMessage && <div className="error-message">{this.state.errorMessage}</div>}
-            </Dialog>,
-            this.container
-        );
-    }
-
-    render() {
-        // The actual rendering is handled by the show method.
-        return null;
-    }
-}
-
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Dialog } from 'primereact/dialog';
+import {Button} from "primereact/button";
+import { Osk } from './Osk';
+
+interface OskDialogProps {
+    isVisible: boolean;
+    onAccept?: (value: string) => void;
+    onReject?: () => void;
+    onChange?: (value: string) => void;
+    isNumPad?: boolean;
+    maxWidth?: number;
+    input?: string;
+    label?: string;
+    description?: string;
+    inputPattern?: RegExp;
+    textMode?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    minLength?: number;
+}
+
+interface OskDialogState {
+    input: string;
+    errorMessage: string;
+}
+
+export class OskDialog extends React.Component<OskDialogProps, OskDialogState> {
+    private container: HTMLDivElement | null = null;
+
+    constructor(props: OskDialogProps) {
+        super(props);
+        this.state = {
+            input: props.input || "",
+            errorMessage: ""
+        };
+    }
+
+    componentWillUnmount() {
+        if (this.container) {
+            document.body.removeChild(this.container);
+        }
+    }
+
+    checkValue = (value: string): string => {
+        // Checks the value against settings and returns an error message
+        // if invalid. If the value is valid and should be accepted,
+        // a blank error message is returned.
+
+        var ok = true;
+
+        if (value !== undefined && value !== null && value.length > 0) {
+
+            if (this.props.inputPattern !== undefined) {
+                ok = this.props.inputPattern.test(value);
+            }
+            else if (!this.props.textMode) {
+
+                if (value.length < 0)
+                    ok = false;
+
+                if (isNaN(parseFloat(value)))
+                    ok = false;
+
+
+                var checkValue = parseFloat(value);
+
+                if (this.props.minValue !== undefined && this.props.minValue !== null) {
+                    if (checkValue < this.props.minValue)
+                        ok = false;
+
+                }
+
+                if (this.props.maxValue !== undefined && this.props.maxValue !== null) {
+                    if (checkValue > this.props.maxValue)
+                        ok = false;
+                }
+            }
+            else {
+                if (this.props.minLength !== undefined
+                    && value.length < this.props.minLength
+                ) {
+                    ok = false;
+                }
+            }
+        }
+        else {
+            ok = false;
+        }
+
+        if (ok) {
+            return "";
+        }
+        else {
+            return "Invalid value.";
+        }
+    }
+
+    onAccepted = () => {
+        const error = this.checkValue(this.state.input);
+        if (!error) {
+            this.props.onAccept?.(this.state.input);
+            this.closeDialog();
+        } else {
+            this.setState({ errorMessage: error });
+        }
+    }
+
+    onChanged = (val: string) => {
+        this.setState({ input: val, errorMessage: "" });
+        if (this.props.onChange) {
+            this.props.onChange(val);
+        }
+    }
+
+    closeDialog = () => {
+        if (this.container) {
+            ReactDOM.unmountComponentAtNode(this.container);
+            this.container = null;
+        }
+        this.props.onReject?.();
+    }
+
+    show = () => {
+        if (!this.container) {
+            this.container = document.createElement('div');
+            document.body.appendChild(this.container);
+        }
+
+        const footerContent = (
+            <div>
+                <Button label="Cancel" icon="pi pi-times" onClick={() => this.closeDialog()} className="p-button-text" />
+                <Button label="Accept" icon="pi pi-check" onClick={() => this.onAccepted()} autoFocus />
+            </div>
+        );
+
+
+        ReactDOM.render(
+            <Dialog
+                visible={this.props.isVisible}
+                onHide={this.closeDialog}
+                header={this.props.label}
+                style={{ width: this.props.maxWidth || '50vw' }}
+                footer={footerContent}
+            >
+                <Osk
+                    onChange={this.onChanged}
+                    isNumPad={this.props.isNumPad}
+                    inputPattern={this.props.inputPattern}
+                    input={this.state.input}
+                />
+                {this.state.errorMessage && <div className="error-message">{this.state.errorMessage}</div>}
+            </Dialog>,
+            this.container
+        );
+    }
+
+    render() {
+        // The actual rendering is handled by the show method.
+        return null;
+    }
+}
+
 export default OskDialog;

package/src/components/ProgressBarWithValue.css

@@ -1,27 +1,27 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-04-27 12:46:35
- * -----
- * Last Modified: 2024-04-27 13:10:43
- * -----
- * 
- */
-
-
-
- .custom-progress-bar {
-    position: relative;
-    width: 100%; /* Ensure the progress bar fills the container */
-  }
-  
-  .centered-value {
-    position: absolute;
-    width: 100%; 
-    text-align: center;
-    font-weight: 600;   
-    z-index: 10; 
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%); /* Centering magic */
-  }
-
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:35
+ * -----
+ * Last Modified: 2024-04-27 13:10:43
+ * -----
+ * 
+ */
+
+
+
+ .custom-progress-bar {
+    position: relative;
+    /* Width controlled by parent container */
+  }
+  
+  .centered-value {
+    position: absolute;
+    width: 100%; 
+    text-align: center;
+    font-weight: 600;   
+    z-index: 10; 
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* Centering magic */
+  }
+

package/src/components/ProgressBarWithValue.tsx

@@ -1,49 +1,49 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-04-27 12:46:15
- * -----
- * Last Modified: 2024-04-27 13:25:56
- * -----
- * 
- */
-
-
-import React from 'react';
-import { ProgressBar } from 'primereact/progressbar';
-import './ProgressBarWithValue.css'; // Import your custom CSS
-
-interface ProgressBarWithValueProps {
-    value: number;
-    max?: number;
-    label? : string;
-}
-
-export const ProgressBarWithValue: React.FC<ProgressBarWithValueProps> = ({ value, max, label }) => {
-    let progressValue = value;
-    let indeterminate = false;
-
-    if (max !== undefined) {
-        if (max > 0) {
-            progressValue = (value / max) * 100; // Calculate percentage
-        } 
-        else { // max === 0
-            progressValue = 0;
-            indeterminate = true;
-        }
-    }
-
-    return (
-        <div className="custom-progress-bar">
-            <ProgressBar
-                showValue={false}
-                value={progressValue}
-                mode={indeterminate ? 'indeterminate' : 'determinate'}
-            />
-            <div className="centered-value">
-                {label ? `${label} ` : ''} {value} {max ? `of ${max}` : ''}
-            </div>
-        </div>
-    );
-};
-
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-27 12:46:15
+ * -----
+ * Last Modified: 2024-04-27 13:25:56
+ * -----
+ * 
+ */
+
+
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+import './ProgressBarWithValue.css'; // Import your custom CSS
+
+interface ProgressBarWithValueProps {
+    value: number;
+    max?: number;
+    label? : string;
+}
+
+export const ProgressBarWithValue: React.FC<ProgressBarWithValueProps> = ({ value, max, label }) => {
+    let progressValue = value;
+    let indeterminate = false;
+
+    if (max !== undefined) {
+        if (max > 0) {
+            progressValue = (value / max) * 100; // Calculate percentage
+        } 
+        else { // max === 0
+            progressValue = 0;
+            indeterminate = true;
+        }
+    }
+
+    return (
+        <div className="custom-progress-bar">
+            <ProgressBar
+                showValue={false}
+                value={progressValue}
+                mode={indeterminate ? 'indeterminate' : 'determinate'}
+            />
+            <div className="centered-value">
+                {label ? `${label} ` : ''} {value} {max ? `of ${max}` : ''}
+            </div>
+        </div>
+    );
+};
+
 export default ProgressBarWithValue;