From b8f7ac2812d8c8f83a332e946b36451c4429c6e5 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Mon, 22 Jan 2024 18:16:21 +0200
Subject: [PATCH] Remove popconfirm from canvas field delete

---
 src/components/Table.jsx | 105 ++++++++++++++++-----------------------
 1 file changed, 44 insertions(+), 61 deletions(-)

diff --git a/src/components/Table.jsx b/src/components/Table.jsx
index 8c8bd45..aa11c1e 100644
--- a/src/components/Table.jsx
+++ b/src/components/Table.jsx
@@ -17,7 +17,6 @@ import {
   IconColorPalette,
 } from "@douyinfe/semi-icons";
 import {
-  Popconfirm,
   Select,
   Input,
   TextArea,
@@ -73,27 +72,24 @@ export default function Table(props) {
         onMouseLeave={() => setIsHovered(false)}
       >
         <div
-          className={`border-2 ${
-            isHovered
+          className={`border-2 ${isHovered
               ? "border-dashed border-blue-500"
               : selectedElement.element === ObjectType.TABLE &&
                 selectedElement.id === props.tableData.id
-              ? "border-blue-500"
-              : "border-slate-400"
-          } select-none rounded-lg w-full ${
-            settings.mode === "light"
+                ? "border-blue-500"
+                : "border-slate-400"
+            } select-none rounded-lg w-full ${settings.mode === "light"
               ? "bg-zinc-100 text-zinc-800"
               : "bg-zinc-800 text-zinc-200"
-          }`}
+            }`}
         >
           <div
             className={`h-[10px] w-full rounded-t-md`}
             style={{ backgroundColor: props.tableData.color }}
           />
           <div
-            className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
-              settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
-            }`}
+            className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
+              }`}
           >
             <div className="px-3">
               {isHovered
@@ -101,8 +97,8 @@ export default function Table(props) {
                   ? props.tableData.name
                   : `${props.tableData.name.substring(0, 10)}...`
                 : props.tableData.name.length < 16
-                ? props.tableData.name
-                : `${props.tableData.name.substring(0, 16)}...`}
+                  ? props.tableData.name
+                  : `${props.tableData.name.substring(0, 16)}...`}
             </div>
             {isHovered && (
               <div className="flex justify-end items-center mx-2">
@@ -151,9 +147,8 @@ export default function Table(props) {
                       </div>
                       <div>
                         <strong
-                          className={`${
-                            props.tableData.indices.length === 0 ? "" : "block"
-                          }`}
+                          className={`${props.tableData.indices.length === 0 ? "" : "block"
+                            }`}
                         >
                           Indices :
                         </strong>{" "}
@@ -164,11 +159,10 @@ export default function Table(props) {
                             {props.tableData.indices.map((index, k) => (
                               <div
                                 key={k}
-                                className={`flex items-center my-1 px-2 py-1 rounded ${
-                                  settings.mode === "light"
+                                className={`flex items-center my-1 px-2 py-1 rounded ${settings.mode === "light"
                                     ? "bg-gray-100"
                                     : "bg-zinc-800"
-                                }`}
+                                  }`}
                               >
                                 <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
                                 <div>
@@ -437,9 +431,8 @@ export default function Table(props) {
                         fid: j,
                         undo: { notNull: f.notNull },
                         redo: { notNull: !f.notNull },
-                        message: `Edit table field to${
-                          f.notNull ? "" : " not"
-                        } null`,
+                        message: `Edit table field to${f.notNull ? "" : " not"
+                          } null`,
                       },
                     ]);
                     setRedoStack([]);
@@ -465,9 +458,8 @@ export default function Table(props) {
                         fid: j,
                         undo: { primary: f.primary },
                         redo: { primary: !f.primary },
-                        message: `Edit table field to${
-                          f.primary ? " not" : ""
-                        } primary`,
+                        message: `Edit table field to${f.primary ? " not" : ""
+                          } primary`,
                       },
                     ]);
                     setRedoStack([]);
@@ -699,9 +691,8 @@ export default function Table(props) {
                                   [checkedValues.target.value]:
                                     checkedValues.target.checked,
                                 },
-                                message: `Edit table field to${
-                                  f.unique ? " not" : ""
-                                } unique`,
+                                message: `Edit table field to${f.unique ? " not" : ""
+                                  } unique`,
                               },
                             ]);
                             setRedoStack([]);
@@ -741,9 +732,8 @@ export default function Table(props) {
                                   [checkedValues.target.value]:
                                     checkedValues.target.checked,
                                 },
-                                message: `Edit table field to${
-                                  f.primary ? " not" : ""
-                                } auto increment`,
+                                message: `Edit table field to${f.primary ? " not" : ""
+                                  } auto increment`,
                               },
                             ]);
                             setRedoStack([]);
@@ -906,10 +896,10 @@ export default function Table(props) {
                         indices: props.tableData.indices.map((index) =>
                           index.id === k
                             ? {
-                                ...index,
-                                fields: [...value],
-                                name: `${value.join("_")}_index`,
-                              }
+                              ...index,
+                              fields: [...value],
+                              name: `${value.join("_")}_index`,
+                            }
                             : index
                         ),
                       });
@@ -946,9 +936,8 @@ export default function Table(props) {
                                     [checkedValues.target.value]:
                                       checkedValues.target.checked,
                                   },
-                                  message: `Edit table field to${
-                                    idx.unique ? " not" : ""
-                                  } unique`,
+                                  message: `Edit table field to${idx.unique ? " not" : ""
+                                    } unique`,
                                 },
                               ]);
                               setRedoStack([]);
@@ -956,10 +945,10 @@ export default function Table(props) {
                                 indices: props.tableData.indices.map((index) =>
                                   index.id === k
                                     ? {
-                                        ...index,
-                                        [checkedValues.target.value]:
-                                          checkedValues.target.checked,
-                                      }
+                                      ...index,
+                                      [checkedValues.target.value]:
+                                        checkedValues.target.checked,
+                                    }
                                     : index
                                 ),
                               });
@@ -1242,11 +1231,10 @@ export default function Table(props) {
   function field(fieldData, index) {
     return (
       <div
-        className={`${
-          index === props.tableData.fields.length - 1
+        className={`${index === props.tableData.fields.length - 1
             ? ""
             : "border-b border-gray-400"
-        } h-[36px] px-2 py-1 flex justify-between`}
+          } h-[36px] px-2 py-1 flex justify-between`}
         onMouseEnter={() => {
           setHoveredField(index);
           props.setOnRect({
@@ -1278,10 +1266,16 @@ export default function Table(props) {
         </div>
         <div className="text-zinc-400">
           {hoveredField === index ? (
-            <Popconfirm
-              title="Are you sure you want to delete this field?"
-              content="This modification will be irreversible"
-              onConfirm={() => {
+
+            <Button
+              theme="solid"
+              size="small"
+              style={{
+                opacity: "0.7",
+                backgroundColor: "#d42020",
+              }}
+              icon={<IconMinus />}
+              onClick={() => {
                 setUndoStack((prev) => [
                   ...prev,
                   {
@@ -1347,18 +1341,7 @@ export default function Table(props) {
                     }),
                 });
               }}
-              onCancel={() => {}}
-            >
-              <Button
-                theme="solid"
-                size="small"
-                style={{
-                  opacity: "0.7",
-                  backgroundColor: "#d42020",
-                }}
-                icon={<IconMinus />}
-              ></Button>
-            </Popconfirm>
+            ></Button>
           ) : (
             fieldData.type
           )}