Add combo input component

source/Component/AttrInput/AttrInput.tsx

@@ -25,7 +25,7 @@ class AttrInput extends Component<IAttrInputProps> {
 
     private value: string = "";
     private error: ReactNode;
-    private numberTestReg = [/\.0*$/, /[1-9]+0+$/];
+    private numberTestReg = [/\.0*$/, /\.\d*[1-9]+0+$/];
 
     private numberTester(value: string) {
         return isNaN((value as any) / 1) ||

source/Component/ComboInput/ComboInput.scss

@@ -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;
+}

source/Component/ComboInput/ComboInput.tsx

@@ -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 };

source/Component/LabelPicker/LabelPicker.tsx

@@ -69,13 +69,14 @@ class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabe
 					}}
 				/>
 				{this.state.isPickerVisible ? <PickerList
+                    noData="Common.Attr.Key.Label.Picker.Nodata"
 					objectList={this.getOtherLabel()}
 					dismiss={() => {
 						this.setState({
 							isPickerVisible: false
 						});
 					}}
-					click={(label) => {
+					clickObjectItems={(label) => {
 						if (label instanceof Label && this.props.labelAdd) {
 							this.props.labelAdd(label)
 						}

source/Component/PickerList/PickerList.scss

@@ -37,6 +37,7 @@ div.picker-list-root {
 
 		div.list-item-name {
 			width: 100%;
+            box-sizing: border-box;
 		}
 	}
 

source/Component/PickerList/PickerList.tsx

@@ -1,4 +1,4 @@
-import { Localization } from "@Component/Localization/Localization";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
 import { Callout, DirectionalHint, Icon } from "@fluentui/react";
 import { CtrlObject } from "@Model/CtrlObject";
 import { Group } from "@Model/Group";
@@ -8,12 +8,19 @@ import { Component, ReactNode, RefObject } from "react";
 import "./PickerList.scss";
 
 type IPickerListItem = CtrlObject | Label;
+type IDisplayItem = {
+    nameKey: AllI18nKeys;
+    key: string;
+}
 
 interface IPickerListProps {
+    displayItems?: IDisplayItem[];
 	objectList?: IPickerListItem[];
 	target?: RefObject<any>;
+    noData?: AllI18nKeys;
 	dismiss?: () => any;
-	click?: (item: IPickerListItem) => any;
+	clickObjectItems?: (item: IPickerListItem) => any;
+    clickDisplayItems?: (item: IDisplayItem) => any;
 }
 
 class PickerList extends Component<IPickerListProps> {
@@ -46,8 +53,8 @@ class PickerList extends Component<IPickerListProps> {
 			className="picker-list-item"
 			key={item.id}
 			onClick={() => {
-				if (this.props.click) {
-					this.props.click(item)
+				if (this.props.clickObjectItems) {
+					this.props.clickObjectItems(item)
 				}
 			}}
 		>
@@ -65,6 +72,27 @@ class PickerList extends Component<IPickerListProps> {
 		</div>;
 	}
 
+    private renderString(item: IDisplayItem) {
+        return <div
+			className="picker-list-item"
+			key={item.key}
+			onClick={() => {
+				if (this.props.clickDisplayItems) {
+					this.props.clickDisplayItems(item)
+				}
+			}}
+		>
+			<div
+                className="list-item-name"
+                style={{
+                    paddingLeft: 10
+                }}
+            >
+				<Localization i18nKey={item.nameKey}/>
+			</div>
+		</div>;
+    }
+
 	public render(): ReactNode {
 		return <Callout
 			onDismiss={this.props.dismiss}
@@ -75,13 +103,24 @@ class PickerList extends Component<IPickerListProps> {
 				{this.props.objectList ? this.props.objectList.map((item) => {
 					return this.renderItem(item);
 				}) : null}
-				{!this.props.objectList || (this.props.objectList && this.props.objectList.length <= 0) ?
-					<Localization className="picker-list-nodata" i18nKey="Common.Attr.Key.Label.Picker.Nodata"/>
-					: null
+                {this.props.displayItems ? this.props.displayItems.map((item) => {
+					return this.renderString(item);
+				}) : null}
+				{
+                    !(this.props.objectList || this.props.displayItems) || 
+                    !(
+                        this.props.objectList && this.props.objectList.length > 0 || 
+                        this.props.displayItems && this.props.displayItems.length > 0
+                    ) ?
+                        <Localization
+                            className="picker-list-nodata"
+                            i18nKey={this.props.noData ?? "Common.No.Data"}
+                        />
+                        : null
 				}
 			</div>
 		</Callout>
 	}
 }
 
-export { PickerList }
+export { PickerList, IDisplayItem }