rl-core-front 0.15.2 → 0.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/data-table.tsx

@@ -202,6 +202,14 @@ export function DataTable<T extends RowData>({
   */
   const [dragOffset, setDragOffset] = useState(0);
   const dragStartY = useRef(0);
+  /*
+    A altura da linha na mão, medida no momento em que ela é pega.
+
+    É o tanto que as linhas do caminho se afastam para abrir o buraco onde ela
+    vai cair. Medida e não fixa: a altura de uma linha depende do conteúdo, e um
+    número chutado abriria um vão maior ou menor que a linha que vem.
+  */
+  const [dragHeight, setDragHeight] = useState(0);
 
   const { hiddenColumns, saveHiddenColumns } = useColumnVisibility(storageKey);
   const columnVisibility = useMemo<ColumnVisibilityState>(() => {
@@ -282,6 +290,9 @@ export function DataTable<T extends RowData>({
       // A captura mantém os eventos na alça mesmo com o dedo já longe dela;
       // sem ela, o arrasto morre no primeiro pixel fora do botão.
       event.currentTarget.setPointerCapture(event.pointerId);
+      setDragHeight(
+        event.currentTarget.closest("tr")?.getBoundingClientRect().height ?? 0,
+      );
       dragStartY.current = event.clientY;
       setDragOffset(0);
       setDraggedRow(rowId);
@@ -289,35 +300,36 @@ export function DataTable<T extends RowData>({
     };
 
   /**
-   * Que linha está embaixo do ponteiro.
+   * Onde a linha está agora: quantas linhas ela já subiu ou desceu.
    *
-   * Pelo ponto e não pelo alvo do evento: com a captura ativa, todo `move`
-   * chega na alça de origem, e é o `elementFromPoint` que sabe onde o dedo
-   * está de verdade.
+   * Conta pelo deslocamento, e não por quem está embaixo do ponteiro. Quem
+   * está embaixo do ponteiro é a **própria linha arrastada** — ela viaja com o
+   * dedo —, e perguntar ao ponto devolvia origem e destino iguais: o arrasto
+   * terminava sem gravar nada. Além disso as linhas paradas se movem para
+   * abrir o vão, então o que o ponto responde muda durante o gesto e a
+   * escolha do destino ficaria oscilando entre duas linhas.
    */
   const moveRowDrag = (event: ReactPointerEvent<HTMLButtonElement>): void => {
-    if (!draggedRow) {
+    if (!draggedRow || dragHeight === 0) {
       return;
     }
 
-    setDragOffset(event.clientY - dragStartY.current);
+    const offset = event.clientY - dragStartY.current;
+    setDragOffset(offset);
 
-    const under = document
-      .elementFromPoint(event.clientX, event.clientY)
-      ?.closest("tr[data-row-id]");
-    const id = under?.getAttribute("data-row-id");
+    const rows = table.getRowModel().rows;
+    const from = rows.findIndex((row) => row.id === draggedRow);
+    // Meia linha de deslocamento já troca de lugar: é o ponto em que a linha
+    // arrastada cobre mais a vizinha do que o próprio lugar de origem.
+    const destino = Math.min(
+      Math.max(from + Math.round(offset / dragHeight), 0),
+      rows.length - 1,
+    );
 
-    if (id) {
-      setTargetRow(id);
-    }
+    setTargetRow(rows[destino]?.id ?? draggedRow);
   };
 
-  /**
-   * Onde a linha saiu e onde ela está agora, na página desenhada.
-   *
-   * Os dois só para saber de que lado a guia de destino aparece — descendo,
-   * embaixo do alvo; subindo, em cima dele.
-   */
+  /** Onde a linha saiu e onde ela está agora, na página desenhada. */
   const draggedIndex = table
     .getRowModel()
     .rows.findIndex((row) => row.id === draggedRow);
@@ -325,6 +337,30 @@ export function DataTable<T extends RowData>({
     .getRowModel()
     .rows.findIndex((row) => row.id === targetRow);
 
+  /**
+   * Quanto uma linha parada se desloca para abrir o buraco.
+   *
+   * As linhas entre a origem e o destino sobem (ou descem) a altura de uma
+   * linha, e o vão aparece exatamente onde a linha vai cair. É isso que
+   * responde "para onde isto está indo" durante o gesto — um traço de destino
+   * diz o mesmo em teoria, mas exige ler a tabela para achá-lo.
+   */
+  const rowShift = (index: number): number => {
+    if (draggedRow === null || draggedIndex < 0 || targetIndex < 0) {
+      return 0;
+    }
+
+    if (index > draggedIndex && index <= targetIndex) {
+      return -dragHeight;
+    }
+
+    if (index >= targetIndex && index < draggedIndex) {
+      return dragHeight;
+    }
+
+    return 0;
+  };
+
   /** Soltou: avisa quem chamou e devolve a tabela ao estado parado. */
   const endRowDrag = (): void => {
     if (draggedRow && targetRow && draggedRow !== targetRow) {
@@ -467,17 +503,9 @@ export function DataTable<T extends RowData>({
               </TableRow>
             )}
             {!loading &&
-              table.getRowModel().rows.map((row) => {
+              table.getRowModel().rows.map((row, index) => {
                 const dragging = draggedRow === row.id;
-                // A guia aparece do lado para onde a linha está indo: descendo,
-                // embaixo do alvo; subindo, em cima dele. É ela que responde
-                // "onde isto vai cair" antes de soltar.
-                const guide =
-                  draggedRow !== null && targetRow === row.id && !dragging
-                    ? targetIndex > draggedIndex
-                      ? "border-b-2 border-b-primary"
-                      : "border-t-2 border-t-primary"
-                    : undefined;
+                const shift = dragging ? 0 : rowShift(index);
 
                 return (
                   <TableRow
@@ -487,14 +515,30 @@ export function DataTable<T extends RowData>({
                       // A linha viaja com o dedo, destacada do resto da tabela —
                       // é o que diz que o arrasto pegou, e qual linha pegou.
                       dragging &&
-                        "relative z-20 bg-card shadow-lg ring-1 ring-primary/50 [&>td]:opacity-90",
+                        "relative z-20 bg-card shadow-xl ring-1 ring-primary/50",
                       draggedRow !== null && "select-none",
-                      guide,
+                      /*
+                        A transição existe só enquanto o arrasto dura, e só nas
+                        linhas paradas: na que segue o dedo ela viraria atraso,
+                        e depois de soltar ela animaria a volta ao zero por
+                        cima da lista já reordenada — dois movimentos ao mesmo
+                        tempo, que é o tremor que se vê ao largar a linha.
+                      */
+                      draggedRow !== null &&
+                        !dragging &&
+                        "transition-transform duration-200",
                     )}
                     style={
                       dragging
-                        ? { transform: `translateY(${dragOffset}px)` }
-                        : undefined
+                        ? {
+                            // O `scale` é o "levantou da mesa": a linha na mão
+                            // fica maior que as paradas, como o card que sai
+                            // da coluna no quadro.
+                            transform: `translateY(${dragOffset}px) scale(1.01)`,
+                          }
+                        : shift !== 0
+                          ? { transform: `translateY(${shift}px)` }
+                          : undefined
                     }
                   >
                     {reorderable && (