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

2022-03-15 16:34:12 +08:00 · 2022-03-15 16:34:12 +08:00 · a25c8dd789
commit a25c8dd789
parent 0e79c09691
6 changed files with 139 additions and 248 deletions
--- a/source/Component/LabelPicker/LabelPicker.scss
+++ b/source/Component/LabelPicker/LabelPicker.scss
@ -2,31 +2,6 @@

 $line-min-height: 26px;

-div.label-picker-root {
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	min-height: $line-min-height;
-	padding: 5px 0;
-
-    div.input-intro {
-		width: 50%;
-		height: 100%;
-		min-height: $line-min-height;
-		max-width: 220px;
-		display: flex;
-		align-items: center;
-        padding-right: 5px;
-        box-sizing: border-box;
-	}
-
-    div.root-content {
-        width: 50%;
-        height: 100%;
-        max-width: 180px;
-        min-height: $line-min-height;
-        border-radius: 3px;
-        overflow: hidden;
-        display: flex;
-	}
+div.label-picker {
+    min-height: $line-min-height;
 }
--- a/source/Component/LabelPicker/LabelPicker.tsx
+++ b/source/Component/LabelPicker/LabelPicker.tsx
@ -1,14 +1,12 @@
-import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
 import { PickerList } from "../PickerList/PickerList";
 import { Label } from "@Model/Label";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { Component, ReactNode, createRef } from "react";
 import { LabelList } from "../LabelList/LabelList";
 import "./LabelPicker.scss"

-interface ILabelPickerProps {
-	keyI18n: AllI18nKeys;
-    infoI18n?: AllI18nKeys;
+interface ILabelPickerProps extends ITextFieldProps {
 	labels: Label[];
 	labelAdd?: (label: Label) => any;
 	labelDelete?: (label: Label) => any;
@ -47,47 +45,50 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
 		return res;
 	}

+    private renderPicker() {
+        return <PickerList
+            noData="Common.Attr.Key.Label.Picker.Nodata"
+            objectList={this.getOtherLabel()}
+            dismiss={() => {
+                this.setState({
+                    isPickerVisible: false
+                });
+            }}
+            clickObjectItems={(label) => {
+                if (label instanceof Label && this.props.labelAdd) {
+                    this.props.labelAdd(label)
+                }
+                this.setState({
+                    isPickerVisible: false
+                });
+            }}
+            target={this.addButtonRef}
+        />;
+    }
+
 	public render(): ReactNode {
-		return <div
-			className="label-picker-root"
-		>
-			<div className="input-intro">
-				<Localization i18nKey={this.props.keyI18n}/>
-			</div>
-			<div className="root-content">
-				<LabelList
-					addRef={this.addButtonRef}
-					labels={this.props.labels}
-					minHeight={26}
-					deleteLabel={(label) => {
-						this.props.labelDelete ? this.props.labelDelete(label) : 0;
-					}}
-					addLabel={() => {
-						this.setState({
-							isPickerVisible: true
-						});
-					}}
-				/>
-				{this.state.isPickerVisible ? <PickerList
-                    noData="Common.Attr.Key.Label.Picker.Nodata"
-					objectList={this.getOtherLabel()}
-					dismiss={() => {
-						this.setState({
-							isPickerVisible: false
-						});
-					}}
-					clickObjectItems={(label) => {
-						if (label instanceof Label && this.props.labelAdd) {
-							this.props.labelAdd(label)
-						}
-						this.setState({
-							isPickerVisible: false
-						});
-					}}
-					target={this.addButtonRef}
-				/> : null}
-			</div>
-		</div>
+		return <TextField
+            {...this.props}
+            className="label-picker"
+            customHoverStyle
+            customStyle
+            keyI18n={this.props.keyI18n}
+        >
+            <LabelList
+                addRef={this.addButtonRef}
+                labels={this.props.labels}
+                minHeight={26}
+                deleteLabel={(label) => {
+                    this.props.labelDelete ? this.props.labelDelete(label) : 0;
+                }}
+                addLabel={() => {
+                    this.setState({
+                        isPickerVisible: true
+                    });
+                }}
+            />
+            {this.state.isPickerVisible ? this.renderPicker(): null}
+        </TextField>;
 	}
 }

--- a/source/Component/ObjectPicker/ObjectPicker.scss
+++ b/source/Component/ObjectPicker/ObjectPicker.scss
@ -1,86 +1,31 @@
@import "../Theme/Theme.scss";

-$line-min-height: 26px;
+$line-min-height: 24px;

-div.object-picker-root {
-	width: 100%;
-	display: flex;
-	min-height: $line-min-height;
-	padding: 5px 0;
+div.object-picker {

-    div.input-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.root-content {
-        width: 50%;
+    div.value-view {
+        width: 100%;
        height: 100%;
-        max-width: 180px;
        min-height: $line-min-height;
-        border-radius: 3px;
-        overflow: hidden;
        display: flex;
-        cursor: pointer;
+        align-items: center;
+        white-space: nowrap;
+        word-break: keep-all;
+        text-overflow: ellipsis;
+        overflow: hidden;

-        div.value-view {
-            width: 100%;
-            height: 100%;
-            min-height: $line-min-height;
-            display: flex;
-            align-items: center;
-            white-space: nowrap;
-            word-break: keep-all;
-            text-overflow: ellipsis;
-            overflow: hidden;
-
-            span {
-                display: block;
-            }
-        }
-
-        div.list-button {
-            width: $line-min-height;
-            height: $line-min-height;
-            flex-shrink: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        span {
+            display: block;
        }
    }
-}
-
-div.dark.object-picker-root {
-
-	div.root-content {
-		background-color: $lt-bg-color-lvl3-dark;
-		color: $lt-font-color-normal-dark;
-	}
-
-	div.root-content:hover {
-		background-color: $lt-bg-color-lvl2-dark;
-	}
-}
-
-div.light.object-picker-root {
-
-	div.root-content {
-		background-color: $lt-bg-color-lvl3-light;
-		color: $lt-font-color-normal-light;
-	}
-
-	div.root-content:hover {
-		background-color: $lt-bg-color-lvl2-light;
-	}
-}
-
-div.combo-picker-root {
-    width: 300px;
-    height: 340px;
+
+    div.list-button {
+        width: $line-min-height;
+        height: $line-min-height;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }
--- a/source/Component/ObjectPicker/ObjectPicker.tsx
+++ b/source/Component/ObjectPicker/ObjectPicker.tsx
@ -2,19 +2,17 @@ import { Component, createRef, ReactNode } from "react";
 import { Label } from "@Model/Label";
 import { Group } from "@Model/Group";
 import { Range } from "@Model/Range";
+import { TextField, ITextFieldProps } from "../TextField/TextField";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { FontLevel, Theme } from "@Component/Theme/Theme";
 import { PickerList, IDisplayItem } from "../PickerList/PickerList";
-import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Localization } from "@Component/Localization/Localization";
 import { Icon } from "@fluentui/react";
 import CtrlObject from "@Model/CtrlObject";
 import "./ObjectPicker.scss";

 type IObjectType = Label | Group | Range | CtrlObject;

-interface IObjectPickerProps {
-    keyI18n: AllI18nKeys;
-    infoI18n?: AllI18nKeys;
+interface IObjectPickerProps extends ITextFieldProps {
    type: Array<"L" | "G" | "R">;
    value?: IObjectType;
    valueChange?: (value: IObjectType) => any;
@ -109,31 +107,28 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
        }

        return <>
-            <Theme className="object-picker-root" fontLevel={FontLevel.normal}>
-                <div className="input-intro">
-                    <Localization i18nKey={this.props.keyI18n}/>
+            <TextField
+                {...this.props}
+                className="object-picker"
+                keyI18n={this.props.keyI18n}
+                targetRef={this.pickerTarget}
+                onClick={() => {
+                    this.setState({
+                        isPickerVisible: true
+                    })
+                }}
+            >
+                <div className="list-button">
+                    <Icon iconName={icon}/>
                </div>
-                <div
-                    className="root-content"
-                    ref={this.pickerTarget}
-                    onClick={() => {
-                        this.setState({
-                            isPickerVisible: true
-                        })
-                    }}
-                >
-                    <div className="list-button">
-                        <Icon iconName={icon}/>
-                    </div>
-                    <div className="value-view">
-                        {   
-                            name ? 
-                                <span>{name}</span> :
-                                <Localization i18nKey="Input.Error.Select"/>
-                        }
-                    </div>
+                <div className="value-view">
+                    {   
+                        name ? 
+                            <span>{name}</span> :
+                            <Localization i18nKey="Input.Error.Select"/>
+                    }
                </div>
-            </Theme>
+            </TextField>

            {this.state.isPickerVisible ?  this.renderPicker(): null}
        </>
--- a/source/Component/TogglesInput/TogglesInput.scss
+++ b/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;
 	}
 }
--- a/source/Component/TogglesInput/TogglesInput.tsx
+++ b/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>
+        </TextField>;
    }
 }