@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/modules/record-table/components/RecordTableHeader.tsx

@@ -0,0 +1,91 @@
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+} from '@dnd-kit/sortable';
+import { flexRender, Header } from '@tanstack/react-table';
+
+import { Table } from 'erxes-ui/components';
+import { isStructuralColumn } from 'erxes-ui/modules/record-table/utils/columnUtils';
+
+import { RecordTableHead } from './RecordTableHead';
+import { RecordTableColumnSelector } from './RecordTableColumnSelector';
+import { useRecordTable } from './RecordTableProvider';
+
+const SELECTOR_WIDTH = 32;
+
+const resolveSelectorSlot = (visibleHeaders: Header<unknown, unknown>[]) => {
+  let offset = 0;
+
+  for (const header of visibleHeaders) {
+    const tooNarrow = header.getSize() < SELECTOR_WIDTH * 2;
+
+    if (!isStructuralColumn(header.column.id) && !tooNarrow) {
+      return { offset, coveredId: header.id };
+    }
+
+    offset += header.getSize();
+  }
+
+  return { offset: 0, coveredId: visibleHeaders[0]?.id };
+};
+
+export const RecordTableHeader = ({
+  showColumnSelector = false,
+}: {
+  showColumnSelector?: boolean;
+}) => {
+  const { table } = useRecordTable();
+  return (
+    <Table.Header>
+      {table.getHeaderGroups().map((headerGroup) => {
+        const visibleHeaders = headerGroup.headers.filter(
+          (header) => !header.isPlaceholder,
+        );
+        const { offset, coveredId } = resolveSelectorSlot(visibleHeaders);
+        const anchorId = visibleHeaders[0]?.id;
+
+        return (
+          <Table.Row key={headerGroup.id}>
+            <SortableContext
+              items={table.getState().columnOrder}
+              strategy={horizontalListSortingStrategy}
+            >
+              {headerGroup.headers.map((header) => {
+                const headerContent = header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    );
+                const isAnchor = showColumnSelector && header.id === anchorId;
+                const isCovered = showColumnSelector && header.id === coveredId;
+
+                return (
+                  <RecordTableHead
+                    header={header}
+                    key={header.id}
+                    className={isAnchor ? 'z-4' : undefined}
+                  >
+                    {isCovered ? (
+                      <div className="pl-8">{headerContent}</div>
+                    ) : (
+                      headerContent
+                    )}
+                    {isAnchor && (
+                      <div
+                        className="absolute top-0 z-20 h-full w-8 border-r bg-sidebar"
+                        style={{ left: `${offset}px` }}
+                      >
+                        <RecordTableColumnSelector />
+                      </div>
+                    )}
+                  </RecordTableHead>
+                );
+              })}
+            </SortableContext>
+          </Table.Row>
+        );
+      })}
+    </Table.Header>
+  );
+};

