@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/Indicator.tsx

@@ -1,188 +1,188 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 14:39:41
- * -----
- * Last Modified: 2025-09-05 14:52:12
- * -----
- * 
- */
-
-
-import React, { Component } from 'react';
-//import clsx from 'clsx';
-import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
-//import { IPositionContext } from '../core/PositionContext';
-import {IndicatorColor} from "../core/IndicatorColor";
-export {IndicatorColor}
-
-//import {Lamp} from "./Lamp";
-
-
-
-
-interface IndicatorProps {
-
-
-    /**
-     * Label of the group/row. Can be any element.
-     * 
-     * ## Examples
-     * ```
-     * <Indicator label="Simple Text" />
-     * <Indicator label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
-     * <Indicator label={<YourCustomIconComponent />} />
-     * ```
-     */
-    label? : React.ReactNode;
-
-
-    /**
-     * State to be displayed<br/>
-     *
-     * Available states: **on**, **off** and **not available**:
-     *
-     * * `true` is treated as **on**
-     * * `false` is treated as **off**
-     * * `undefined` is treated as **not available**
-     */
-    value?: boolean | undefined;
-    /**
-     * CSS color for **enabled** state
-     */
-    onColor?: string;
-    /**
-     * CSS color for **disabled** state
-     */
-    offColor?: string;
-    /**
-     * CSS color for **not available** state
-     */
-    invalidColor?: string;
-    /**
-     * Custom class name to be attached
-     */
-    className?: string;
-
-    /**
-     * The topic to monitor to display. Optional. 
-     */
-    topic?: string;
-
-
-}
-
-
-interface IndicatorState {
-    subscribedValue?: boolean | null;
-    fontSize?: string;
-}
-
-
-export class Indicator extends Component<IndicatorProps, IndicatorState> {
-    static contextType = EventEmitterContext;
-    protected unsubscribeTopicId: number | null = null;
-
-    // Define default properties
-    static defaultProps = {
-        onColor: "green",
-        offColor: "gray",
-        invalidColor: "black"
-    };
-
-    constructor(props: IndicatorProps) {
-        super(props);
-        this.state = {
-            subscribedValue: props.value,
-            fontSize: "100%"
-        };
-    }
-
-    componentDidMount() {
-        const { topic } = this.props;
-        if (topic && this.unsubscribeTopicId === null) {
-            const { subscribe } = this.context as EventEmitterContextType;
-            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
-                this.setState({ subscribedValue: value });
-            });
-        }
-    }
-
-    componentDidUpdate(prevProps: IndicatorProps) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ subscribedValue: this.props.value });
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.unsubscribeTopicId !== null) {
-            const { unsubscribe } = this.context as EventEmitterContextType;
-            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 : React.CSSProperties = {
-            alignItems: "center !important"
-        };
-
-        const lampDivStyle : React.CSSProperties = {
-            backgroundColor: color,
-            width: "22px"
-        };
-
-        return (
-
-            <div className="p-inputgroup flex-1" style={groupStyle} >
-                <span className="p-inputgroup-addon" style={lampDivStyle} >
-                    &nbsp;
-                </span>
-                <span className="p-inputgroup-addon">
-                    {label}
-                </span>
-            </div>
-
-        );
-    }
-}
-
-export default Indicator;
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:39:41
+ * -----
+ * Last Modified: 2025-09-05 14:52:12
+ * -----
+ * 
+ */
+
+
+import React, { Component } from 'react';
+//import clsx from 'clsx';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
+//import { IPositionContext } from '../core/PositionContext';
+import {IndicatorColor} from "../core/IndicatorColor";
+export {IndicatorColor}
+
+//import {Lamp} from "./Lamp";
+
+
+
+
+interface IndicatorProps {
+
+
+    /**
+     * Label of the group/row. Can be any element.
+     * 
+     * ## Examples
+     * ```
+     * <Indicator label="Simple Text" />
+     * <Indicator label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
+     * <Indicator label={<YourCustomIconComponent />} />
+     * ```
+     */
+    label? : React.ReactNode;
+
+
+    /**
+     * State to be displayed<br/>
+     *
+     * Available states: **on**, **off** and **not available**:
+     *
+     * * `true` is treated as **on**
+     * * `false` is treated as **off**
+     * * `undefined` is treated as **not available**
+     */
+    value?: boolean | undefined;
+    /**
+     * CSS color for **enabled** state
+     */
+    onColor?: string;
+    /**
+     * CSS color for **disabled** state
+     */
+    offColor?: string;
+    /**
+     * CSS color for **not available** state
+     */
+    invalidColor?: string;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+
+
+}
+
+
+interface IndicatorState {
+    subscribedValue?: boolean | null;
+    fontSize?: string;
+}
+
+
+export class Indicator extends Component<IndicatorProps, IndicatorState> {
+    static contextType = EventEmitterContext;
+    protected unsubscribeTopicId: number | null = null;
+
+    // Define default properties
+    static defaultProps = {
+        onColor: "green",
+        offColor: "gray",
+        invalidColor: "black"
+    };
+
+    constructor(props: IndicatorProps) {
+        super(props);
+        this.state = {
+            subscribedValue: props.value,
+            fontSize: "100%"
+        };
+    }
+
+    componentDidMount() {
+        const { topic } = this.props;
+        if (topic && this.unsubscribeTopicId === null) {
+            const { subscribe } = this.context as EventEmitterContextType;
+            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
+                this.setState({ subscribedValue: value });
+            });
+        }
+    }
+
+    componentDidUpdate(prevProps: IndicatorProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ subscribedValue: this.props.value });
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeTopicId !== null) {
+            const { unsubscribe } = this.context as EventEmitterContextType;
+            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 : React.CSSProperties = {
+            alignItems: "center !important"
+        };
+
+        const lampDivStyle : React.CSSProperties = {
+            backgroundColor: color,
+            width: "22px"
+        };
+
+        return (
+
+            <div className="p-inputgroup" style={groupStyle} >
+                <span className="p-inputgroup-addon" style={lampDivStyle} >
+                    &nbsp;
+                </span>
+                <span className="p-inputgroup-addon">
+                    {label}
+                </span>
+            </div>
+
+        );
+    }
+}
+
+export default Indicator;