Add combo input component

2022-03-14 17:47:38 +08:00
parent b420b3956f
commit 79036a85c6
10 changed files with 235 additions and 10 deletions
@@ -0,0 +1,74 @@
+@import "../Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.combo-input-root {
+	width: 100%;
+	display: flex;
+	min-height: $line-min-height;
+	padding: 5px 0;
+
+    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%;
+        height: 100%;
+        max-width: 180px;
+        min-height: $line-min-height;
+        border-radius: 3px;
+        overflow: hidden;
+        display: flex;
+        cursor: pointer;
+
+        div.value-view {
+            width: 100%;
+            height: 100%;
+            min-height: $line-min-height;
+            display: flex;
+            align-items: center;
+            padding-left: 5px;
+
+            span {
+                display: block;
+            }
+        }
+    }
+}
+
+div.dark.combo-input-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.combo-input-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;
+}
@@ -0,0 +1,77 @@
+import { Component, createRef, ReactNode } from "react";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import { PickerList, IDisplayItem } from "../PickerList/PickerList";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import "./ComboInput.scss";
+
+interface IComboInputProps {
+    keyI18n: AllI18nKeys;
+    infoI18n?: AllI18nKeys;
+    allOption?: IDisplayItem[];
+    value?: IDisplayItem;
+    valueChange?: (value: IDisplayItem) => any;
+}
+
+interface IComboInputState {
+    isPickerVisible: boolean;
+}
+
+class ComboInput extends Component<IComboInputProps, IComboInputState> {
+
+    public constructor(props: IComboInputProps) {
+        super(props);
+        this.state = {
+            isPickerVisible: false
+        }
+    }
+
+    private pickerTarget = createRef<HTMLDivElement>();
+
+    private renderPicker() {
+        return <PickerList
+            target={this.pickerTarget}
+            displayItems={this.props.allOption ?? []}
+            clickDisplayItems={((item) => {
+                if (this.props.valueChange) {
+                    this.props.valueChange(item);
+                }
+            })}
+            dismiss={() => {
+                this.setState({
+                    isPickerVisible: false
+                })
+            }}
+        />
+    }
+
+    public render(): ReactNode {
+        return <>
+            <Theme className="combo-input-root" fontLevel={FontLevel.normal}>
+                <div className="input-intro">
+                    <Localization i18nKey={this.props.keyI18n}/>
+                </div>
+                <div
+                    className="root-content"
+                    ref={this.pickerTarget}
+                    onClick={() => {
+                        this.setState({
+                            isPickerVisible: true
+                        })
+                    }}
+                >
+                    <div className="value-view">
+                        {
+                            this.props.value ? 
+                            <Localization i18nKey={this.props.value.nameKey}/> :
+                            null
+                        }
+                    </div>
+                </div>
+            </Theme>
+
+            {this.state.isPickerVisible ?  this.renderPicker(): null}
+        </>
+    }
+}
+
+export { ComboInput };