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

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -0,0 +1,288 @@
+'use no memo';
+
+import classes from './MRT_ColumnActionMenu.module.css';
+
+import { ActionIcon, Menu, type MenuProps, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends MenuProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      enableColumnFilters,
+      enableColumnPinning,
+      enableColumnResizing,
+      enableGrouping,
+      enableHiding,
+      enableSorting,
+      enableSortingRemoval,
+      icons: {
+        IconArrowAutofitContent,
+        IconBoxMultiple,
+        IconClearAll,
+        IconColumns,
+        IconDotsVertical,
+        IconEyeOff,
+        IconFilter,
+        IconFilterOff,
+        IconPinned,
+        IconPinnedOff,
+        IconSortAscending,
+        IconSortDescending,
+      },
+      localization,
+      mantineColumnActionsButtonProps,
+      renderColumnActionsMenuItems,
+    },
+    refs: { filterInputRefs },
+    setColumnOrder,
+    setColumnSizingInfo,
+    setShowColumnFilters,
+    toggleAllColumnsVisible,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnSizing, columnVisibility } = getState();
+
+  const arg = { column, table };
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineColumnActionsButtonProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineColumnActionsButtonProps, arg),
+  };
+
+  const handleClearSort = () => {
+    column.clearSorting();
+  };
+
+  const handleSortAsc = () => {
+    column.toggleSorting(false);
+  };
+
+  const handleSortDesc = () => {
+    column.toggleSorting(true);
+  };
+
+  const handleResetColumnSize = () => {
+    setColumnSizingInfo((old) => ({ ...old, isResizingColumn: false }));
+    column.resetSize();
+  };
+
+  const handleHideColumn = () => {
+    column.toggleVisibility(false);
+  };
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+  };
+
+  const handleGroupByColumn = () => {
+    column.toggleGrouping();
+    setColumnOrder((old: any) => ['mrt-row-expand', ...old]);
+  };
+
+  const handleClearFilter = () => {
+    column.setFilterValue('');
+  };
+
+  const handleFilterByColumn = () => {
+    setShowColumnFilters(true);
+    setTimeout(() => filterInputRefs.current[`${column.id}-0`]?.focus(), 100);
+  };
+
+  const handleShowAllColumns = () => {
+    toggleAllColumnsVisible(true);
+  };
+
+  const internalColumnMenuItems = (
+    <>
+      {enableSorting && column.getCanSort() && (
+        <>
+          {enableSortingRemoval !== false && (
+            <Menu.Item
+              disabled={!column.getIsSorted()}
+              leftSection={<IconClearAll />}
+              onClick={handleClearSort}
+            >
+              {localization.clearSort}
+            </Menu.Item>
+          )}
+          <Menu.Item
+            disabled={column.getIsSorted() === 'asc'}
+            leftSection={<IconSortAscending />}
+            onClick={handleSortAsc}
+          >
+            {localization.sortByColumnAsc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+          <Menu.Item
+            disabled={column.getIsSorted() === 'desc'}
+            leftSection={<IconSortDescending />}
+            onClick={handleSortDesc}
+          >
+            {localization.sortByColumnDesc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+          {(enableColumnFilters || enableGrouping || enableHiding) && (
+            <Menu.Divider key={3} />
+          )}
+        </>
+      )}
+      {enableColumnFilters &&
+        columnFilterDisplayMode !== 'popover' &&
+        column.getCanFilter() && (
+          <>
+            <Menu.Item
+              disabled={!column.getFilterValue()}
+              leftSection={<IconFilterOff />}
+              onClick={handleClearFilter}
+            >
+              {localization.clearFilter}
+            </Menu.Item>
+            <Menu.Item
+              leftSection={<IconFilter />}
+              onClick={handleFilterByColumn}
+            >
+              {localization.filterByColumn?.replace(
+                '{column}',
+                String(columnDef.header),
+              )}
+            </Menu.Item>
+            {(enableGrouping || enableHiding) && <Menu.Divider key={2} />}
+          </>
+        )}
+      {enableGrouping && column.getCanGroup() && (
+        <>
+          <Menu.Item
+            leftSection={<IconBoxMultiple />}
+            onClick={handleGroupByColumn}
+          >
+            {localization[
+              column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
+            ]?.replace('{column}', String(columnDef.header))}
+          </Menu.Item>
+          {enableColumnPinning && <Menu.Divider />}
+        </>
+      )}
+      {enableColumnPinning && column.getCanPin() && (
+        <>
+          <Menu.Item
+            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
+            leftSection={<IconPinned className={classes.left} />}
+            onClick={() => handlePinColumn('left')}
+          >
+            {localization.pinToLeft}
+          </Menu.Item>
+          <Menu.Item
+            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
+            leftSection={<IconPinned className={classes.right} />}
+            onClick={() => handlePinColumn('right')}
+          >
+            {localization.pinToRight}
+          </Menu.Item>
+          <Menu.Item
+            disabled={!column.getIsPinned()}
+            leftSection={<IconPinnedOff />}
+            onClick={() => handlePinColumn(false)}
+          >
+            {localization.unpin}
+          </Menu.Item>
+          {enableHiding && <Menu.Divider />}
+        </>
+      )}
+      {enableColumnResizing && column.getCanResize() && (
+        <Menu.Item
+          disabled={!columnSizing[column.id]}
+          key={0}
+          leftSection={<IconArrowAutofitContent />}
+          onClick={handleResetColumnSize}
+        >
+          {localization.resetColumnSize}
+        </Menu.Item>
+      )}
+      {enableHiding && (
+        <>
+          <Menu.Item
+            disabled={!column.getCanHide()}
+            key={0}
+            leftSection={<IconEyeOff />}
+            onClick={handleHideColumn}
+          >
+            {localization.hideColumn?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+          <Menu.Item
+            disabled={
+              !Object.values(columnVisibility).filter((visible) => !visible)
+                .length
+            }
+            key={1}
+            leftSection={<IconColumns />}
+            onClick={handleShowAllColumns}
+          >
+            {localization.showAllColumns?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
+          </Menu.Item>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <Menu closeOnItemClick position="bottom-start" withinPortal {...rest}>
+      <Tooltip
+        label={actionIconProps?.title ?? localization.columnActions}
+        openDelay={1000}
+        withinPortal
+      >
+        <Menu.Target>
+          <ActionIcon
+            aria-label={localization.columnActions}
+            color="gray"
+            size="sm"
+            variant="subtle"
+            {...actionIconProps}
+          >
+            <IconDotsVertical size="100%" />
+          </ActionIcon>
+        </Menu.Target>
+      </Tooltip>
+      <Menu.Dropdown>
+        {columnDef.renderColumnActionsMenuItems?.({
+          column,
+          internalColumnMenuItems,
+          table,
+        }) ??
+          renderColumnActionsMenuItems?.({
+            column,
+            internalColumnMenuItems,
+            table,
+          }) ??
+          internalColumnMenuItems}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

package/src/components/menus/MRT_FilterOptionMenu.module.css

@@ -0,0 +1,6 @@
+.symbol {
+  font-size: var(--mantine-font-size-xl);
+  text-align: center;
+  width: 2ch;
+  transform: translateY(-0.1em);
+}

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -0,0 +1,279 @@
+'use no memo';
+
+import classes from './MRT_FilterOptionMenu.module.css';
+
+import { Fragment, useMemo } from 'react';
+
+import { Menu } from '@mantine/core';
+
+import {
+  type MRT_FilterOption,
+  type MRT_Header,
+  type MRT_InternalFilterOption,
+  type MRT_Localization,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+export const mrtFilterOptions = (
+  localization: MRT_Localization,
+): MRT_InternalFilterOption[] => [
+  {
+    divider: false,
+    label: localization.filterFuzzy,
+    option: 'fuzzy',
+    symbol: '≈',
+  },
+  {
+    divider: false,
+    label: localization.filterContains,
+    option: 'contains',
+    symbol: '*',
+  },
+  {
+    divider: false,
+    label: localization.filterStartsWith,
+    option: 'startsWith',
+    symbol: 'a',
+  },
+  {
+    divider: true,
+    label: localization.filterEndsWith,
+    option: 'endsWith',
+    symbol: 'z',
+  },
+  {
+    divider: false,
+    label: localization.filterEquals,
+    option: 'equals',
+    symbol: '=',
+  },
+  {
+    divider: true,
+    label: localization.filterNotEquals,
+    option: 'notEquals',
+    symbol: '≠',
+  },
+  {
+    divider: false,
+    label: localization.filterBetween,
+    option: 'between',
+    symbol: '⇿',
+  },
+  {
+    divider: true,
+    label: localization.filterBetweenInclusive,
+    option: 'betweenInclusive',
+    symbol: '⬌',
+  },
+  {
+    divider: false,
+    label: localization.filterGreaterThan,
+    option: 'greaterThan',
+    symbol: '>',
+  },
+  {
+    divider: false,
+    label: localization.filterGreaterThanOrEqualTo,
+    option: 'greaterThanOrEqualTo',
+    symbol: '≥',
+  },
+  {
+    divider: false,
+    label: localization.filterLessThan,
+    option: 'lessThan',
+    symbol: '<',
+  },
+  {
+    divider: true,
+    label: localization.filterLessThanOrEqualTo,
+    option: 'lessThanOrEqualTo',
+    symbol: '≤',
+  },
+  {
+    divider: false,
+    label: localization.filterEmpty,
+    option: 'empty',
+    symbol: '∅',
+  },
+  {
+    divider: false,
+    label: localization.filterNotEmpty,
+    option: 'notEmpty',
+    symbol: '!∅',
+  },
+];
+
+const defaultGlobalFilterModeOptions = ['fuzzy', 'contains', 'startsWith'];
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+const rangeVariants = ['range-slider', 'date-range', 'range'];
+
+interface Props<TData extends MRT_RowData> {
+  header?: MRT_Header<TData>;
+  onSelect?: () => void;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
+  header,
+  onSelect,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      columnFilterModeOptions,
+      globalFilterModeOptions,
+      localization,
+      renderColumnFilterModeMenuItems,
+      renderGlobalFilterModeMenuItems,
+    },
+    setColumnFilterFns,
+    setGlobalFilterFn,
+  } = table;
+  const { globalFilterFn } = getState();
+  const { column } = header ?? {};
+  const { columnDef } = column ?? {};
+  const currentFilterValue = column?.getFilterValue();
+
+  let allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  if (rangeVariants.includes(columnDef?.filterVariant as string)) {
+    allowedColumnFilterOptions = [
+      ...rangeModes,
+      ...(allowedColumnFilterOptions ?? []),
+    ].filter((option) => rangeModes.includes(option));
+  }
+
+  const internalFilterOptions = useMemo(() => {
+    const filterOptions = mrtFilterOptions(localization).filter(
+      (filterOption) =>
+        columnDef
+          ? allowedColumnFilterOptions === undefined ||
+            allowedColumnFilterOptions?.includes(filterOption.option)
+          : (
+              globalFilterModeOptions ?? defaultGlobalFilterModeOptions
+            ).includes(filterOption.option),
+    );
+    if (
+      filterOptions.length &&
+      filterOptions[filterOptions.length - 1].divider
+    ) {
+      filterOptions[filterOptions.length - 1].divider = false;
+    }
+    return filterOptions;
+  }, [columnDef, globalFilterModeOptions]);
+
+  const handleSelectFilterMode = (option: MRT_FilterOption) => {
+    const prevFilterMode = columnDef?._filterFn ?? '';
+    if (!header || !column) {
+      // global filter mode
+      setGlobalFilterFn(option);
+    } else if (option !== prevFilterMode) {
+      // column filter mode
+      setColumnFilterFns((prev: { [key: string]: any }) => ({
+        ...prev,
+        [header.id]: option,
+      }));
+
+      // reset filter value and/or perform new filter render
+      if (emptyModes.includes(option)) {
+        // will now be empty/notEmpty filter mode
+        if (
+          currentFilterValue !== ' ' &&
+          !emptyModes.includes(prevFilterMode)
+        ) {
+          column.setFilterValue(' ');
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else if (
+        columnDef?.filterVariant === 'multi-select' ||
+        arrModes.includes(option as string)
+      ) {
+        // will now be array filter mode
+        if (
+          currentFilterValue instanceof String ||
+          (currentFilterValue as Array<any>)?.length
+        ) {
+          column.setFilterValue([]);
+        } else if (currentFilterValue) {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else if (
+        rangeVariants.includes(columnDef?.filterVariant as string) ||
+        rangeModes.includes(option as MRT_FilterOption)
+      ) {
+        // will now be range filter mode
+        if (
+          !Array.isArray(currentFilterValue) ||
+          (!(currentFilterValue as Array<any>)?.every((v) => v === '') &&
+            !rangeModes.includes(prevFilterMode))
+        ) {
+          column.setFilterValue(['', '']);
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      } else {
+        // will now be single value filter mode
+        if (Array.isArray(currentFilterValue)) {
+          column.setFilterValue('');
+        } else if (
+          currentFilterValue === ' ' &&
+          emptyModes.includes(prevFilterMode)
+        ) {
+          column.setFilterValue(undefined);
+        } else {
+          column.setFilterValue(currentFilterValue); // perform new filter render
+        }
+      }
+    }
+    onSelect?.();
+  };
+
+  const filterOption =
+    !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+
+  return (
+    <Menu.Dropdown>
+      {(header && column && columnDef
+        ? (columnDef.renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          }) ??
+          renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          }))
+        : renderGlobalFilterModeMenuItems?.({
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          })) ??
+        internalFilterOptions.map(
+          ({ divider, label, option, symbol }, index) => (
+            <Fragment key={index}>
+              <Menu.Item
+                color={option === filterOption ? 'blue' : undefined}
+                leftSection={<span className={classes.symbol}>{symbol}</span>}
+                onClick={() =>
+                  handleSelectFilterMode(option as MRT_FilterOption)
+                }
+                value={option}
+              >
+                {label}
+              </Menu.Item>
+              {divider && <Menu.Divider />}
+            </Fragment>
+          ),
+        )}
+    </Menu.Dropdown>
+  );
+};

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -0,0 +1,75 @@
+'use no memo';
+
+import { type MouseEvent } from 'react';
+
+import { ActionIcon, type ActionIconProps, Menu, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  handleEdit: (event: MouseEvent) => void;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowActionMenu = <TData extends MRT_RowData>({
+  handleEdit,
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      editDisplayMode,
+      enableEditing,
+      icons: { IconDots, IconEdit },
+      localization,
+      positionActionsColumn,
+      renderRowActionMenuItems,
+    },
+  } = table;
+
+  return (
+    <Menu
+      closeOnItemClick
+      position={
+        positionActionsColumn === 'first'
+          ? 'bottom-start'
+          : positionActionsColumn === 'last'
+            ? 'bottom-end'
+            : undefined
+      }
+      withinPortal
+    >
+      <Tooltip label={localization.rowActions} openDelay={1000} withinPortal>
+        <Menu.Target>
+          <ActionIcon
+            aria-label={localization.rowActions}
+            color="gray"
+            onClick={(event) => event.stopPropagation()}
+            size="sm"
+            variant="subtle"
+            {...rest}
+          >
+            <IconDots />
+          </ActionIcon>
+        </Menu.Target>
+      </Tooltip>
+      <Menu.Dropdown onClick={(event) => event.stopPropagation()}>
+        {enableEditing && editDisplayMode !== 'table' && (
+          <Menu.Item leftSection={<IconEdit />} onClick={handleEdit}>
+            {localization.edit}
+          </Menu.Item>
+        )}
+        {renderRowActionMenuItems?.({
+          row,
+          table,
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenu.module.css

@@ -0,0 +1,10 @@
+.root {
+  max-height: calc(80vh - 100px);
+  overflow-y: auto;
+  .content {
+    padding-top: rem(4px);
+    padding-bottom: rem(4px);
+    gap: rem(8px);
+    justify-content: space-between;
+  }
+}