From 50f1cb0562f642e1533493280b17499d1a33b77c Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Thu, 24 Mar 2022 17:23:01 +0800
Subject: [PATCH] Show confim popup when delete objects

---
 source/Component/CommandBar/CommandBar.tsx    |  2 +-
 .../Component/ConfirmPopup/ConfirmPopup.scss  |  2 +-
 .../Component/ConfirmPopup/ConfirmPopup.tsx   | 40 +++++++++++++++----
 source/Component/Popup/Popup.scss             |  1 -
 .../Component/TogglesInput/TogglesInput.scss  |  4 ++
 .../Component/TogglesInput/TogglesInput.tsx   |  3 +-
 source/Localization/EN-US.ts                  |  6 +++
 source/Localization/ZH-CN.ts                  |  6 +++
 source/Panel/GroupDetails/GroupDetails.tsx    | 18 +++++++--
 source/Panel/LabelDetails/LabelDetails.tsx    | 18 +++++++--
 source/Panel/LabelList/LabelList.tsx          | 14 ++++++-
 source/Panel/ObjectList/ObjectCommand.tsx     | 24 +++++++----
 source/Panel/ObjectList/ObjectList.scss       |  4 ++
 source/Panel/RangeDetails/RangeDetails.tsx    | 19 ++++++---
 14 files changed, 129 insertions(+), 32 deletions(-)

diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx
index e29e680..e6d38be 100644
--- a/source/Component/CommandBar/CommandBar.tsx
+++ b/source/Component/CommandBar/CommandBar.tsx
@@ -73,7 +73,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                     iconName: "Settings",
                     i18NKey: "Command.Bar.Setting.Info",
                     click: () => {
-                        this.props.status?.popup.showPopup(ConfirmPopup, {});
+                        // this.props.status?.popup.showPopup(ConfirmPopup, {});
                     }
                 })}
             </div>
diff --git a/source/Component/ConfirmPopup/ConfirmPopup.scss b/source/Component/ConfirmPopup/ConfirmPopup.scss
index 50c3869..76e46ae 100644
--- a/source/Component/ConfirmPopup/ConfirmPopup.scss
+++ b/source/Component/ConfirmPopup/ConfirmPopup.scss
@@ -32,7 +32,7 @@ div.confirm-root {
 			user-select: none;
 		}
 
-		div.action-button.yes-button:hover {
+		div.action-button.red {
 			color: $lt-red;
 		}
 	}
diff --git a/source/Component/ConfirmPopup/ConfirmPopup.tsx b/source/Component/ConfirmPopup/ConfirmPopup.tsx
index dbeec69..b530ea8 100644
--- a/source/Component/ConfirmPopup/ConfirmPopup.tsx
+++ b/source/Component/ConfirmPopup/ConfirmPopup.tsx
@@ -2,11 +2,17 @@ import { Popup } from "@Context/Popups";
 import { ReactNode } from "react";
 import { Message } from "@Component/Message/Message";
 import { Theme } from "@Component/Theme/Theme";
