use always Label component for Switch label

Author: haschek

CHANGELOG.md

@@ -37,6 +37,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ReactFlow />`
     -   property color for `graph` configuration was adjusted
+-   `<Switch />`
+    -   use always `<Label/>` component for `label` value
 
 ## [24.0.1] - 2025-02-06
 

src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);