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

package/src/components/inputs/MRT_FilterTextInput.tsx

@@ -0,0 +1,418 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_FilterTextInput.module.css';
+
+import { type MouseEvent, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  ActionIcon,
+  Autocomplete,
+  Badge,
+  Box,
+  MultiSelect,
+  Select,
+  TextInput,
+  type TextInputProps,
+} from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+
+import { localizedFilterOption } from '../../fns/filterFns';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends TextInputProps {
+  header: MRT_Header<TData>;
+  rangeFilterIndex?: number;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterTextInput = <TData extends MRT_RowData>({
+  header,
+  rangeFilterIndex,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      columnFilterDisplayMode,
+      columnFilterModeOptions,
+      icons: { IconX },
+      localization,
+      mantineFilterAutocompleteProps,
+      mantineFilterDateInputProps,
+      mantineFilterMultiSelectProps = {
+        clearable: true,
+      },
+      mantineFilterSelectProps,
+      mantineFilterTextInputProps,
+      manualFiltering,
+    },
+    refs: { filterInputRefs },
+    setColumnFilterFns,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const arg = { column, rangeFilterIndex, table };
+  const textInputProps = {
+    ...parseFromValuesOrFunc(mantineFilterTextInputProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterTextInputProps, arg),
+    ...rest,
+  };
+
+  const selectProps = {
+    ...parseFromValuesOrFunc(mantineFilterSelectProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterSelectProps, arg),
+  };
+
+  const multiSelectProps = {
+    ...parseFromValuesOrFunc(mantineFilterMultiSelectProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterMultiSelectProps, arg),
+  };
+
+  const dateInputProps = {
+    ...parseFromValuesOrFunc(mantineFilterDateInputProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterDateInputProps, arg),
+  };
+
+  const autoCompleteProps = {
+    ...parseFromValuesOrFunc(mantineFilterAutocompleteProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterAutocompleteProps, arg),
+  };
+
+  const isRangeFilter =
+    columnDef.filterVariant === 'range' ||
+    columnDef.filterVariant === 'date-range' ||
+    rangeFilterIndex !== undefined;
+  const isSelectFilter = columnDef.filterVariant === 'select';
+  const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
+  const isDateFilter =
+    columnDef.filterVariant === 'date' ||
+    columnDef.filterVariant === 'date-range';
+  const isAutoCompleteFilter = columnDef.filterVariant === 'autocomplete';
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  const currentFilterOption = columnDef._filterFn;
+  const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
+    ? localizedFilterOption(localization, currentFilterOption)
+    : '';
+  const filterPlaceholder = !isRangeFilter
+    ? (textInputProps?.placeholder ??
+      localization.filterByColumn?.replace(
+        '{column}',
+        String(columnDef.header),
+      ))
+    : rangeFilterIndex === 0
+      ? localization.min
+      : rangeFilterIndex === 1
+        ? localization.max
+        : '';
+
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  const filterSelectOptions = useMemo(
+    () =>
+      (
+        autoCompleteProps?.data ??
+        selectProps?.data ??
+        multiSelectProps?.data ??
+        ((isAutoCompleteFilter || isSelectFilter || isMultiSelectFilter) &&
+        facetedUniqueValues
+          ? Array.from(facetedUniqueValues.keys())
+              .filter((key) => key !== null)
+              .sort((a, b) => a.localeCompare(b))
+          : [])
+      )
+        //@ts-ignore
+        .filter((o: any) => o !== undefined && o !== null),
+    [
+      autoCompleteProps?.data,
+      facetedUniqueValues,
+      isAutoCompleteFilter,
+      isMultiSelectFilter,
+      isSelectFilter,
+      multiSelectProps?.data,
+      selectProps?.data,
+    ],
+  );
+
+  const isMounted = useRef(false);
+
+  const [filterValue, setFilterValue] = useState<any>(() =>
+    isMultiSelectFilter
+      ? (column.getFilterValue() as string[]) || []
+      : isRangeFilter
+        ? (column.getFilterValue() as [string, string])?.[
+            rangeFilterIndex as number
+          ] || ''
+        : ((column.getFilterValue() as string) ?? ''),
+  );
+
+  //the range value of this input that the table last held. The other range input
+  //changes the same filter array, and that must not reset text typed here.
+  const tableRangeValue = useRef<unknown>(isRangeFilter ? filterValue : '');
+
+  //send filterValue to the table instance once typing pauses. The timer restarts
+  //on every change, so text retyped right after a clear is sent again.
+  useEffect(() => {
+    if (!isMounted.current) return;
+    const timeout = setTimeout(
+      () => {
+        if (isRangeFilter) {
+          column.setFilterValue((old: [string, string]) => {
+            const newFilterValues = Array.isArray(old) ? [...old] : ['', '']; //a copy: the previous filter value is table state
+            newFilterValues[rangeFilterIndex as number] = filterValue as string;
+            return newFilterValues;
+          });
+        } else {
+          column.setFilterValue(filterValue ?? undefined);
+        }
+      },
+      manualFiltering ? 400 : 200,
+    );
+    return () => clearTimeout(timeout);
+  }, [filterValue]);
+
+  //receive table filter value and set it to local state
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    const tableFilterValue = column.getFilterValue();
+    if (tableFilterValue === undefined) {
+      tableRangeValue.current = '';
+      handleClear();
+    } else if (isRangeFilter && rangeFilterIndex !== undefined) {
+      const next =
+        ((tableFilterValue ?? ['', '']) as [string, string])[
+          rangeFilterIndex
+        ] ?? '';
+      if (next !== tableRangeValue.current) {
+        tableRangeValue.current = next;
+        setFilterValue(next);
+      }
+    } else {
+      setFilterValue(tableFilterValue ?? '');
+    }
+  }, [column.getFilterValue()]);
+
+  const handleClear = () => {
+    if (isMultiSelectFilter) {
+      setFilterValue([]);
+      column.setFilterValue([]);
+    } else if (isRangeFilter) {
+      setFilterValue('');
+      column.setFilterValue((old: [string | undefined, string | undefined]) => {
+        const newFilterValues = Array.isArray(old) ? [...old] : ['', '']; //a copy: the previous filter value is table state
+        newFilterValues[rangeFilterIndex as number] = undefined;
+        return newFilterValues;
+      });
+      // This is from Mantine v6 but it also applies for v7
+      // https://github.com/mantinedev/mantine/issues/4716#issuecomment-1702699688
+    } else if (isSelectFilter) {
+      setFilterValue(null);
+      column.setFilterValue(null);
+    } else {
+      setFilterValue('');
+      column.setFilterValue(undefined);
+    }
+  };
+
+  const handleClearEmptyFilterChip = () => {
+    if (isMultiSelectFilter) {
+      setFilterValue([]);
+      column.setFilterValue([]);
+    } else {
+      setFilterValue('');
+      column.setFilterValue(undefined);
+    }
+    setColumnFilterFns((prev) => ({
+      ...prev,
+      [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
+    }));
+  };
+
+  const { className, ...commonProps } = {
+    'aria-label': filterPlaceholder,
+    className: clsx(
+      'mrt-filter-text-input',
+      classes.root,
+      isDateFilter
+        ? classes['date-filter']
+        : isRangeFilter
+          ? classes['range-filter']
+          : !filterChipLabel && classes['not-filter-chip'],
+    ),
+    disabled: !!filterChipLabel,
+    onChange: setFilterValue,
+    onClick: (event: MouseEvent<HTMLInputElement>) => event.stopPropagation(),
+    placeholder: filterPlaceholder,
+    style: {
+      ...(isMultiSelectFilter
+        ? multiSelectProps?.style
+        : isSelectFilter
+          ? selectProps?.style
+          : isDateFilter
+            ? dateInputProps?.style
+            : textInputProps?.style),
+    },
+    title: filterPlaceholder,
+    value:
+      isMultiSelectFilter && !Array.isArray(filterValue) ? [] : filterValue,
+    variant: 'unstyled',
+  } as const;
+
+  const ClearButton = filterValue ? (
+    <ActionIcon
+      aria-label={localization.clearFilter}
+      color="var(--mantine-color-gray-7)"
+      onClick={handleClear}
+      size="sm"
+      title={localization.clearFilter ?? ''}
+      variant="transparent"
+    >
+      <IconX />
+    </ActionIcon>
+  ) : null;
+
+  if (columnDef.Filter) {
+    return (
+      <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })}</>
+    );
+  }
+
+  if (filterChipLabel) {
+    return (
+      <Box style={commonProps.style}>
+        <Badge
+          className={classes['filter-chip-badge']}
+          onClick={handleClearEmptyFilterChip}
+          rightSection={ClearButton}
+          size="lg"
+        >
+          {filterChipLabel}
+        </Badge>
+      </Box>
+    );
+  }
+
+  if (isMultiSelectFilter) {
+    return (
+      <MultiSelect
+        {...commonProps}
+        searchable
+        {...multiSelectProps}
+        className={clsx(className, multiSelectProps.className)}
+        data={filterSelectOptions}
+        onChange={(value) => setFilterValue(value)}
+        ref={(node) => {
+          if (node) {
+            filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+              node;
+            assignRef(multiSelectProps.ref, node);
+          }
+        }}
+        rightSection={
+          filterValue?.toString()?.length && multiSelectProps?.clearable
+            ? ClearButton
+            : undefined
+        }
+        style={commonProps.style}
+      />
+    );
+  }
+
+  if (isSelectFilter) {
+    return (
+      <Select
+        {...commonProps}
+        clearable
+        searchable
+        {...selectProps}
+        className={clsx(className, selectProps.className)}
+        clearButtonProps={{
+          size: 'md',
+        }}
+        data={filterSelectOptions}
+        ref={(node) => {
+          if (node) {
+            filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+              node;
+            assignRef(selectProps.ref, node);
+          }
+        }}
+        style={commonProps.style}
+      />
+    );
+  }
+
+  if (isDateFilter) {
+    return (
+      <DateInput
+        {...commonProps}
+        allowDeselect
+        clearable
+        popoverProps={{ withinPortal: columnFilterDisplayMode !== 'popover' }}
+        {...dateInputProps}
+        className={clsx(className, dateInputProps.className)}
+        onChange={(event) => commonProps.onChange(event === null ? '' : event)}
+        ref={(node) => {
+          if (node) {
+            filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+              node;
+            assignRef(dateInputProps.ref, node);
+          }
+        }}
+        style={commonProps.style}
+      />
+    );
+  }
+
+  if (isAutoCompleteFilter) {
+    return (
+      <Autocomplete
+        {...commonProps}
+        onChange={(value) => setFilterValue(value)}
+        rightSection={filterValue?.toString()?.length ? ClearButton : undefined}
+        {...autoCompleteProps}
+        className={clsx(className, autoCompleteProps.className)}
+        data={filterSelectOptions}
+        ref={(node) => {
+          if (node) {
+            filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+              node;
+            assignRef(autoCompleteProps.ref, node);
+          }
+        }}
+        style={commonProps.style}
+      />
+    );
+  }
+
+  return (
+    <TextInput
+      {...commonProps}
+      onChange={(e) => setFilterValue(e.target.value)}
+      rightSection={filterValue?.toString()?.length ? ClearButton : undefined}
+      {...textInputProps}
+      className={clsx(className, textInputProps.className)}
+      mt={0}
+      ref={(node) => {
+        if (node) {
+          filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+            node;
+          assignRef(textInputProps.ref, node);
+        }
+      }}
+      style={commonProps.style}
+    />
+  );
+};

