Add combo input component

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 }