cleanup

src/components/Table/GridTable.stories.tsx

@@ -847,14 +847,16 @@ function makeNestedRows(repeat: number = 1, draggable: boolean = false): GridDat
                 kind: "grandChild",
                 id: `${p1}c1g1`,
                 data: { name: `grandchild ${prefix}p1c1g1` + " foo".repeat(20) },
-                draggable
+                draggable,
               },
               { kind: "grandChild", id: `${p1}c1g2`, data: { name: `grandchild ${prefix}p1c1g2` }, draggable },
             ],
           },
           {
             ...{ kind: "child", id: `${p1}c2`, data: { name: `child ${prefix}p1c2` }, draggable },
-            children: [{ kind: "grandChild", id: `${p1}c2g1`, data: { name: `grandchild ${prefix}p1c2g1` }, draggable }],
+            children: [
+              { kind: "grandChild", id: `${p1}c2g1`, data: { name: `grandchild ${prefix}p1c2g1` }, draggable },
+            ],
           },
           // Put this "grandchild" in the 2nd level to show heterogeneous levels
           { kind: "grandChild", id: `${p1}g1`, data: { name: `grandchild ${prefix}p1g1` }, draggable },
@@ -1901,13 +1903,12 @@ export function DraggableRows() {
 
         // console.log("ondrop: " + draggedRow.id + " -> " + droppedRow.id);
 
-        if(draggedRowIndex === -1 || droppedRowIndex === -1) {
-          console.error ("draggedRowIndex or droppedRowIndex is -1");
+        if (draggedRowIndex === -1 || droppedRowIndex === -1) {
+          console.error("draggedRowIndex or droppedRowIndex is -1");
           console.log("draggedRow", draggedRow);
           console.log("draggedRowIndex", draggedRowIndex);
           console.log("droppedRow", droppedRow);
           console.log("droppedRowIndex", droppedRowIndex);
-
         } else {
           // console.log("insert row at index " + droppedRowIndex);
           // console.log("indexOffset", indexOffset);

src/components/Table/GridTable.test.tsx

@@ -2467,33 +2467,6 @@ describe("GridTable", () => {
     expect(row(r, 2).getAttribute("data-render")).toEqual("1");
   });
 
-  it("memoizes draggable rows based on the data attribute", async () => {
-    const [header, row1, row2] = draggableRows;
-    const columns = [nameColumn];
-    function onDropRow () {};
-    // Given a table is initially rendered with 2 rows
-    const r = await render(
-      <GridTable
-        key="a"
-        columns={columns}
-        rows={[header, row1, row2]}
-        onRowDrop={onDropRow}
-      />,
-    );
-    // When we render with new rows but unchanged data values
-    r.rerender(
-      <GridTable
-        key="a"
-        columns={columns}
-        rows={[header, { ...row1 }, { ...row2 }]}
-        onRowDrop={onDropRow}
-      />,
-    );
-    // Then neither row was re-rendered
-    expect(row(r, 1).getAttribute("data-render")).toEqual("1");
-    expect(row(r, 2).getAttribute("data-render")).toEqual("1");
-  });
-
   it("reacts to setting activeRowId", async () => {
     const activeRowIdRowStyles: RowStyles<Row> = {
       data: {

src/components/Table/GridTable.tsx

@@ -290,38 +290,38 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
   const expandedColumnIds: string[] = useComputed(() => tableState.expandedColumnIds, [tableState]);
   const columnSizes = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds);
 
-  function isCursorBelowMidpoint (target: HTMLElement, clientY: number) {
+  function isCursorBelowMidpoint(target: HTMLElement, clientY: number) {
     const style = window.getComputedStyle(target);
     const rect = target.getBoundingClientRect();
 
-    const pt = parseInt(style.getPropertyValue('padding-top')) / 2;
-    const pb = parseInt(style.getPropertyValue('padding-bottom'));
+    const pt = parseInt(style.getPropertyValue("padding-top")) / 2;
+    const pb = parseInt(style.getPropertyValue("padding-bottom"));
 
-    return clientY > rect.top + pt + ((rect.height - pb) / 2);
+    return clientY > rect.top + pt + (rect.height - pb) / 2;
   }
 
   // allows us to unset children and grandchildren, etc.
   function recursiveSetDraggedOver(rows: GridDataRow<R>[], draggedOver: DraggedOver) {
     rows.forEach((r) => {
       tableState.maybeSetRowDraggedOver(r.id, draggedOver);
-      if(r.children) {
+      if (r.children) {
         recursiveSetDraggedOver(r.children, draggedOver);
       }
     });
   }
 
-  function onDragStart (row: GridDataRow<R>, evt: DragEventType) {
-    if(!row.draggable || !droppedCallback) {
+  function onDragStart(row: GridDataRow<R>, evt: DragEventType) {
+    if (!row.draggable || !droppedCallback) {
       return;
     }
 
     evt.dataTransfer.effectAllowed = "move";
     evt.dataTransfer.setData("text/plain", JSON.stringify({ row }));
     setDraggedRow(row);
-  };
+  }
 
   const onDragEnd = (row: GridDataRow<R>, evt: DragEventType) => {
-    if(!row.draggable || !droppedCallback) {
+    if (!row.draggable || !droppedCallback) {
       return;
     }
 
@@ -331,7 +331,7 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
   };
 
   const onDrop = (row: GridDataRow<R>, evt: DragEventType) => {
-    if(!row.draggable || !droppedCallback) {
+    if (!row.draggable || !droppedCallback) {
       return;
     }
 
@@ -343,7 +343,7 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
       try {
         const draggedRowData = JSON.parse(evt.dataTransfer.getData("text/plain")).row;
 
-        if(draggedRowData.id === row.id) {
+        if (draggedRowData.id === row.id) {
           return;
         }
 
@@ -357,20 +357,17 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
   };
 
   const onDragEnter = (row: GridDataRow<R>, evt: DragEventType) => {
-    if(!row.draggable || !droppedCallback) {
+    if (!row.draggable || !droppedCallback) {
       return;
     }
 
     evt.preventDefault();
 
-    evt.cancelable
-
     // set flags for css spacer
     recursiveSetDraggedOver(rows, DraggedOver.None);
 
-    if(draggedRowRef.current) {
-
-      if(draggedRowRef.current.id === row.id) {
+    if (draggedRowRef.current) {
+      if (draggedRowRef.current.id === row.id) {
         return;
       }
 
@@ -381,14 +378,14 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
   };
 
   const onDragOver = (row: GridDataRow<R>, evt: DragEventType) => {
-    if(!row.draggable || !droppedCallback) {
+    if (!row.draggable || !droppedCallback) {
       return;
     }
 
     evt.preventDefault();
 
-    if(draggedRowRef.current) {
-      if(draggedRowRef.current.id === row.id) {
+    if (draggedRowRef.current) {
+      if (draggedRowRef.current.id === row.id) {
         return;
       }
 

src/components/Table/components/Row.tsx

@@ -136,7 +136,8 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
     <RowTag
       css={rowCss}
       {...others}
-      data-gridrow {...getCount(row.id)}
+      data-gridrow
+      {...getCount(row.id)}
       // these events are necessary to get the dragged-over row for the drop event
       // and spacer styling
       onDrop={(evt) => onDrop?.(row, evt)}

src/components/Table/utils/RowState.ts

@@ -10,7 +10,7 @@ export enum DraggedOver {
   None,
   Above, // In this case this means higher on the screen which means a lower y value and a lower row index
   Below, // In this case this means lower on the screen which means a higher y value and a higher row index
-};
+}
 
 /**
  * A reactive/observable state of each GridDataRow's current behavior.

src/components/Table/utils/RowStates.ts

@@ -178,22 +178,26 @@ export class RowStates<R extends Kinded> {
     return rs;
   }
 
-  maybeSetRowDraggedOver(id: string, draggedOver: DraggedOver, requireSameParentRow: GridDataRow<R> | undefined = undefined): void {
+  maybeSetRowDraggedOver(
+    id: string,
+    draggedOver: DraggedOver,
+    requireSameParentRow: GridDataRow<R> | undefined = undefined,
+  ): void {
     const rs = this.get(id);
 
-    if(requireSameParentRow) {
+    if (requireSameParentRow) {
       const requireParentRowState = this.get(requireSameParentRow.id);
-      if(requireParentRowState.parent?.row?.id !== rs.parent?.row?.id) return;
+      if (requireParentRowState.parent?.row?.id !== rs.parent?.row?.id) return;
     }
 
     // if this is an expanded parent and draggedOver is Below then we want to set this on this rows bottom-most child
-    if(!rs.collapsed && rs.children && rs.children?.length > 0 && draggedOver === DraggedOver.Below) {
+    if (!rs.collapsed && rs.children && rs.children?.length > 0 && draggedOver === DraggedOver.Below) {
       let rowState = rs;
       // recursively find the bottom-most child
-      while(rowState.children && rowState.children?.length > 0) {
+      while (rowState.children && rowState.children?.length > 0) {
         rowState = rowState.children[rowState.children.length - 1];
       }
-      
+
       rowState.isDraggedOver = draggedOver;
       return;
     }

src/components/Table/utils/TableState.ts

@@ -253,7 +253,11 @@ export class TableState<R extends Kinded> {
     this.rowStates.delete(ids);
   }
 
-  maybeSetRowDraggedOver(id: string, draggedOver: DraggedOver, requireSameParentRow: GridDataRow<R> | undefined = undefined): void {
+  maybeSetRowDraggedOver(
+    id: string,
+    draggedOver: DraggedOver,
+    requireSameParentRow: GridDataRow<R> | undefined = undefined,
+  ): void {
     this.rowStates.maybeSetRowDraggedOver(id, draggedOver, requireSameParentRow);
   }
 }