Drag styles (#171)

* start on pushing drag styles into classes * remove !important from drag/hover don't do hover on the dragged row/col (noop)
KevinVandy · Oct 11, 2023 · 9dc6569 · 9dc6569
1 parent c3f2496
commit 9dc6569
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 96 deletions.
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.module.css b/packages/mantine-react-table/src/body/MRT_TableBodyCell.module.css
@@ -85,10 +85,51 @@
   padding-left: calc(calc(var(--mrt-row-depth, 0) + 1) * 1rem);
 }
 
-.root-opacity {
+:root {
+  --hover-color: var(--mantine-primary-color-filled);
+  --drag-color: var(--mantine-color-gray-7);
+  --hover-thickness: 2px;
+  --drag-thickness: 1px;
+}
+
+.dragging-column {
+  z-index: 2;
+  border-left: var(--drag-thickness) dashed var(--drag-color);
+  border-right: var(--drag-thickness) dashed var(--drag-color);
+  &.last-row {
+    border-bottom: var(--drag-thickness) dashed var(--drag-color);
+  }
+}
+
+.hovered-column {
   opacity: 0.5;
+  border-left: var(--hover-thickness) dashed var(--hover-color);
+  border-right: var(--hover-thickness) dashed var(--hover-color);
+  &.last-row {
+    border-bottom: var(--hover-thickness) dashed var(--hover-color);
+  }
 }
 
-.root-dragging {
+.dragging-row {
   z-index: 2;
+  border-top: var(--drag-thickness) dashed var(--drag-color);
+  border-bottom: var(--drag-thickness) dashed var(--drag-color);
+  &.last-column {
+    border-right: var(--drag-thickness) dashed var(--drag-color);
+  }
+  &.first-column {
+    border-left: var(--drag-thickness) dashed var(--drag-color);
+  }
+}
+
+.hovered-row {
+  opacity: 0.5;
+  border-top: var(--hover-thickness) dashed var(--hover-color);
+  border-bottom: var(--hover-thickness) dashed var(--hover-color);
+  &.last-column {
+    border-right: var(--hover-thickness) dashed var(--hover-color);
+  }
+  &.first-column {
+    border-left: var(--hover-thickness) dashed var(--hover-color);
+  }
 }
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import {
   memo,
   type CSSProperties,
@@ -9,7 +10,7 @@ import {
   useState,
 } from 'react';
 import { Skeleton, TableTd } from '@mantine/core';
-import clsx from 'clsx';
+
 import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
@@ -123,45 +124,6 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
     return styles;
   }, [column]);
 
-  const draggingBorders = useMemo(() => {
-    const isDraggingColumn = draggingColumn?.id === column.id;
-    const isHoveredColumn = hoveredColumn?.id === column.id;
-    const isDraggingRow = draggingRow?.id === row.id;
-    const isHoveredRow = hoveredRow?.id === row.id;
-    const isFirstColumn = getIsFirstColumn(column, table);
-    const isLastColumn = getIsLastColumn(column, table);
-    const isLastRow = rowIndex === numRows && numRows - 1;
-
-    const borderStyle =
-      isDraggingColumn || isDraggingRow
-        ? '1px dashed var(--mantine-color-gray-7) !important'
-        : isHoveredColumn || isHoveredRow
-        ? '2px dashed var(--mantine-primary-color-filled) !important'
-        : undefined;
-
-    return borderStyle
-      ? {
-          borderLeft:
-            isDraggingColumn ||
-            isHoveredColumn ||
-            ((isDraggingRow || isHoveredRow) && isFirstColumn)
-              ? borderStyle
-              : undefined,
-          borderRight:
-            isDraggingColumn ||
-            isHoveredColumn ||
-            ((isDraggingRow || isHoveredRow) && isLastColumn)
-              ? borderStyle
-              : undefined,
-          borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
-              ? borderStyle
-              : undefined,
-          borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
-        }
-      : undefined;
-  }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
-
   const isEditable =
     (parseFromValuesOrFunc(enableEditing, row) &&
       parseFromValuesOrFunc(columnDef.enableEditing, row)) !== false;
@@ -253,9 +215,6 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
           column.columnDef.columnDefType !== 'group' &&
           !row.getIsSelected() &&
           classes['root-pinned-color'],
-        draggingColumn?.id === column.id ||
-          (table.getState().hoveredColumn?.id === column.id &&
-            classes['root-opacity']),
         column.getIsPinned() &&
           column.columnDef.columnDefType !== 'group' &&
           classes['root-pinned'],
@@ -268,11 +227,21 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
         column.id === 'mrt-row-expand' && classes['root-expand-depth'],
         columnDefType === 'data' && classes['root-data-col'],
         density === 'xs' && classes['root-nowrap'],
-        draggingColumn?.id === column.id && classes['root-dragging'],
+        draggingColumn?.id === column.id && classes['dragging-column'],
+        draggingColumn?.id !== column.id &&
+          hoveredColumn?.id === column.id &&
+          classes['hovered-column'],
+        draggingRow?.id === row.id && classes['dragging-row'],
+        draggingRow?.id !== row.id &&
+          hoveredRow?.id === row.id &&
+          classes['hovered-row'],
+        getIsFirstColumn(column, table) && classes['first-column'],
+        getIsLastColumn(column, table) && classes['last-column'],
+        numRows && rowIndex === numRows - 1 && classes['last-row'],
+        rowIndex === 0 && classes['first-row'],
         tableCellProps?.className,
       )}
       style={(theme) => ({
-        ...draggingBorders,
         ...widthStyles,
         ...parseFromValuesOrFunc(tableCellProps.style, theme),
       })}

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.module.css b/packages/mantine-react-table/src/head/MRT_TableHeadCell.module.css
@@ -13,7 +13,7 @@
   );
 
   @mixin hover {
-    .mantine-ActionIcon-root {
+    :global(.mantine-ActionIcon-root) {
       opacity: 1;
     }
   }
@@ -62,8 +62,25 @@
     ) inset;
 }
 
