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

package/src/components/body/MRT_TableBodyRow.tsx

@@ -0,0 +1,278 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableBodyRow.module.css';
+
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+
+import {
+  Box,
+  type TableProps,
+  TableTr,
+  type TableTrProps,
+} from '@mantine/core';
+
+import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
+
+import { getMRT_TableStateVersion } from '../../hooks/useMRT_TableSnapshot';
+import {
+  type MRT_Cell,
+  type MRT_ColumnVirtualizer,
+  type MRT_DensityState,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { getIsRowSelected } from '../../utils/row.utils';
+import { getMRT_RowView } from '../../utils/snapshot.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  numRows?: number;
+  pinnedRowIds?: string[];
+  renderedRowIndex?: number;
+  row: MRT_Row<TData>;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  table: MRT_TableInstance<TData>;
+  tableProps: Partial<TableProps>;
+  virtualRow?: MRT_VirtualItem;
+}
+
+export const MRT_TableBodyRow = <TData extends MRT_RowData>({
+  children,
+  columnVirtualizer,
+  numRows,
+  pinnedRowIds,
+  renderedRowIndex = 0,
+  row: rowProp,
+  rowVirtualizer,
+  table,
+  tableProps,
+  virtualRow,
+  ...rest
+}: Props<TData>) => {
+  //a view has a new identity per table reference, which compiled render callbacks need
+  const row = getMRT_RowView(table, rowProp);
+  const {
+    getState,
+    options: {
+      enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      mantineTableBodyRowProps,
+      memoMode,
+      renderDetailPanel,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef },
+    setHoveredRow,
+  } = table;
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const visibleCells = row.getVisibleCells();
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  //the placeholder row for an empty table has no data to show in a detail panel
+  const isEmptyRow = row.id === 'mrt-row-empty';
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
+  const isRowStickyPinned =
+    isRowPinned && rowPinningDisplayMode?.includes('sticky') && 'sticky';
+  const isDraggingRow = draggingRow?.id === row.id;
+  const isHoveredRow = hoveredRow?.id === row.id;
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(mantineTableBodyRowProps, {
+      renderedRowIndex,
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+    if (
+      !enableRowPinning ||
+      !isRowStickyPinned ||
+      !pinnedRowIds ||
+      !row.getIsPinned()
+    )
+      return [];
+    return [
+      [...pinnedRowIds].reverse().indexOf(row.id),
+      pinnedRowIds.indexOf(row.id),
+    ];
+  }, [pinnedRowIds, rowPinning]);
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const defaultRowHeightByDensity: Record<MRT_DensityState, number> = {
+    lg: 61,
+    md: 53,
+    sm: 45,
+    xl: 69,
+    xs: 37,
+  };
+
+  const rowHeight =
+    // @ts-ignore
+    parseInt(tableRowProps?.style?.height, 10) ||
+    (defaultRowHeightByDensity[density] ?? defaultRowHeightByDensity['md']);
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (enableRowOrdering && draggingRow) {
+      setHoveredRow(row);
+    }
+  };
+
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
+
+  let striped = tableProps.striped as boolean | string;
+
+  if (striped) {
+    if (striped === true) {
+      striped = 'odd';
+    }
+    if (striped === 'odd' && renderedRowIndex % 2 !== 0) {
+      striped = false;
+    }
+    if (striped === 'even' && renderedRowIndex % 2 === 0) {
+      striped = false;
+    }
+  }
+
+  return (
+    <>
+      <TableTr
+        data-dragging-row={isDraggingRow || undefined}
+        data-hovered-row-target={isHoveredRow || undefined}
+        data-index={renderDetailPanel ? renderedRowIndex * 2 : renderedRowIndex}
+        data-row-pinned={isRowStickyPinned || isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
+        data-striped={striped}
+        onDragEnter={handleDragEnter}
+        ref={(node: HTMLTableRowElement) => {
+          if (node) {
+            rowRef.current = node;
+            //also registers the row with the virtualizer's ResizeObserver
+            rowVirtualizer?.measureElement(node);
+          }
+        }}
+        {...tableRowProps}
+        __vars={{
+          ...tableRowProps?.__vars,
+          '--mrt-pinned-row-bottom':
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  bottomPinnedIndex * rowHeight +
+                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
+                }`
+              : undefined,
+          '--mrt-pinned-row-top': virtualRow
+            ? undefined
+            : topPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  topPinnedIndex * rowHeight +
+                  (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+                }`
+              : undefined,
+          '--mrt-virtual-row-start': virtualRow
+            ? `${virtualRow.start}px`
+            : undefined,
+        }}
+        className={clsx(
+          classes.root,
+          layoutMode?.startsWith('grid') && classes['root-grid'],
+          virtualRow && classes['root-virtualized'],
+          tableRowProps?.className,
+        )}
+      >
+        {virtualPaddingLeft ? (
+          <Box component="td" display="flex" w={virtualPaddingLeft} />
+        ) : null}
+        {children
+          ? children
+          : (virtualColumns ?? row.getVisibleCells()).map(
+              (cellOrVirtualCell, renderedColumnIndex) => {
+                let cell = cellOrVirtualCell as MRT_Cell<TData>;
+                if (columnVirtualizer) {
+                  renderedColumnIndex = (cellOrVirtualCell as MRT_VirtualItem)
+                    .index;
+                  cell = visibleCells[renderedColumnIndex];
+                }
+                const cellProps = {
+                  cell,
+                  numRows,
+                  renderedColumnIndex,
+                  renderedRowIndex,
+                  rowRef,
+                  table,
+                  virtualCell: columnVirtualizer
+                    ? (cellOrVirtualCell as MRT_VirtualItem)
+                    : undefined,
+                };
+                return memoMode === 'cells' &&
+                  cell.column.columnDef.columnDefType === 'data' &&
+                  !draggingColumn &&
+                  !draggingRow &&
+                  editingCell?.id !== cell.id &&
+                  editingRow?.id !== row.id ? (
+                  <Memo_MRT_TableBodyCell key={cell.id} {...cellProps} />
+                ) : (
+                  <MRT_TableBodyCell key={cell.id} {...cellProps} />
+                );
+              },
+            )}
+        {virtualPaddingRight ? (
+          <Box component="td" display="flex" w={virtualPaddingRight} />
+        ) : null}
+      </TableTr>
+      {renderDetailPanel && !row.getIsGrouped() && !isEmptyRow && (
+        <MRT_TableDetailPanel
+          parentRowRef={rowRef}
+          renderedRowIndex={renderedRowIndex}
+          row={row}
+          rowVirtualizer={rowVirtualizer}
+          striped={striped}
+          table={table}
+          virtualRow={virtualRow}
+        />
+      )}
+    </>
+  );
+};
+
+//the state version changes whenever table state changes, so a memoized row
+//still follows row selection, density, editing and so on. The `table`
+//reference is not compared: an inline option gives a new one on every render.
+export const Memo_MRT_TableBodyRow = memo(
+  MRT_TableBodyRow,
+  (prev, next) =>
+    prev.row === next.row &&
+    getMRT_TableStateVersion(prev.table) ===
+      getMRT_TableStateVersion(next.table) &&
+    prev.virtualRow?.start === next.virtualRow?.start,
+) as typeof MRT_TableBodyRow;

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -0,0 +1,59 @@
+'use no memo';
+
+import { type DragEvent, type RefObject } from 'react';
+
+import { type ActionIconProps } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  row: MRT_Row<TData>;
+  rowRef: RefObject<HTMLTableRowElement | null>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
+  row,
+  rowRef,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: { mantineRowDragHandleProps },
+  } = table;
+
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineRowDragHandleProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragStart?.(event);
+    event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+    table.setDraggingRow(row as any);
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragEnd?.(event);
+    table.setDraggingRow(null);
+    table.setHoveredRow(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      actionIconProps={actionIconProps}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      table={table}
+    />
+  );
+};

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -0,0 +1,59 @@
+'use no memo';
+
+import { type ActionIconProps, Box } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableRowPinning, rowPinningDisplayMode },
+  } = table;
+  const { density } = getState();
+
+  const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
+
+  if (!canPin) return null;
+
+  const rowPinButtonProps = {
+    row,
+    table,
+    ...rest,
+  };
+
+  if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+    return (
+      <Box
+        style={{
+          display: 'flex',
+          flexDirection: density === 'xs' ? 'row' : 'column',
+        }}
+      >
+        <MRT_RowPinButton pinningPosition="top" {...rowPinButtonProps} />
+        <MRT_RowPinButton pinningPosition="bottom" {...rowPinButtonProps} />
+      </Box>
+    );
+  }
+
+  return (
+    <MRT_RowPinButton
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
+      {...rowPinButtonProps}
+    />
+  );
+};

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

