nntc-ui 0.2.4 → 0.2.6

package/{components/view/VirtualTable/ui/NumberFiltration/index.d.ts → src/components/view/VirtualTable/ui/NumberFiltration/index.ts}

@@ -1,2 +1 @@
 export { NumberFiltration } from './NumberFiltration';
-//# sourceMappingURL=index.d.ts.map

package/src/components/view/VirtualTable/ui/NumberFiltration/numberFiltration.module.css

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 380px;
+  padding: 16px 8px 0 8px;
+}
+
+.select {
+  width: 120px;
+}
+
+.inputs-container {
+  display: flex;
+  flex: 1 1 0;
+  gap: 16px;
+  align-items: center;
+  width: 0;
+}
+
+.input {
+  flex: 1 1 0;
+}
+
+.button {
+  flex-shrink: 0;
+}

package/src/components/view/VirtualTable/utils/alphanumericCompare.ts

@@ -0,0 +1,29 @@
+export const alphanumericCompare = (a: string, b: string): number => {
+  const aParts = a.match(/(\d+|\D+)/g) || [];
+  const bParts = b.match(/(\d+|\D+)/g) || [];
+
+  const maxLength = Math.max(aParts.length, bParts.length);
+
+  for (let i = 0; i < maxLength; i++) {
+    const aPart = aParts[i] || '';
+    const bPart = bParts[i] || '';
+
+    const aIsNumber = /^\d+$/.test(aPart);
+    const bIsNumber = /^\d+$/.test(bPart);
+
+    if (aIsNumber && bIsNumber) {
+      const numA = parseInt(aPart, 10);
+      const numB = parseInt(bPart, 10);
+      if (numA !== numB) {
+        return numA - numB;
+      }
+    } else {
+      const comparison = aPart.localeCompare(bPart);
+      if (comparison !== 0) {
+        return comparison;
+      }
+    }
+  }
+
+  return 0;
+};

package/src/components/view/VirtualTable/utils/dedupeFirstByColumnValue.ts

@@ -0,0 +1,17 @@
+import { TableRow } from '../models/TableRow';
+
+export function dedupeFirstByColumnValue(rows: TableRow[], columnName: string): TableRow[] {
+  const seen = new Set<string>();
+  const result: TableRow[] = [];
+
+  rows.forEach((row) => {
+    const key = row[columnName] ? (row[columnName].value || '')?.toString() : '';
+    if (seen.has(key)) {
+      return;
+    }
+    seen.add(key);
+    result.push(row);
+  });
+
+  return result;
+}

package/src/components/view/VirtualTable/utils/getColumns.ts

@@ -0,0 +1,40 @@
+import { ColumnDef, ColumnMeta } from '@tanstack/react-table';
+
+import { TableColumn } from '../models/TableColumn';
+import { TableRow } from '../models/TableRow';
+
+const createMeta = (column?: TableColumn): ColumnMeta<TableRow, unknown> | undefined => {
+  if (column) {
+    return {
+      editable: column.editable,
+      sortable: column.sortable,
+      sortType: column.sortType,
+      sortAnotherName: column.sortAnotherName,
+      filtrationByNumber: column.filtrationByNumber,
+      filtrationByDate: column.filtrationByDate,
+      filtrationByValue: column.filtrationByValue,
+      selectUnique: column.selectUnique,
+      width: column.width,
+      headerAlign: column.headerAlign,
+      rowsAlign: column.rowsAlign,
+      valueFormat: column.valueFormat,
+      showInModal: column.showInModal,
+      onClick: column.onClick,
+      label: column.label,
+      verticalAlign: column.verticalAlign,
+      toFixed: column.toFixed,
+      inputType: column.inputType,
+    };
+  }
+};
+
+export const getColumns = (columns: TableColumn[], parent?: TableColumn): ColumnDef<TableRow>[] => {
+  return columns.map((column) => ({
+    id: column.id,
+    accessorKey: column.accessorKey,
+    accessorFn: column.accessorKey ? (row) => row[column.accessorKey!]?.value : undefined,
+    header: () => column.label,
+    meta: createMeta(!!parent?.accessorKey ? parent : column),
+    columns: column.columns ? getColumns(column.columns, column) : undefined,
+  }));
+};

package/src/components/view/VirtualTable/utils/getNextHorizontalHeaders.ts

@@ -0,0 +1,21 @@
+import { Header } from '@tanstack/react-table';
+
+import { TableRow } from '../models/TableRow';
+
+export const getNextHorizontalHeaders = (
+  headers: Header<TableRow, unknown>[],
+  currentIndex: number,
+  lastVirtualColumnIndex: number,
+): Header<TableRow, unknown>[] => {
+  if (
+    headers[currentIndex + 1] &&
+    headers[currentIndex].column.columnDef.id === headers[currentIndex + 1].column.columnDef.id &&
+    currentIndex < lastVirtualColumnIndex
+  ) {
+    const result: Header<TableRow, unknown>[] = [headers[currentIndex + 1]];
+
+    return result.concat(getNextHorizontalHeaders(headers, currentIndex + 1, lastVirtualColumnIndex));
+  }
+
+  return [];
+};

