@careharmony/mantine-react-table-ng 0.0.0-stage → 4.0.0-beta.0

package/src/components/body/MRT_TableBody.tsx

@@ -0,0 +1,214 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableBody.module.css';
+
+import { memo, useMemo } from 'react';
+
+import {
+  type TableProps,
+  TableTbody,
+  type TableTbodyProps,
+} from '@mantine/core';
+
+import { MRT_TableBodyEmptyRow } from './MRT_TableBodyEmptyRow';
+import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
+
+import { useMRT_Rows } from '../../hooks/useMRT_Rows';
+import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableTbodyProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+  tableProps: Partial<TableProps>;
+}
+
+export const MRT_TableBody = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  tableProps,
+  ...rest
+}: MRT_TableBodyProps<TData>) => {
+  const {
+    getBottomRows,
+    getIsSomeRowsPinned,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      mantineTableBodyProps,
+      memoMode,
+      renderDetailPanel,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef },
+  } = table;
+  const { isFullScreen, rowPinning } = getState();
+
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(mantineTableBodyProps, { table }),
+    ...rest,
+  };
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const pinnedRowIds = useMemo(() => {
+    if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
+    return getRowModel()
+      .rows.filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+  }, [rowPinning, getRowModel().rows]);
+
+  const rows = useMRT_Rows(table);
+
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
+
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+    tableProps,
+  };
+
+  return (
+    <>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('top') && (
+          <TableTbody
+            {...tableBodyProps}
+            __vars={{
+              '--mrt-table-head-height': `${tableHeadHeight}`,
+              ...tableBodyProps?.__vars,
+            }}
+            className={clsx(
+              classes.pinned,
+              layoutMode?.startsWith('grid') && classes['root-grid'],
+              tableBodyProps?.className,
+            )}
+          >
+            {getTopRows().map((row, renderedRowIndex) => {
+              const rowProps = {
+                ...commonRowProps,
+                renderedRowIndex,
+                row,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...rowProps} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...rowProps} />
+              );
+            })}
+          </TableTbody>
+        )}
+      <TableTbody
+        {...tableBodyProps}
+        __vars={{
+          '--mrt-table-body-height': rowVirtualizer
+            ? `${rowVirtualizer.getTotalSize()}px`
+            : undefined,
+          ...tableBodyProps?.__vars,
+        }}
+        className={clsx(
+          classes.root,
+          layoutMode?.startsWith('grid') && classes['root-grid'],
+          !rows.length && classes['root-no-rows'],
+          rowVirtualizer && classes['root-virtualized'],
+          tableBodyProps?.className,
+        )}
+      >
+        {tableBodyProps?.children ??
+          (!rows.length ? (
+            <MRT_TableBodyEmptyRow {...commonRowProps} />
+          ) : (
+            <>
+              {(rowVirtualizer?.virtualRows ?? rows).map(
+                (rowOrVirtualRow, renderedRowIndex) => {
+                  if (rowVirtualizer) {
+                    if (renderDetailPanel) {
+                      if (rowOrVirtualRow.index % 2 === 1) {
+                        return null;
+                      } else {
+                        renderedRowIndex = rowOrVirtualRow.index / 2;
+                      }
+                    } else {
+                      renderedRowIndex = rowOrVirtualRow.index;
+                    }
+                  }
+                  const row = rowVirtualizer
+                    ? rows[renderedRowIndex]
+                    : (rowOrVirtualRow as MRT_Row<TData>);
+                  const props = {
+                    ...commonRowProps,
+                    pinnedRowIds,
+                    renderedRowIndex,
+                    row,
+                    rowVirtualizer,
+                    virtualRow: rowVirtualizer
+                      ? (rowOrVirtualRow as MRT_VirtualItem)
+                      : undefined,
+                  };
+                  const key = `${row.id}-${row.index}`;
+                  return memoMode === 'rows' ? (
+                    <Memo_MRT_TableBodyRow key={key} {...props} />
+                  ) : (
+                    <MRT_TableBodyRow key={key} {...props} />
+                  );
+                },
+              )}
+            </>
+          ))}
+      </TableTbody>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('bottom') && (
+          <TableTbody
+            {...tableBodyProps}
+            __vars={{
+              '--mrt-table-footer-height': `${tableFooterHeight}`,
+              ...tableBodyProps?.__vars,
+            }}
+            className={clsx(
+              classes.pinned,
+              layoutMode?.startsWith('grid') && classes['root-grid'],
+              tableBodyProps?.className,
+            )}
+          >
+            {getBottomRows().map((row, renderedRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                renderedRowIndex,
+                row,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableTbody>
+        )}
+    </>
+  );
+};
+
+export const Memo_MRT_TableBody = memo(
+  MRT_TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data,
+) as typeof MRT_TableBody;

