Recode label picker & object picker & toggle input with text field component

source/Component/TogglesInput/TogglesInput.scss

@@ -3,62 +3,40 @@
 $line-min-height: 26px;
 
 div.toggles-input {
-	width: 100%;
-	display: flex;
-	min-height: $line-min-height;
-	padding: 5px 0;
 
-	div.toggles-intro {
-		width: 50%;
-		height: 100%;
-		max-width: 220px;
-        min-height: $line-min-height;
-		display: flex;
-		align-items: center;
-        padding-right: 5px;
-        box-sizing: border-box;
-	}
-
-    div.toggles-content {
-        width: 50%;
-        height: 100%;
-        max-width: 180px;
-        min-height: $line-min-height;
-
-        div.checkbox {
-            width: $line-min-height;
-            height: $line-min-height;
-            overflow: hidden;
-            border-radius: 3px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            user-select: none;
-        }
+    div.checkbox {
+        width: $line-min-height;
+        height: $line-min-height;
+        overflow: hidden;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
     }
 }
 
-div.dark.toggles-input {
+div.dark.text-field-root {
 
-    div.toggles-content div.checkbox {
+    div.toggles-input div.checkbox {
         background-color: $lt-bg-color-lvl3-dark;
 		color: $lt-font-color-normal-dark;
     }
 
-	div.toggles-content div.checkbox:hover {
+	div.toggles-input div.checkbox:hover {
 		background-color: $lt-bg-color-lvl2-dark;
 	}
 }
 
-div.light.toggles-input {
+div.light.text-field-root {
 
-    div.toggles-content div.checkbox {
+    div.toggles-input div.checkbox {
         background-color: $lt-bg-color-lvl3-light;
 		color: $lt-font-color-normal-light;
     }
 
-	div.toggles-content div.checkbox:hover {
+	div.toggles-input div.checkbox:hover {
 		background-color: $lt-bg-color-lvl2-light;
 	}
 }

source/Component/TogglesInput/TogglesInput.tsx

@@ -1,14 +1,10 @@
-import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
-import { Theme } from "@Component/Theme/Theme";
 import { Icon } from "@fluentui/react";
 import { Component, ReactNode } from "react";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import "./TogglesInput.scss";
 
-interface ITogglesInputProps {
-    keyI18n: AllI18nKeys;
-    infoI18n?: AllI18nKeys;
+interface ITogglesInputProps extends ITextFieldProps {
     value?: boolean;
-    disable?: boolean;
     onIconName?: string;
     offIconName?: string;
     valueChange?: (value: boolean) => any;
@@ -16,39 +12,40 @@ interface ITogglesInputProps {
 
 class TogglesInput extends Component<ITogglesInputProps> {
     public render(): ReactNode {
-        return <Theme className="toggles-input">
-            <div className="toggles-intro">
-                <Localization i18nKey={this.props.keyI18n}/>
-            </div>
-            <div className="toggles-content">
-                <div
-                    className="checkbox"
+        return <TextField
+            {...this.props}
+            className="toggles-input"
+            keyI18n={this.props.keyI18n}
+            customHoverStyle
+            customStyle
+        >
+            <div
+                className="checkbox"
+                style={{
+                    cursor: this.props.disableI18n ? "not-allowed" : "pointer"
+                }}
+                onClick={(() => {
+                    if (this.props.disableI18n) {
+                        return;
+                    }
+                    if (this.props.valueChange) {
+                        this.props.valueChange(!this.props.value);
+                    }
+                })}
+            >
+                <Icon
+                    iconName={
+                        this.props.value ? 
+                            this.props.onIconName ?? "CheckMark" :
+                            this.props.offIconName ?? undefined
+                    }
                     style={{
-                        cursor: this.props.disable ? "not-allowed" : "pointer"
+                        display: this.props.value ? "inline-block" : 
+                            this.props.offIconName ? "inline-block" : "none"
                     }}
-                    onClick={(() => {
-                        if (this.props.disable) {
-                            return;
-                        }
-                        if (this.props.valueChange) {
-                            this.props.valueChange(!this.props.value);
-                        }
-                    })}
-                >
-                    <Icon
-                        iconName={
-                            this.props.value ? 
-                                this.props.onIconName ?? "CheckMark" :
-                                this.props.offIconName ?? undefined
-                        }
-                        style={{
-                            display: this.props.value ? "inline-block" : 
-                                this.props.offIconName ? "inline-block" : "none"
-                        }}
-                    ></Icon>
-                </div>    
-            </div>
-        </Theme>
+                />
+            </div>  
+        </TextField>;
     }
 }