package/src/components/view/VirtualTable/utils/getNextVerticalHeaders.ts

@@ -0,0 +1,18 @@
+import { Header, HeaderGroup } from '@tanstack/react-table';
+
+import { getPrevVerticalHeaders } from './getPrevVerticalHeaders';
+import { TableRow } from '../models/TableRow';
+
+export const getNextVerticalHeaders = (
+  headersGroups: HeaderGroup<TableRow>[],
+  groupIndex: number,
+  columnIndex: number,
+): Header<TableRow, unknown>[] => {
+  if (headersGroups[groupIndex + 1] && getPrevVerticalHeaders(headersGroups, groupIndex + 1, columnIndex).length) {
+    const result: Header<TableRow, unknown>[] = [headersGroups[groupIndex + 1].headers[columnIndex]];
+
+    return result.concat(getNextVerticalHeaders(headersGroups, groupIndex + 1, columnIndex));
+  }
+
+  return [];
+};

package/src/components/view/VirtualTable/utils/getPrevHorizontalHeaders.ts

@@ -0,0 +1,19 @@
+import { Header } from '@tanstack/react-table';
+
+import { TableRow } from '../models/TableRow';
+
+export const getPrevHorizontalHeaders = (
+  headers: Header<TableRow, unknown>[],
+  currentIndex: number,
+): Header<TableRow, unknown>[] => {
+  if (
+    headers[currentIndex - 1] &&
+    headers[currentIndex - 1].column.columnDef.id === headers[currentIndex].column.columnDef.id
+  ) {
+    const result: Header<TableRow, unknown>[] = [headers[currentIndex - 1]];
+
+    return result.concat(getPrevHorizontalHeaders(headers, currentIndex - 1));
+  }
+
+  return [];
+};

package/src/components/view/VirtualTable/utils/getPrevVerticalHeaders.ts

@@ -0,0 +1,22 @@
+import { Header, HeaderGroup } from '@tanstack/react-table';
+
+import { TableRow } from '../models/TableRow';
+
+export const getPrevVerticalHeaders = (
+  headersGroups: HeaderGroup<TableRow>[],
+  groupIndex: number,
+  columnIndex: number,
+): Header<TableRow, unknown>[] => {
+  if (
+    headersGroups[groupIndex - 1] &&
+    !headersGroups[groupIndex - 1].headers[columnIndex].column.columnDef.meta?.label &&
+    headersGroups[groupIndex - 1].headers[columnIndex].column.columnDef.id !==
+      headersGroups[groupIndex].headers[columnIndex].column.columnDef.id
+  ) {
+    const result: Header<TableRow, unknown>[] = [headersGroups[groupIndex - 1].headers[columnIndex]];
+
+    return result.concat(getPrevVerticalHeaders(headersGroups, groupIndex - 1, columnIndex));
+  }
+
+  return [];
+};

package/src/components/view/VirtualTable/utils/recursiveFilter.ts

@@ -0,0 +1,15 @@
+import { rowMatchesFilter } from './rowMatchesFilter';
+import { FilterBy } from '../models/FilterBy';
+import { TableRow } from '../models/TableRow';
+
+export const recursiveFilter = (rows: TableRow[], filterBy: FilterBy[]): TableRow[] => {
+  if (filterBy.length) {
+    const filterByItem = filterBy[filterBy.length - 1];
+    const filtered = filterByItem.values.length
+      ? rows.filter((row) => rowMatchesFilter(row, filterByItem) || row.isNew?.value === 1)
+      : rows;
+    return recursiveFilter(filtered, filterBy.slice(0, filterBy.length - 1));
+  }
+
+  return rows;
+};

package/src/components/view/VirtualTable/utils/recursiveSort.ts

@@ -0,0 +1,24 @@
+import { alphanumericCompare } from './alphanumericCompare';
+import { SortBy } from '../models/SortBy';
+import { TableRow } from '../models/TableRow';
+
+export const recursiveSort = (items: TableRow[], sortBy: SortBy[]): TableRow[] => {
+  if (sortBy.length) {
+    const sortByItem = sortBy[sortBy.length - 1];
+    const sorted = items.sort((a, b) => {
+      const aValue = a[sortByItem.columnName]?.value?.toString() ?? '';
+      const bValue = b[sortByItem.columnName]?.value?.toString() ?? '';
+
+      if (sortByItem.sortType === 'alphanumeric') {
+        const compare = alphanumericCompare(aValue, bValue);
+        return sortByItem.direction === 'asc' ? compare : -compare;
+      }
+
+      const compare = aValue.localeCompare(bValue);
+      return sortByItem.direction === 'asc' ? compare : -compare;
+    });
+    return recursiveSort(sorted, sortBy.slice(0, sortBy.length - 1));
+  }
+
+  return items;
+};

