feat: bases - WIP

2026-05-19 07:54:05 +08:00 · 2026-03-08 00:56:24 +00:00
parent 0aeaa43112
commit 94ee1e80fb
83 changed files with 9243 additions and 38 deletions
@@ -0,0 +1,84 @@
+import { memo, useCallback } from "react";
+import { Row } from "@tanstack/react-table";
+import { IBaseRow } from "@/features/base/types/base.types";
+import { GridCell } from "./grid-cell";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowDragHandlers = {
+  onDragStart: (rowId: string) => void;
+  onDragOver: (rowId: string, e: React.DragEvent) => void;
+  onDragEnd: () => void;
+  onDragLeave: () => void;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  dropPosition: "above" | "below" | null;
+};
+
+type GridRowProps = {
+  row: Row<IBaseRow>;
+  rowIndex: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  dragHandlers?: RowDragHandlers;
+};
+
+export const GridRow = memo(function GridRow({
+  row,
+  rowIndex,
+  onCellUpdate,
+  dragHandlers,
+}: GridRowProps) {
+  const handleDragStart = useCallback(
+    (e: React.DragEvent) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", row.id);
+      dragHandlers?.onDragStart(row.id);
+    },
+    [row.id, dragHandlers],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      dragHandlers?.onDragOver(row.id, e);
+    },
+    [row.id, dragHandlers],
+  );
+
+  const dropIndicatorClass = dragHandlers?.isDropTarget
+    ? dragHandlers.dropPosition === "above"
+      ? classes.rowDropAbove
+      : classes.rowDropBelow
+    : "";
+
+  return (
+    <div
+      className={`${classes.row} ${dragHandlers?.isDragging ? classes.rowDragging : ""} ${dropIndicatorClass}`}
+      role="row"
+      onDragOver={handleDragOver}
+      onDrop={(e) => {
+        e.preventDefault();
+        dragHandlers?.onDragEnd();
+      }}
+      onDragLeave={dragHandlers?.onDragLeave}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isRowNumber = cell.column.id === "__row_number";
+        return (
+          <GridCell
+            key={cell.id}
+            cell={cell}
+            rowIndex={rowIndex}
+            onCellUpdate={onCellUpdate}
+            rowDragProps={
+              isRowNumber && dragHandlers
+                ? {
+                    draggable: true,
+                    onDragStart: handleDragStart,
+                  }
+                : undefined
+            }
+          />
+        );
+      })}
+    </div>
+  );
+});