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

package/src/components/head/MRT_TableHeadRow.tsx

@@ -0,0 +1,105 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadRow.module.css';
+
+import { Box, TableTr, type TableTrProps } from '@mantine/core';
+
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Header,
+  type MRT_HeaderGroup,
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { getVirtualGroupHeaders } from '../../utils/virtualization.utils';
+
+interface Props<TData extends MRT_RowData> extends TableTrProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  headerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  headerGroup,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableStickyHeader, layoutMode, mantineTableHeadRowProps },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const virtualGroupHeaders = getVirtualGroupHeaders({
+    headers: headerGroup.headers,
+    table,
+    virtualColumns,
+  });
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(mantineTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <TableTr
+      {...tableRowProps}
+      className={clsx(
+        classes.root,
+        (enableStickyHeader || isFullScreen) && classes.sticky,
+        layoutMode?.startsWith('grid') && classes['layout-mode-grid'],
+        tableRowProps?.className,
+      )}
+    >
+      {virtualPaddingLeft ? (
+        <Box component="th" display="flex" w={virtualPaddingLeft} />
+      ) : null}
+      {virtualGroupHeaders?.map(({ header, index, style }) => (
+        <MRT_TableHeadCell
+          columnVirtualizer={columnVirtualizer}
+          header={header}
+          key={header.id}
+          renderedHeaderIndex={index}
+          style={style}
+          table={table}
+        />
+      )) ??
+        (virtualColumns ?? headerGroup.headers).map(
+          (headerOrVirtualHeader, renderedHeaderIndex) => {
+            let header = headerOrVirtualHeader as MRT_Header<TData>;
+            if (columnVirtualizer) {
+              renderedHeaderIndex = (headerOrVirtualHeader as MRT_VirtualItem)
+                .index;
+              header = headerGroup.headers[renderedHeaderIndex];
+            }
+
+            return (
+              <MRT_TableHeadCell
+                columnVirtualizer={columnVirtualizer}
+                header={header}
+                key={header.id}
+                renderedHeaderIndex={renderedHeaderIndex}
+                table={table}
+              />
+            );
+          },
+        )}
+      {virtualPaddingRight ? (
+        <Box component="th" display="flex" w={virtualPaddingRight} />
+      ) : null}
+    </TableTr>
+  );
+};

package/src/components/inputs/MRT_EditCellTextInput.tsx