package/src/components/inputs/MRT_GlobalFilterTextInput.module.css

@@ -0,0 +1,11 @@
+.root {
+  z-index: 2;
+  position: relative;
+}
+
+.collapse {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+}

package/src/components/inputs/MRT_GlobalFilterTextInput.tsx

@@ -0,0 +1,142 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_GlobalFilterTextInput.module.css';
+
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  ActionIcon,
+  Collapse,
+  Menu,
+  TextInput,
+  type TextInputProps,
+  Tooltip,
+} from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+
+interface Props<TData extends MRT_RowData> extends TextInputProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_GlobalFilterTextInput = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilterModes,
+      icons: { IconSearch, IconX },
+      localization,
+      mantineSearchTextInputProps,
+      manualFiltering,
+      positionGlobalFilter,
+    },
+    refs: { searchInputRef },
+    setGlobalFilter,
+  } = table;
+  const { globalFilter, showGlobalFilter } = getState();
+
+  const textFieldProps = {
+    ...parseFromValuesOrFunc(mantineSearchTextInputProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const isMounted = useRef(false);
+  const [searchValue, setSearchValue] = useState(globalFilter ?? '');
+
+  //send the search value to the table once typing pauses. The timer restarts on
+  //every change, so text retyped right after a clear is sent again.
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => setGlobalFilter(searchValue || undefined),
+      manualFiltering ? 500 : 250,
+    );
+    return () => clearTimeout(timeout);
+  }, [searchValue]);
+
+  const handleClear = () => {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  useEffect(() => {
+    if (isMounted.current) {
+      if (globalFilter === undefined) {
+        handleClear();
+      } else {
+        setSearchValue(globalFilter);
+      }
+    }
+    isMounted.current = true;
+  }, [globalFilter]);
+
+  return (
+    <Collapse className={classes.collapse} expanded={showGlobalFilter}>
+      {enableGlobalFilterModes && (
+        <Menu withinPortal>
+          <Menu.Target>
+            <ActionIcon
+              aria-label={localization.changeSearchMode}
+              color="gray"
+              size="sm"
+              variant="transparent"
+            >
+              <IconSearch />
+            </ActionIcon>
+          </Menu.Target>
+          <MRT_FilterOptionMenu onSelect={handleClear} table={table} />
+        </Menu>
+      )}
+      <TextInput
+        leftSection={!enableGlobalFilterModes && <IconSearch />}
+        mt={0}
+        mx={positionGlobalFilter !== 'left' ? 'mx' : undefined}
+        onChange={(event) => setSearchValue(event.target.value)}
+        placeholder={localization.search}
+        rightSection={
+          <ActionIcon
+            aria-label={localization.clearSearch}
+            color="gray"
+            disabled={!searchValue?.length}
+            hidden={!searchValue}
+            onClick={handleClear}
+            size="sm"
+            style={{
+              visibility: !searchValue ? 'hidden' : undefined,
+            }}
+            variant="transparent"
+          >
+            <Tooltip label={localization.clearSearch} withinPortal>
+              <IconX />
+            </Tooltip>
+          </ActionIcon>
+        }
+        value={searchValue ?? ''}
+        variant="filled"
+        {...textFieldProps}
+        className={clsx(
+          'mrt-global-filter-text-input',
+          classes.root,
+          textFieldProps?.className,
+        )}
+        ref={(node) => {
+          if (node) {
+            searchInputRef.current = node;
+            if (textFieldProps?.ref) {
+              // @ts-ignore
+              textFieldProps.ref = node;
+            }
+          }
+        }}
+      />
+    </Collapse>
+  );
+};

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -0,0 +1,138 @@
+'use no memo';
+
+import { type MouseEvent } from 'react';
+
+import {
+  Checkbox,
+  type CheckboxProps,
+  Radio,
+  type RadioProps,
+  Switch,
+  type SwitchProps,
+  Tooltip,
+} from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import {
+  getIsRowSelected,
+  getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
+} from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends CheckboxProps {
+  renderedRowIndex?: number;
+  row?: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
+  renderedRowIndex = 0,
+  row,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      enableMultiRowSelection,
+      localization,
+      mantineSelectAllCheckboxProps,
+      mantineSelectCheckboxProps,
+      selectAllMode,
+      selectDisplayMode,
+    },
+  } = table;
+  const { density, isLoading } = getState();
+
+  const selectAll = !row;
+
+  const allRowsSelected = selectAll
+    ? selectAllMode === 'page'
+      ? table.getIsAllPageRowsSelected()
+      : table.getIsAllRowsSelected()
+    : undefined;
+
+  const isChecked = selectAll
+    ? allRowsSelected
+    : getIsRowSelected({ row, table });
+
+  const checkboxProps = {
+    ...(selectAll
+      ? parseFromValuesOrFunc(mantineSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(mantineSelectCheckboxProps, {
+          row,
+          table,
+        })),
+    ...rest,
+  };
+
+  const onSelectionChange = row
+    ? getMRT_RowSelectionHandler({
+        renderedRowIndex,
+        row,
+        table,
+      })
+    : undefined;
+
+  const onSelectAllChange = getMRT_SelectAllHandler({ table });
+
+  const commonProps = {
+    'aria-label': selectAll
+      ? localization.toggleSelectAll
+      : localization.toggleSelectRow,
+    checked: isChecked,
+    disabled:
+      isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
+    onChange: (event) => {
+      event.stopPropagation();
+      if (selectAll) {
+        onSelectAllChange(event);
+      } else {
+        onSelectionChange!(event);
+      }
+    },
+    size: density === 'xs' ? 'sm' : 'md',
+    ...checkboxProps,
+    onClick: (e: MouseEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+      checkboxProps?.onClick?.(e);
+    },
+    title: undefined,
+  } as CheckboxProps & RadioProps & SwitchProps;
+
+  return (
+    <Tooltip
+      label={
+        checkboxProps?.title ??
+        (selectAll
+          ? localization.toggleSelectAll
+          : localization.toggleSelectRow)
+      }
+      openDelay={1000}
+      withinPortal
+    >
+      <span>
+        {selectDisplayMode === 'switch' ? (
+          <Switch {...commonProps} />
+        ) : selectDisplayMode === 'radio' ||
+          enableMultiRowSelection === false ? (
+          <Radio {...commonProps} />
+        ) : (
+          <Checkbox
+            indeterminate={
+              !isChecked && selectAll
+                ? table.getIsSomeRowsSelected()
+                : row?.getIsSomeSelected() && row.getCanSelectSubRows()
+            }
+            {...commonProps}
+          />
+        )}
+      </span>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,7 @@
+.left {
+  transform: rotate(90deg);
+}
+
+.right {
+  transform: rotate(-90deg);
+}