@@ -0,0 +1,35 @@
+.root {
+  display: table-row;
+  width: 100%;
+  background-color: var(--mrt-base-background-color);
+}
+
+.root-grid {
+  display: flex;
+}
+
+.root-virtual-row {
+  position: absolute;
+  top: var(--mrt-parent-row-height);
+  transform: translateY(var(--mrt-virtual-row-start));
+  transition: none;
+  z-index: 1;
+}
+
+.inner {
+  display: table-cell;
+  transition: all 150ms ease-in-out;
+  width: var(--mrt-inner-width);
+}
+
+.inner-grid {
+  display: flex;
+}
+
+.inner-expanded {
+  border-bottom: 1px solid var(--_table-border-color);
+}
+
+.inner-virtual {
+  transition: none;
+}

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -0,0 +1,132 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableDetailPanel.module.css';
+
+import { type RefObject } from 'react';
+
+import { Collapse, TableTd, type TableTdProps, TableTr } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
+
+interface Props<TData extends MRT_RowData> extends TableTdProps {
+  parentRowRef: RefObject<HTMLTableRowElement | null>;
+  renderedRowIndex?: number;
+  row: MRT_Row<TData>;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  striped?: false | string;
+  table: MRT_TableInstance<TData>;
+  virtualRow?: MRT_VirtualItem;
+}
+
+export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
+  parentRowRef,
+  renderedRowIndex = 0,
+  row,
+  rowVirtualizer,
+  striped,
+  table,
+  virtualRow,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    getVisibleLeafColumns,
+    options: {
+      layoutMode,
+      mantineDetailPanelProps,
+      mantineTableBodyRowProps,
+      renderDetailPanel,
+    },
+  } = table;
+  const { isLoading } = getState();
+
+  const tableRowProps = parseFromValuesOrFunc(mantineTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    table,
+  });
+
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineDetailPanelProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const internalEditComponents = row
+    .getAllCells()
+    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+    .map((cell) => (
+      <MRT_EditCellTextInput cell={cell} key={cell.id} table={table} />
+    ));
+
+  const DetailPanel =
+    !isLoading &&
+    row.getIsExpanded() &&
+    renderDetailPanel?.({ internalEditComponents, row, table });
+
+  return (
+    <TableTr
+      data-index={
+        renderDetailPanel ? renderedRowIndex * 2 + 1 : renderedRowIndex
+      }
+      data-striped={striped}
+      ref={(node: HTMLTableRowElement) => {
+        if (node) {
+          rowVirtualizer?.measureElement?.(node);
+        }
+      }}
+      {...tableRowProps}
+      __vars={{
+        '--mrt-parent-row-height': virtualRow
+          ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
+          : undefined,
+        '--mrt-virtual-row-start': virtualRow
+          ? `${virtualRow.start}px`
+          : undefined,
+        ...tableRowProps?.__vars,
+      }}
+      className={clsx(
+        'mantine-Table-tr-detail-panel',
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['root-grid'],
+        virtualRow && classes['root-virtual-row'],
+        tableRowProps?.className,
+      )}
+    >
+      <TableTd
+        colSpan={getVisibleLeafColumns().length}
+        component="td"
+        {...tableCellProps}
+        __vars={{
+          '--mrt-inner-width': `${table.getTotalSize()}px`,
+        }}
+        className={clsx(
+          'mantine-Table-td-detail-panel',
+          classes.inner,
+          layoutMode?.startsWith('grid') && classes['inner-grid'],
+          row.getIsExpanded() && classes['inner-expanded'],
+          virtualRow && classes['inner-virtual'],
+        )}
+        p={row.getIsExpanded() && DetailPanel ? 'md' : 0}
+      >
+        {rowVirtualizer ? (
+          row.getIsExpanded() && DetailPanel
+        ) : (
+          <Collapse expanded={row.getIsExpanded()}>{DetailPanel}</Collapse>
+        )}
+      </TableTd>
+    </TableTr>
+  );
+};