package/src/modules/record-table/components/RecordTableHotkeyCell.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useRecordTableHotkey } from '../contexts/RecordTableHotkeyContext';
+import { Slot } from 'radix-ui';
+import { mergeRefs } from 'react-merge-refs';
+import { cn } from 'erxes-ui/lib';
+import { Key } from 'erxes-ui/types';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useAtomValue } from 'jotai';
+import { internalHotkeysEnabledScopesState } from 'erxes-ui/modules/hotkey/states/internal/internalHotkeysEnabledScopeState';
+import { useSetHotkeyScope } from 'erxes-ui/modules/hotkey';
+
+export const RecordTableHotKeyControl = React.forwardRef<
+  React.ElementRef<typeof Slot.Root>,
+  React.ComponentPropsWithoutRef<typeof Slot.Root> & {
+    rowId: string;
+    rowIndex: number;
+    colIndex?: number;
+    enableOnFormTags?: boolean;
+  }
+>(
+  (
+    {
+      rowId,
+      rowIndex,
+      colIndex: colIndexProp,
+      enableOnFormTags = false,
+      className,
+      onClickCapture,
+      ...props
+    },
+    ref,
+  ) => {
+    const controlRef = useRef<HTMLTableCellElement>(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const { activeCell, setActiveRow, setActiveCell, scope } =
+      useRecordTableHotkey();
+    const enabledScopes = useAtomValue(internalHotkeysEnabledScopesState);
+    const setHotkeyScope = useSetHotkeyScope();
+
+    const colIndex = colIndexProp ?? controlRef.current?.cellIndex;
+
+    useHotkeys(
+      Key.Enter,
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        controlRef.current?.querySelector('button')?.click();
+      },
+      {
+        enabled: isFocused && enabledScopes.includes(scope),
+        preventDefault: true,
+        enableOnFormTags,
+      },
+      [enableOnFormTags, enabledScopes, isFocused, scope],
+    );
+
+    const handleFocus = (focused: boolean) => {
+      setIsFocused(focused);
+      if (!focused && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    };
+
+    useEffect(() => {
+      const isActive = activeCell[0] === rowIndex && activeCell[1] === colIndex;
+      if (isActive) {
+        setHotkeyScope(scope);
+        handleFocus(true);
+        setActiveRow(rowId);
+      } else if (isFocused) {
+        handleFocus(false);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeCell]);
+
+    return (
+      <Slot.Root
+        ref={mergeRefs([ref, controlRef])}
+        {...props}
+        onClickCapture={(event) => {
+          onClickCapture?.(event);
+          setHotkeyScope(scope);
+          setIsFocused(true);
+          setActiveRow(rowId);
+          setActiveCell([rowIndex, colIndex ?? 0]);
+        }}
+        className={cn(
+          isFocused &&
+            '*:outline-solid *:outline-1 *:outline-primary *:rounded *:outline-offset-0',
+          className,
+        )}
+      />
+    );
+  },
+);
+
+RecordTableHotKeyControl.displayName = 'RecordTableHotKeyControl';

package/src/modules/record-table/components/RecordTableInlineHead.tsx

@@ -0,0 +1,13 @@
+import { Icon } from '@tabler/icons-react';
+
+export const RecordTableInlineHead = (props: {
+  icon?: Icon;
+  label: string;
+}) => {
+  return (
+    <div className="flex items-center gap-1">
+      {props.icon && <props.icon className="size-4" />}
+      {props.label}
+    </div>
+  );
+};

package/src/modules/record-table/components/RecordTableProvider.tsx

@@ -0,0 +1,201 @@
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ColumnSizingState,
+  VisibilityState,
+  getCoreRowModel,
+  RowSelectionState,
+  SortingState,
+  type TableOptions,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import RecordTableContainer from 'erxes-ui/modules/record-table/components/RecordTableContainer';
+import { RecordTableDnDProvider } from 'erxes-ui/modules/record-table/components/RecordTableDnDProvider';
+import { IRecordTableContext } from 'erxes-ui/modules/record-table/types/recordTableTypes';
+import { isStructuralColumn } from 'erxes-ui/modules/record-table/utils/columnUtils';
+import { useTablePreferences } from '../hooks/useTablePreferences';
+
+const RecordTableContext = createContext<IRecordTableContext | null>(null);
+
+export function useRecordTable() {
+  const context = useContext(RecordTableContext);
+  if (!context) {
+    throw new Error(
+      'useRecordTable must be used within a RecordTableProvider.',
+    );
+  }
+  return context;
+}
+
+interface RecordTableProviderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  columns: ColumnDef<any>[];
+  data: any[];
+  tableOptions?: TableOptions<any>;
+  stickyColumns?: string[];
+  tableId?: string;
+}
+
+export const RecordTableProvider = forwardRef<
+  HTMLDivElement,
+  RecordTableProviderProps
+>(
+  (
+    {
+      children,
+      columns,
+      data,
+      tableOptions,
+      className,
+      stickyColumns,
+      tableId,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [columnSelectorOpen, setColumnSelectorOpen] = useState(false);
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    const {
+      prefs: { columnOrder, columnPinning, columnSizing, columnVisibility },
+      savePrefs,
+    } = useTablePreferences(tableId);
+    const [colOrder, setColumnOrder] = useState<ColumnOrderState>(
+      () => columnOrder || columns.map((c) => c.id || ''),
+    );
+    const [colVisibility, setColVisibility] = useState<VisibilityState>(
+      columnVisibility || {},
+    );
+    const [colSizing, setColSizing] = useState<ColumnSizingState>(
+      columnSizing || {},
+    );
+    const [colPinning, setColPinning] = useState<ColumnPinningState>(
+      () => columnPinning || { left: stickyColumns ?? [] },
+    );
+    const stickyKey = (stickyColumns ?? []).join(',');
+    const isPinningTouched = useRef(false);
+    useEffect(() => {
+      if (columnPinning || isPinningTouched.current) return;
+      setColPinning((prev) => ({
+        ...prev,
+        left: stickyKey ? stickyKey.split(',') : [],
+      }));
+    }, [columnPinning, stickyKey]);
+
+    const columnIdsKey = columns.map((column) => column.id || '').join(',');
+    useEffect(() => {
+      setColumnOrder((prev) => {
+        const ids = columnIdsKey.split(',').filter(Boolean);
+        const known = prev.filter((id) => ids.includes(id));
+
+        if (known.length === prev.length && known.length === ids.length) {
+          return prev;
+        }
+
+        return [...known, ...ids.filter((id) => !known.includes(id))];
+      });
+    }, [columnIdsKey]);
+
+    const structuralKey = columns
+      .map((column) => column.id)
+      .filter(
+        (id): id is string => typeof id === 'string' && isStructuralColumn(id),
+      )
+      .join(',');
+    const pinning = useMemo<ColumnPinningState>(() => {
+      const left = colPinning.left ?? [];
+      const structural = (structuralKey ? structuralKey.split(',') : []).filter(
+        (id) => !left.includes(id),
+      );
+
+      if (!left.length || !structural.length) return colPinning;
+
+      return { ...colPinning, left: [...structural, ...left] };
+    }, [colPinning, structuralKey]);
+    const table = useReactTable({
+      data,
+      columns,
+      defaultColumn: {
+        maxSize: 800,
+      },
+      getCoreRowModel: getCoreRowModel(),
+      state: {
+        columnOrder: colOrder,
+        columnSizing: colSizing,
+        columnVisibility: colVisibility,
+        columnPinning: pinning,
+        sorting,
+        columnFilters,
+        rowSelection,
+      },
+      columnResizeMode: 'onChange',
+      onColumnOrderChange: setColumnOrder,
+      onColumnSizingChange: setColSizing,
+      onColumnVisibilityChange: setColVisibility,
+      onColumnPinningChange: (updater) => {
+        isPinningTouched.current = true;
+        setColPinning(updater);
+      },
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setColumnFilters,
+      onRowSelectionChange: setRowSelection,
+      getRowId: (row) => row._id,
+      ...tableOptions,
+    });
+
+    useEffect(() => {
+      savePrefs({ columnOrder: colOrder });
+    }, [colOrder, savePrefs]);
+
+    useEffect(() => {
+      savePrefs({ columnPinning: colPinning });
+    }, [colPinning, savePrefs]);
+
+    useEffect(() => {
+      savePrefs({ columnVisibility: colVisibility });
+    }, [colVisibility, savePrefs]);
+
+    useEffect(() => {
+      savePrefs({ columnSizing: colSizing });
+    }, [colSizing, savePrefs]);
+
+    return (
+      <RecordTableContext.Provider
+        value={{
+          table,
+          columnSelectorOpen,
+          setColumnSelectorOpen,
+        }}
+      >
+        <RecordTableDnDProvider setColumnOrder={setColumnOrder}>
+          <RecordTableContainer
+            table={table}
+            className={className}
+            {...restProps}
+            ref={ref}
+          >
+            {children}
+          </RecordTableContainer>
+        </RecordTableDnDProvider>
+      </RecordTableContext.Provider>
+    );
+  },
+);
+
+RecordTableProvider.displayName = 'RecordTableProvider';

package/src/modules/record-table/components/RecordTableRoot.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Table } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib/utils';
+export const RecordTableRoot = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, style, ...props }, ref) => {
+  return (
+    <Table
+      ref={ref}
+      className={cn('leading-0', className)}
+      style={{ width: 'var(--table-width)', ...style }}
+      {...props}
+    />
+  );
+});