@@ -0,0 +1,214 @@
+'use no memo';
+
+import { type FocusEvent, type KeyboardEvent, useState } from 'react';
+
+import {
+  MultiSelect,
+  type MultiSelectProps,
+  Select,
+  type SelectProps,
+  TextInput,
+  type TextInputProps,
+} from '@mantine/core';
+
+import {
+  type HTMLPropsRef,
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+
+interface PropsTextInput<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends TextInputProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+interface PropsSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends SelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+interface PropsMultiSelect<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends MultiSelectProps {
+  cell: MRT_Cell<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+type MRT_TextInputProps = HTMLPropsRef<HTMLInputElement> & TextInputProps;
+type MRT_SelectProps = HTMLPropsRef<HTMLInputElement> & SelectProps;
+type MRT_MultiSelectProps = HTMLPropsRef<HTMLInputElement> & MultiSelectProps;
+
+export const MRT_EditCellTextInput = <TData extends MRT_RowData>({
+  cell,
+  table,
+  ...rest
+}: PropsMultiSelect<TData> | PropsSelect<TData> | PropsTextInput<TData>) => {
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      mantineEditSelectProps,
+      mantineEditTextInputProps,
+    },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingCell,
+    setEditingRow,
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { creatingRow, editingRow } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+  const isSelectEdit = columnDef.editVariant === 'select';
+  const isMultiSelectEdit = columnDef.editVariant === 'multi-select';
+
+  const [value, setValue] = useState(() => cell.getValue<any>());
+
+  const arg = { cell, column, row, table };
+  const textInputProps = {
+    ...parseFromValuesOrFunc(mantineEditTextInputProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineEditTextInputProps, arg),
+    ...rest,
+  } as MRT_TextInputProps;
+
+  const selectProps = {
+    ...parseFromValuesOrFunc(mantineEditSelectProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineEditSelectProps, arg),
+    ...rest,
+  };
+
+  const saveInputValueToRowCache = (newValue: null | string) => {
+    //@ts-ignore
+    row._valuesCache[column.id] = newValue;
+    if (isCreating) {
+      setCreatingRow(row);
+    } else if (isEditing) {
+      setEditingRow(row);
+    }
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    textInputProps.onBlur?.(event);
+    saveInputValueToRowCache(value);
+    setEditingCell(null);
+  };
+
+  const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    textInputProps.onKeyDown?.(event);
+    //Enter also confirms an IME composition (Chinese, Japanese, Korean input)
+    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+      editInputRefs.current[cell.id]?.blur();
+    }
+  };
+
+  if (columnDef.Edit) {
+    return columnDef.Edit?.({ cell, column, row, table });
+  }
+
+  const commonProps = {
+    disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false,
+    label: ['custom', 'modal'].includes(
+      (isCreating ? createDisplayMode : editDisplayMode) as string,
+    )
+      ? column.columnDef.header
+      : undefined,
+    name: cell.id,
+    onClick: (e: any) => {
+      e.stopPropagation();
+      textInputProps?.onClick?.(e);
+    },
+    placeholder: !['custom', 'modal'].includes(
+      (isCreating ? createDisplayMode : editDisplayMode) as string,
+    )
+      ? columnDef.header
+      : undefined,
+    value,
+    variant: editDisplayMode === 'table' ? 'unstyled' : 'default',
+  } as const;
+
+  if (isSelectEdit) {
+    return (
+      <Select
+        {...commonProps}
+        searchable
+        value={value as any}
+        {...(selectProps as MRT_SelectProps)}
+        onBlur={handleBlur}
+        onChange={(value, option) => {
+          (selectProps as MRT_SelectProps).onChange?.(value as any, option);
+          setValue(value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          selectProps?.onClick?.(e);
+        }}
+        ref={(node) => {
+          if (node) {
+            editInputRefs.current[cell.id] = node;
+            assignRef(selectProps.ref, node);
+          }
+        }}
+      />
+    );
+  }
+
+  if (isMultiSelectEdit) {
+    return (
+      <MultiSelect
+        {...commonProps}
+        searchable
+        value={value}
+        {...(selectProps as MRT_MultiSelectProps)}
+        onBlur={handleBlur}
+        onChange={(newValue) => {
+          (selectProps as MRT_MultiSelectProps).onChange?.(newValue);
+          setValue(newValue);
+          // Save if not in focus, otherwise it will be handled by onBlur
+          if (document.activeElement === editInputRefs.current[cell.id]) return;
+          saveInputValueToRowCache(newValue as any);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          selectProps?.onClick?.(e);
+        }}
+        ref={(node) => {
+          if (node) {
+            editInputRefs.current[cell.id] = node;
+            assignRef(selectProps.ref, node);
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <TextInput
+      {...commonProps}
+      onKeyDown={handleEnterKeyDown}
+      value={value ?? ''}
+      {...textInputProps}
+      onBlur={handleBlur}
+      onChange={(event) => {
+        textInputProps.onChange?.(event);
+        setValue(event.target.value);
+      }}
+      onClick={(event) => {
+        event.stopPropagation();
+        textInputProps?.onClick?.(event);
+      }}
+      ref={(node) => {
+        if (node) {
+          editInputRefs.current[cell.id] = node;
+          assignRef(textInputProps.ref, node);
+        }
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,4 @@
+.root {
+  font-weight: normal;
+  margin-top: 8px;
+}

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -0,0 +1,80 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_FilterCheckBox.module.css';
+
+import { Checkbox, type CheckboxProps, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_CellValue,
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends CheckboxProps {
+  column: MRT_Column<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
+  column,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { localization, mantineFilterCheckboxProps },
+  } = table;
+  const { density } = getState();
+  const { columnDef } = column;
+
+  const arg = { column, table };
+  const checkboxProps = {
+    ...parseFromValuesOrFunc(mantineFilterCheckboxProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterCheckboxProps, arg),
+    ...rest,
+  } as CheckboxProps;
+
+  const filterLabel = localization.filterByColumn?.replace(
+    '{column}',
+    columnDef.header,
+  );
+
+  const value = column.getFilterValue();
+
+  return (
+    <Tooltip
+      label={checkboxProps?.title ?? filterLabel}
+      openDelay={1000}
+      withinPortal
+    >
+      <Checkbox
+        checked={value === 'true'}
+        className={clsx('mrt-filter-checkbox', classes.root)}
+        indeterminate={value === undefined}
+        label={checkboxProps.title ?? filterLabel}
+        size={density === 'xs' ? 'sm' : 'md'}
+        {...checkboxProps}
+        onChange={(e) => {
+          column.setFilterValue(
+            column.getFilterValue() === undefined
+              ? 'true'
+              : column.getFilterValue() === 'true'
+                ? 'false'
+                : undefined,
+          );
+          checkboxProps?.onChange?.(e);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          checkboxProps?.onClick?.(e);
+        }}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,5 @@
+.root {
+  display: grid;
+  grid-template-columns: 6fr 6fr;
+  gap: 16px;
+}

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -0,0 +1,36 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_FilterRangeFields.module.css';
+
+import { Box, type BoxProps } from '@mantine/core';
+
+import { MRT_FilterTextInput } from './MRT_FilterTextInput';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  return (
+    <Box
+      {...rest}
+      className={clsx('mrt-filter-range-fields', classes.root, rest.className)}
+    >
+      <MRT_FilterTextInput header={header} rangeFilterIndex={0} table={table} />
+      <MRT_FilterTextInput header={header} rangeFilterIndex={1} table={table} />
+    </Box>
+  );
+};

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

@@ -0,0 +1,6 @@
+.root {
+  margin: auto;
+  margin-top: 16px;
+  margin-bottom: 6px;
+  width: calc(100% - 8px);
+}

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -0,0 +1,107 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_FilterRangeSlider.module.css';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { RangeSlider, type RangeSliderProps } 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 RangeSliderProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: { mantineFilterRangeSliderProps },
+    refs: { filterInputRefs },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const arg = { column, table };
+  const rangeSliderProps = {
+    ...parseFromValuesOrFunc(mantineFilterRangeSliderProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineFilterRangeSliderProps, arg),
+    ...rest,
+  } as RangeSliderProps;
+
+  let [min, max] =
+    rangeSliderProps.min !== undefined && rangeSliderProps.max !== undefined
+      ? [rangeSliderProps.min, rangeSliderProps.max]
+      : (column.getFacetedMinMaxValues() ?? [0, 1]);
+
+  //fix potential TanStack Table bugs where min or max is an array
+  if (Array.isArray(min)) min = min[0];
+  if (Array.isArray(max)) max = max[0];
+  if (min === null) min = 0;
+  if (max === null) max = 1;
+
+  const [filterValues, setFilterValues] = useState<[number, number]>([
+    min,
+    max,
+  ]);
+  const columnFilterValue = column.getFilterValue() as
+    | [number, number]
+    | undefined;
+
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      if (columnFilterValue === undefined) {
+        setFilterValues([min, max]);
+      } else if (Array.isArray(columnFilterValue)) {
+        setFilterValues(columnFilterValue);
+      }
+    }
+    isMounted.current = true;
+  }, [columnFilterValue, min, max]);
+
+  return (
+    <RangeSlider
+      className={clsx('mrt-filter-range-slider', classes.root)}
+      max={max}
+      min={min}
+      onChange={(values) => {
+        setFilterValues(values as [number, number]);
+      }}
+      onChangeEnd={(values) => {
+        if (Array.isArray(values)) {
+          if (values[0] <= min && values[1] >= max) {
+            //if the user has selected the entire range, remove the filter
+            column.setFilterValue(undefined);
+          } else {
+            column.setFilterValue(values as [number, number]);
+          }
+        }
+      }}
+      value={filterValues}
+      {...rangeSliderProps}
+      ref={(node) => {
+        if (node) {
+          //@ts-ignore
+          filterInputRefs.current[`${column.id}-0`] = node;
+          // @ts-ignore
+          if (rangeSliderProps?.ref) {
+            //@ts-ignore
+            rangeSliderProps.ref = node;
+          }
+        }
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,27 @@
+.root {
+  font-weight: normal;
+  border-bottom: 2px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
+  min-width: auto;
+  &.date-filter {
+    min-width: rem(125px);
+  }
+  &.range-filter {
+    min-width: rem(80px);
+  }
+  &.not-filter-chip {
+    min-width: rem(100px);
+  }
+  width: 100%;
+  & :global(.mantine-TextInput-input) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  & :global(.mantine-DateInput-input) {
+    height: 2.1rem;
+  }
+}
+
+.filter-chip-badge {
+  margin: 5px;
+}