-import { Localization } from "@Component/Localization/Localization";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
 import "./ConfirmPopup.scss";
 
 interface IConfirmPopupProps {
-	
+	titleI18N?: AllI18nKeys;
+	infoI18n: AllI18nKeys;
+	yesI18n?: AllI18nKeys;
+	noI18n?: AllI18nKeys;
+	yes?: () => any;
+	no?: () => any;
+	red?: "yes" | "no";
 }
 class ConfirmPopup extends Popup<IConfirmPopupProps> {
 
@@ -14,17 +20,37 @@ class ConfirmPopup extends Popup<IConfirmPopupProps> {
 
 	public height: number = 180;
 
+	public onRenderHeader(): ReactNode {
+		return <Localization i18nKey={this.props.titleI18N ?? "Popup.Title.Confirm"}/>
+	}
+
 	public render(): ReactNode {
+
+		const yesClassList: string[] = ["action-button", "yes-button"];
+		const noClassList: string[] = ["action-button", "no-button"];
+		if (this.props.red === "no") {
+			noClassList.push("red");
+		}
+		if (this.props.red === "yes") {
+			yesClassList.push("red");
+		}
+
 		return <Theme className="confirm-root">
 			<div className="content-views">
-				<Message i18nKey="ZH_CN"/>
+				<Message i18nKey={this.props.infoI18n}/>
 			</div>
 			<div className="action-view">
-				<div className="yes-button action-button">
-					<Localization i18nKey="Panel.Title.Group.Details.View"/>
+				<div className={yesClassList.join(" ")} onClick={() => {
+					this.props.yes ? this.props.yes() : null;
+					this.close();
+				}}>
+					<Localization i18nKey={this.props.yesI18n ?? "Popup.Action.Yes"}/>
 				</div>
-				<div className="no-button action-button">
-					<Localization i18nKey="Panel.Title.Group.Details.View"/>
+				<div className={noClassList.join(" ")} onClick={() => {
+					this.props.no ? this.props.no() : null;
+					this.close();
+				}}>
+					<Localization i18nKey={this.props.noI18n ?? "Popup.Action.No"}/>
 				</div>
 			</div>
 		</Theme>;
diff --git a/source/Component/Popup/Popup.scss b/source/Component/Popup/Popup.scss
index 39de7c4..77203ec 100644
--- a/source/Component/Popup/Popup.scss
+++ b/source/Component/Popup/Popup.scss
@@ -34,7 +34,6 @@ div.popup-layer.show-scale {
 
 div.popup-mask {
     position: absolute;
-    cursor: pointer;
     width: 100%;
     height: 100%;
 }
diff --git a/source/Component/TogglesInput/TogglesInput.scss b/source/Component/TogglesInput/TogglesInput.scss
index b89fa89..adb948c 100644
--- a/source/Component/TogglesInput/TogglesInput.scss
+++ b/source/Component/TogglesInput/TogglesInput.scss
@@ -15,6 +15,10 @@ div.toggles-input {
         cursor: pointer;
         user-select: none;
     }
+
+    div.checkbox.red:hover {
+        color: $lt-red !important;
+    }
 }
 
 div.dark.text-field-root {
diff --git a/source/Component/TogglesInput/TogglesInput.tsx b/source/Component/TogglesInput/TogglesInput.tsx
index a355ddb..bf96f22 100644
--- a/source/Component/TogglesInput/TogglesInput.tsx
+++ b/source/Component/TogglesInput/TogglesInput.tsx
@@ -8,6 +8,7 @@ interface ITogglesInputProps extends ITextFieldProps {
     onIconName?: string;
     offIconName?: string;
     valueChange?: (value: boolean) => any;
+    red?: boolean;
 }
 
 class TogglesInput extends Component<ITogglesInputProps> {
@@ -20,7 +21,7 @@ class TogglesInput extends Component<ITogglesInputProps> {
             customStyle
         >
             <div
-                className="checkbox"
+                className={"checkbox" + (this.props.red ? " red" : "")}
                 style={{
                     cursor: this.props.disableI18n ? "not-allowed" : "pointer"
                 }}
diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts
index 8e4ceb1..8fbaa52 100644
--- a/source/Localization/EN-US.ts
+++ b/source/Localization/EN-US.ts
@@ -45,6 +45,12 @@ const EN_US = {
     "Panel.Title.Group.Details.View": "Group",
     "Panel.Info.Group.Details.View": "Edit view group attributes",
     "Popup.Title.Unnamed": "Popup message",
+    "Popup.Title.Confirm": "Confirm message",
+    "Popup.Action.Yes": "Confirm",
+    "Popup.Action.No": "Cancel",
+    "Popup.Action.Objects.Confirm.Title": "Confirm Delete",
+    "Popup.Action.Objects.Confirm.Delete": "Delete",
+    "Popup.Delete.Objects.Confirm": "Are you sure you want to delete this object(s)? The object is deleted and cannot be recalled.",
     "Build.In.Label.Name.All.Group": "All group",
     "Build.In.Label.Name.All.Range": "All range",
     "Common.No.Data": "No Data",
diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts
index 784e522..3e2a883 100644
--- a/source/Localization/ZH-CN.ts
+++ b/source/Localization/ZH-CN.ts
@@ -45,6 +45,12 @@ const ZH_CN = {
     "Panel.Title.Group.Details.View": "群",
     "Panel.Info.Group.Details.View": "编辑查看群属性",
     "Popup.Title.Unnamed": "弹窗消息",
+    "Popup.Title.Confirm": "确认消息",
+    "Popup.Action.Yes": "确定",
+    "Popup.Action.No": "取消",
+    "Popup.Action.Objects.Confirm.Title": "删除确认",
+    "Popup.Action.Objects.Confirm.Delete": "删除",
+    "Popup.Delete.Objects.Confirm": "你确定要删除这个(些)对象吗？对象被删除将无法撤回。",
     "Build.In.Label.Name.All.Group": "全部群",
     "Build.In.Label.Name.All.Range": "全部范围",
     "Common.No.Data": "暂无数据",
diff --git a/source/Panel/GroupDetails/GroupDetails.tsx b/source/Panel/GroupDetails/GroupDetails.tsx
index b37221a..2010964 100644
--- a/source/Panel/GroupDetails/GroupDetails.tsx
+++ b/source/Panel/GroupDetails/GroupDetails.tsx
@@ -10,6 +10,7 @@ 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 { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import "./GroupDetails.scss";
 
 interface IGroupDetailsProps {}
@@ -88,12 +89,21 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
             />
 
 			<TogglesInput
-				keyI18n="Common.Attr.Key.Delete"
+				keyI18n="Common.Attr.Key.Delete" red
 				onIconName="delete" offIconName="delete"
 				valueChange={() => {
 					if (this.props.status) {
-						this.props.status.model.deleteObject([group]);
-						this.props.status.setFocusObject(new Set());
+                        const status = this.props.status;
+						status.popup.showPopup(ConfirmPopup, {
+							infoI18n: "Popup.Delete.Objects.Confirm",
+							titleI18N: "Popup.Action.Objects.Confirm.Title",
+							yesI18n: "Popup.Action.Objects.Confirm.Delete",
+							red: "yes",
+							yes: () => {
+								status.model.deleteObject([group]);
+						        status.setFocusObject(new Set());
+							}
+						})
 					}
 				}}
 			/>
@@ -147,7 +157,7 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
             />
 
             <TogglesInput
-				keyI18n="Common.Attr.Key.Generation"
+				keyI18n="Common.Attr.Key.Kill.Random"
 				onIconName="RemoveFilter" offIconName="RemoveFilter"
 				valueChange={() => {
 					group.killIndividuals()
diff --git a/source/Panel/LabelDetails/LabelDetails.tsx b/source/Panel/LabelDetails/LabelDetails.tsx
index 28691db..5b55fba 100644
--- a/source/Panel/LabelDetails/LabelDetails.tsx
+++ b/source/Panel/LabelDetails/LabelDetails.tsx
@@ -5,6 +5,7 @@ import { Message } from "@Component/Message/Message";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { Label } from "@Model/Label";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import "./LabelDetails.scss";
 
 @useStatusWithEvent("focusLabelChange", "labelAttrChange", "labelChange")
@@ -27,10 +28,21 @@ class LabelDetails extends Component<IMixinStatusProps> {
                 }
             }}/>
 
-            <TogglesInput keyI18n="Common.Attr.Key.Delete" onIconName="delete" offIconName="delete" valueChange={() => {
+            <TogglesInput
+                keyI18n="Common.Attr.Key.Delete" onIconName="delete" red
+                offIconName="delete" valueChange={() => {
                 if (this.props.status) {
-                    this.props.status.model.deleteLabel(label);
-                    this.props.status.setLabelObject();
+                    const status = this.props.status;
+                    status.popup.showPopup(ConfirmPopup, {
+                        infoI18n: "Popup.Delete.Objects.Confirm",
+                        titleI18N: "Popup.Action.Objects.Confirm.Title",
+                        yesI18n: "Popup.Action.Objects.Confirm.Delete",
+                        red: "yes",
+                        yes: () => {
+                            status.model.deleteLabel(label);
+                            status.setLabelObject();
+                        }
+                    })
                 }
             }}/>
 
diff --git a/source/Panel/LabelList/LabelList.tsx b/source/Panel/LabelList/LabelList.tsx
index f1f9a80..51704a5 100644
--- a/source/Panel/LabelList/LabelList.tsx
+++ b/source/Panel/LabelList/LabelList.tsx
@@ -4,6 +4,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Label } from "@Model/Label";
 import { Message } from "@Component/Message/Message";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import "./LabelList.scss";
 
 interface ILabelListProps {
@@ -47,8 +48,17 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
                 }}
                 deleteLabel={(label) => {
                     if (this.props.status) {
-                        this.props.status.model.deleteLabel(label);
-                        this.props.status.setLabelObject();
+                        const status = this.props.status;
+                        status.popup.showPopup(ConfirmPopup, {
+                            infoI18n: "Popup.Delete.Objects.Confirm",
+                            titleI18N: "Popup.Action.Objects.Confirm.Title",
+                            yesI18n: "Popup.Action.Objects.Confirm.Delete",
+                            red: "yes",
+                            yes: () => {
+                                status.model.deleteLabel(label);
+                                status.setLabelObject();
+                            }
+                        })
                     }
                     this.labelInnerClick = true;
                 }}
diff --git a/source/Panel/ObjectList/ObjectCommand.tsx b/source/Panel/ObjectList/ObjectCommand.tsx
index 71cbe42..0450399 100644
--- a/source/Panel/ObjectList/ObjectCommand.tsx
+++ b/source/Panel/ObjectList/ObjectCommand.tsx
@@ -1,5 +1,6 @@
 import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
 import { useStatus, IMixinStatusProps } from "../../Context/Status";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import { Icon } from "@fluentui/react";
 import { Component, ReactNode } from "react";
 import { ObjectID } from "@Model/Renderer";
@@ -54,15 +55,24 @@ class ObjectCommand extends Component<IMixinStatusProps> {
 				<Icon iconName="CubeShape"></Icon>
 			</div>
 			<div
-				className="command-item"
+				className="command-item red"
 				onClick={() => {
-					if (this.props.status) {
-						let deleteId: ObjectID[] = [];
-						this.props.status.focusObject.forEach((obj) => {
-							deleteId.push(obj);
+					if (this.props.status && this.props.status.focusObject.size > 0) {
+						const status = this.props.status;
+						status.popup.showPopup(ConfirmPopup, {
+							infoI18n: "Popup.Delete.Objects.Confirm",
+							titleI18N: "Popup.Action.Objects.Confirm.Title",
+							yesI18n: "Popup.Action.Objects.Confirm.Delete",
+							red: "yes",
+							yes: () => {
+								let deleteId: ObjectID[] = [];
+								status.focusObject.forEach((obj) => {
+									deleteId.push(obj);
+								})
+								status.model.deleteObject(deleteId);
+								status.setFocusObject(new Set<ObjectID>());
+							}
 						})
-						this.props.status.model.deleteObject(deleteId);
-						this.props.status.setFocusObject(new Set<ObjectID>());
 					}
 				}}
 			>
diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss
index b98f127..e0e197a 100644
--- a/source/Panel/ObjectList/ObjectList.scss
+++ b/source/Panel/ObjectList/ObjectList.scss
@@ -59,6 +59,10 @@ div.object-list-command-bar {
         user-select: none;
         cursor: pointer;
     }
+
+    div.command-item.red:hover {
+        color: $lt-red;
+    }
 }
 
 div.dark.object-list-command-bar {
diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx
index ff9adb3..f5aeee9 100644
--- a/source/Panel/RangeDetails/RangeDetails.tsx
+++ b/source/Panel/RangeDetails/RangeDetails.tsx
@@ -1,13 +1,13 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
 import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
-import { AllI18nKeys } from "@Component/Localization/Localization";
 import { Message } from "@Component/Message/Message";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
 import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
@@ -53,12 +53,21 @@ class RangeDetails extends Component<IMixinStatusProps> {
             />
 
             <TogglesInput
-				keyI18n="Common.Attr.Key.Delete"
+				keyI18n="Common.Attr.Key.Delete" red
 				onIconName="delete" offIconName="delete"
 				valueChange={() => {
-					if (this.props.status) {
-						this.props.status.model.deleteObject([range]);
-						this.props.status.setFocusObject(new Set());
+                    if (this.props.status) {
+                        const status = this.props.status;
+						status.popup.showPopup(ConfirmPopup, {
+							infoI18n: "Popup.Delete.Objects.Confirm",
+							titleI18N: "Popup.Action.Objects.Confirm.Title",
+							yesI18n: "Popup.Action.Objects.Confirm.Delete",
+							red: "yes",
+							yes: () => {
+								status.model.deleteObject([range]);
+						        status.setFocusObject(new Set());
+							}
+						})
 					}
 				}}
 			/>