Merge pull request 'Add combo input component' (#21) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/21

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,87 @@
+@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: 8px;
+            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.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,87 @@
+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 { Icon } from "@fluentui/react";
+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 ?? []).map((item) => {
+                return item.key === this.props.value?.key ? 
+                    {...item, mark: true} : item;
+            })}
+            clickDisplayItems={((item) => {
+                if (this.props.valueChange) {
+                    this.props.valueChange(item);
+                }
+                this.setState({
+                    isPickerVisible: false
+                })
+            })}
+            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 className="list-button">
+                        <Icon iconName="ChevronDownMed"/>
+                    </div>
+                </div>
+            </Theme>
+
+            {this.state.isPickerVisible ?  this.renderPicker(): null}
+        </>
+    }
+}
+
+export { ComboInput, IDisplayItem };

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,20 @@ import { Component, ReactNode, RefObject } from "react";
 import "./PickerList.scss";
 
 type IPickerListItem = CtrlObject | Label;
+type IDisplayItem = {
+    nameKey: AllI18nKeys;
+    key: string;
+	mark?: boolean;
+}
 
 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 +54,8 @@ class PickerList extends Component<IPickerListProps> {
 			className="picker-list-item"
 			key={item.id}
 			onClick={() => {
-				if (this.props.click) {
+				if (this.props.clickObjectItems) {
-					this.props.click(item)
+					this.props.clickObjectItems(item)
 				}
 			}}
 		>
@@ -65,6 +73,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-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}
@@ -75,13 +104,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) ?
+                {this.props.displayItems ? this.props.displayItems.map((item) => {
-					<Localization className="picker-list-nodata" i18nKey="Common.Attr.Key.Label.Picker.Nodata"/>
+					return this.renderString(item);
-					: null
+				}) : 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 }

source/Localization/EN-US.ts

@@ -42,6 +42,7 @@ const EN_US = {
     "Panel.Info.Label.Details.View": "Edit view label attributes",
     "Panel.Title.Group.Details.View": "Group",
     "Panel.Info.Group.Details.View": "Edit view group attributes",
+    "Common.No.Data": "No Data",
     "Common.Attr.Title.Basic": "Basic properties",
     "Common.Attr.Title.Spatial": "Spatial property",
     "Common.Attr.Title.Individual.Generation": "Individual generation",
@@ -57,9 +58,13 @@ const EN_US = {
     "Common.Attr.Key.Update": "Update",
     "Common.Attr.Key.Delete": "Delete",
     "Common.Attr.Key.Label": "Label",
+    "Common.Attr.Key.Size": "Size",
     "Common.Attr.Key.Error.Multiple": "Multiple values",
     "Common.Attr.Key.Label.Picker.Nodata": "No tags can be added",
     "Common.Attr.Key.Generation": "Generation",
+    "Common.Attr.Key.Generation.Mod": "Generation model",
+    "Common.Attr.Key.Generation.Mod.Point": "Point model",
+    "Common.Attr.Key.Generation.Mod.Range": "Range model",
     "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

@@ -42,6 +42,7 @@ const ZH_CN = {
     "Panel.Info.Label.Details.View": "编辑查看标签属性",
     "Panel.Title.Group.Details.View": "群",
     "Panel.Info.Group.Details.View": "编辑查看群属性",
+    "Common.No.Data": "暂无数据",
     "Common.Attr.Title.Basic": "基础属性",
     "Common.Attr.Title.Spatial": "空间属性",
     "Common.Attr.Title.Individual.Generation": "个体生成",
@@ -57,9 +58,13 @@ const ZH_CN = {
     "Common.Attr.Key.Update": "更新",
     "Common.Attr.Key.Delete": "删除",
     "Common.Attr.Key.Label": "标签",
+    "Common.Attr.Key.Size": "大小",
     "Common.Attr.Key.Error.Multiple": "多重数值",
     "Common.Attr.Key.Label.Picker.Nodata": "没有可以被添加的标签",
     "Common.Attr.Key.Generation": "生成",
+    "Common.Attr.Key.Generation.Mod": "生成模式",
+    "Common.Attr.Key.Generation.Mod.Point": "点生成",
+    "Common.Attr.Key.Generation.Mod.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/Model/Group.ts

@@ -3,6 +3,11 @@ import { CtrlObject } from "./CtrlObject";
 import type { Behavior } from "./Behavior"; 
 import type { Model } from "./Model";
 
+enum GenMod {
+    Point = "p",
+    Range = "R"
+}
+
 /**
  * 群体类型
  */
@@ -13,6 +18,11 @@ class Group extends CtrlObject {
 	 */
 	public individuals: Set<Individual> = new Set();
 
+    /**
+     * 个体生成方式
+     */
+    public genMethod: GenMod = GenMod.Point;
+
 	/**
 	 * 创建个体
      * @param count 创建数量
@@ -143,4 +153,4 @@ class Group extends CtrlObject {
 }
 
 export default Group;
-export { Group };
+export { Group, GenMod };

source/Panel/GroupDetails/GroupDetails.tsx

@@ -6,12 +6,22 @@ import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
 import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
-import { Group } from "@Model/Group";
+import { Group, GenMod } from "@Model/Group";
 import { AllI18nKeys } from "@Component/Localization/Localization";
+import { ComboInput, IDisplayItem } from "@Component/ComboInput/ComboInput";
 import "./GroupDetails.scss";
 
 interface IGroupDetailsProps {}
 
+const mapGenModToI18nKey = new Map<GenMod, AllI18nKeys>();
+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},
+    {nameKey: "Common.Attr.Key.Generation.Mod.Range", key: GenMod.Range}
+];
+
 @useStatusWithEvent("groupAttrChange", "groupLabelChange", "focusObjectChange")
 class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 
@@ -61,6 +71,13 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
                 }}
             />
 
+            {this.renderAttrInput(
+                group.id, "Common.Attr.Key.Size", group.size,
+                (val, status) => {
+                    status.changeGroupAttrib(group.id, "size", (val as any) / 1);
+                }, 10, undefined, 0
+            )}
+
             <LabelPicker
                 keyI18n="Common.Attr.Key.Label"
                 labels={group.allLabels()}
@@ -104,6 +121,22 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
 					}
 				}}
 			/>
+
+            <Message i18nKey="Common.Attr.Title.Individual.Generation" isTitle/>
+
+            <ComboInput
+                keyI18n="Common.Attr.Key.Generation.Mod"
+                value={{
+                    nameKey: mapGenModToI18nKey.get(group.genMethod) ?? "Common.No.Data",
+                    key: group.genMethod
+                }}
+                allOption={allOption}
+                valueChange={(value) => {
+                    if (this.props.status) {
+                        this.props.status.changeGroupAttrib(group.id, "genMethod", value.key as any);
+                    }
+                }}
+            />
 		</>
 	}