package/src/modules/record-table/components/RecordTableRow.tsx

@@ -0,0 +1,42 @@
+import { useInView } from 'react-intersection-observer';
+
+import { Table } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib/utils';
+
+import React from 'react';
+import { mergeRefs } from 'react-merge-refs';
+import { useRecordTable } from './RecordTableProvider';
+import { Row } from '@tanstack/react-table';
+
+export const RecordTableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    handleRowViewChange?: (inView: boolean) => void;
+    original?: Row<any>['original'];
+  }
+>(({ children, className, handleRowViewChange, original, ...props }, ref) => {
+  const { table } = useRecordTable();
+  const { ref: inViewRef, inView } = useInView({
+    onChange: handleRowViewChange,
+  });
+
+  return (
+    <Table.Row
+      {...props}
+      ref={mergeRefs([ref, inViewRef])}
+      className={cn('h-cell', inView ? 'in-view' : 'out-of-view', className)}
+      id={original?.cursor}
+    >
+      {table.getRowModel().rows.length > 200 && !inView ? (
+        <td
+          className="h-cell bg-background"
+          colSpan={table.getAllColumns().length}
+        />
+      ) : (
+        children
+      )}
+    </Table.Row>
+  );
+});
+
+RecordTableRow.displayName = 'RecordTableRow';

