Show confim popup when delete objects

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>

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;
 		}
 	}

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">
+				<div className={yesClassList.join(" ")} onClick={() => {
-					<Localization i18nKey="Panel.Title.Group.Details.View"/>
+					this.props.yes ? this.props.yes() : null;
+					this.close();
+				}}>
+					<Localization i18nKey={this.props.yesI18n ?? "Popup.Action.Yes"}/>
 				</div>
-				<div className="no-button action-button">
+				<div className={noClassList.join(" ")} onClick={() => {
-					<Localization i18nKey="Panel.Title.Group.Details.View"/>
+					this.props.no ? this.props.no() : null;
+					this.close();
+				}}>
+					<Localization i18nKey={this.props.noI18n ?? "Popup.Action.No"}/>
 				</div>
 			</div>
 		</Theme>;

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%;
 }

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 {

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"
                 }}

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",

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": "暂无数据",

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]);
+                        const status = this.props.status;
-						this.props.status.setFocusObject(new Set());
+						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()

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);
+                    const status = this.props.status;
-                    this.props.status.setLabelObject();
+                    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();
+                        }
+                    })
                 }
             }}/>
 

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);
+                        const status = this.props.status;
-                        this.props.status.setLabelObject();
+                        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;
                 }}

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) {
+					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[] = [];
-						this.props.status.focusObject.forEach((obj) => {
+								status.focusObject.forEach((obj) => {
 									deleteId.push(obj);
 								})
-						this.props.status.model.deleteObject(deleteId);
+								status.model.deleteObject(deleteId);
-						this.props.status.setFocusObject(new Set<ObjectID>());
+								status.setFocusObject(new Set<ObjectID>());
+							}
+						})
 					}
 				}}
 			>

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 {

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]);
+                        const status = this.props.status;
-						this.props.status.setFocusObject(new Set());
+						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());
+							}
+						})
 					}
 				}}
 			/>