Add label picker

source/Component/ErrorMessage/ErrorMessage.tsx

@@ -5,10 +5,11 @@ import "./ErrorMessage.scss";
 interface IErrorMessageProps {
     i18nKey: AllI18nKeys;
     options?: Record<string, string>;
+    className?: string;
 }
 
 const ErrorMessage: FunctionComponent<IErrorMessageProps> = (props) => {
-    return <div className="panel-error-message">
+    return <div className={["panel-error-message", props.className].filter(c => !!c).join(" ")}>
         <Localization i18nKey={props.i18nKey} options={props.options}/>
     </div>
 }

source/Component/LabelList/LabelList.scss

@@ -1,5 +1,9 @@
 @import "../Theme/Theme.scss";
 
+div.label-list-root {
+    margin: -5px;
+}
+
 div.label {
     width: auto;
     height: auto;

source/Component/LabelList/LabelList.tsx

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import { Component, RefObject } from "react";
 import { Label } from "@Model/Label";
 import { Icon } from "@fluentui/react";
 import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
@@ -10,6 +10,7 @@ interface ILabelListProps {
     maxWidth?: number;
     width?: number;
     labels: Label[];
+    addRef?: RefObject<HTMLDivElement>;
     focusLabel?: Label;
     clickLabel?: (label: Label) => any;
     deleteLabel?: (label: Label) => any;
@@ -79,17 +80,17 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
         });
     }
 
-    private renderAddButton(isNoMargin: boolean = false) {
+    private renderAddButton() {
         const theme = this.props.setting?.themes ?? Themes.dark;
         const classList: string[] = ["label", "add-button"];
         classList.push( theme === Themes.dark ? "dark" : "light" );
 
         return <div
             className={classList.join(" ")}
+            ref={this.props.addRef}
             style={{
                 minHeight: this.props.minHeight,
-                minWidth: this.props.minHeight,
-                marginLeft: isNoMargin ? "0" : undefined
+                minWidth: this.props.minHeight
             }}
             onClick={() => {
                 this.props.addLabel ? this.props.addLabel() : null
@@ -100,17 +101,10 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
     }
     
     public render() {
-        if (this.props.labels.length > 0) {
-            return <>
-                {this.renderAllLabels()}
-                {this.props.addLabel ? this.renderAddButton() : null}
-            </>;
-        } else {
-            return <>
-                <ErrorMessage i18nKey="Panel.Info.Label.List.Error.Nodata"/>
-                {this.props.addLabel ? this.renderAddButton(true) : null}
-            </>;
-        }
+        return <div className="label-list-root">
+            {this.renderAllLabels()}
+            {this.props.addLabel ? this.renderAddButton() : null}
+        </div>;
     }
 }
 

source/Component/LabelPicker/LabelPicker.scss

@@ -0,0 +1,31 @@
+@import "../Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.label-picker-root {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	min-height: $line-min-height;
+	padding: 5px 0;
+
+    div.input-intro {
+		width: 50%;
+		height: 100%;
+		max-width: 220px;
+		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;
+	}
+}

source/Component/LabelPicker/LabelPicker.tsx

@@ -0,0 +1,38 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Label } from "@Model/Label";
+import { Component, ReactNode } from "react";
+import { LabelList } from "../LabelList/LabelList";
+import "./LabelPicker.scss"
+
+interface ILabelPickerProps {
+	keyI18n: AllI18nKeys;
+    infoI18n?: AllI18nKeys;
+	labels: Label[];
+}
+
+class LabelPicker extends Component<ILabelPickerProps> {
+
+	public render(): ReactNode {
+		return <div
+			className="label-picker-root"
+		>
+			<div className="input-intro">
+				<Localization i18nKey={this.props.keyI18n}/>
+			</div>
+			<div className="root-content">
+				<LabelList
+					labels={this.props.labels}
+					minHeight={26}
+					deleteLabel={() => {
+						
+					}}
+					addLabel={() => {
+
+					}}
+				/>
+			</div>
+		</div>
+	}
+}
+
+export { LabelPicker }

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -0,0 +1,12 @@
+import { Component, ReactNode } from "react";
+
+interface IObjectPickerProps {}
+
+class ObjectPicker extends Component<IObjectPickerProps> {
+
+	public render(): ReactNode {
+		return <div></div>
+	}
+}
+
+export { ObjectPicker }

source/Component/PickerList/PickerList.tsx

@@ -0,0 +1,12 @@
+import { Component, ReactNode } from "react";
+
+interface IPickerListProps {}
+
+class PickerList extends Component<IPickerListProps> {
+
+	public render(): ReactNode {
+		return <div></div>
+	}
+}
+
+export { PickerList }