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

package/src/components/buttons/MRT_CopyButton.tsx

@@ -0,0 +1,84 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_CopyButton.module.css';
+
+import { type ReactNode } from 'react';
+
+import {
+  CopyButton,
+  Tooltip,
+  UnstyledButton,
+  type UnstyledButtonProps,
+} from '@mantine/core';
+
+import {
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends UnstyledButtonProps {
+  cell: MRT_Cell<TData, TValue>;
+  children: ReactNode;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_CopyButton = <TData extends MRT_RowData>({
+  cell,
+  children,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      localization: { clickToCopy, copiedToClipboard },
+      mantineCopyButtonProps,
+    },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+
+  const arg = { cell, column, row, table };
+  const buttonProps = {
+    ...parseFromValuesOrFunc(mantineCopyButtonProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineCopyButtonProps, arg),
+    ...rest,
+  };
+
+  return (
+    <CopyButton value={cell.getValue<string>()}>
+      {({ copied, copy }) => (
+        <Tooltip
+          color={copied ? 'green' : undefined}
+          label={
+            buttonProps?.title ?? (copied ? copiedToClipboard : clickToCopy)
+          }
+          openDelay={1000}
+          withinPortal
+        >
+          <UnstyledButton
+            {...buttonProps}
+            className={clsx(
+              'mrt-copy-button',
+              classes.root,
+              buttonProps?.className,
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              copy();
+            }}
+            role="presentation"
+            title={undefined}
+          >
+            {children}
+          </UnstyledButton>
+        </Tooltip>
+      )}
+    </CopyButton>
+  );
+};

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

@@ -0,0 +1,4 @@
+.root {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+}

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -0,0 +1,139 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_EditActionButtons.module.css';
+
+import { ActionIcon, Box, type BoxProps, Button, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  variant?: 'icon' | 'text';
+}
+
+export const MRT_EditActionButtons = <TData extends MRT_RowData>({
+  row,
+  table,
+  variant = 'icon',
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { IconCircleX, IconDeviceFloppy },
+      localization,
+      onCreatingRowCancel,
+      onCreatingRowSave,
+      onEditingRowCancel,
+      onEditingRowSave,
+    },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingRow,
+  } = table;
+  const { creatingRow, editingRow, isSaving } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const handleCancel = () => {
+    if (isCreating) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else if (isEditing) {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
+  };
+
+  const handleSubmitRow = () => {
+    //look for auto-filled input values. A browser can fill an input without
+    //firing the change event that saves the value to the row cache.
+    const inputNamePrefix = `${row.id}_`; //input names are cell ids: rowId_columnId
+    const valuesCache = row._valuesCache as Record<string, unknown>;
+    Object.values(editInputRefs?.current ?? {})
+      .filter((input) => input?.name?.startsWith(inputNamePrefix))
+      .forEach((input) => {
+        const columnId = input.name.slice(inputNamePrefix.length);
+        const editVariant = table.getColumn(columnId)?.columnDef.editVariant;
+        //select inputs show the option label, not the value, so only text inputs are read
+        const isTextInput = !editVariant || editVariant === 'text';
+        if (
+          isTextInput &&
+          Object.hasOwn(valuesCache, columnId) &&
+          //a number or other parsed value is the consumer's, and its text form can differ
+          (typeof valuesCache[columnId] === 'string' ||
+            valuesCache[columnId] == null) &&
+          input.value !== String(valuesCache[columnId] ?? '')
+        ) {
+          valuesCache[columnId] = input.value;
+        }
+      });
+    if (isCreating)
+      onCreatingRowSave?.({
+        exitCreatingMode: () => setCreatingRow(null),
+        row,
+        table,
+        values: row._valuesCache,
+      });
+    else if (isEditing) {
+      onEditingRowSave?.({
+        exitEditingMode: () => setEditingRow(null),
+        row,
+        table,
+        values: row?._valuesCache,
+      });
+    }
+  };
+
+  return (
+    <Box
+      className={clsx('mrt-edit-action-buttons', classes.root)}
+      onClick={(e) => e.stopPropagation()}
+      {...rest}
+    >
+      {variant === 'icon' ? (
+        <>
+          <Tooltip label={localization.cancel} withinPortal>
+            <ActionIcon
+              aria-label={localization.cancel}
+              color="red"
+              onClick={handleCancel}
+              variant="subtle"
+            >
+              <IconCircleX />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label={localization.save} withinPortal>
+            <ActionIcon
+              aria-label={localization.save}
+              color="blue"
+              loading={isSaving}
+              onClick={handleSubmitRow}
+              variant="subtle"
+            >
+              <IconDeviceFloppy />
+            </ActionIcon>
+          </Tooltip>
+        </>
+      ) : (
+        <>
+          <Button onClick={handleCancel} variant="subtle">
+            {localization.cancel}
+          </Button>
+          <Button loading={isSaving} onClick={handleSubmitRow} variant="filled">
+            {localization.save}
+          </Button>
+        </>
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,26 @@
+.root {
+  margin-left: 6px;
+  opacity: 0.8;
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
+  &:hover {
+    opacity: 1;
+  }
+  &:global(.xl) {
+    margin-left: -6px;
+  }
+  &:global(.md) {
+    margin-left: 0;
+  }
+  .chevron {
+    transition: transform 150ms;
+    &.up {
+      transform: rotate(-180deg);
+    }
+    &.right {
+      transform: rotate(-90deg);
+    }
+  }
+}

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -0,0 +1,84 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ExpandAllButton.module.css';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getCanSomeRowsExpand,
+    getIsAllRowsExpanded,
+    getIsSomeRowsExpanded,
+    getState,
+    options: {
+      icons: { IconChevronsDown },
+      localization,
+      mantineExpandAllButtonProps,
+      renderDetailPanel,
+    },
+    toggleAllRowsExpanded,
+  } = table;
+  const { density, isLoading } = getState();
+
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineExpandAllButtonProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const isAllRowsExpanded = getIsAllRowsExpanded();
+
+  return (
+    <Tooltip
+      label={
+        (actionIconProps?.title ?? isAllRowsExpanded)
+          ? localization.collapseAll
+          : localization.expandAll
+      }
+      openDelay={1000}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={localization.expandAll}
+        color="gray"
+        variant="subtle"
+        {...actionIconProps}
+        className={clsx(
+          'mrt-expand-all-button',
+          classes.root,
+          actionIconProps?.className,
+          density,
+        )}
+        disabled={isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())}
+        onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
+        title={undefined}
+      >
+        {actionIconProps?.children ?? (
+          <IconChevronsDown
+            className={clsx(
+              classes.chevron,
+              isAllRowsExpanded
+                ? classes.up
+                : getIsSomeRowsExpanded()
+                  ? classes.right
+                  : undefined,
+            )}
+          />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,37 @@
+.root {
+  opacity: 0.8;
+  &:disabled {
+    background-color: transparent;
+    border: none;
+    opacity: 0.3;
+  }
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.root-ltr {
+  margin-left: calc(calc(var(--mrt-row-depth, 0)) * 16px);
+  .chevron {
+    transition: transform 200ms;
+    &.right {
+      transform: rotate(270deg);
+    }
+    &.up {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.root-rtl {
+  margin-right: calc(calc(var(--mrt-row-depth, 0)) * 16px);
+  .chevron {
+    transition: transform 200ms;
+    &.right {
+      transform: rotate(-270deg);
+    }
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -0,0 +1,121 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ExpandButton.module.css';
+
+import { type MouseEvent } from 'react';
+
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Tooltip,
+  useDirection,
+} from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ExpandButton = <TData extends MRT_RowData>({
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const direction = useDirection();
+  const {
+    options: {
+      icons: { IconChevronDown },
+      localization,
+      mantineExpandButtonProps,
+      positionExpandColumn,
+      renderDetailPanel,
+    },
+  } = table;
+
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineExpandButtonProps, {
+      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 canExpand = row.getCanExpand();
+  const isExpanded = row.getIsExpanded();
+
+  const DetailPanel = !!renderDetailPanel?.({
+    internalEditComponents,
+    row,
+    table,
+  });
+
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    row.toggleExpanded();
+    actionIconProps?.onClick?.(event);
+  };
+
+  const rtl = direction.dir === 'rtl' || positionExpandColumn === 'last';
+
+  return (
+    <Tooltip
+      disabled={!canExpand && !DetailPanel}
+      label={
+        actionIconProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
+      }
+      openDelay={1000}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={localization.expand}
+        color="gray"
+        disabled={!canExpand && !DetailPanel}
+        variant="subtle"
+        {...actionIconProps}
+        __vars={{
+          '--mrt-row-depth': `${row.depth}`,
+        }}
+        className={clsx(
+          'mrt-expand-button',
+          classes.root,
+          classes[`root-${rtl ? 'rtl' : 'ltr'}`],
+          actionIconProps?.className,
+        )}
+        onClick={handleToggleExpand}
+        title={undefined}
+      >
+        {actionIconProps?.children ?? (
+          <IconChevronDown
+            className={clsx(
+              'mrt-expand-button-chevron',
+              classes.chevron,
+              !canExpand && !renderDetailPanel
+                ? classes.right
+                : isExpanded
+                  ? classes.up
+                  : undefined,
+            )}
+          />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,6 @@
+.grab-icon {
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+}

package/src/components/buttons/MRT_GrabHandleButton.tsx

@@ -0,0 +1,65 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_GrabHandleButton.module.css';
+
+import { type DragEventHandler } from 'react';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> {
+  actionIconProps?: ActionIconProps & HTMLPropsRef<HTMLButtonElement>;
+  onDragEnd: DragEventHandler<HTMLButtonElement>;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
+  actionIconProps,
+  onDragEnd,
+  onDragStart,
+  table: {
+    options: {
+      icons: { IconGripHorizontal },
+      localization: { move },
+    },
+  },
+}: Props<TData>) => {
+  return (
+    <Tooltip
+      label={actionIconProps?.title ?? move}
+      openDelay={1000}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={actionIconProps?.title ?? move}
+        draggable
+        {...actionIconProps}
+        className={clsx(
+          'mrt-grab-handle-button',
+          classes['grab-icon'],
+          actionIconProps?.className,
+        )}
+        color="gray"
+        onClick={(e) => {
+          e.stopPropagation();
+          actionIconProps?.onClick?.(e);
+        }}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        size="sm"
+        title={undefined}
+        variant="transparent"
+      >
+        <IconGripHorizontal size="100%" />
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,84 @@
+'use no memo';
+
+import { type MouseEvent, useState } from 'react';
+
+import { type RowPinningPosition } from '@tanstack/react-table';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  pinningPosition: RowPinningPosition;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
+  pinningPosition,
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      icons: { IconPinned, IconX },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      label={isPinned ? localization.unpin : localization.pin}
+      openDelay={1000}
+      opened={tooltipOpened}
+    >
+      <ActionIcon
+        aria-label={localization.pin}
+        color="gray"
+        onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="xs"
+        style={{
+          height: '24px',
+          width: '24px',
+        }}
+        variant="subtle"
+        {...rest}
+      >
+        {isPinned ? (
+          <IconX />
+        ) : (
+          <IconPinned
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                    ? 180
+                    : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ShowHideColumnsButton.tsx

@@ -0,0 +1,46 @@
+'use no memo';
+
+import { ActionIcon, type ActionIconProps, Menu, Tooltip } from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+
+interface Props<TData extends MRT_RowData>
+  extends ActionIconProps,
+    HTMLPropsRef<HTMLButtonElement> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
+  table,
+  title,
+  ...rest
+}: Props<TData>) => {
+  const {
+    icons: { IconColumns },
+    localization: { showHideColumns },
+  } = table.options;
+
+  return (
+    <Menu closeOnItemClick={false} withinPortal>
+      <Tooltip label={title ?? showHideColumns} withinPortal>
+        <Menu.Target>
+          <ActionIcon
+            aria-label={title ?? showHideColumns}
+            color="gray"
+            size="lg"
+            variant="subtle"
+            {...rest}
+          >
+            <IconColumns />
+          </ActionIcon>
+        </Menu.Target>
+      </Tooltip>
+      <MRT_ShowHideColumnsMenu table={table} />
+    </Menu>
+  );
+};