package/src/components/body/MRT_TableBodyCell.module.css

@@ -0,0 +1,107 @@
+.root {
+  --resize-thickness: 2px;
+
+  background-clip: padding-box;
+  text-align: var(--mrt-cell-align, left);
+  overflow: hidden;
+  position: relative;
+  transition: padding 150ms ease-in-out;
+
+  &[data-dragging-column] {
+    z-index: 2;
+    border-left: var(--drag-thickness) dashed
+      var(--mrt-dragging-drag-border-color);
+    border-right: var(--drag-thickness) dashed
+      var(--mrt-dragging-drag-border-color);
+    &[data-last-row] {
+      border-bottom: var(--drag-thickness) dashed
+        var(--mrt-dragging-drag-border-color);
+    }
+  }
+
+  &[data-hovered-column-target] {
+    opacity: 0.5;
+    border-left: var(--hover-thickness) dashed
+      var(--mrt-dragging-hovered-border-color);
+    border-right: var(--hover-thickness) dashed
+      var(--mrt-dragging-hovered-border-color);
+    &[data-last-row] {
+      border-bottom: var(--hover-thickness) dashed
+        var(--mrt-dragging-hovered-border-color);
+    }
+  }
+
+  &[data-resizing='ltr'] {
+    border-right: var(--resize-thickness) solid
+      var(--mrt-resize-column-border-color);
+  }
+
+  &[data-resizing='rtl'] {
+    border-left: var(--resize-thickness) solid
+      var(--mrt-resize-column-border-color);
+  }
+
+  &:hover {
+    outline-offset: -1px;
+    text-overflow: clip;
+  }
+}
+
+.root-grid {
+  align-items: center;
+  justify-content: var(--mrt-cell-align, flex-start);
+  display: flex;
+}
+
+.root-virtualized {
+  transition: none;
+}
+
+.root-data-col {
+  text-overflow: ellipsis;
+}
+
+.root-nowrap {
+  white-space: nowrap;
+}
+
+.root-cursor-pointer {
+  cursor: pointer;
+}
+
+.root-editable-hover {
+  @mixin hover {
+    outline: 1px solid var(--mantine-color-gray-7);
+  }
+}
+
+.root-cell-hover-reveal {
+  overflow: visible;
+}
+
+.cell-hover-reveal {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: var(--mrt-cell-align);
+}
+
+.cell-hover-reveal.overflowing:hover{
+  overflow: visible;
+  white-space: normal;
+  position: absolute;
+  z-index: 2;
+  padding: var(--table-vertical-spacing)
+    var(--table-horizontal-spacing, var(--mantine-spacing-xs));
+  background-color: var(--mrt-base-background-color);
+  box-shadow: var(--mantine-shadow-sm);
+  border: 1px solid var(--mantine-primary-color-filled);
+  text-indent: -1px;
+  width: max-content;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/components/body/MRT_TableBodyCell.tsx

@@ -0,0 +1,355 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableBodyCell.module.css';
+
+import {
+  type CSSProperties,
+  type DragEvent,
+  memo,
+  type MouseEvent,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  Skeleton,
+  TableTd,
+  type TableTdProps,
+  useDirection,
+} from '@mantine/core';
+
+import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
+
+import {
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { getMRT_CellView } from '../../utils/snapshot.utils';
+import { parseCSSVarId } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
+import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends TableTdProps {
+  cell: MRT_Cell<TData, TValue>;
+  numRows?: number;
+  renderedColumnIndex?: number;
+  renderedRowIndex?: number;
+  rowRef: RefObject<HTMLTableRowElement | null>;
+  table: MRT_TableInstance<TData>;
+  virtualCell?: MRT_VirtualItem;
+}
+
+export const MRT_TableBodyCell = <TData extends MRT_RowData>({
+  cell: cellProp,
+  numRows = 1,
+  renderedColumnIndex = 0,
+  renderedRowIndex = 0,
+  rowRef,
+  table,
+  virtualCell,
+  ...rest
+}: Props<TData>) => {
+  //a view has a new identity per table reference, which compiled render callbacks need
+  const cell = getMRT_CellView(table, cellProp);
+  const direction = useDirection();
+
+  const {
+    getState,
+    options: {
+      columnResizeDirection,
+      columnResizeMode,
+      createDisplayMode,
+      editDisplayMode,
+      enableClickToCopy,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableEditing,
+      enableGrouping,
+      layoutMode,
+      mantineSkeletonProps,
+      mantineTableBodyCellProps,
+    },
+    refs: { editInputRefs },
+    setEditingCell,
+    setHoveredColumn,
+  } = table;
+  const {
+    columnSizingInfo,
+    creatingRow,
+    density,
+    draggingColumn,
+    editingCell,
+    editingRow,
+    hoveredColumn,
+    isLoading,
+    showSkeletons,
+  } = getState();
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const args = {
+    cell,
+    column,
+    renderedColumnIndex,
+    renderedRowIndex,
+    row,
+    table,
+  };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineTableBodyCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.mantineTableBodyCellProps, args),
+    ...rest,
+  };
+
+  const skeletonProps = parseFromValuesOrFunc(mantineSkeletonProps, args);
+
+  const [skeletonWidth, setSkeletonWidth] = useState(100);
+  useEffect(() => {
+    if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
+    const size = column.getSize();
+    setSkeletonWidth(
+      columnDefType === 'display'
+        ? size / 2
+        : Math.round(Math.random() * (size - size / 3) + size / 3),
+    );
+  }, [isLoading, showSkeletons]);
+
+  const widthStyles: CSSProperties = {
+    minWidth: `max(calc(var(--col-${parseCSSVarId(
+      column?.id,
+    )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--col-${parseCSSVarId(column.id)}-size) * 1px)`,
+  };
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `${
+      [0, false].includes(columnDef.grow!)
+        ? 0
+        : `var(--col-${parseCSSVarId(column.id)}-size)`
+    } 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+  }
+  const isDraggingColumn = draggingColumn?.id === column.id;
+  const isHoveredColumn = hoveredColumn?.id === column.id;
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
+  const isEditable =
+    !cell.getIsPlaceholder() &&
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
+
+  const isEditing =
+    isEditable &&
+    !['custom', 'modal'].includes(editDisplayMode as string) &&
+    (editDisplayMode === 'table' ||
+      editingRow?.id === row.id ||
+      editingCell?.id === cell.id) &&
+    !row.getIsGrouped();
+
+  const isCreating =
+    isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+
+  const showClickToCopyButton =
+    parseFromValuesOrFunc(enableClickToCopy, cell) ||
+    (parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) &&
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) !== false);
+
+  const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDoubleClick?.(event);
+    if (isEditable && editDisplayMode === 'cell') {
+      setEditingCell(cell);
+      setTimeout(() => {
+        const textField = editInputRefs.current[cell.id];
+        if (textField) {
+          textField.focus();
+          textField.select?.();
+        }
+      }, 100);
+    }
+  };
+
+  const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onDragEnter?.(e);
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn) {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const cellValueProps = {
+    cell,
+    renderedColumnIndex,
+    renderedRowIndex,
+    table,
+  };
+
+  const cellHoverRevealDivRef = useRef<any>(null);
+  const [isCellContentOverflowing, setIsCellContentOverflowing] =
+    useState(false);
+
+  const onMouseEnter = () => {
+    if (!columnDef.enableCellHoverReveal) return;
+    const div = cellHoverRevealDivRef.current;
+    if (div) {
+      const isOverflow = div.scrollWidth > div.clientWidth;
+      setIsCellContentOverflowing(isOverflow);
+    }
+  };
+
+  const onMouseLeave = () => {
+    if (!columnDef.enableCellHoverReveal) return;
+    setIsCellContentOverflowing(false);
+  };
+
+  const renderCellContent = () => {
+    if (cell.getIsPlaceholder()) {
+      return columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null;
+    }
+
+    if (showSkeletons !== false && (isLoading || showSkeletons)) {
+      return <Skeleton height={20} width={skeletonWidth} {...skeletonProps} />;
+    }
+
+    if (
+      columnDefType === 'display' &&
+      (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
+        column.id,
+      ) ||
+        !row.getIsGrouped())
+    ) {
+      return columnDef.Cell?.({
+        column,
+        renderedCellValue: cell.renderValue() as any,
+        row,
+        rowRef,
+        ...cellValueProps,
+      });
+    }
+
+    if (isCreating || isEditing) {
+      return <MRT_EditCellTextInput cell={cell} table={table} />;
+    }
+
+    if (showClickToCopyButton && columnDef.enableClickToCopy !== false) {
+      return (
+        <MRT_CopyButton cell={cell} table={table}>
+          <MRT_TableBodyCellValue {...cellValueProps} />
+        </MRT_CopyButton>
+      );
+    }
+
+    return <MRT_TableBodyCellValue {...cellValueProps} />;
+  };
+
+  return (
+    <TableTd
+      data-column-pinned={isColumnPinned || undefined}
+      data-dragging-column={isDraggingColumn || undefined}
+      data-first-right-pinned={
+        (isColumnPinned === 'right' &&
+          column.getIsFirstColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-hovered-column-target={isHoveredColumn || undefined}
+      data-index={renderedColumnIndex}
+      data-last-left-pinned={
+        (isColumnPinned === 'left' && column.getIsLastColumn(isColumnPinned)) ||
+        undefined
+      }
+      data-last-row={renderedRowIndex === numRows - 1 || undefined}
+      data-resizing={
+        (columnResizeMode === 'onChange' &&
+          columnSizingInfo?.isResizingColumn === column.id &&
+          columnResizeDirection) ||
+        undefined
+      }
+      {...tableCellProps}
+      __vars={{
+        '--mrt-cell-align':
+          tableCellProps.align ?? (direction.dir === 'rtl' ? 'right' : 'left'),
+        '--mrt-table-cell-left':
+          isColumnPinned === 'left'
+            ? `${column.getStart(isColumnPinned)}`
+            : undefined,
+        '--mrt-table-cell-right':
+          isColumnPinned === 'right'
+            ? `${column.getAfter(isColumnPinned)}`
+            : undefined,
+        ...tableCellProps.__vars,
+      }}
+      className={clsx(
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['root-grid'],
+        virtualCell && classes['root-virtualized'],
+        isEditable &&
+          editDisplayMode === 'cell' &&
+          classes['root-cursor-pointer'],
+        isEditable &&
+          ['cell', 'table'].includes(editDisplayMode ?? '') &&
+          columnDefType !== 'display' &&
+          classes['root-editable-hover'],
+        columnDefType === 'data' && classes['root-data-col'],
+        density === 'xs' && classes['root-nowrap'],
+        columnDef.enableCellHoverReveal && classes['root-cell-hover-reveal'],
+        tableCellProps?.className,
+      )}
+      onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={(theme) => ({
+        ...widthStyles,
+        ...parseFromValuesOrFunc(tableCellProps.style, theme),
+      })}
+    >
+      <>
+        {tableCellProps.children ??
+          (columnDef.enableCellHoverReveal ? (
+            <div
+              className={clsx(
+                columnDef.enableCellHoverReveal &&
+                  !(isCreating || isEditing) &&
+                  classes['cell-hover-reveal'],
+                isCellContentOverflowing && classes['overflowing'],
+              )}
+              ref={cellHoverRevealDivRef}
+            >
+              {renderCellContent()}
+              {cell.getIsGrouped() && !columnDef.GroupedCell && (
+                <> ({row.subRows?.length})</>
+              )}
+            </div>
+          ) : (
+            <>
+              {renderCellContent()}
+              {cell.getIsGrouped() && !columnDef.GroupedCell && (
+                <> ({row.subRows?.length})</>
+              )}
+            </>
+          ))}
+      </>
+    </TableTd>
+  );
+};
+
+export const Memo_MRT_TableBodyCell = memo(
+  MRT_TableBodyCell,
+  (prev, next) => next.cell === prev.cell,
+) as typeof MRT_TableBodyCell;