package/src/modules/record-table/components/RecordTableRowList.tsx

@@ -0,0 +1,47 @@
+import { cn } from 'erxes-ui/lib';
+import { RecordTableCell } from './RecordTableCell';
+import { useRecordTable } from './RecordTableProvider';
+import { RecordTableRow } from './RecordTableRow';
+import { flexRender } from '@tanstack/react-table';
+import { useMemo } from 'react';
+
+export const RecordTableRowList = ({
+  handleRowViewChange,
+  Row,
+}: {
+  handleRowViewChange?: (id: string, inView: boolean) => void;
+  Row?: React.ComponentType<React.ComponentProps<typeof RecordTableRow>>;
+}) => {
+  const { table } = useRecordTable();
+  const RowComponent = Row || RecordTableRow;
+
+  const tableContent = table.getRowModel().rows.map((row, rowIndex) => (
+    <RowComponent
+      key={row.id}
+      original={row.original}
+      data-state={row.getIsSelected() && 'selected'}
+      handleRowViewChange={(inView) =>
+        handleRowViewChange?.(row.original._id, inView)
+      }
+    >
+      {row.getVisibleCells().map((cell) => (
+        <RecordTableCell
+          cell={cell}
+          key={cell.id}
+          className={cn(rowIndex === 0 && 'border-t')}
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </RecordTableCell>
+      ))}
+    </RowComponent>
+  ));
+
+  const memoizedTableContent = useMemo(
+    () => tableContent,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [table.options.data, table.getState().columnOrder],
+  );
+  return table.getState().columnSizingInfo.isResizingColumn
+    ? memoizedTableContent
+    : tableContent;
+};

package/src/modules/record-table/components/RecordTableRowSkeleton.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { Skeleton, Table } from 'erxes-ui/components';
+
+import { useRecordTable } from './RecordTableProvider';
+import { cn } from 'erxes-ui/lib';
+
+export const RecordTableRowSkeleton = ({
+  rows = 1,
+  handleInView,
+  backward,
+  root,
+}: {
+  rows?: number;
+  handleInView?: () => void;
+  backward?: boolean;
+  root?: Element | null;
+}) => {
+  // get column count
+  const { table } = useRecordTable();
+  // fall back to visible leaf columns so skeleton cells still render when there
+  // is no data yet (e.g. initial load before any rows have arrived)
+  const columnCount =
+    table.getRowModel().rows[0]?.getVisibleCells().length ||
+    table.getVisibleLeafColumns().length;
+  const { ref } = useInView({
+    root: root ?? null,
+    onChange: (inView) => {
+      inView && handleInView?.();
+    },
+  });
+
+  return (
+    <>
+      <SkeletonRow ref={ref} columnCount={columnCount} />
+      {Array.from({ length: rows - 1 }).map((_, index) => (
+        <SkeletonRow
+          key={index}
+          columnCount={columnCount}
+          className={cn(backward && index === rows - 2 && '[&>td]:border-b-0')}
+        />
+      ))}
+    </>
+  );
+};
+
+const SkeletonRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    columnCount: number;
+  }
+>(({ columnCount, className, ...props }, ref) => {
+  return (
+    <Table.Row ref={ref} className={cn('h-cell', className)} {...props}>
+      {Array.from({ length: columnCount }).map((_, index) => (
+        <Table.Cell
+          key={index}
+          className={cn('border-r-0 px-2 group-hover/table-row:bg-background')}
+        >
+          <Skeleton className="h-4 w-full min-w-4" />
+        </Table.Cell>
+      ))}
+    </Table.Row>
+  );
+});

package/src/modules/record-table/components/RecordTableScroll.tsx

@@ -0,0 +1,23 @@
+import { ScrollArea } from 'erxes-ui/components';
+
+import { forwardRef } from 'react';
+import { cn } from 'erxes-ui/lib/utils';
+
+export const RecordTableScroll = forwardRef<
+  React.ElementRef<typeof ScrollArea>,
+  React.ComponentPropsWithoutRef<typeof ScrollArea>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <ScrollArea
+      ref={ref}
+      scrollBarClassName="z-10"
+      className={cn('h-full w-full pb-3 pr-3', className)}
+      {...props}
+    >
+      {children}
+      <ScrollArea.Bar orientation="horizontal" className="z-10" />
+    </ScrollArea>
+  );
+});
+
+RecordTableScroll.displayName = 'RecordTableScroll';