Detach form components to a separate directory

2022-04-08 15:24:50 +08:00
parent 7556ea983e
commit 47d097e94a
61 changed files with 169 additions and 168 deletions
@@ -0,0 +1,46 @@
+@import "../../Component/Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.toggles-input {
+
+    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.red:hover {
+        color: $lt-red !important;
+    }
+}
+
+div.dark.text-field-root {
+
+    div.toggles-input div.checkbox {
+        background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+    }
+
+	div.toggles-input div.checkbox:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.text-field-root {
+
+    div.toggles-input div.checkbox {
+        background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+    }
+
+	div.toggles-input div.checkbox:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}
@@ -0,0 +1,53 @@
+import { Component, ReactNode } from "react";
+import { Icon } from "@fluentui/react";
+import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
+import "./TogglesInput.scss";
+
+interface ITogglesInputProps extends ITextFieldProps {
+    value?: boolean;
+    onIconName?: string;
+    offIconName?: string;
+    valueChange?: (value: boolean) => any;
+    red?: boolean;
+}
+
+class TogglesInput extends Component<ITogglesInputProps> {
+    public render(): ReactNode {
+        return <TextField
+            {...this.props}
+            className="toggles-input"
+            keyI18n={this.props.keyI18n}
+            customHoverStyle
+            customStyle
+        >
+            <div
+                className={"checkbox" + (this.props.red ? " red" : "")}
+                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={{
+                        display: this.props.value ? "inline-block" : 
+                            this.props.offIconName ? "inline-block" : "none"
+                    }}
+                />
+            </div>  
+        </TextField>;
+    }
+}
+
+export { TogglesInput };