package/src/components/buttons/MRT_ColumnPinningButtons.module.css

@@ -0,0 +1,11 @@
+.root {
+  min-width: 70px;
+  align-content: center;
+  justify-content: center;
+  .left {
+    transform: rotate(90deg);
+  }
+  .right {
+    transform: rotate(-90deg);
+  }
+}

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -0,0 +1,69 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ColumnPinningButtons.module.css';
+
+import { ActionIcon, Flex, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
+  column,
+  table,
+}: Props<TData>) => {
+  const {
+    options: {
+      icons: { IconPinned, IconPinnedOff },
+      localization,
+    },
+  } = table;
+  return (
+    <Flex className={clsx('mrt-column-pinning-buttons', classes.root)}>
+      {column.getIsPinned() ? (
+        <Tooltip label={localization.unpin} withinPortal>
+          <ActionIcon
+            color="gray"
+            onClick={() => column.pin(false)}
+            size="md"
+            variant="subtle"
+          >
+            <IconPinnedOff />
+          </ActionIcon>
+        </Tooltip>
+      ) : (
+        <>
+          <Tooltip label={localization.pinToLeft} withinPortal>
+            <ActionIcon
+              color="gray"
+              onClick={() => column.pin('left')}
+              size="md"
+              variant="subtle"
+            >
+              <IconPinned className={classes.left} />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label={localization.pinToRight} withinPortal>
+            <ActionIcon
+              color="gray"
+              onClick={() => column.pin('right')}
+              size="md"
+              variant="subtle"
+            >
+              <IconPinned className={classes.right} />
+            </ActionIcon>
+          </Tooltip>
+        </>
+      )}
+    </Flex>
+  );
+};

package/src/components/buttons/MRT_CopyButton.module.css

@@ -0,0 +1,27 @@
+.root {
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: inherit;
+  cursor: copy;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  justify-content: inherit;
+  letter-spacing: inherit;
+  margin: -4px;
+  min-width: unset;
+  padding: 4px;
+  text-align: inherit;
+  text-transform: inherit;
+  &:active {
+    transform: translateY(1px);
+  }
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--mantine-primary-color-filled-hover) 10%,
+      transparent
+    );
+  }
+}