-.root-opacity {
+:root {
+  --hover-color: var(--mantine-primary-color-filled);
+  --drag-color: var(--mantine-color-gray-7);
+  --hover-thickness: 2px;
+  --drag-thickness: 1px;
+}
+
+.dragging {
   opacity: 0.5;
+  border-left: var(--drag-thickness) dashed var(--drag-color);
+  border-right: var(--drag-thickness) dashed var(--drag-color);
+  border-top: var(--drag-thickness) dashed var(--drag-color);
+}
+
+.hovered {
+  z-index: 2;
+  border-left: var(--hover-thickness) dashed var(--hover-color);
+  border-right: var(--hover-thickness) dashed var(--hover-color);
+  border-top: var(--hover-thickness) dashed var(--hover-color);
 }
 
 .content {

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx
@@ -1,10 +1,5 @@
-import {
-  type DragEvent,
-  type ReactNode,
-  useMemo,
-  type CSSProperties,
-} from 'react';
-import { Box, Flex, useMantineTheme } from '@mantine/core';
+import { type ReactNode, useMemo, type CSSProperties } from 'react';
+import { Box, Flex } from '@mantine/core';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
@@ -14,7 +9,6 @@ import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import {
   getIsFirstRightPinnedColumn,
   getIsLastLeftPinnedColumn,
-  getPrimaryColor,
   getTotalRight,
   parseCSSVarId,
   parseFromValuesOrFunc,
@@ -32,7 +26,6 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
   header,
   table,
 }: Props<TData>) => {
-  const theme = useMantineTheme();
   const {
     getState,
     options: {
@@ -97,35 +90,6 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
     return pl;
   }, [showColumnActions, showDragHandle]);
 
-  const draggingBorder = useMemo(
-    () =>
-      draggingColumn?.id === column.id
-        ? `1px dashed ${theme.colors.gray[7]} !important`
-        : hoveredColumn?.id === column.id
-        ? `2px dashed ${getPrimaryColor(theme)} !important`
-        : undefined,
-    [draggingColumn, hoveredColumn],
-  );
-
-  const draggingBorders = draggingBorder
-    ? {
-        borderLeft: draggingBorder,
-        borderRight: draggingBorder,
-        borderTop: draggingBorder,
-      }
-    : undefined;
-
-  const handleDragEnter = (_e: DragEvent) => {
-    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
-      setHoveredColumn(null);
-    }
-    if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
-      setHoveredColumn(
-        columnDef.enableColumnOrdering !== false ? column : null,
-      );
-    }
-  };
-
   const headerElement =
     columnDef?.Header instanceof Function
       ? columnDef?.Header?.({
@@ -137,16 +101,29 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
 
   return (
     <Box
+      {...tableCellProps}
       component="th"
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
-      onDragEnter={handleDragEnter}
+      onDragEnter={() => {
+        if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+          setHoveredColumn(null);
+        }
+        if (
+          enableColumnOrdering &&
+          draggingColumn &&
+          columnDefType !== 'group'
+        ) {
+          setHoveredColumn(
+            columnDef.enableColumnOrdering !== false ? column : null,
+          );
+        }
+      }}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           tableHeadCellRefs.current[column.id] = node;
         }
       }}
-      {...tableCellProps}
       __vars={{
         '--mrt-table-head-cell-padding':
           density === 'xl' ? '23' : density === 'md' ? '16' : '10',
@@ -179,14 +156,14 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
         getIsFirstRightPinnedColumn(column) &&
           classes['root-pinned-right-first'],
         tableCellProps?.className,
-        draggingColumn?.id === column.id ||
-          (table.getState().hoveredColumn?.id === column.id &&
-            classes['root-opacity']),
+        draggingColumn?.id === column.id && classes['dragging'],
+        draggingColumn?.id !== column.id &&
+          hoveredColumn?.id === column.id &&
+          classes['hovered'],
       )}
       style={(theme) => ({
-        ...draggingBorders,
-        ...widthStyles,
         ...parseFromValuesOrFunc(tableCellProps?.style, theme),
+        ...widthStyles,
       })}
     >
       {header.isPlaceholder ? null : (

diff --git a/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.module.css b/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.module.css
@@ -12,11 +12,11 @@
     min-width: rem(100px);
   }
   width: 100%;
-  & .mantine-TextInput-input {
+  & :global(.mantine-TextInput-input) {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  & .mantine-DateInput-input {
+  & :global(.mantine-DateInput-input) {
     height: 2.1rem;
   }
 }