package/src/components/view/VirtualTable/utils/rowMatchesFilter.ts

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+
+import { FilterBy } from '../models/FilterBy';
+import { TableRow } from '../models/TableRow';
+
+export function rowMatchesFilter(row: TableRow, filterByItem: FilterBy): boolean {
+  const cell = row[filterByItem.columnName];
+  const cellValue = cell?.value;
+
+  if (filterByItem.type === 'dateRange') {
+    const startDate = dayjs((filterByItem.values as string[])[0]);
+    const endDate = dayjs((filterByItem.values as string[])[1]);
+
+    if (!startDate.isValid() || !endDate.isValid()) {
+      return false;
+    }
+
+    if (cellValue === undefined || cellValue === null || cellValue === '') {
+      return false;
+    }
+
+    const dateValue = dayjs(cellValue as string);
+
+    if (!dateValue.isValid()) {
+      return false;
+    }
+
+    return !dateValue.isBefore(startDate, 'day') && !dateValue.isAfter(endDate, 'day');
+  }
+
+  if (!cell) {
+    return filterByItem.values.includes('');
+  }
+
+  if (filterByItem.type === 'numberRange') {
+    return (
+      (cellValue as number) >= (filterByItem.values as number[])[0] &&
+      (cellValue as number) <= (filterByItem.values as number[])[1]
+    );
+  }
+
+  return filterByItem.values.includes((cellValue || '')?.toString());
+}

package/src/components/view/VirtualTable/utils/rowSelection.ts

@@ -0,0 +1,125 @@
+import { TableRow } from '../models/TableRow';
+
+export interface RowSelectionGesture {
+  startIndex: number;
+  currentIndex: number;
+  ctrl: boolean;
+  shift: boolean;
+  anchorIndex: number | null;
+  baseIndexes: Set<number>;
+  isDrag: boolean;
+}
+
+export const getIndexRange = (from: number, to: number): number[] => {
+  const start = Math.min(from, to);
+  const end = Math.max(from, to);
+  const result: number[] = [];
+
+  for (let index = start; index <= end; index += 1) {
+    result.push(index);
+  }
+
+  return result;
+};
+
+export const computeRowSelection = (gesture: RowSelectionGesture): { indexes: Set<number>; anchor: number | null } => {
+  const { startIndex, currentIndex, ctrl, shift, anchorIndex, baseIndexes, isDrag } = gesture;
+
+  if (shift && anchorIndex !== null) {
+    const range = getIndexRange(anchorIndex, currentIndex);
+
+    return {
+      indexes: ctrl ? new Set([...baseIndexes, ...range]) : new Set(range),
+      anchor: anchorIndex,
+    };
+  }
+
+  if (isDrag) {
+    const range = getIndexRange(startIndex, currentIndex);
+
+    return {
+      indexes: ctrl ? new Set([...baseIndexes, ...range]) : new Set(range),
+      anchor: startIndex,
+    };
+  }
+
+  if (ctrl) {
+    const next = new Set(baseIndexes);
+
+    if (next.has(startIndex)) {
+      next.delete(startIndex);
+    } else {
+      next.add(startIndex);
+    }
+
+    return { indexes: next, anchor: startIndex };
+  }
+
+  if (baseIndexes.size === 1 && baseIndexes.has(startIndex)) {
+    return { indexes: new Set(), anchor: null };
+  }
+
+  return { indexes: new Set([startIndex]), anchor: startIndex };
+};
+
+export const isInteractiveSelectionTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  return Boolean(
+    target.closest(
+      [
+        'button',
+        'a',
+        'input',
+        'textarea',
+        'select',
+        '[role="menuitem"]',
+        '[role="menu"]',
+        '[role="listbox"]',
+        '[role="dialog"]',
+        '[data-floating-ui-portal]',
+        '[contenteditable="true"]',
+      ].join(', '),
+    ),
+  );
+};
+
+export const isScrollbarPointerEvent = (event: {
+  clientX: number;
+  clientY: number;
+  target: EventTarget | null;
+  currentTarget: EventTarget;
+}): boolean => {
+  const container = event.currentTarget;
+  if (!(container instanceof HTMLElement) || event.target !== container) {
+    return false;
+  }
+
+  const rect = container.getBoundingClientRect();
+  const offsetX = event.clientX - rect.left;
+  const offsetY = event.clientY - rect.top;
+  const onVerticalScrollbar = container.offsetWidth - container.clientWidth > 0 && offsetX >= container.clientWidth;
+  const onHorizontalScrollbar =
+    container.offsetHeight - container.clientHeight > 0 && offsetY >= container.clientHeight;
+
+  return onVerticalScrollbar || onHorizontalScrollbar;
+};
+
+export const getSelectedIndexesByRows = (source: TableRow[], selectedRows: TableRow[]): Set<number> => {
+  if (selectedRows.length === 0) {
+    return new Set();
+  }
+
+  const selectedSet = new Set(selectedRows);
+  const nextIndexes = new Set<number>();
+
+  source.forEach((row, index) => {
+    if (selectedSet.has(row)) {
+      nextIndexes.add(index);
+    }
+  });
+
+  return nextIndexes;
+};