@erxes/ui 0.0.0-stage → 3.2.20-1

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

@@ -0,0 +1,204 @@
+import { isValidElement, type ReactNode } from 'react';
+import { DropdownMenu, Button, Checkbox, Label } from 'erxes-ui/components';
+import { useRecordTable } from './RecordTableProvider';
+import {
+  DragEndEvent,
+  DndContext,
+  useSensors,
+  useSensor,
+  MouseSensor,
+  TouchSensor,
+  KeyboardSensor,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  IconSettings,
+  IconGripVertical,
+  IconPin,
+  IconPinFilled,
+} from '@tabler/icons-react';
+import { Column } from '@tanstack/react-table';
+
+const getColumnLabel = (column: Column<any, unknown>): string => {
+  const { header } = column.columnDef;
+  if (typeof header === 'string') return header;
+  if (typeof header === 'function') {
+    try {
+      const headerNode = (header as () => ReactNode)();
+
+      if (isValidElement<{ label?: string }>(headerNode)) {
+        const inlineHeadLabel = headerNode.props?.label;
+
+        if (typeof inlineHeadLabel === 'string') return inlineHeadLabel;
+      }
+    } catch {
+      return column.id;
+    }
+  }
+
+  return column.id;
+};
+
+const SortableColumnItem = ({
+  column,
+  isLastVisible,
+}: {
+  column: Column<unknown, unknown>;
+  isLastVisible: boolean;
+}) => {
+  const isPinned = !!column.getIsPinned();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: column.id, disabled: isPinned });
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-center gap-2 px-2 py-1.5 hover:bg-muted/50 rounded-sm ${
+        isDragging && 'opacity-50 bg-muted'
+      }`}
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        className={`text-muted-foreground flex-none flex items-center ${
+          isPinned ? 'cursor-default opacity-30' : 'cursor-grab'
+        }`}
+      >
+        <IconGripVertical size={14} />
+      </div>
+
+      <Checkbox
+        id={`col-visibility-${column.id}`}
+        checked={column.getIsVisible()}
+        disabled={isLastVisible}
+        title={
+          isLastVisible ? 'At least one column must stay visible' : undefined
+        }
+        onCheckedChange={(checked) => column.toggleVisibility(!!checked)}
+      />
+
+      <Label
+        htmlFor={`col-visibility-${column.id}`}
+        className="cursor-pointer select-none font-normal truncate w-full"
+      >
+        {getColumnLabel(column)}
+      </Label>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        title={isPinned ? 'Unpin column' : 'Pin column to left'}
+        aria-label={isPinned ? 'Unpin column' : 'Pin column to left'}
+        className="h-5 w-5 flex-none text-muted-foreground hover:text-foreground"
+        onClick={(e) => {
+          e.preventDefault();
+          column.pin(isPinned ? false : 'left');
+        }}
+      >
+        {isPinned ? <IconPinFilled size={13} /> : <IconPin size={13} />}
+      </Button>
+    </div>
+  );
+};
+
+export const RecordTableColumnSelector = ({
+  children,
+  align = 'start',
+}: {
+  children?: React.ReactElement;
+  align?: 'start' | 'center' | 'end';
+}) => {
+  const { table, columnSelectorOpen, setColumnSelectorOpen } = useRecordTable();
+
+  const columns = table
+    .getAllLeafColumns()
+    .filter(
+      (col) =>
+        col.id !== 'checkbox' && col.id !== 'select' && col.id !== 'more',
+    );
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: { delay: 100, tolerance: 5 },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 100, tolerance: 5 },
+    }),
+    useSensor(KeyboardSensor),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      const currentOrder = table.getState().columnOrder;
+      const oldIndex = currentOrder.indexOf(active.id as string);
+      const newIndex = currentOrder.indexOf(over.id as string);
+      table.setColumnOrder(arrayMove(currentOrder, oldIndex, newIndex));
+    }
+  };
+
+  const visibleColumns = columns.filter((col) => col.getIsVisible());
+
+  if (columns.length === 0) return null;
+
+  return (
+    <DropdownMenu
+      open={columnSelectorOpen}
+      onOpenChange={setColumnSelectorOpen}
+    >
+      <DropdownMenu.Trigger asChild>
+        {children ?? (
+          <Button variant="ghost" className="h-full w-full rounded-none px-0">
+            <IconSettings />
+          </Button>
+        )}
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        align={align}
+        className="hide-scroll max-h-(--radix-dropdown-menu-content-available-height) w-72 max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain p-1"
+      >
+        <DndContext
+          sensors={sensors}
+          modifiers={[restrictToVerticalAxis]}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={columns.map((col) => col.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {columns.map((column) => (
+              <SortableColumnItem
+                key={column.id}
+                column={column}
+                isLastVisible={
+                  visibleColumns.length === 1 &&
+                  visibleColumns[0].id === column.id
+                }
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,70 @@
+import { CSSProperties, forwardRef, useMemo } from 'react';
+
+import { Table } from '@tanstack/react-table';
+
+import { cn } from 'erxes-ui/lib/utils';
+import { isFixedWidthColumn } from 'erxes-ui/modules/record-table/utils/columnUtils';
+
+interface RecordTableContainerProps {
+  table: Table<any>;
+  children: React.ReactNode;
+}
+
+const RecordTableContainer = forwardRef<
+  HTMLDivElement,
+  RecordTableContainerProps & React.HTMLAttributes<HTMLDivElement>
+>(({ table, className, children, ...restProps }, ref) => {
+  const { columnSizeVars, flexWidth } = useMemo(() => {
+    const headers = table.getFlatHeaders();
+    const flexWidth = headers.reduce(
+      (total, header) =>
+        isFixedWidthColumn(header.column) ? total : total + header.getSize(),
+      0,
+    );
+    const colSizes: { [key: string]: number | string } = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      if (header) {
+        colSizes[`--header-${header.id}-size`] = header.getSize();
+        colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+        const width =
+          isFixedWidthColumn(header.column) || !flexWidth
+            ? `${header.getSize()}px`
+            : `${(header.getSize() / flexWidth) * 100}%`;
+        colSizes[`--header-${header.id}-width`] = width;
+        colSizes[`--col-${header.column.id}-width`] = width;
+      }
+    }
+    return { columnSizeVars: colSizes, flexWidth };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    table.getState().columnSizingInfo,
+    table.getState().columnSizing,
+    table.getState().columnVisibility,
+  ]);
+
+  const totalWidth = table.getTotalSize() + 'px';
+
+  return (
+    <div
+      ref={ref}
+      {...restProps}
+      style={
+        {
+          '--table-width': flexWidth ? `max(${totalWidth}, 100%)` : totalWidth,
+          ...columnSizeVars,
+        } as CSSProperties
+      }
+      className={cn(
+        'grow-0 basis-full overflow-hidden rounded-lg bg-sidebar border-t-4 border-l-4 border-sidebar',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+RecordTableContainer.displayName = 'RecordTableContainer';
+
+export default RecordTableContainer;

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

@@ -0,0 +1,143 @@
+import { useRef, useEffect } from 'react';
+import { ScrollArea } from 'erxes-ui/components';
+import { RecordTable } from 'erxes-ui/modules';
+import { EnumCursorDirection } from '../types/RecordTableCursorTypes';
+import { RecordTableCursorContext } from '../contexts/RecordTableCursorContext';
+import { useRecordTableCursorContext } from '../hooks/useRecordTableCursorContext';
+import { useCursorScroll } from 'erxes-ui/hooks/use-cursor-pagination';
+
+export const RecordTableCursorProvider = ({
+  children,
+  hasPreviousPage,
+  loading,
+  dataLength,
+  hasNextPage,
+  sessionKey,
+  offset = 102,
+}: {
+  children: React.ReactNode;
+  hasPreviousPage?: boolean;
+  hasNextPage?: boolean;
+  loading?: boolean;
+  dataLength?: number;
+  sessionKey?: string;
+  offset?: number;
+}) => {
+  const {
+    scrollRef,
+    isFetchBackward,
+    setIsFetchBackward,
+    distanceFromBottomRef,
+  } = useCursorScroll({
+    dataLength,
+    hasPreviousPage,
+    offset,
+  });
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleScroll = () => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    const firstVisibleRow = scrollRef.current?.querySelector('.in-view');
+    if (firstVisibleRow && sessionKey) {
+      sessionStorage.setItem(sessionKey, firstVisibleRow.id);
+    }
+    debounceTimer.current = setTimeout(() => {
+      try {
+        sessionStorage.setItem(
+          `${sessionKey}_scroll`,
+          String(scrollRef.current?.scrollTop),
+        );
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+    }, 150);
+  };
+  useEffect(() => {
+    if (!dataLength || loading) return;
+    if (!scrollRef.current) return;
+    const saved = sessionStorage.getItem(`${sessionKey}_scroll`);
+    if (!saved) return;
+    scrollRef.current.scrollTop = parseInt(saved, 10);
+  }, [loading, dataLength, scrollRef, sessionKey]);
+
+  return (
+    <RecordTableCursorContext.Provider
+      value={{
+        scrollRef,
+        isFetchBackward,
+        setIsFetchBackward,
+        distanceFromBottomRef,
+        hasNextPage,
+        hasPreviousPage,
+        loading,
+      }}
+    >
+      <ScrollArea.Root className="h-full w-full pb-2 pr-2 relative">
+        <ScrollArea.Viewport ref={scrollRef} onScroll={handleScroll}>
+          <div className="min-h-[calc(100vh-8rem)]">{children}</div>
+        </ScrollArea.Viewport>
+
+        <ScrollArea.Bar orientation="vertical" />
+        <ScrollArea.Bar orientation="horizontal" />
+      </ScrollArea.Root>
+    </RecordTableCursorContext.Provider>
+  );
+};
+
+export const RecordTableBackwardSkeleton = ({
+  handleFetchMore,
+}: {
+  handleFetchMore: (params: { direction: EnumCursorDirection }) => void;
+}) => {
+  const {
+    setIsFetchBackward,
+    scrollRef,
+    distanceFromBottomRef,
+    hasPreviousPage,
+    loading,
+  } = useRecordTableCursorContext();
+
+  if (!hasPreviousPage || loading) {
+    return null;
+  }
+
+  return (
+    <RecordTable.RowSkeleton
+      rows={3}
+      backward
+      root={scrollRef.current}
+      handleInView={() => {
+        setIsFetchBackward(true);
+        handleFetchMore({ direction: EnumCursorDirection.BACKWARD });
+        if (scrollRef.current) {
+          distanceFromBottomRef.current =
+            scrollRef.current.scrollHeight - scrollRef.current.scrollTop;
+        }
+      }}
+    />
+  );
+};
+
+export const RecordTableForwardSkeleton = ({
+  handleFetchMore,
+}: {
+  handleFetchMore: (params: { direction: EnumCursorDirection }) => void;
+}) => {
+  const { hasNextPage, loading, scrollRef } = useRecordTableCursorContext();
+
+  if (!hasNextPage || loading) {
+    return null;
+  }
+
+  const handleInView = () => {
+    handleFetchMore({ direction: EnumCursorDirection.FORWARD });
+  };
+
+  return (
+    <RecordTable.RowSkeleton
+      rows={1}
+      handleInView={handleInView}
+      root={scrollRef.current}
+    />
+  );
+};

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

@@ -0,0 +1,63 @@
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+import { arrayMove } from '@dnd-kit/sortable';
+import { ColumnOrderState } from '@tanstack/react-table';
+import type { OnChangeFn } from '@tanstack/table-core';
+
+interface RecordTableDnDProviderProps {
+  children: React.ReactNode;
+  setColumnOrder: OnChangeFn<ColumnOrderState>;
+}
+
+export const RecordTableDnDProvider = ({
+  children,
+  setColumnOrder,
+}: RecordTableDnDProviderProps) => {
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        delay: 300,
+        tolerance: 10,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 300,
+        tolerance: 10,
+      },
+    }),
+    useSensor(KeyboardSensor, {}),
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((columnOrder) => {
+        const oldIndex = columnOrder.indexOf(active.id as string);
+        const newIndex = columnOrder.indexOf(over.id as string);
+        return arrayMove(columnOrder, oldIndex, newIndex);
+      });
+    }
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis, restrictToFirstScrollableAncestor]}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+      autoScroll={false}
+    >
+      {children}
+    </DndContext>
+  );
+};

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

@@ -0,0 +1,143 @@
+import React from 'react';
+
+import { useDndContext } from '@dnd-kit/core';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Column, Header } from '@tanstack/react-table';
+import { cva } from 'class-variance-authority';
+
+import { Table } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib/utils';
+import { isStructuralColumn } from 'erxes-ui/modules/record-table/utils/columnUtils';
+
+import { useRecordTable } from './RecordTableProvider';
+
+export const recordTableHeadVariants = cva(
+  'sticky z-2 top-0 transition-transform duration-200 whitespace-nowrap text-xs [&_svg]:flex-none',
+  {
+    variants: {
+      isDragging: {
+        true: 'z-3',
+      },
+      isPinned: {
+        left: 'z-3',
+        right: 'z-3',
+      },
+    },
+  },
+);
+
+export const RecordTableHead = ({
+  header,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'th'> & {
+  header: Header<any, unknown>;
+}) => {
+  const { column } = header;
+  const { attributes, isDragging, listeners, setNodeRef, transform } =
+    useSortable({
+      id: column.id,
+      disabled: !!column.getIsPinned(),
+    });
+
+  return (
+    <Table.Head
+      ref={setNodeRef}
+      className={cn(
+        recordTableHeadVariants({
+          isDragging,
+          isPinned:
+            column.getIsPinned() === 'left'
+              ? 'left'
+              : column.getIsPinned() === 'right'
+                ? 'right'
+                : null,
+        }),
+        className,
+      )}
+      style={{
+        width: `var(--header-${column.id}-width)`,
+        left:
+          column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+      }}
+      {...props}
+    >
+      {children}
+      {!isStructuralColumn(column.id) && (
+        <>
+          <span
+            {...attributes}
+            {...listeners}
+            tabIndex={-1}
+            className="absolute top-0 left-0 w-full h-full focus:outline-hidden"
+          />
+
+          {isDragging && (
+            <div
+              className="absolute top-0 left-0 w-full h-screen bg-muted opacity-50"
+              style={{ transform: CSS.Translate.toString(transform) }}
+            />
+          )}
+
+          <RecordTableHeadSize header={header} />
+          <RecordTableOverLine column={column} isDragging={isDragging} />
+        </>
+      )}
+    </Table.Head>
+  );
+};
+
+const RecordTableOverLine = ({
+  column,
+  isDragging,
+}: {
+  column: Column<any, unknown>;
+  isDragging: boolean;
+}) => {
+  const { over, active } = useDndContext();
+  const { table } = useRecordTable();
+  const columnsOrder = table.getState().columnOrder;
+
+  if (over?.id === column.id && !isDragging && active?.id) {
+    if (!table.getState().columnPinning?.left?.includes(over.id as string)) {
+      const activeIndex = columnsOrder.indexOf(active.id as string);
+      const overIndex = columnsOrder.indexOf(over.id as string);
+      const isOnRight = activeIndex < overIndex;
+      return (
+        <div
+          className={cn(
+            'absolute top-0 w-0.5 bg-primary/40 h-screen',
+            isOnRight ? 'right-0' : 'left-0',
+          )}
+        />
+      );
+    }
+  }
+
+  return null;
+};
+
+const RecordTableHeadSize = React.forwardRef<
+  HTMLTableCellElement,
+  React.ComponentProps<'span'> & {
+    header: Header<any, unknown>;
+  }
+>(({ header, children, ...props }, ref) => {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        'absolute bottom-0 cursor-col-resize w-4 h-full right-0 z-10 select-none touch-none after:absolute after:inset-y-2 after:w-px after:right-0 hover:after:bg-border',
+        header.column.getIsResizing() &&
+          'after:w-0.5 hover:after:bg-primary after:inset-y-1',
+      )}
+      {...props}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+    />
+  );
+});