Add toggles input component

2022-03-08 17:36:26 +08:00
parent 212c149b34
commit 47e3c973fb
5 changed files with 129 additions and 9 deletions
@@ -0,0 +1,63 @@
+@import "../Theme/Theme.scss";
+
+$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;
+		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.dark.toggles-input {
+
+    div.toggles-content div.checkbox {
+        background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+    }
+
+	div.toggles-content div.checkbox:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.toggles-input {
+
+    div.toggles-content div.checkbox {
+        background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+    }
+
+	div.toggles-content div.checkbox:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}
@@ -0,0 +1,45 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./TogglesInput.scss";
+
+interface ITogglesInputProps {
+    keyI18n: AllI18nKeys;
+    infoI18n?: AllI18nKeys;
+    value?: boolean;
+    disable?: boolean;
+    valueChange?: (color: boolean) => any;
+}
+
+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"
+                    style={{
+                        cursor: this.props.disable ? "not-allowed" : "pointer"
+                    }}
+                    onClick={(() => {
+                        if (this.props.disable) {
+                            return;
+                        }
+                        if (this.props.valueChange) {
+                            this.props.valueChange(!this.props.value);
+                        }
+                    })}
+                >
+                    <Icon iconName="CheckMark" style={{
+                        display: this.props.value ? "inline-block" : "none"
+                    }}></Icon>
+                </div>    
+            </div>
+        </Theme>
+    }
+}
+
+export { TogglesInput };