Add object picker component

source/Component/ObjectPicker/ObjectPicker.scss

@@ -0,0 +1,86 @@
+@import "../Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.object-picker-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;
+            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;
+        }
+    }
+}
+
+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;
+}

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -1,12 +1,143 @@
-import { Component, ReactNode } from "react";
+import { Component, createRef, ReactNode } from "react";
+import { Label } from "@Model/Label";
+import { Group } from "@Model/Group";
+import { Range } from "@Model/Range";
+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 { Icon } from "@fluentui/react";
+import CtrlObject from "@Model/CtrlObject";
+import "./ObjectPicker.scss";
 
-interface IObjectPickerProps {}
+type IObjectType = Label | Group | Range | CtrlObject;
 
-class ObjectPicker extends Component<IObjectPickerProps> {
+interface IObjectPickerProps {
-
+    keyI18n: AllI18nKeys;
-	public render(): ReactNode {
+    infoI18n?: AllI18nKeys;
-		return <div></div>
+    type: Array<"L" | "G" | "R">;
-	}
+    value?: IObjectType;
+    valueChange?: (value: IObjectType) => any;
 }
 
-export { ObjectPicker }
+interface IObjectPickerState {
+    isPickerVisible: boolean;
+}
+
+@useStatusWithEvent("objectChange", "labelChange")
+class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IObjectPickerState> {
+
+    private getAllOption() {
+        let option: Array<IObjectType> = [];
+        if (this.props.status) {
+
+            for (let i = 0; i < this.props.type.length; i++) {
+
+                if (this.props.type[i] === "L") {
+                    for (let j = 0; j < this.props.status.model.labelPool.length; j++) {
+                        option.push(this.props.status.model.labelPool[j]);
+                    }
+                }
+
+                if (this.props.type[i] === "R") {
+                    for (let j = 0; j < this.props.status.model.objectPool.length; j++) {
+                        if (this.props.status.model.objectPool[j] instanceof Range) {
+                            option.push(this.props.status.model.objectPool[j]);
+                        }
+                    }    
+                }
+
+                if (this.props.type[i] === "G") {
+                    for (let j = 0; j < this.props.status.model.objectPool.length; j++) {
+                        if (this.props.status.model.objectPool[j] instanceof Group) {
+                            option.push(this.props.status.model.objectPool[j]);
+                        }
+                    }
+                }
+            }
+        }
+        return option;
+    }
+
+    public constructor(props: IObjectPickerProps) {
+        super(props);
+        this.state = {
+            isPickerVisible: false
+        }
+    }
+
+    private pickerTarget = createRef<HTMLDivElement>();
+
+    private renderPicker() {
+        return <PickerList
+            target={this.pickerTarget}
+            objectList={this.getAllOption()}
+            clickObjectItems={((item) => {
+                if (this.props.valueChange) {
+                    this.props.valueChange(item);
+                }
+                this.setState({
+                    isPickerVisible: false
+                })
+            })}
+            dismiss={() => {
+                this.setState({
+                    isPickerVisible: false
+                })
+            }}
+        />
+    }
+
+    public render(): ReactNode {
+
+        let name = "";
+        let icon = "Label";
+        if (this.props.value instanceof CtrlObject) {
+            name = this.props.value.displayName;
+
+            if (this.props.value instanceof Range) {
+                icon = "CubeShape"
+            }
+
+            if (this.props.value instanceof Group) {
+                icon = "WebAppBuilderFragment"
+            }
+        }
+        if (this.props.value instanceof Label) {
+            name = this.props.value.name;
+            icon = "tag";
+        }
+
+        return <>
+            <Theme className="object-picker-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="list-button">
+                        <Icon iconName={icon}/>
+                    </div>
+                    <div className="value-view">
+                        {   
+                            name ? 
+                                <span>{name}</span> :
+                                <Localization i18nKey="Input.Error.Select"/>
+                        }
+                    </div>
+                </div>
+            </Theme>
+
+            {this.state.isPickerVisible ?  this.renderPicker(): null}
+        </>
+    }
+}
+
+export { ObjectPicker, IDisplayItem };

source/Localization/EN-US.ts

@@ -24,6 +24,7 @@ const EN_US = {
     "Input.Error.Min": "Enter value must be greater than {num}",
     "Input.Error.Length": "The length of the input content must be less than {num}",
     "Input.Error.Length.Less": "The length of the input content must be greater than {num}",
+    "Input.Error.Select": "Select object ...",
     "Object.List.New.Group": "Group object {id}",
     "Object.List.New.Range": "Range object {id}",
     "Object.List.New.Label": "Label {id}",
@@ -65,6 +66,7 @@ const EN_US = {
     "Common.Attr.Key.Generation.Mod": "Generation model",
     "Common.Attr.Key.Generation.Mod.Point": "Point model",
     "Common.Attr.Key.Generation.Mod.Range": "Range model",
+    "Common.Attr.Key.Generation.Use.Range": "Generation range",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
     "Panel.Info.Group.Details.Attr.Error.Not.Group": "Object is not a Group",

source/Localization/ZH-CN.ts

@@ -24,6 +24,7 @@ const ZH_CN = {
     "Input.Error.Min": "输入数值须大于 {number}",
     "Input.Error.Length": "输入内容长度须小于 {number}",
     "Input.Error.Length.Less": "输入内容长度须大于 {number}",
+    "Input.Error.Select": "选择对象 ...",
     "Object.List.New.Group": "组对象 {id}",
     "Object.List.New.Range": "范围对象 {id}",
     "Object.List.New.Label": "标签 {id}",
@@ -65,6 +66,7 @@ const ZH_CN = {
     "Common.Attr.Key.Generation.Mod": "生成模式",
     "Common.Attr.Key.Generation.Mod.Point": "点生成",
     "Common.Attr.Key.Generation.Mod.Range": "范围生成",
+    "Common.Attr.Key.Generation.Use.Range": "生成范围",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
     "Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",

source/Panel/GroupDetails/GroupDetails.tsx

@@ -9,6 +9,7 @@ import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
 import { Group, GenMod } from "@Model/Group";
 import { AllI18nKeys } from "@Component/Localization/Localization";
 import { ComboInput, IDisplayItem } from "@Component/ComboInput/ComboInput";
+import { ObjectPicker } from "@Component/ObjectPicker/ObjectPicker";
 import "./GroupDetails.scss";
 
 interface IGroupDetailsProps {}
@@ -137,6 +138,11 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
                     }
                 }}
             />
+
+            <ObjectPicker
+                keyI18n="Common.Attr.Key.Generation.Use.Range"
+                type={["L", "G", "R"]}
+            />
 		</>
 	}