Table and field drag and drop ordering (#444)

* Add dnd for tables and fields

* Fix inputs

* Decouple ids and indecies in the editor

* Decouple ids and indecies in utils

* Fix field indexes

* Use nanoid instead of numberic ids for fields and tables

* Fix review comments

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -1,11 +1,12 @@
+import { useMemo, useState } from "react";
 import { Action, ObjectType } from "../../../data/constants";
-import { Row, Col, Input, Button, Popover, Select } from "@douyinfe/semi-ui";
+import { Input, Button, Popover, Select } from "@douyinfe/semi-ui";
 import { IconMore, IconKeyStroked } from "@douyinfe/semi-icons";
 import { useEnums, useDiagram, useTypes, useUndoRedo } from "../../../hooks";
-import { useState } from "react";
-import FieldDetails from "./FieldDetails";
 import { useTranslation } from "react-i18next";
 import { dbToTypes } from "../../../data/datatypes";
+import { DragHandle } from "../../SortableList/DragHandle";
+import FieldDetails from "./FieldDetails";
 
 export default function TableField({ data, tid, index }) {
   const { updateField } = useDiagram();
@@ -15,16 +16,18 @@ export default function TableField({ data, tid, index }) {
   const { t } = useTranslation();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
+  const table = useMemo(() => tables.find((t) => t.id === tid), [tables, tid]);
 
   return (
-    <Row gutter={6} className="hover-1 my-2">
-      <Col span={7}>
+    <div className="hover-1 my-2 flex gap-2 items-center">
+      <DragHandle id={data.id} />
+      <div className="min-w-20 flex-1/3">
         <Input
-          id={`scroll_table_${tid}_input_${index}`}
           value={data.name}
+          id={`scroll_table_${tid}_input_${index}`}
           validateStatus={data.name.trim() === "" ? "error" : "default"}
           placeholder="Name"
-          onChange={(value) => updateField(tid, index, { name: value })}
+          onChange={(value) => updateField(tid, data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
           onBlur={(e) => {
             if (e.target.value === editField.name) return;
@@ -35,11 +38,11 @@ export default function TableField({ data, tid, index }) {
                 element: ObjectType.TABLE,
                 component: "field",
                 tid: tid,
-                fid: index,
+                fid: data.id,
                 undo: editField,
                 redo: { name: e.target.value },
                 message: t("edit_table", {
-                  tableName: tables[tid].name,
+                  tableName: table.name,
                   extra: "[field]",
                 }),
               },
@@ -47,8 +50,8 @@ export default function TableField({ data, tid, index }) {
             setRedoStack([]);
           }}
         />
-      </Col>
-      <Col span={8}>
+      </div>
+      <div className="min-w-24 flex-1/3">
         <Select
           className="w-full"
           optionList={[
@@ -78,11 +81,11 @@ export default function TableField({ data, tid, index }) {
                 element: ObjectType.TABLE,
                 component: "field",
                 tid: tid,
-                fid: index,
+                fid: data.id,
                 undo: { type: data.type },
                 redo: { type: value },
                 message: t("edit_table", {
-                  tableName: tables[tid].name,
+                  tableName: table.name,
                   extra: "[field]",
                 }),
               },
@@ -92,7 +95,7 @@ export default function TableField({ data, tid, index }) {
               data.increment && !!dbToTypes[database][value].canIncrement;
 
             if (value === "ENUM" || value === "SET") {
-              updateField(tid, index, {
+              updateField(tid, data.id, {
                 type: value,
                 default: "",
                 values: data.values ? [...data.values] : [],
@@ -102,13 +105,13 @@ export default function TableField({ data, tid, index }) {
               dbToTypes[database][value].isSized ||
               dbToTypes[database][value].hasPrecision
             ) {
-              updateField(tid, index, {
+              updateField(tid, data.id, {
                 type: value,
                 size: dbToTypes[database][value].defaultSize,
                 increment: incr,
               });
             } else if (!dbToTypes[database][value].hasDefault || incr) {
-              updateField(tid, index, {
+              updateField(tid, data.id, {
                 type: value,
                 increment: incr,
                 default: "",
@@ -116,13 +119,13 @@ export default function TableField({ data, tid, index }) {
                 values: [],
               });
             } else if (dbToTypes[database][value].hasCheck) {
-              updateField(tid, index, {
+              updateField(tid, data.id, {
                 type: value,
                 check: "",
                 increment: incr,
               });
             } else {
-              updateField(tid, index, {
+              updateField(tid, data.id, {
                 type: value,
                 increment: incr,
                 size: "",
@@ -131,10 +134,9 @@ export default function TableField({ data, tid, index }) {
             }
           }}
         />
-      </Col>
-      <Col span={3}>
+      </div>
+      <div>
         <Button
-
           type={data.notNull ? "tertiary" : "primary"}
           title={t("nullable")}
           theme={data.notNull ? "light" : "solid"}
@@ -146,23 +148,23 @@ export default function TableField({ data, tid, index }) {
                 element: ObjectType.TABLE,
                 component: "field",
                 tid: tid,
-                fid: index,
+                fid: data.id,
                 undo: { notNull: data.notNull },
                 redo: { notNull: !data.notNull },
                 message: t("edit_table", {
-                  tableName: tables[tid].name,
+                  tableName: table.name,
                   extra: "[field]",
                 }),
               },
             ]);
             setRedoStack([]);
-            updateField(tid, index, { notNull: !data.notNull });
+            updateField(tid, data.id, { notNull: !data.notNull });
           }}
         >
           ?
         </Button>
-      </Col>
-      <Col span={3}>
+      </div>
+      <div>
         <Button
           type={data.primary ? "primary" : "tertiary"}
           title={t("primary")}
@@ -175,26 +177,26 @@ export default function TableField({ data, tid, index }) {
                 element: ObjectType.TABLE,
                 component: "field",
                 tid: tid,
-                fid: index,
+                fid: data.id,
                 undo: { primary: data.primary },
                 redo: { primary: !data.primary },
                 message: t("edit_table", {
-                  tableName: tables[tid].name,
+                  tableName: table.name,
                   extra: "[field]",
                 }),
               },
             ]);
             setRedoStack([]);
-            updateField(tid, index, { primary: !data.primary });
+            updateField(tid, data.id, { primary: !data.primary });
           }}
           icon={<IconKeyStroked />}
         />
-      </Col>
-      <Col span={3}>
+      </div>
+      <div>
         <Popover
           content={
             <div className="px-1 w-[240px] popover-theme">
-              <FieldDetails data={data} index={index} tid={tid} />
+              <FieldDetails data={data} tid={tid} />
             </div>
           }
           trigger="click"
@@ -203,7 +205,7 @@ export default function TableField({ data, tid, index }) {
         >
           <Button type="tertiary" icon={<IconMore />} />
         </Popover>
-      </Col>
-    </Row>
+      </div>
+    </div>
   );
 }