Detach separates the combolist from the pickerlist

source/Input/BehaviorPicker/BehaviorPicker.tsx

@@ -145,10 +145,10 @@ class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps
 
     private renderPickerList(): ReactNode {
         return <PickerList
-            objectList={this.getAllData()}
+            item={this.getAllData()}
             noData="Behavior.Picker.Add.Nodata"
             target={this.clickLineRef}
-            clickObjectItems={((item) => {
+            click={((item) => {
                 if (item instanceof Behavior && this.props.add) {
                     this.props.add(item);
                 }

source/Input/ComboInput/ComboInput.tsx

@@ -1,6 +1,6 @@
 import { Component, createRef, ReactNode } from "react";
 import { Icon } from "@fluentui/react";
-import { PickerList, IDisplayItem } from "@Input/PickerList/PickerList";
+import { ComboList, IDisplayItem } from "@Input/ComboList/ComboList";
 import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
 import { Localization } from "@Component/Localization/Localization";
 import "./ComboInput.scss";
@@ -26,13 +26,11 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
     private pickerTarget = createRef<HTMLDivElement>();
 
     private renderPicker() {
-        return <PickerList
+        return <ComboList
             target={this.pickerTarget}
-            displayItems={(this.props.allOption ?? []).map((item) => {
+            item={this.props.allOption ?? []}
-                return item.key === this.props.value?.key ? 
+            focus={this.props.value}
-                    {...item, mark: true} : item;
+            click={((item) => {
-            })}
-            clickDisplayItems={((item) => {
                 if (this.props.valueChange) {
                     this.props.valueChange(item);
                 }
@@ -64,8 +62,8 @@ class ComboInput extends Component<IComboInputProps, IComboInputState> {
                 <div className="value-view">
                     {
                         this.props.value ? 
-                        <Localization i18nKey={this.props.value.nameKey}/> :
+                            <Localization i18nKey={this.props.value.i18n} options={this.props.value.i18nOption}/> :
-                        null
+                            null
                     }
                 </div>
                 <div className="list-button">

source/Input/ComboList/ComboList.scss

@@ -0,0 +1 @@
+@import "../PickerList/PickerList.scss";

source/Input/ComboList/ComboList.tsx

@@ -0,0 +1,71 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Callout, DirectionalHint, Icon } from "@fluentui/react";
+import { Component, ReactNode, RefObject } from "react";
+import "./ComboList.scss";
+
+interface IDisplayItem {
+	i18nOption?: Record<string, string>;
+    i18n: AllI18nKeys;
+    key: string;
+}
+
+interface IComboListProps {
+	target?: RefObject<any>;
+    item: IDisplayItem[];
+	focus?: IDisplayItem;
+    noData?: AllI18nKeys;
+	dismiss?: () => any;
+	click?: (item: IDisplayItem) => any;
+}
+
+class ComboList extends Component<IComboListProps> {
+
+    private renderString(item: IDisplayItem) {
+
+		const isFocus = item.key === this.props.focus?.key;
+
+        return <div
+			className="picker-list-item"
+			key={item.key}
+			onClick={() => {
+				if (this.props.click) {
+					this.props.click(item)
+				}
+			}}
+		>
+			<div className="list-item-icon">
+				<Icon
+					iconName="CheckMark"
+					style={{
+						display: isFocus ? "block" : "none"
+					}}
+				/>
+			</div>
+			<div className="list-item-name">
+				<Localization i18nKey={item.i18n} options={item.i18nOption}/>
+			</div>
+		</div>;
+    }
+
+	public render(): ReactNode {
+		return <Callout
+			onDismiss={this.props.dismiss}
+			target={this.props.target}
+			directionalHint={DirectionalHint.topCenter}
+		>
+			<div className="picker-list-root">
+                { this.props.item.map((item) => this.renderString(item)) }
+				{
+                    this.props.item.length <= 0 ?
+                        <Localization
+                            className="picker-list-nodata"
+                            i18nKey={this.props.noData ?? "Common.No.Data"}
+                        />
+                        : null
+				}
+			</div>
+		</Callout>
+	}
+}
+
+export { ComboList, IDisplayItem }

source/Input/LabelPicker/LabelPicker.tsx

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

source/Input/ObjectPicker/ObjectPicker.tsx

@@ -6,7 +6,7 @@ import { Range } from "@Model/Range";
 import { CtrlObject } from "@Model/CtrlObject";
 import { Behavior } from "@Model/Behavior";
 import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
-import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "@Input/PickerList/PickerList";
+import { PickerList, getObjectDisplayInfo, IDisplayInfo } from "@Input/PickerList/PickerList";
 import { Localization } from "@Component/Localization/Localization";
 import { Icon } from "@fluentui/react";
 import "./ObjectPicker.scss";
@@ -79,8 +79,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
         return <PickerList
             noData="Object.Picker.List.No.Data"
             target={this.pickerTarget}
-            objectList={this.getAllOption()}
+            item={this.getAllOption()}
-            clickObjectItems={((item) => {
+            click={((item) => {
                 if (item instanceof Behavior) return;
                 if (this.props.valueChange) {
                     this.props.valueChange(item);
@@ -166,4 +166,4 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
     }
 }
 
-export { ObjectPicker, IDisplayItem };
+export { ObjectPicker };

source/Input/PickerList/PickerList.tsx

@@ -17,12 +17,6 @@ interface IDisplayInfo {
     allLabel: boolean;
 };
 
-interface IDisplayItem {
-    nameKey: AllI18nKeys;
-    key: string;
-	mark?: boolean;
-}
-
 function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 
     if (!item) {
@@ -98,13 +92,11 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 }
 
 interface IPickerListProps {
-    displayItems?: IDisplayItem[];
+	item: IPickerListItem[];
-	objectList?: IPickerListItem[];
 	target?: RefObject<any>;
     noData?: AllI18nKeys;
 	dismiss?: () => any;
-	clickObjectItems?: (item: IPickerListItem) => any;
+	click?: (item: IPickerListItem) => any;
-    clickDisplayItems?: (item: IDisplayItem) => any;
 }
 
 class PickerList extends Component<IPickerListProps> {
@@ -116,8 +108,8 @@ class PickerList extends Component<IPickerListProps> {
 			className="picker-list-item"
 			key={item.id}
 			onClick={() => {
-				if (this.props.clickObjectItems) {
+				if (this.props.click) {
-					this.props.clickObjectItems(item)
+					this.props.click(item)
 				}
 			}}
 		>
@@ -143,27 +135,6 @@ 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-icon">
-				<Icon iconName="CheckMark" style={{
-					display: item.mark ? "block" : "none"
-				}}/>
-			</div>
-			<div className="list-item-name">
-				<Localization i18nKey={item.nameKey}/>
-			</div>
-		</div>;
-    }
-
 	public render(): ReactNode {
 		return <Callout
 			onDismiss={this.props.dismiss}
@@ -171,18 +142,11 @@ class PickerList extends Component<IPickerListProps> {
 			directionalHint={DirectionalHint.topCenter}
 		>
 			<div className="picker-list-root">
-				{this.props.objectList ? this.props.objectList.map((item) => {
-					return this.renderItem(item);
-				}) : null}
-                {this.props.displayItems ? this.props.displayItems.map((item) => {
-					return this.renderString(item);
-				}) : null}
 				{
-                    !(this.props.objectList || this.props.displayItems) || 
+					this.props.item.map((item) => this.renderItem(item))
-                    !(
+				}
-                        this.props.objectList && this.props.objectList.length > 0 || 
+				{
-                        this.props.displayItems && this.props.displayItems.length > 0
+                    this.props.item.length <= 0 ?
-                    ) ?
                         <Localization
                             className="picker-list-nodata"
                             i18nKey={this.props.noData ?? "Common.No.Data"}
@@ -194,4 +158,4 @@ class PickerList extends Component<IPickerListProps> {
 	}
 }
 
-export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo }
+export { PickerList, IDisplayInfo, getObjectDisplayInfo }

source/Panel/GroupDetails/GroupDetails.tsx

@@ -22,8 +22,8 @@ mapGenModToI18nKey.set(GenMod.Point, "Common.Attr.Key.Generation.Mod.Point");
 mapGenModToI18nKey.set(GenMod.Range, "Common.Attr.Key.Generation.Mod.Range");
 
 const allOption: IDisplayItem[] = [
-    {nameKey: "Common.Attr.Key.Generation.Mod.Point", key: GenMod.Point},
+    {i18n: "Common.Attr.Key.Generation.Mod.Point", key: GenMod.Point},
-    {nameKey: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
+    {i18n: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
 ];
 
 @useSetting
@@ -144,7 +144,7 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps & IM
             <ComboInput
                 keyI18n="Common.Attr.Key.Generation.Mod"
                 value={{
-                    nameKey: mapGenModToI18nKey.get(group.genMethod) ?? "Common.No.Data",
+                    i18n: mapGenModToI18nKey.get(group.genMethod) ?? "Common.No.Data",
                     key: group.genMethod
                 }}
                 allOption={allOption}