Add label picker

source/Component/LabelPicker/LabelPicker.tsx

@@ -1,6 +1,8 @@
 import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { PickerList } from "../PickerList/PickerList";
 import { Label } from "@Model/Label";
-import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { Component, ReactNode, createRef } from "react";
 import { LabelList } from "../LabelList/LabelList";
 import "./LabelPicker.scss"
 
@@ -8,9 +10,42 @@ interface ILabelPickerProps {
 	keyI18n: AllI18nKeys;
     infoI18n?: AllI18nKeys;
 	labels: Label[];
+	labelAdd?: (label: Label) => any;
+	labelDelete?: (label: Label) => any;
 }
 
-class LabelPicker extends Component<ILabelPickerProps> {
+interface ILabelPickerState {
+    isPickerVisible: boolean;
+}
+
+@useStatusWithEvent("labelAttrChange", "labelChange")
+class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabelPickerState> {
+
+	public constructor(props: ILabelPickerProps) {
+        super(props);
+        this.state = {
+            isPickerVisible: false
+        }
+    }
+
+	private addButtonRef = createRef<HTMLDivElement>();
+
+	private getOtherLabel() {
+		let res: Label[] = [];
+		let nowLabel: Label[] = this.props.labels ?? [];
+		if (this.props.status) {
+			this.props.status.model.labelPool.forEach((aLabel) => {
+				let isHas = false;
+				nowLabel.forEach((nLabel) => {
+					if (aLabel.equal(nLabel)) isHas = true;
+				})
+				if (!isHas) {
+					res.push(aLabel);
+				}
+			})
+		}
+		return res;
+	}
 
 	public render(): ReactNode {
 		return <div
@@ -21,15 +56,35 @@ class LabelPicker extends Component<ILabelPickerProps> {
 			</div>
 			<div className="root-content">
 				<LabelList
+					addRef={this.addButtonRef}
 					labels={this.props.labels}
 					minHeight={26}
-					deleteLabel={() => {
-						
+					deleteLabel={(label) => {
+						this.props.labelDelete ? this.props.labelDelete(label) : 0;
 					}}
 					addLabel={() => {
-
+						this.setState({
+							isPickerVisible: true
+						});
 					}}
 				/>
+				{this.state.isPickerVisible ? <PickerList
+					objectList={this.getOtherLabel()}
+					dismiss={() => {
+						this.setState({
+							isPickerVisible: false
+						});
+					}}
+					click={(label) => {
+						if (label instanceof Label && this.props.labelAdd) {
+							this.props.labelAdd(label)
+						}
+						this.setState({
+							isPickerVisible: false
+						});
+					}}
+					target={this.addButtonRef}
+				/> : null}
 			</div>
 		</div>
 	}