@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/Lamp.tsx

@@ -1,243 +1,243 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 14:39:41
- * -----
- * Last Modified: 2025-09-05 14:51:51
- * -----
- * 
- */
-
-
-
-// import { useContext } from 'react';
-// import clsx from 'clsx';
-
-// import DimensionsContext from '../core/DimensionsContext';
-
-
-
-// /**
-//  * Displays boolean values<br/>
-//  * Supports 3 states: **on**, **off** and **invalid/not available**:
-//  */
-// const Indicator = ({
-//     value: value,
-//     x,
-//     y,
-//     width = 22,
-//     height = width,
-//     className,
-//     onColor: onColor = IndicatorGreen,
-//     offColor: offColor = IndicatorOff,
-//     invalidColor: invalidColor = IndicatorInvalid,
-//     useAbsolutePositioning = false, // Default to false
-// }: Props): JSX.Element => {
-//     const { scale, xOffset, yOffset } = useContext(DimensionsContext);
-
-//     let color;
-//     switch (value) {
-//         case true:
-//             color = onColor;
-//             break;
-//         case false:
-//             color = offColor;
-//             break;
-//         default:
-//             color = invalidColor;
-//             break;
-//     }
-
-//     return (
-//         <div
-//             className={clsx(className)}
-//             style={{
-//                 position: useAbsolutePositioning ? 'absolute' : 'relative',
-//                 display: useAbsolutePositioning ?  "": "inline-block",
-//                 verticalAlign: 'middle',
-//                 top: useAbsolutePositioning && y ? `${yOffset + scale * y}px` : undefined,
-//                 left: useAbsolutePositioning && x? `${xOffset + scale * x}px` : undefined,
-//                 width: width ? `${width * scale}px` : undefined,
-//                 height: height ? `${height * scale}px` : undefined,
-//                 lineHeight: height ? `${height * scale}px` : undefined,
-//                 backgroundColor: color,
-//                 borderRadius: "20px"
-//             }}
-//         />
-//     );
-// };
-
-// export { Indicator };
-
-
-
-
-import React, { Component } from 'react';
-import clsx from 'clsx';
-import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
-import type { IPositionContext } from '../core/PositionContext';
-import {IndicatorColor} from "../core/IndicatorColor";
-export {IndicatorColor}
-
-
-
-
-interface LampProps {
-    /**
-     * 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;
-    /**
-     * X position (in pixels)
-     */
-    x?: number;
-    /**
-     * Y position (in pixels)
-     */
-    y?: number;
-    /**
-     * Width (in pixels)
-     */
-    width?: number;
-    /**
-     * Height (in pixels)<br/>
-     * @default width
-     */
-    height?: number;
-    /**
-     * 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;
-
-
-    /**
-     * Enable absolute positioning for the component, allowing it to be
-     * placed on a specific position of its parent. This is useful when
-     * laying components over an image or wireframe.
-     */
-    useAbsolutePositioning?: boolean;
-
-    /**
-     * The topic to monitor to display. Optional. 
-     */
-    topic?: string;
-}
-
-
-interface LampState {
-    subscribedValue?: boolean | null;
-    fontSize?: string;
-}
-
-
-export class Lamp extends Component<LampProps, LampState> {
-    static contextType = EventEmitterContext;
-    protected unsubscribeTopicId: number | null = null;
-
-    // Define default properties
-    static defaultProps = {
-        width: 22,
-        height: 22,
-        onColor: "green",
-        offColor: "gray",
-        invalidColor: "black",
-        useAbsolutePositioning: false
-    };
-
-    constructor(props: LampProps) {
-        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: LampProps) {
-        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 { x, y, width, height, className, onColor, offColor, invalidColor, useAbsolutePositioning } = this.props;
-        const { scale, xOffset, yOffset } = this.context as IPositionContext;
-        const { subscribedValue } = this.state;
-
-        let adjWidth = width || 10;
-        if (adjWidth < 10)
-            adjWidth = 10;
-        let adjHeight = height || 10;
-        if (adjHeight < 10)
-            adjHeight = 10;
-        let adjScale = scale || 1;
-        if (adjScale === 0)
-            adjScale = 1;
-
-        let color;
-        switch (subscribedValue) {
-            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"
-        };
-
-        return (
-            <div className={clsx(className)} style={style} />
-        );
-    }
-}
-
-export default Lamp;
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:39:41
+ * -----
+ * Last Modified: 2025-09-05 14:51:51
+ * -----
+ * 
+ */
+
+
+
+// import { useContext } from 'react';
+// import clsx from 'clsx';
+
+// import DimensionsContext from '../core/DimensionsContext';
+
+
+
+// /**
+//  * Displays boolean values<br/>
+//  * Supports 3 states: **on**, **off** and **invalid/not available**:
+//  */
+// const Indicator = ({
+//     value: value,
+//     x,
+//     y,
+//     width = 22,
+//     height = width,
+//     className,
+//     onColor: onColor = IndicatorGreen,
+//     offColor: offColor = IndicatorOff,
+//     invalidColor: invalidColor = IndicatorInvalid,
+//     useAbsolutePositioning = false, // Default to false
+// }: Props): JSX.Element => {
+//     const { scale, xOffset, yOffset } = useContext(DimensionsContext);
+
+//     let color;
+//     switch (value) {
+//         case true:
+//             color = onColor;
+//             break;
+//         case false:
+//             color = offColor;
+//             break;
+//         default:
+//             color = invalidColor;
+//             break;
+//     }
+
+//     return (
+//         <div
+//             className={clsx(className)}
+//             style={{
+//                 position: useAbsolutePositioning ? 'absolute' : 'relative',
+//                 display: useAbsolutePositioning ?  "": "inline-block",
+//                 verticalAlign: 'middle',
+//                 top: useAbsolutePositioning && y ? `${yOffset + scale * y}px` : undefined,
+//                 left: useAbsolutePositioning && x? `${xOffset + scale * x}px` : undefined,
+//                 width: width ? `${width * scale}px` : undefined,
+//                 height: height ? `${height * scale}px` : undefined,
+//                 lineHeight: height ? `${height * scale}px` : undefined,
+//                 backgroundColor: color,
+//                 borderRadius: "20px"
+//             }}
+//         />
+//     );
+// };
+
+// export { Indicator };
+
+
+
+
+import React, { Component } from 'react';
+import clsx from 'clsx';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
+import type { IPositionContext } from '../core/PositionContext';
+import {IndicatorColor} from "../core/IndicatorColor";
+export {IndicatorColor}
+
+
+
+
+interface LampProps {
+    /**
+     * 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;
+    /**
+     * X position (in pixels)
+     */
+    x?: number;
+    /**
+     * Y position (in pixels)
+     */
+    y?: number;
+    /**
+     * Width (in pixels)
+     */
+    width?: number;
+    /**
+     * Height (in pixels)<br/>
+     * @default width
+     */
+    height?: number;
+    /**
+     * 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;
+
+
+    /**
+     * Enable absolute positioning for the component, allowing it to be
+     * placed on a specific position of its parent. This is useful when
+     * laying components over an image or wireframe.
+     */
+    useAbsolutePositioning?: boolean;
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+}
+
+
+interface LampState {
+    subscribedValue?: boolean | null;
+    fontSize?: string;
+}
+
+
+export class Lamp extends Component<LampProps, LampState> {
+    static contextType = EventEmitterContext;
+    protected unsubscribeTopicId: number | null = null;
+
+    // Define default properties
+    static defaultProps = {
+        width: 22,
+        height: 22,
+        onColor: "green",
+        offColor: "gray",
+        invalidColor: "black",
+        useAbsolutePositioning: false
+    };
+
+    constructor(props: LampProps) {
+        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: LampProps) {
+        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 { x, y, width, height, className, onColor, offColor, invalidColor, useAbsolutePositioning } = this.props;
+        const { scale, xOffset, yOffset } = this.context as IPositionContext;
+        const { subscribedValue } = this.state;
+
+        let adjWidth = width || 10;
+        if (adjWidth < 10)
+            adjWidth = 10;
+        let adjHeight = height || 10;
+        if (adjHeight < 10)
+            adjHeight = 10;
+        let adjScale = scale || 1;
+        if (adjScale === 0)
+            adjScale = 1;
+
+        let color;
+        switch (subscribedValue) {
+            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"
+        };
+
+        return (
+            <div className={clsx(className)} style={style} />
+        );
+    }
+}
+
+export default Lamp;