mirror of
https://github.com/jeffvli/feishin.git
synced 2026-06-16 16:34:24 +02:00
jeffvli
2626 lines
99 KiB
TypeScript
2626 lines
99 KiB
TypeScript
// Component adapted from https://github.com/bvaughn/react-window/issues/826
|
||
|
||
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
|
||
import clsx from 'clsx';
|
||
import throttle from 'lodash/throttle';
|
||
import { AnimatePresence, motion } from 'motion/react';
|
||
import { useOverlayScrollbars } from 'overlayscrollbars-react';
|
||
import React, {
|
||
type JSXElementConstructor,
|
||
memo,
|
||
ReactElement,
|
||
Ref,
|
||
useCallback,
|
||
useEffect,
|
||
useId,
|
||
useImperativeHandle,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from 'react';
|
||
import { type CellComponentProps, Grid } from 'react-window-v2';
|
||
|
||
import styles from './item-table-list.module.css';
|
||
|
||
import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
|
||
import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
|
||
import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id';
|
||
import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
|
||
import {
|
||
ItemListStateActions,
|
||
ItemListStateItemWithRequiredProperties,
|
||
useItemListState,
|
||
useItemListStateSubscription,
|
||
} from '/@/renderer/components/item-list/helpers/item-list-state';
|
||
import { parseTableColumns } from '/@/renderer/components/item-list/helpers/parse-table-columns';
|
||
import { useListHotkeys } from '/@/renderer/components/item-list/helpers/use-list-hotkeys';
|
||
import { useStickyTableGroupRows } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows';
|
||
import { useStickyTableHeader } from '/@/renderer/components/item-list/item-table-list/hooks/use-sticky-table-header';
|
||
import {
|
||
ItemControls,
|
||
ItemListHandle,
|
||
ItemTableListColumnConfig,
|
||
} from '/@/renderer/components/item-list/types';
|
||
import { PlayerContext, usePlayer } from '/@/renderer/features/player/context/player-context';
|
||
import { animationProps } from '/@/shared/components/animations/animation-props';
|
||
import { useFocusWithin } from '/@/shared/hooks/use-focus-within';
|
||
import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
|
||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||
import { TableColumn } from '/@/shared/types/types';
|
||
|
||
/**
|
||
* Type guard to check if an item has the required properties (id and serverId)
|
||
* Similar to the type guard used in ItemCard
|
||
*/
|
||
const hasRequiredItemProperties = (item: unknown): item is { id: string; serverId: string } => {
|
||
return (
|
||
typeof item === 'object' &&
|
||
item !== null &&
|
||
'id' in item &&
|
||
typeof (item as any).id === 'string' &&
|
||
'_serverId' in item &&
|
||
typeof (item as any)._serverId === 'string'
|
||
);
|
||
};
|
||
|
||
/**
|
||
* Type guard to check if an item has the required properties for ItemListStateItemWithRequiredProperties
|
||
*/
|
||
const hasRequiredStateItemProperties = (
|
||
item: unknown,
|
||
): item is ItemListStateItemWithRequiredProperties => {
|
||
return (
|
||
typeof item === 'object' &&
|
||
item !== null &&
|
||
'id' in item &&
|
||
typeof (item as any).id === 'string' &&
|
||
'_serverId' in item &&
|
||
typeof (item as any)._serverId === 'string' &&
|
||
'_itemType' in item &&
|
||
typeof (item as any)._itemType === 'string'
|
||
);
|
||
};
|
||
|
||
enum TableItemSize {
|
||
COMPACT = 40,
|
||
DEFAULT = 64,
|
||
LARGE = 88,
|
||
}
|
||
|
||
interface VirtualizedTableGridProps {
|
||
activeRowId?: string;
|
||
calculatedColumnWidths: number[];
|
||
CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
|
||
cellPadding: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
|
||
controls: ItemControls;
|
||
data: unknown[];
|
||
dataWithGroups: (null | unknown)[];
|
||
enableAlternateRowColors: boolean;
|
||
enableColumnReorder: boolean;
|
||
enableColumnResize: boolean;
|
||
enableDrag?: boolean;
|
||
enableExpansion: boolean;
|
||
enableHeader: boolean;
|
||
enableHorizontalBorders: boolean;
|
||
enableRowHoverHighlight: boolean;
|
||
enableScrollShadow: boolean;
|
||
enableSelection: boolean;
|
||
enableVerticalBorders: boolean;
|
||
getRowHeight: (index: number, cellProps: TableItemProps) => number;
|
||
groups?: TableGroupHeader[];
|
||
headerHeight: number;
|
||
internalState: ItemListStateActions;
|
||
itemType: LibraryItem;
|
||
mergedRowRef: React.Ref<HTMLDivElement>;
|
||
onRangeChanged?: ItemTableListProps['onRangeChanged'];
|
||
parsedColumns: ReturnType<typeof parseTableColumns>;
|
||
pinnedLeftColumnCount: number;
|
||
pinnedLeftColumnRef: React.RefObject<HTMLDivElement | null>;
|
||
pinnedRightColumnCount: number;
|
||
pinnedRightColumnRef: React.RefObject<HTMLDivElement | null>;
|
||
pinnedRowCount: number;
|
||
pinnedRowRef: React.RefObject<HTMLDivElement | null>;
|
||
playerContext: PlayerContext;
|
||
showLeftShadow: boolean;
|
||
showRightShadow: boolean;
|
||
showTopShadow: boolean;
|
||
size: 'compact' | 'default' | 'large';
|
||
startRowIndex?: number;
|
||
tableId: string;
|
||
totalColumnCount: number;
|
||
totalRowCount: number;
|
||
}
|
||
|
||
const VirtualizedTableGrid = ({
|
||
activeRowId,
|
||
calculatedColumnWidths,
|
||
CellComponent,
|
||
cellPadding,
|
||
controls,
|
||
data,
|
||
dataWithGroups,
|
||
enableAlternateRowColors,
|
||
enableColumnReorder,
|
||
enableColumnResize,
|
||
enableDrag,
|
||
enableExpansion,
|
||
enableHeader,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableScrollShadow,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
getRowHeight,
|
||
groups,
|
||
headerHeight,
|
||
internalState,
|
||
itemType,
|
||
mergedRowRef,
|
||
onRangeChanged,
|
||
parsedColumns,
|
||
pinnedLeftColumnCount,
|
||
pinnedLeftColumnRef,
|
||
pinnedRightColumnCount,
|
||
pinnedRightColumnRef,
|
||
pinnedRowCount,
|
||
pinnedRowRef,
|
||
playerContext,
|
||
showLeftShadow,
|
||
showRightShadow,
|
||
showTopShadow,
|
||
size,
|
||
startRowIndex,
|
||
tableId,
|
||
totalColumnCount,
|
||
totalRowCount,
|
||
}: VirtualizedTableGridProps) => {
|
||
const hoverDelegateRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
const columnWidth = useCallback(
|
||
(index: number) => calculatedColumnWidths[index],
|
||
[calculatedColumnWidths],
|
||
);
|
||
|
||
const groupHeaderInfoByRowIndex = useMemo(() => {
|
||
if (!groups || groups.length === 0) return undefined;
|
||
|
||
const map = new Map<number, { groupIndex: number; startDataIndex: number }>();
|
||
const headerOffset = enableHeader ? 1 : 0;
|
||
let cumulativeDataIndex = 0;
|
||
|
||
for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
|
||
const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
|
||
map.set(groupHeaderIndex, { groupIndex, startDataIndex: cumulativeDataIndex });
|
||
cumulativeDataIndex += groups[groupIndex].itemCount;
|
||
}
|
||
|
||
return map;
|
||
}, [groups, enableHeader]);
|
||
|
||
const getGroupRenderData = useCallback(() => data, [data]);
|
||
|
||
// Row hover highlight: do one delegated listener per table rather than per cell
|
||
// This is intentionally imperative to avoid React re-rendering the entire visible grid on hover
|
||
useEffect(() => {
|
||
if (!enableRowHoverHighlight) return;
|
||
const root = hoverDelegateRef.current;
|
||
if (!root) return;
|
||
|
||
let hoveredKey: null | string = null;
|
||
let rafId: null | number = null;
|
||
|
||
const getRowKey = (target: EventTarget | null): null | string => {
|
||
const el = target instanceof Element ? target : null;
|
||
const rowEl = el?.closest?.('[data-row-index]') as HTMLElement | null;
|
||
return rowEl?.getAttribute('data-row-index') ?? null;
|
||
};
|
||
|
||
const apply = (prev: null | string, next: null | string) => {
|
||
if (rafId !== null) cancelAnimationFrame(rafId);
|
||
rafId = requestAnimationFrame(() => {
|
||
if (prev) {
|
||
root.querySelectorAll(`[data-row-index="${prev}"]`).forEach((node) => {
|
||
(node as HTMLElement).removeAttribute('data-row-hovered');
|
||
});
|
||
}
|
||
if (next) {
|
||
root.querySelectorAll(`[data-row-index="${next}"]`).forEach((node) => {
|
||
(node as HTMLElement).setAttribute('data-row-hovered', 'true');
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const setHovered = (next: null | string) => {
|
||
if (next === hoveredKey) return;
|
||
const prev = hoveredKey;
|
||
hoveredKey = next;
|
||
apply(prev, next);
|
||
};
|
||
|
||
const onPointerOver = (e: PointerEvent) => {
|
||
setHovered(getRowKey(e.target));
|
||
};
|
||
|
||
const onPointerOut = (e: PointerEvent) => {
|
||
// If moving within the same row, keep it hovered
|
||
const relatedKey = getRowKey((e as any).relatedTarget);
|
||
if (relatedKey === hoveredKey) return;
|
||
setHovered(relatedKey);
|
||
};
|
||
|
||
root.addEventListener('pointerover', onPointerOver);
|
||
root.addEventListener('pointerout', onPointerOut);
|
||
|
||
return () => {
|
||
root.removeEventListener('pointerover', onPointerOver);
|
||
root.removeEventListener('pointerout', onPointerOut);
|
||
if (rafId !== null) cancelAnimationFrame(rafId);
|
||
// Ensure we don't leave stale attributes behind
|
||
if (hoveredKey) apply(hoveredKey, null);
|
||
};
|
||
}, [enableRowHoverHighlight]);
|
||
|
||
useEffect(() => {
|
||
const root = hoverDelegateRef.current;
|
||
if (!root) return;
|
||
|
||
let current: null | { edge: 'bottom' | 'top'; rowKey: string } = null;
|
||
let pending: null | { edge: 'bottom' | 'top' | null; rowKey: string } = null;
|
||
let rafId: null | number = null;
|
||
|
||
const clearRow = (rowKey: string) => {
|
||
root.querySelectorAll(`[data-row-index="${rowKey}"]`).forEach((node) => {
|
||
const el = node as HTMLElement;
|
||
el.removeAttribute('data-row-dragged-over');
|
||
el.removeAttribute('data-row-dragged-over-first');
|
||
});
|
||
};
|
||
|
||
const applyRow = (rowKey: string, edge: 'bottom' | 'top') => {
|
||
const nodes = root.querySelectorAll(`[data-row-index="${rowKey}"]`);
|
||
nodes.forEach((node, idx) => {
|
||
const el = node as HTMLElement;
|
||
el.setAttribute('data-row-dragged-over', edge);
|
||
if (idx === 0) {
|
||
el.setAttribute('data-row-dragged-over-first', 'true');
|
||
} else {
|
||
el.removeAttribute('data-row-dragged-over-first');
|
||
}
|
||
});
|
||
};
|
||
|
||
const flush = () => {
|
||
rafId = null;
|
||
const next = pending;
|
||
pending = null;
|
||
if (!next) return;
|
||
|
||
// Clear previous row if we’re moving rows or clearing.
|
||
if (current && current.rowKey !== next.rowKey) {
|
||
clearRow(current.rowKey);
|
||
current = null;
|
||
}
|
||
|
||
if (!next.edge) {
|
||
if (current) {
|
||
clearRow(current.rowKey);
|
||
current = null;
|
||
}
|
||
return;
|
||
}
|
||
|
||
// If same row + edge, no-op.
|
||
if (current && current.rowKey === next.rowKey && current.edge === next.edge) return;
|
||
|
||
if (current) clearRow(current.rowKey);
|
||
applyRow(next.rowKey, next.edge);
|
||
current = { edge: next.edge, rowKey: next.rowKey };
|
||
};
|
||
|
||
const scheduleFlush = () => {
|
||
if (rafId !== null) return;
|
||
rafId = requestAnimationFrame(flush);
|
||
};
|
||
|
||
const onRowDragOver = (e: Event) => {
|
||
const ev = e as CustomEvent<{ edge?: 'bottom' | 'top' | null; rowKey?: string }>;
|
||
const rowKey = ev.detail?.rowKey;
|
||
const edge = ev.detail?.edge ?? null;
|
||
if (!rowKey) return;
|
||
|
||
pending = { edge, rowKey };
|
||
scheduleFlush();
|
||
};
|
||
|
||
root.addEventListener('itl:row-drag-over', onRowDragOver as any);
|
||
|
||
return () => {
|
||
root.removeEventListener('itl:row-drag-over', onRowDragOver as any);
|
||
if (rafId !== null) cancelAnimationFrame(rafId);
|
||
if (current) clearRow(current.rowKey);
|
||
};
|
||
}, []);
|
||
|
||
// Calculate pinned column widths for group header positioning
|
||
const pinnedLeftColumnWidths = useMemo(() => {
|
||
return Array.from({ length: pinnedLeftColumnCount }, (_, i) => columnWidth(i));
|
||
}, [pinnedLeftColumnCount, columnWidth]);
|
||
|
||
const pinnedRightColumnWidths = useMemo(() => {
|
||
return Array.from({ length: pinnedRightColumnCount }, (_, i) =>
|
||
columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
|
||
);
|
||
}, [pinnedRightColumnCount, pinnedLeftColumnCount, totalColumnCount, columnWidth]);
|
||
|
||
const groupHeaderRowIndexes = useMemo(() => {
|
||
if (!groupHeaderInfoByRowIndex || groupHeaderInfoByRowIndex.size === 0) return [];
|
||
return Array.from(groupHeaderInfoByRowIndex.keys()).sort((a, b) => a - b);
|
||
}, [groupHeaderInfoByRowIndex]);
|
||
|
||
const adjustedRowIndexCacheRef = useRef<{ lastRowIndex: number; pos: number }>({
|
||
lastRowIndex: -1,
|
||
pos: 0,
|
||
});
|
||
|
||
useEffect(() => {
|
||
adjustedRowIndexCacheRef.current = { lastRowIndex: -1, pos: 0 };
|
||
}, [enableHeader, groupHeaderRowIndexes, groups]);
|
||
|
||
const getAdjustedRowIndex = useCallback(
|
||
(rowIndex: number) => {
|
||
if (!groups || groups.length === 0) {
|
||
if (enableHeader && rowIndex === 0) return 0;
|
||
return enableHeader ? rowIndex : rowIndex + 1;
|
||
}
|
||
|
||
if (enableHeader && rowIndex === 0) return 0;
|
||
if (groupHeaderInfoByRowIndex?.has(rowIndex)) return 0;
|
||
|
||
const headerOffset = enableHeader ? 1 : 0;
|
||
const cache = adjustedRowIndexCacheRef.current;
|
||
|
||
// Count group header rows strictly before this rowIndex.
|
||
let pos: number;
|
||
if (cache.lastRowIndex !== -1 && rowIndex >= cache.lastRowIndex) {
|
||
pos = cache.pos;
|
||
while (
|
||
pos < groupHeaderRowIndexes.length &&
|
||
groupHeaderRowIndexes[pos] < rowIndex
|
||
) {
|
||
pos++;
|
||
}
|
||
} else {
|
||
// upperBound(groupHeaderRowIndexes, rowIndex - 1)
|
||
let lo = 0;
|
||
let hi = groupHeaderRowIndexes.length;
|
||
const target = rowIndex - 1;
|
||
while (lo < hi) {
|
||
const mid = (lo + hi) >>> 1;
|
||
if (groupHeaderRowIndexes[mid] <= target) lo = mid + 1;
|
||
else hi = mid;
|
||
}
|
||
pos = lo;
|
||
}
|
||
|
||
cache.lastRowIndex = rowIndex;
|
||
cache.pos = pos;
|
||
|
||
const groupHeadersBefore = pos;
|
||
const dataIndexZeroBased = rowIndex - headerOffset - groupHeadersBefore;
|
||
return dataIndexZeroBased + 1;
|
||
},
|
||
[enableHeader, groupHeaderInfoByRowIndex, groupHeaderRowIndexes, groups],
|
||
);
|
||
|
||
const stableConfigProps = useMemo(
|
||
() => ({
|
||
cellPadding,
|
||
columns: parsedColumns,
|
||
controls,
|
||
enableHeader,
|
||
getRowHeight,
|
||
internalState,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
}),
|
||
[
|
||
cellPadding,
|
||
parsedColumns,
|
||
controls,
|
||
enableHeader,
|
||
getRowHeight,
|
||
internalState,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
],
|
||
);
|
||
|
||
const dynamicDataProps = useMemo(
|
||
() => ({
|
||
activeRowId,
|
||
calculatedColumnWidths,
|
||
data: dataWithGroups,
|
||
getAdjustedRowIndex,
|
||
getGroupRenderData,
|
||
groupHeaderInfoByRowIndex,
|
||
pinnedLeftColumnCount,
|
||
pinnedLeftColumnWidths,
|
||
pinnedRightColumnCount,
|
||
pinnedRightColumnWidths,
|
||
startRowIndex,
|
||
}),
|
||
[
|
||
activeRowId,
|
||
calculatedColumnWidths,
|
||
dataWithGroups,
|
||
getAdjustedRowIndex,
|
||
getGroupRenderData,
|
||
groupHeaderInfoByRowIndex,
|
||
pinnedLeftColumnCount,
|
||
pinnedLeftColumnWidths,
|
||
pinnedRightColumnCount,
|
||
pinnedRightColumnWidths,
|
||
startRowIndex,
|
||
],
|
||
);
|
||
|
||
const featureFlags = useMemo(
|
||
() => ({
|
||
enableAlternateRowColors,
|
||
enableColumnReorder,
|
||
enableColumnResize,
|
||
enableDrag,
|
||
enableExpansion,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
groups,
|
||
}),
|
||
[
|
||
enableAlternateRowColors,
|
||
enableColumnReorder,
|
||
enableColumnResize,
|
||
enableDrag,
|
||
enableExpansion,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
groups,
|
||
],
|
||
);
|
||
|
||
const itemProps: TableItemProps = useMemo(
|
||
() => ({
|
||
...stableConfigProps,
|
||
...dynamicDataProps,
|
||
...featureFlags,
|
||
}),
|
||
[stableConfigProps, dynamicDataProps, featureFlags],
|
||
);
|
||
|
||
const PinnedRowCell = useCallback(
|
||
(cellProps: CellComponentProps & TableItemProps) => {
|
||
return (
|
||
<CellComponent
|
||
{...cellProps}
|
||
columnIndex={cellProps.columnIndex + pinnedLeftColumnCount}
|
||
/>
|
||
);
|
||
},
|
||
[pinnedLeftColumnCount, CellComponent],
|
||
);
|
||
|
||
const PinnedColumnCell = useCallback(
|
||
(cellProps: CellComponentProps & TableItemProps) => {
|
||
return <CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />;
|
||
},
|
||
[pinnedRowCount, CellComponent],
|
||
);
|
||
|
||
const PinnedRightColumnCell = useCallback(
|
||
(cellProps: CellComponentProps & TableItemProps) => {
|
||
return (
|
||
<CellComponent
|
||
{...cellProps}
|
||
columnIndex={cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount}
|
||
rowIndex={cellProps.rowIndex + pinnedRowCount}
|
||
/>
|
||
);
|
||
},
|
||
[pinnedLeftColumnCount, pinnedRowCount, totalColumnCount, CellComponent],
|
||
);
|
||
|
||
const PinnedRightIntersectionCell = useCallback(
|
||
(cellProps: CellComponentProps & TableItemProps) => {
|
||
return (
|
||
<CellComponent
|
||
{...cellProps}
|
||
columnIndex={cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount}
|
||
/>
|
||
);
|
||
},
|
||
[pinnedLeftColumnCount, totalColumnCount, CellComponent],
|
||
);
|
||
|
||
const RowCell = useCallback(
|
||
(cellProps: CellComponentProps<TableItemProps>) => {
|
||
return (
|
||
<CellComponent
|
||
{...cellProps}
|
||
columnIndex={cellProps.columnIndex + pinnedLeftColumnCount}
|
||
rowIndex={cellProps.rowIndex + pinnedRowCount}
|
||
/>
|
||
);
|
||
},
|
||
[pinnedLeftColumnCount, pinnedRowCount, CellComponent],
|
||
);
|
||
|
||
const handleOnCellsRendered = useCallback(
|
||
(items: {
|
||
columnStartIndex: number;
|
||
columnStopIndex: number;
|
||
rowStartIndex: number;
|
||
rowStopIndex: number;
|
||
}) => {
|
||
onRangeChanged?.({
|
||
startIndex: items.rowStartIndex,
|
||
stopIndex: items.rowStopIndex,
|
||
});
|
||
},
|
||
[onRangeChanged],
|
||
);
|
||
|
||
return (
|
||
<div className={styles.itemTableContainer} ref={hoverDelegateRef}>
|
||
<div
|
||
className={styles.itemTablePinnedColumnsGridContainer}
|
||
style={
|
||
{
|
||
'--header-height': `${headerHeight}px`,
|
||
minWidth: `${Array.from({ length: pinnedLeftColumnCount }, () => 0).reduce(
|
||
(a, _, i) => a + columnWidth(i),
|
||
0,
|
||
)}px`,
|
||
} as React.CSSProperties
|
||
}
|
||
>
|
||
{!!(pinnedLeftColumnCount || pinnedRowCount) && (
|
||
<div
|
||
className={clsx(styles.itemTablePinnedIntersectionGridContainer, {
|
||
[styles.withHeader]: enableHeader,
|
||
})}
|
||
style={{
|
||
minHeight: `${Array.from({ length: pinnedRowCount }, () => 0).reduce(
|
||
(a, _, i) => a + getRowHeight(i, itemProps),
|
||
0,
|
||
)}px`,
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
<Grid
|
||
cellComponent={CellComponent as any}
|
||
cellProps={itemProps}
|
||
className={styles.noScrollbar}
|
||
columnCount={pinnedLeftColumnCount}
|
||
columnWidth={columnWidth}
|
||
rowCount={pinnedRowCount}
|
||
rowHeight={getRowHeight}
|
||
/>
|
||
</div>
|
||
)}
|
||
{enableHeader && enableScrollShadow && showTopShadow && (
|
||
<div className={styles.itemTableTopScrollShadow} />
|
||
)}
|
||
{!!pinnedLeftColumnCount && (
|
||
<div
|
||
className={styles.itemTablePinnedColumnsContainer}
|
||
ref={pinnedLeftColumnRef}
|
||
>
|
||
<Grid
|
||
cellComponent={PinnedColumnCell}
|
||
cellProps={itemProps}
|
||
className={clsx(styles.noScrollbar, styles.height100)}
|
||
columnCount={pinnedLeftColumnCount}
|
||
columnWidth={columnWidth}
|
||
rowCount={totalRowCount}
|
||
rowHeight={(index, cellProps) => {
|
||
return getRowHeight(index + pinnedRowCount, cellProps);
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
className={styles.itemTablePinnedRowsContainer}
|
||
style={
|
||
{
|
||
'--header-height': `${headerHeight}px`,
|
||
} as React.CSSProperties
|
||
}
|
||
>
|
||
{!!pinnedRowCount && (
|
||
<div
|
||
className={clsx(styles.itemTablePinnedRowsGridContainer, {
|
||
[styles.withHeader]: enableHeader,
|
||
})}
|
||
ref={pinnedRowRef}
|
||
style={
|
||
{
|
||
'--header-height': `${headerHeight}px`,
|
||
minHeight: `${Array.from(
|
||
{ length: pinnedRowCount },
|
||
() => 0,
|
||
).reduce((a, _, i) => a + getRowHeight(i, itemProps), 0)}px`,
|
||
overflow: 'hidden',
|
||
} as React.CSSProperties
|
||
}
|
||
>
|
||
<Grid
|
||
cellComponent={PinnedRowCell}
|
||
cellProps={itemProps}
|
||
className={styles.noScrollbar}
|
||
columnCount={totalColumnCount}
|
||
columnWidth={(index) => {
|
||
return columnWidth(index + pinnedLeftColumnCount);
|
||
}}
|
||
rowCount={Array.from({ length: pinnedRowCount }, () => 0).length}
|
||
rowHeight={getRowHeight}
|
||
/>
|
||
</div>
|
||
)}
|
||
{enableHeader && enableScrollShadow && showTopShadow && (
|
||
<div className={styles.itemTableTopScrollShadow} />
|
||
)}
|
||
<div className={styles.itemTableGridContainer} ref={mergedRowRef}>
|
||
<Grid
|
||
cellComponent={RowCell}
|
||
cellProps={itemProps}
|
||
className={styles.height100}
|
||
columnCount={totalColumnCount}
|
||
columnWidth={(index) => {
|
||
return columnWidth(index + pinnedLeftColumnCount);
|
||
}}
|
||
onCellsRendered={handleOnCellsRendered}
|
||
rowCount={totalRowCount}
|
||
rowHeight={(index, cellProps) => {
|
||
return getRowHeight(index + pinnedRowCount, cellProps);
|
||
}}
|
||
/>
|
||
{pinnedLeftColumnCount > 0 && enableScrollShadow && showLeftShadow && (
|
||
<div className={styles.itemTableLeftScrollShadow} />
|
||
)}
|
||
{pinnedRightColumnCount > 0 && enableScrollShadow && showRightShadow && (
|
||
<div className={styles.itemTableRightScrollShadow} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
{!!pinnedRightColumnCount && (
|
||
<div
|
||
className={styles.itemTablePinnedColumnsGridContainer}
|
||
style={
|
||
{
|
||
'--header-height': `${headerHeight}px`,
|
||
minWidth: `${Array.from(
|
||
{ length: pinnedRightColumnCount },
|
||
() => 0,
|
||
).reduce(
|
||
(a, _, i) =>
|
||
a + columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
|
||
0,
|
||
)}px`,
|
||
} as React.CSSProperties
|
||
}
|
||
>
|
||
{!!(pinnedRightColumnCount || pinnedRowCount) && (
|
||
<div
|
||
className={clsx(styles.itemTablePinnedIntersectionGridContainer, {
|
||
[styles.withHeader]: enableHeader,
|
||
})}
|
||
style={{
|
||
minHeight: `${Array.from(
|
||
{ length: pinnedRowCount },
|
||
() => 0,
|
||
).reduce((a, _, i) => a + getRowHeight(i, itemProps), 0)}px`,
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
<Grid
|
||
cellComponent={PinnedRightIntersectionCell}
|
||
cellProps={itemProps}
|
||
className={styles.noScrollbar}
|
||
columnCount={pinnedRightColumnCount}
|
||
columnWidth={(index) => {
|
||
return columnWidth(
|
||
index + pinnedLeftColumnCount + totalColumnCount,
|
||
);
|
||
}}
|
||
rowCount={pinnedRowCount}
|
||
rowHeight={getRowHeight}
|
||
/>
|
||
</div>
|
||
)}
|
||
{enableHeader && enableScrollShadow && showTopShadow && (
|
||
<div className={styles.itemTableTopScrollShadow} />
|
||
)}
|
||
<div
|
||
className={styles.itemTablePinnedRightColumnsContainer}
|
||
ref={pinnedRightColumnRef}
|
||
>
|
||
<Grid
|
||
cellComponent={PinnedRightColumnCell}
|
||
cellProps={itemProps}
|
||
className={clsx(styles.noScrollbar, styles.height100)}
|
||
columnCount={pinnedRightColumnCount}
|
||
columnWidth={(index) => {
|
||
return columnWidth(
|
||
index + pinnedLeftColumnCount + totalColumnCount,
|
||
);
|
||
}}
|
||
rowCount={totalRowCount}
|
||
rowHeight={(index, cellProps) => {
|
||
return getRowHeight(index + pinnedRowCount, cellProps);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
|
||
|
||
const MemoizedVirtualizedTableGrid = memo(VirtualizedTableGrid, (prevProps, nextProps) => {
|
||
return (
|
||
prevProps.activeRowId === nextProps.activeRowId &&
|
||
prevProps.calculatedColumnWidths === nextProps.calculatedColumnWidths &&
|
||
prevProps.cellPadding === nextProps.cellPadding &&
|
||
prevProps.controls === nextProps.controls &&
|
||
prevProps.data === nextProps.data &&
|
||
prevProps.dataWithGroups === nextProps.dataWithGroups &&
|
||
prevProps.enableAlternateRowColors === nextProps.enableAlternateRowColors &&
|
||
prevProps.enableColumnReorder === nextProps.enableColumnReorder &&
|
||
prevProps.enableColumnResize === nextProps.enableColumnResize &&
|
||
prevProps.enableDrag === nextProps.enableDrag &&
|
||
prevProps.enableExpansion === nextProps.enableExpansion &&
|
||
prevProps.enableHeader === nextProps.enableHeader &&
|
||
prevProps.enableHorizontalBorders === nextProps.enableHorizontalBorders &&
|
||
prevProps.enableRowHoverHighlight === nextProps.enableRowHoverHighlight &&
|
||
prevProps.enableScrollShadow === nextProps.enableScrollShadow &&
|
||
prevProps.enableSelection === nextProps.enableSelection &&
|
||
prevProps.enableVerticalBorders === nextProps.enableVerticalBorders &&
|
||
prevProps.getRowHeight === nextProps.getRowHeight &&
|
||
prevProps.groups === nextProps.groups &&
|
||
prevProps.headerHeight === nextProps.headerHeight &&
|
||
prevProps.internalState === nextProps.internalState &&
|
||
prevProps.itemType === nextProps.itemType &&
|
||
prevProps.mergedRowRef === nextProps.mergedRowRef &&
|
||
prevProps.onRangeChanged === nextProps.onRangeChanged &&
|
||
prevProps.parsedColumns === nextProps.parsedColumns &&
|
||
prevProps.pinnedLeftColumnCount === nextProps.pinnedLeftColumnCount &&
|
||
prevProps.pinnedLeftColumnRef === nextProps.pinnedLeftColumnRef &&
|
||
prevProps.pinnedRightColumnCount === nextProps.pinnedRightColumnCount &&
|
||
prevProps.pinnedRightColumnRef === nextProps.pinnedRightColumnRef &&
|
||
prevProps.pinnedRowCount === nextProps.pinnedRowCount &&
|
||
prevProps.pinnedRowRef === nextProps.pinnedRowRef &&
|
||
prevProps.playerContext === nextProps.playerContext &&
|
||
prevProps.showLeftShadow === nextProps.showLeftShadow &&
|
||
prevProps.showRightShadow === nextProps.showRightShadow &&
|
||
prevProps.showTopShadow === nextProps.showTopShadow &&
|
||
prevProps.size === nextProps.size &&
|
||
prevProps.startRowIndex === nextProps.startRowIndex &&
|
||
prevProps.tableId === nextProps.tableId &&
|
||
prevProps.totalColumnCount === nextProps.totalColumnCount &&
|
||
prevProps.totalRowCount === nextProps.totalRowCount &&
|
||
prevProps.CellComponent === nextProps.CellComponent
|
||
);
|
||
});
|
||
|
||
MemoizedVirtualizedTableGrid.displayName = 'MemoizedVirtualizedTableGrid';
|
||
|
||
export interface TableGroupHeader {
|
||
itemCount: number;
|
||
render: (props: {
|
||
data: unknown[];
|
||
groupIndex: number;
|
||
index: number;
|
||
internalState: ItemListStateActions;
|
||
startDataIndex: number;
|
||
}) => ReactElement;
|
||
}
|
||
|
||
export interface TableItemProps {
|
||
activeRowId?: string;
|
||
adjustedRowIndexMap?: Map<number, number>;
|
||
calculatedColumnWidths?: number[];
|
||
cellPadding?: ItemTableListProps['cellPadding'];
|
||
columns: ItemTableListColumnConfig[];
|
||
controls: ItemControls;
|
||
data: ItemTableListProps['data'];
|
||
enableAlternateRowColors?: ItemTableListProps['enableAlternateRowColors'];
|
||
enableColumnReorder?: boolean;
|
||
enableColumnResize?: boolean;
|
||
enableDrag?: ItemTableListProps['enableDrag'];
|
||
enableExpansion?: ItemTableListProps['enableExpansion'];
|
||
enableHeader?: ItemTableListProps['enableHeader'];
|
||
enableHorizontalBorders?: ItemTableListProps['enableHorizontalBorders'];
|
||
enableRowHoverHighlight?: ItemTableListProps['enableRowHoverHighlight'];
|
||
enableSelection?: ItemTableListProps['enableSelection'];
|
||
enableVerticalBorders?: ItemTableListProps['enableVerticalBorders'];
|
||
getAdjustedRowIndex?: (rowIndex: number) => number;
|
||
getGroupRenderData?: () => unknown[];
|
||
getRowHeight: (index: number, cellProps: TableItemProps) => number;
|
||
groupHeaderInfoByRowIndex?: Map<number, { groupIndex: number; startDataIndex: number }>;
|
||
groups?: TableGroupHeader[];
|
||
internalState: ItemListStateActions;
|
||
itemType: ItemTableListProps['itemType'];
|
||
onRowClick?: (item: any, event: React.MouseEvent<HTMLDivElement>) => void;
|
||
pinnedLeftColumnCount?: number;
|
||
pinnedLeftColumnWidths?: number[];
|
||
pinnedRightColumnCount?: number;
|
||
pinnedRightColumnWidths?: number[];
|
||
playerContext: PlayerContext;
|
||
size?: ItemTableListProps['size'];
|
||
startRowIndex?: number;
|
||
tableId: string;
|
||
}
|
||
|
||
interface ItemTableListProps {
|
||
activeRowId?: string;
|
||
autoFitColumns?: boolean;
|
||
CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
|
||
cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
|
||
columns: ItemTableListColumnConfig[];
|
||
data: unknown[];
|
||
enableAlternateRowColors?: boolean;
|
||
enableDrag?: boolean;
|
||
enableEntranceAnimation?: boolean;
|
||
enableExpansion?: boolean;
|
||
enableHeader?: boolean;
|
||
enableHorizontalBorders?: boolean;
|
||
enableRowHoverHighlight?: boolean;
|
||
enableScrollShadow?: boolean;
|
||
enableSelection?: boolean;
|
||
enableSelectionDialog?: boolean;
|
||
enableStickyGroupRows?: boolean;
|
||
enableStickyHeader?: boolean;
|
||
enableVerticalBorders?: boolean;
|
||
getRowId?: ((item: unknown) => string) | string;
|
||
groups?: TableGroupHeader[];
|
||
headerHeight?: number;
|
||
initialTop?: {
|
||
behavior?: 'auto' | 'smooth';
|
||
to: number;
|
||
type: 'index' | 'offset';
|
||
};
|
||
itemType: LibraryItem;
|
||
onColumnReordered?: (
|
||
columnIdFrom: TableColumn,
|
||
columnIdTo: TableColumn,
|
||
edge: 'bottom' | 'left' | 'right' | 'top' | null,
|
||
) => void;
|
||
onColumnResized?: (columnId: TableColumn, width: number) => void;
|
||
onRangeChanged?: (range: { startIndex: number; stopIndex: number }) => void;
|
||
onScrollEnd?: (offset: number, internalState: ItemListStateActions) => void;
|
||
overrideControls?: Partial<ItemControls>;
|
||
ref?: Ref<ItemListHandle>;
|
||
rowHeight?: ((index: number, cellProps: TableItemProps) => number) | number;
|
||
size?: 'compact' | 'default' | 'large';
|
||
startRowIndex?: number;
|
||
}
|
||
|
||
const BaseItemTableList = ({
|
||
activeRowId,
|
||
autoFitColumns = false,
|
||
CellComponent,
|
||
cellPadding = 'sm',
|
||
columns,
|
||
data,
|
||
enableAlternateRowColors = false,
|
||
enableDrag = true,
|
||
enableEntranceAnimation = true,
|
||
enableExpansion = true,
|
||
enableHeader = true,
|
||
enableHorizontalBorders = false,
|
||
enableRowHoverHighlight = true,
|
||
enableScrollShadow = true,
|
||
enableSelection = true,
|
||
enableStickyGroupRows = false,
|
||
enableStickyHeader = false,
|
||
enableVerticalBorders = false,
|
||
getRowId,
|
||
groups,
|
||
headerHeight = 40,
|
||
initialTop,
|
||
itemType,
|
||
onColumnReordered,
|
||
onColumnResized,
|
||
onRangeChanged,
|
||
onScrollEnd,
|
||
overrideControls,
|
||
ref,
|
||
rowHeight,
|
||
size = 'default',
|
||
startRowIndex,
|
||
}: ItemTableListProps) => {
|
||
const tableId = useId();
|
||
const totalItemCount = enableHeader ? data.length + 1 : data.length;
|
||
const parsedColumns = useMemo(() => parseTableColumns(columns), [columns]);
|
||
const columnCount = parsedColumns.length;
|
||
const playerContext = usePlayer();
|
||
const [centerContainerWidth, setCenterContainerWidth] = useState(0);
|
||
const [totalContainerWidth, setTotalContainerWidth] = useState(0);
|
||
|
||
// Compute dataWithGroups once to avoid duplicate computation
|
||
// This is used by both VirtualizedTableGrid and getDataFn
|
||
const dataWithGroups = useMemo(() => {
|
||
const result: (null | unknown)[] = enableHeader ? [null] : [];
|
||
|
||
if (!groups || groups.length === 0) {
|
||
// No groups, just add all data
|
||
result.push(...data);
|
||
return result;
|
||
}
|
||
|
||
// Build the expanded row model: [header?] + (groupHeader + groupItems)* + any remaining items.
|
||
let dataIndex = 0;
|
||
for (const group of groups) {
|
||
// Group header row
|
||
result.push(null);
|
||
|
||
// Group items
|
||
const end = Math.min(data.length, dataIndex + group.itemCount);
|
||
for (; dataIndex < end; dataIndex++) {
|
||
result.push(data[dataIndex]);
|
||
}
|
||
}
|
||
|
||
// If groups don't account for all items, append the remainder.
|
||
for (; dataIndex < data.length; dataIndex++) {
|
||
result.push(data[dataIndex]);
|
||
}
|
||
|
||
return result;
|
||
}, [data, enableHeader, groups]);
|
||
|
||
// Compute distributed widths: unpinned columns with autoWidth will share any remaining space
|
||
// When autoSizeColumns is true, all column widths are treated as proportions and scaled to fit the container
|
||
const calculatedColumnWidths = useMemo(() => {
|
||
const baseWidths = parsedColumns.map((c) => c.width);
|
||
|
||
// When autoSizeColumns is enabled, treat all widths as proportions and scale to fit container
|
||
if (autoFitColumns) {
|
||
// Calculate total reference width (sum of all base widths)
|
||
const totalReferenceWidth = baseWidths.reduce((sum, width) => sum + width, 0);
|
||
|
||
if (totalReferenceWidth === 0 || totalContainerWidth === 0) {
|
||
return baseWidths.map((width) => Math.round(width));
|
||
}
|
||
|
||
// Scale factor to fit all columns proportionally within the total container width
|
||
const scaleFactor = totalContainerWidth / totalReferenceWidth;
|
||
|
||
// Apply scale factor to all columns proportionally and round to integers
|
||
const scaledWidths = baseWidths.map((width) => Math.round(width * scaleFactor));
|
||
|
||
// Adjust for rounding errors: ensure total equals totalContainerWidth
|
||
const totalScaled = scaledWidths.reduce((sum, width) => sum + width, 0);
|
||
const difference = totalContainerWidth - totalScaled;
|
||
|
||
if (difference !== 0 && scaledWidths.length > 0) {
|
||
// Distribute the difference to the largest columns
|
||
const sortedIndices = scaledWidths
|
||
.map((width, idx) => ({ idx, width }))
|
||
.sort((a, b) => b.width - a.width);
|
||
|
||
const adjustmentPerColumn = Math.sign(difference);
|
||
const adjustmentCount = Math.abs(difference);
|
||
|
||
for (let i = 0; i < adjustmentCount && i < sortedIndices.length; i++) {
|
||
scaledWidths[sortedIndices[i].idx] += adjustmentPerColumn;
|
||
}
|
||
}
|
||
|
||
return scaledWidths;
|
||
}
|
||
|
||
// Original behavior: distribute extra space to auto-size columns
|
||
const distributed = baseWidths.slice();
|
||
|
||
const unpinnedIndices: number[] = [];
|
||
const autoUnpinnedIndices: number[] = [];
|
||
|
||
parsedColumns.forEach((col, idx) => {
|
||
if (col.pinned === null) {
|
||
unpinnedIndices.push(idx);
|
||
if (col.autoSize) {
|
||
autoUnpinnedIndices.push(idx);
|
||
}
|
||
}
|
||
});
|
||
|
||
if (unpinnedIndices.length === 0 || autoUnpinnedIndices.length === 0) {
|
||
return distributed.map((width) => Math.round(width));
|
||
}
|
||
|
||
const unpinnedBaseTotal = unpinnedIndices.reduce((sum, idx) => sum + baseWidths[idx], 0);
|
||
|
||
// Distribute only when there is extra space within the center container
|
||
const extra = Math.max(0, centerContainerWidth - unpinnedBaseTotal);
|
||
if (extra <= 0) {
|
||
return distributed.map((width) => Math.round(width));
|
||
}
|
||
|
||
const extraPer = extra / autoUnpinnedIndices.length;
|
||
autoUnpinnedIndices.forEach((idx) => {
|
||
distributed[idx] = Math.round(baseWidths[idx] + extraPer);
|
||
});
|
||
|
||
// Round all widths to integers
|
||
return distributed.map((width) => Math.round(width));
|
||
}, [parsedColumns, centerContainerWidth, autoFitColumns, totalContainerWidth]);
|
||
|
||
const pinnedLeftColumnCount = parsedColumns.filter((col) => col.pinned === 'left').length;
|
||
const pinnedRightColumnCount = parsedColumns.filter((col) => col.pinned === 'right').length;
|
||
|
||
const pinnedRowCount = enableHeader ? 1 : 0;
|
||
|
||
// Calculate group header row count - each group has one header row
|
||
const groupHeaderRowCount = useMemo(() => {
|
||
if (!groups || groups.length === 0) return 0;
|
||
return groups.length;
|
||
}, [groups]);
|
||
|
||
// Group headers are inserted at specific indexes, so they add to the total row count
|
||
const totalRowCount = totalItemCount - pinnedRowCount + groupHeaderRowCount;
|
||
const totalColumnCount = columnCount - pinnedLeftColumnCount - pinnedRightColumnCount;
|
||
const pinnedRowRef = useRef<HTMLDivElement>(null);
|
||
const rowRef = useRef<HTMLDivElement>(null);
|
||
const pinnedLeftColumnRef = useRef<HTMLDivElement>(null);
|
||
const pinnedRightColumnRef = useRef<HTMLDivElement>(null);
|
||
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||
const mergedRowRef = useMergedRef(rowRef, scrollContainerRef);
|
||
const [showLeftShadow, setShowLeftShadow] = useState(false);
|
||
const [showRightShadow, setShowRightShadow] = useState(false);
|
||
const [showTopShadow, setShowTopShadow] = useState(false);
|
||
const handleRef = useRef<ItemListHandle | null>(null);
|
||
const { focused, ref: focusRef } = useFocusWithin();
|
||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||
const mergedContainerRef = useMergedRef(containerRef, focusRef);
|
||
|
||
const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
|
||
const stickyGroupRowRef = useRef<HTMLDivElement | null>(null);
|
||
const stickyHeaderLeftRef = useRef<HTMLDivElement | null>(null);
|
||
const stickyHeaderMainRef = useRef<HTMLDivElement | null>(null);
|
||
const stickyHeaderRightRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
const { shouldShowStickyHeader, stickyTop } = useStickyTableHeader({
|
||
containerRef: containerRef,
|
||
enabled: enableHeader && enableStickyHeader,
|
||
headerRef: pinnedRowRef,
|
||
mainGridRef: rowRef,
|
||
pinnedLeftColumnRef,
|
||
pinnedRightColumnRef,
|
||
stickyHeaderMainRef,
|
||
});
|
||
|
||
// Update position and width of sticky header (scroll sync is handled in the hook)
|
||
useEffect(() => {
|
||
if (!shouldShowStickyHeader || !stickyHeaderRef.current || !containerRef.current) {
|
||
return;
|
||
}
|
||
|
||
const stickyHeader = stickyHeaderRef.current;
|
||
const container = containerRef.current;
|
||
let isMounted = true;
|
||
|
||
const updatePosition = () => {
|
||
// Guard against updates after unmount
|
||
if (!isMounted || !stickyHeader || !container) {
|
||
return;
|
||
}
|
||
try {
|
||
const containerRect = container.getBoundingClientRect();
|
||
stickyHeader.style.left = `${containerRect.left}px`;
|
||
stickyHeader.style.width = `${containerRect.width}px`;
|
||
} catch {
|
||
// Silently handle errors if elements are no longer in DOM
|
||
}
|
||
};
|
||
|
||
updatePosition();
|
||
|
||
window.addEventListener('resize', updatePosition);
|
||
window.addEventListener('scroll', updatePosition, true);
|
||
|
||
return () => {
|
||
isMounted = false;
|
||
window.removeEventListener('resize', updatePosition);
|
||
window.removeEventListener('scroll', updatePosition, true);
|
||
};
|
||
}, [shouldShowStickyHeader]);
|
||
|
||
useEffect(() => {
|
||
const el = rowRef.current;
|
||
if (!el) return;
|
||
|
||
const updateWidth = () => {
|
||
setCenterContainerWidth(el.clientWidth || 0);
|
||
};
|
||
|
||
updateWidth();
|
||
|
||
let debounceTimeout: NodeJS.Timeout | null = null;
|
||
const resizeObserver = new ResizeObserver(() => {
|
||
if (debounceTimeout) {
|
||
clearTimeout(debounceTimeout);
|
||
}
|
||
debounceTimeout = setTimeout(() => {
|
||
updateWidth();
|
||
}, 100);
|
||
});
|
||
|
||
resizeObserver.observe(el);
|
||
|
||
return () => {
|
||
if (debounceTimeout) {
|
||
clearTimeout(debounceTimeout);
|
||
}
|
||
resizeObserver.disconnect();
|
||
};
|
||
}, []);
|
||
|
||
// Track total container width for autoSizeColumns
|
||
useEffect(() => {
|
||
const el = containerRef.current;
|
||
if (!el || !autoFitColumns) return;
|
||
|
||
const updateWidth = () => {
|
||
setTotalContainerWidth(el.clientWidth || 0);
|
||
};
|
||
|
||
updateWidth();
|
||
|
||
let debounceTimeout: NodeJS.Timeout | null = null;
|
||
const resizeObserver = new ResizeObserver(() => {
|
||
if (debounceTimeout) {
|
||
clearTimeout(debounceTimeout);
|
||
}
|
||
debounceTimeout = setTimeout(() => {
|
||
updateWidth();
|
||
}, 100);
|
||
});
|
||
|
||
resizeObserver.observe(el);
|
||
|
||
return () => {
|
||
if (debounceTimeout) {
|
||
clearTimeout(debounceTimeout);
|
||
}
|
||
resizeObserver.disconnect();
|
||
};
|
||
}, [autoFitColumns]);
|
||
|
||
const onScrollEndRef = useRef<ItemTableListProps['onScrollEnd']>(onScrollEnd);
|
||
useEffect(() => {
|
||
onScrollEndRef.current = onScrollEnd;
|
||
}, [onScrollEnd]);
|
||
|
||
const scrollToTableOffset = useCallback((offset: number) => {
|
||
const mainContainer = rowRef.current?.childNodes[0] as HTMLDivElement | undefined;
|
||
const pinnedLeftContainer = pinnedLeftColumnRef.current?.childNodes[0] as
|
||
| HTMLDivElement
|
||
| undefined;
|
||
const pinnedRightContainer = pinnedRightColumnRef.current?.childNodes[0] as
|
||
| HTMLDivElement
|
||
| undefined;
|
||
|
||
const behavior = 'instant';
|
||
|
||
if (mainContainer) {
|
||
mainContainer.scrollTo({ behavior, top: offset });
|
||
}
|
||
if (pinnedLeftContainer) {
|
||
pinnedLeftContainer.scrollTo({ behavior, top: offset });
|
||
}
|
||
if (pinnedRightContainer) {
|
||
pinnedRightContainer.scrollTo({ behavior, top: offset });
|
||
}
|
||
}, []);
|
||
|
||
const DEFAULT_ROW_HEIGHT =
|
||
size === 'compact'
|
||
? TableItemSize.COMPACT
|
||
: size === 'large'
|
||
? TableItemSize.LARGE
|
||
: TableItemSize.DEFAULT;
|
||
|
||
const calculateScrollTopForIndex = useCallback(
|
||
(index: number) => {
|
||
const adjustedIndex = enableHeader ? Math.max(0, index - 1) : index;
|
||
let scrollTop = 0;
|
||
|
||
// Create a minimal mock cellProps for rowHeight function calls if needed
|
||
const mockCellProps: TableItemProps = {
|
||
cellPadding,
|
||
columns: parsedColumns,
|
||
controls: {} as ItemControls,
|
||
data: enableHeader ? [null, ...data] : data,
|
||
enableAlternateRowColors,
|
||
enableExpansion,
|
||
enableHeader,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
getRowHeight: () => DEFAULT_ROW_HEIGHT,
|
||
internalState: {} as ItemListStateActions,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
};
|
||
|
||
for (let i = 0; i < adjustedIndex; i++) {
|
||
let height: number;
|
||
if (typeof rowHeight === 'number') {
|
||
height = rowHeight;
|
||
} else if (typeof rowHeight === 'function') {
|
||
height = rowHeight(i, mockCellProps);
|
||
} else {
|
||
height = DEFAULT_ROW_HEIGHT;
|
||
}
|
||
scrollTop += height;
|
||
}
|
||
return scrollTop;
|
||
},
|
||
[
|
||
enableHeader,
|
||
cellPadding,
|
||
parsedColumns,
|
||
data,
|
||
enableAlternateRowColors,
|
||
enableExpansion,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
DEFAULT_ROW_HEIGHT,
|
||
rowHeight,
|
||
],
|
||
);
|
||
|
||
const scrollToTableIndex = useCallback(
|
||
(index: number, options?: { align?: 'bottom' | 'center' | 'top' }) => {
|
||
const mainContainer = rowRef.current?.childNodes[0] as HTMLDivElement | undefined;
|
||
if (!mainContainer) return;
|
||
|
||
const viewportHeight = mainContainer.clientHeight;
|
||
const align = options?.align || 'top';
|
||
|
||
// Calculate the base scroll offset (top of the row)
|
||
let offset = calculateScrollTopForIndex(index);
|
||
|
||
// Calculate row height for the target index
|
||
const adjustedIndex = enableHeader ? Math.max(0, index - 1) : index;
|
||
const mockCellProps: TableItemProps = {
|
||
cellPadding,
|
||
columns: parsedColumns,
|
||
controls: {} as ItemControls,
|
||
data: enableHeader ? [null, ...data] : data,
|
||
enableAlternateRowColors,
|
||
enableExpansion,
|
||
enableHeader,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
getRowHeight: () => DEFAULT_ROW_HEIGHT,
|
||
internalState: {} as ItemListStateActions,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
};
|
||
|
||
let targetRowHeight: number;
|
||
if (typeof rowHeight === 'number') {
|
||
targetRowHeight = rowHeight;
|
||
} else if (typeof rowHeight === 'function') {
|
||
targetRowHeight = rowHeight(adjustedIndex, mockCellProps);
|
||
} else {
|
||
targetRowHeight = DEFAULT_ROW_HEIGHT;
|
||
}
|
||
|
||
// Adjust offset based on alignment
|
||
if (align === 'center') {
|
||
offset = offset - viewportHeight / 2 + targetRowHeight / 2;
|
||
} else if (align === 'bottom') {
|
||
offset = offset - viewportHeight + targetRowHeight;
|
||
}
|
||
// 'top' uses the base offset
|
||
|
||
// Ensure offset is not negative
|
||
offset = Math.max(0, offset);
|
||
|
||
scrollToTableOffset(offset);
|
||
},
|
||
[
|
||
calculateScrollTopForIndex,
|
||
scrollToTableOffset,
|
||
enableHeader,
|
||
cellPadding,
|
||
parsedColumns,
|
||
data,
|
||
enableAlternateRowColors,
|
||
enableExpansion,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
DEFAULT_ROW_HEIGHT,
|
||
rowHeight,
|
||
],
|
||
);
|
||
|
||
// Main grid overlayscrollbars - only handle X-axis if right-pinned columns exist
|
||
const [initialize, osInstance] = useOverlayScrollbars({
|
||
defer: false,
|
||
events: {
|
||
initialized(osInstance) {
|
||
const { viewport } = osInstance.elements();
|
||
viewport.style.overflowX = `var(--os-viewport-overflow-x)`;
|
||
|
||
if (pinnedRightColumnCount > 0) {
|
||
viewport.style.overflowY = 'auto';
|
||
} else {
|
||
viewport.style.overflowY = `var(--os-viewport-overflow-y)`;
|
||
}
|
||
},
|
||
},
|
||
options: {
|
||
overflow: {
|
||
x: 'scroll',
|
||
y: pinnedRightColumnCount > 0 ? 'hidden' : 'scroll',
|
||
},
|
||
paddingAbsolute: true,
|
||
scrollbars: {
|
||
autoHide: 'leave',
|
||
autoHideDelay: 500,
|
||
pointers: ['mouse', 'pen', 'touch'],
|
||
theme: 'feishin-os-scrollbar',
|
||
},
|
||
},
|
||
});
|
||
|
||
// Right pinned columns overlayscrollbars - enable Y-axis scroll when right-pinned columns exist
|
||
const [initializeRightPinned, osInstanceRightPinned] = useOverlayScrollbars({
|
||
defer: false,
|
||
events: {
|
||
initialized(osInstance) {
|
||
const { viewport } = osInstance.elements();
|
||
viewport.style.overflowX = `var(--os-viewport-overflow-x)`;
|
||
viewport.style.overflowY = `var(--os-viewport-overflow-y)`;
|
||
},
|
||
},
|
||
options: {
|
||
overflow: { x: 'hidden', y: 'scroll' },
|
||
paddingAbsolute: true,
|
||
scrollbars: {
|
||
autoHide: 'leave',
|
||
autoHideDelay: 500,
|
||
pointers: ['mouse', 'pen', 'touch'],
|
||
theme: 'feishin-os-scrollbar',
|
||
},
|
||
},
|
||
});
|
||
|
||
useEffect(() => {
|
||
const { current: root } = scrollContainerRef;
|
||
|
||
if (!root || !root.firstElementChild) {
|
||
return;
|
||
}
|
||
|
||
const viewport = root.firstElementChild as HTMLElement;
|
||
|
||
initialize({
|
||
elements: { viewport },
|
||
target: root,
|
||
});
|
||
|
||
if (enableDrag) {
|
||
autoScrollForElements({
|
||
canScroll: () => true,
|
||
element: viewport,
|
||
getAllowedAxis: () => 'vertical',
|
||
getConfiguration: () => ({ maxScrollSpeed: 'fast' }),
|
||
});
|
||
}
|
||
|
||
return () => {
|
||
try {
|
||
const instance = osInstance();
|
||
const { current: root } = scrollContainerRef;
|
||
|
||
// Check if instance exists and elements are still connected to the DOM
|
||
if (instance && root) {
|
||
const viewport = root.firstElementChild as HTMLElement;
|
||
|
||
// Check if elements are still in the document
|
||
const rootInDocument = document.contains(root);
|
||
const viewportInDocument = viewport && document.contains(viewport);
|
||
|
||
// Only destroy if elements are still in the document
|
||
if (rootInDocument && viewportInDocument) {
|
||
instance.destroy();
|
||
}
|
||
}
|
||
} catch {
|
||
// Ignore error
|
||
}
|
||
};
|
||
}, [enableDrag, initialize, osInstance, pinnedRightColumnCount]);
|
||
|
||
useEffect(() => {
|
||
if (pinnedLeftColumnCount === 0) {
|
||
return;
|
||
}
|
||
|
||
const { current: root } = pinnedLeftColumnRef;
|
||
|
||
if (!root || !root.firstElementChild) {
|
||
return;
|
||
}
|
||
|
||
const viewport = root.firstElementChild as HTMLElement;
|
||
|
||
if (enableDrag) {
|
||
autoScrollForElements({
|
||
canScroll: () => true,
|
||
element: viewport,
|
||
getAllowedAxis: () => 'vertical',
|
||
getConfiguration: () => ({ maxScrollSpeed: 'fast' }),
|
||
});
|
||
}
|
||
}, [enableDrag, pinnedLeftColumnCount]);
|
||
|
||
// Initialize overlayscrollbars for right pinned columns
|
||
useEffect(() => {
|
||
if (pinnedRightColumnCount === 0) {
|
||
return;
|
||
}
|
||
|
||
const { current: root } = pinnedRightColumnRef;
|
||
|
||
if (!root || !root.firstElementChild) {
|
||
return;
|
||
}
|
||
|
||
const viewport = root.firstElementChild as HTMLElement;
|
||
|
||
initializeRightPinned({
|
||
elements: { viewport },
|
||
target: root,
|
||
});
|
||
|
||
if (enableDrag) {
|
||
autoScrollForElements({
|
||
canScroll: () => true,
|
||
element: viewport,
|
||
getAllowedAxis: () => 'vertical',
|
||
getConfiguration: () => ({ maxScrollSpeed: 'fast' }),
|
||
});
|
||
}
|
||
|
||
return () => {
|
||
try {
|
||
const instance = osInstanceRightPinned();
|
||
const { current: root } = pinnedRightColumnRef;
|
||
|
||
if (instance && root) {
|
||
const viewport = root.firstElementChild as HTMLElement;
|
||
|
||
const rootInDocument = document.contains(root);
|
||
const viewportInDocument = viewport && document.contains(viewport);
|
||
|
||
if (rootInDocument && viewportInDocument) {
|
||
instance.destroy();
|
||
}
|
||
}
|
||
} catch {
|
||
// Ignore error
|
||
}
|
||
};
|
||
}, [enableDrag, initializeRightPinned, osInstanceRightPinned, pinnedRightColumnCount]);
|
||
|
||
useEffect(() => {
|
||
const header = pinnedRowRef.current?.childNodes[0] as HTMLDivElement;
|
||
const row = rowRef.current?.childNodes[0] as HTMLDivElement;
|
||
const pinnedLeft = pinnedLeftColumnRef.current?.childNodes[0] as HTMLDivElement;
|
||
const pinnedRight = pinnedRightColumnRef.current?.childNodes[0] as HTMLDivElement;
|
||
|
||
if (row) {
|
||
// Ensure all containers have the same height
|
||
const syncHeights = () => {
|
||
const rowHeight = row.scrollHeight;
|
||
let targetHeight = rowHeight;
|
||
|
||
if (pinnedLeft) {
|
||
const pinnedLeftHeight = pinnedLeft.scrollHeight;
|
||
targetHeight = Math.max(targetHeight, pinnedLeftHeight);
|
||
}
|
||
|
||
if (pinnedRight) {
|
||
const pinnedRightHeight = pinnedRight.scrollHeight;
|
||
targetHeight = Math.max(targetHeight, pinnedRightHeight);
|
||
}
|
||
|
||
// Set consistent heights for all elements
|
||
if (pinnedLeft && pinnedLeft.style.height !== `${targetHeight}px`) {
|
||
pinnedLeft.style.height = `${targetHeight}px`;
|
||
}
|
||
if (pinnedRight && pinnedRight.style.height !== `${targetHeight}px`) {
|
||
pinnedRight.style.height = `${targetHeight}px`;
|
||
}
|
||
if (row.style.height !== `${targetHeight}px`) {
|
||
row.style.height = `${targetHeight}px`;
|
||
}
|
||
};
|
||
|
||
const timeoutId = setTimeout(syncHeights, 0);
|
||
|
||
const activeElement = { element: null } as { element: HTMLDivElement | null };
|
||
const scrollingElements = new Set<HTMLDivElement>();
|
||
const scrollTimeouts = new Map<HTMLDivElement, NodeJS.Timeout>();
|
||
|
||
const setActiveElement = (e: HTMLElementEventMap['pointermove']) => {
|
||
activeElement.element = e.currentTarget as HTMLDivElement;
|
||
};
|
||
const setActiveElementFromWheel = (e: HTMLElementEventMap['wheel']) => {
|
||
activeElement.element = e.currentTarget as HTMLDivElement;
|
||
};
|
||
|
||
// Track which elements are actively scrolling
|
||
const markElementAsScrolling = (element: HTMLDivElement) => {
|
||
scrollingElements.add(element);
|
||
|
||
// Clear existing timeout for this element
|
||
const existingTimeout = scrollTimeouts.get(element);
|
||
if (existingTimeout) {
|
||
clearTimeout(existingTimeout);
|
||
}
|
||
|
||
// Set a timeout to remove the element from scrolling set
|
||
const timeout = setTimeout(() => {
|
||
scrollingElements.delete(element);
|
||
|
||
// Use right pinned column scroll position if right-pinned columns exist
|
||
const hasRightPinnedColumns = pinnedRightColumnCount > 0;
|
||
const scrollElement = hasRightPinnedColumns && pinnedRight ? pinnedRight : row;
|
||
|
||
if (scrollElement && onScrollEndRef.current) {
|
||
onScrollEndRef.current(
|
||
scrollElement.scrollTop,
|
||
handleRef.current ?? (undefined as any),
|
||
);
|
||
}
|
||
|
||
scrollTimeouts.delete(element);
|
||
}, 150);
|
||
|
||
scrollTimeouts.set(element, timeout);
|
||
};
|
||
|
||
const syncScroll = (e: HTMLElementEventMap['scroll']) => {
|
||
const currentElement = e.currentTarget as HTMLDivElement;
|
||
|
||
markElementAsScrolling(currentElement);
|
||
|
||
// Allow sync if:
|
||
// 1. Current element is the active element (normal case)
|
||
// 2. Current element is actively scrolling (handles autoscroll and other continuous scrolling)
|
||
const shouldSync =
|
||
currentElement === activeElement.element ||
|
||
scrollingElements.has(currentElement);
|
||
|
||
if (!shouldSync) {
|
||
return;
|
||
}
|
||
|
||
const scrollTop = (e.currentTarget as HTMLDivElement).scrollTop;
|
||
const scrollLeft = (e.currentTarget as HTMLDivElement).scrollLeft;
|
||
|
||
const isScrolling = {
|
||
header: false,
|
||
pinnedLeft: false,
|
||
pinnedRight: false,
|
||
row: false,
|
||
};
|
||
|
||
const hasRightPinnedColumns = pinnedRightColumnCount > 0;
|
||
|
||
// Sync horizontal scroll between header and main content (only if header exists)
|
||
if (header && e.currentTarget === header && !isScrolling.row) {
|
||
isScrolling.row = true;
|
||
row.scrollTo({
|
||
behavior: 'instant',
|
||
left: scrollLeft,
|
||
});
|
||
isScrolling.row = false;
|
||
}
|
||
|
||
// Sync from main content to header and sticky columns
|
||
if (
|
||
e.currentTarget === row &&
|
||
!isScrolling.header &&
|
||
!isScrolling.pinnedLeft &&
|
||
!isScrolling.pinnedRight
|
||
) {
|
||
if (header) {
|
||
isScrolling.header = true;
|
||
header.scrollTo({
|
||
behavior: 'instant',
|
||
left: scrollLeft,
|
||
});
|
||
}
|
||
// When right-pinned columns exist, sync Y-scroll to right pinned column instead of from main grid
|
||
if (hasRightPinnedColumns && pinnedRight) {
|
||
isScrolling.pinnedRight = true;
|
||
pinnedRight.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
isScrolling.pinnedRight = false;
|
||
} else {
|
||
// When no right-pinned columns, sync Y-scroll normally
|
||
if (pinnedLeft) {
|
||
isScrolling.pinnedLeft = true;
|
||
pinnedLeft.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
}
|
||
if (pinnedRight) {
|
||
isScrolling.pinnedRight = true;
|
||
pinnedRight.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
}
|
||
}
|
||
isScrolling.header = false;
|
||
isScrolling.pinnedLeft = false;
|
||
}
|
||
|
||
// Sync vertical scroll between left pinned column and main content (only if pinnedLeft exists)
|
||
if (pinnedLeft && e.currentTarget === pinnedLeft && !isScrolling.row) {
|
||
// When right-pinned columns exist, sync Y-scroll to right pinned column instead of main grid
|
||
if (hasRightPinnedColumns && pinnedRight) {
|
||
isScrolling.pinnedRight = true;
|
||
pinnedRight.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
isScrolling.pinnedRight = false;
|
||
} else {
|
||
isScrolling.row = true;
|
||
row.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
isScrolling.row = false;
|
||
}
|
||
}
|
||
|
||
// Sync vertical scroll from right pinned column to main content and left pinned column
|
||
// When right-pinned columns exist, this is the source of truth for Y-scroll
|
||
if (pinnedRight && e.currentTarget === pinnedRight && !isScrolling.row) {
|
||
isScrolling.row = true;
|
||
row.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
isScrolling.row = false;
|
||
if (pinnedLeft) {
|
||
isScrolling.pinnedLeft = true;
|
||
pinnedLeft.scrollTo({
|
||
behavior: 'instant',
|
||
top: scrollTop,
|
||
});
|
||
isScrolling.pinnedLeft = false;
|
||
}
|
||
}
|
||
};
|
||
|
||
// Add event listeners for elements that exist
|
||
if (header) {
|
||
header.addEventListener('pointermove', setActiveElement);
|
||
header.addEventListener('wheel', setActiveElementFromWheel);
|
||
header.addEventListener('scroll', syncScroll);
|
||
}
|
||
row.addEventListener('pointermove', setActiveElement);
|
||
row.addEventListener('wheel', setActiveElementFromWheel);
|
||
row.addEventListener('scroll', syncScroll);
|
||
if (pinnedLeft) {
|
||
pinnedLeft.addEventListener('pointermove', setActiveElement);
|
||
pinnedLeft.addEventListener('wheel', setActiveElementFromWheel);
|
||
pinnedLeft.addEventListener('scroll', syncScroll);
|
||
}
|
||
if (pinnedRight) {
|
||
pinnedRight.addEventListener('pointermove', setActiveElement);
|
||
pinnedRight.addEventListener('wheel', setActiveElementFromWheel);
|
||
pinnedRight.addEventListener('scroll', syncScroll);
|
||
}
|
||
|
||
// Add resize observer to maintain height sync
|
||
let heightSyncDebounceTimeout: NodeJS.Timeout | null = null;
|
||
const resizeObserver = new ResizeObserver(() => {
|
||
if (heightSyncDebounceTimeout) {
|
||
clearTimeout(heightSyncDebounceTimeout);
|
||
}
|
||
heightSyncDebounceTimeout = setTimeout(() => {
|
||
syncHeights();
|
||
}, 100);
|
||
});
|
||
|
||
resizeObserver.observe(row);
|
||
if (pinnedLeft) {
|
||
resizeObserver.observe(pinnedLeft);
|
||
}
|
||
if (pinnedRight) {
|
||
resizeObserver.observe(pinnedRight);
|
||
}
|
||
|
||
return () => {
|
||
clearTimeout(timeoutId);
|
||
scrollTimeouts.forEach((timeout) => clearTimeout(timeout));
|
||
scrollTimeouts.clear();
|
||
scrollingElements.clear();
|
||
|
||
if (header) {
|
||
header.removeEventListener('pointermove', setActiveElement);
|
||
header.removeEventListener('wheel', setActiveElementFromWheel);
|
||
header.removeEventListener('scroll', syncScroll);
|
||
}
|
||
row.removeEventListener('pointermove', setActiveElement);
|
||
row.removeEventListener('wheel', setActiveElementFromWheel);
|
||
row.removeEventListener('scroll', syncScroll);
|
||
if (pinnedLeft) {
|
||
pinnedLeft.removeEventListener('pointermove', setActiveElement);
|
||
pinnedLeft.removeEventListener('wheel', setActiveElementFromWheel);
|
||
pinnedLeft.removeEventListener('scroll', syncScroll);
|
||
}
|
||
if (pinnedRight) {
|
||
pinnedRight.removeEventListener('pointermove', setActiveElement);
|
||
pinnedRight.removeEventListener('wheel', setActiveElementFromWheel);
|
||
pinnedRight.removeEventListener('scroll', syncScroll);
|
||
}
|
||
if (heightSyncDebounceTimeout) {
|
||
clearTimeout(heightSyncDebounceTimeout);
|
||
}
|
||
resizeObserver.disconnect();
|
||
};
|
||
}
|
||
|
||
return undefined;
|
||
}, [pinnedLeftColumnCount, pinnedRightColumnCount]);
|
||
|
||
// Handle left and right shadow visibility based on horizontal scroll
|
||
useEffect(() => {
|
||
const row = rowRef.current?.childNodes[0] as HTMLDivElement;
|
||
|
||
if (!row) {
|
||
const timeout = setTimeout(() => {
|
||
setShowLeftShadow(false);
|
||
setShowRightShadow(false);
|
||
}, 0);
|
||
|
||
return () => clearTimeout(timeout);
|
||
}
|
||
|
||
const checkScrollPosition = throttle(() => {
|
||
const scrollLeft = row.scrollLeft;
|
||
const maxScrollLeft = row.scrollWidth - row.clientWidth;
|
||
|
||
setShowLeftShadow(pinnedLeftColumnCount > 0 && scrollLeft > 0);
|
||
setShowRightShadow(pinnedRightColumnCount > 0 && scrollLeft < maxScrollLeft);
|
||
}, 50);
|
||
|
||
checkScrollPosition();
|
||
|
||
row.addEventListener('scroll', checkScrollPosition, { passive: true });
|
||
|
||
return () => {
|
||
checkScrollPosition.cancel();
|
||
row.removeEventListener('scroll', checkScrollPosition);
|
||
};
|
||
}, [pinnedLeftColumnCount, pinnedRightColumnCount]);
|
||
|
||
// Handle top shadow visibility based on vertical scroll
|
||
useEffect(() => {
|
||
const row = rowRef.current?.childNodes[0] as HTMLDivElement;
|
||
const pinnedRight = pinnedRightColumnRef.current?.childNodes[0] as HTMLDivElement;
|
||
|
||
if (!row || !enableHeader) {
|
||
const timeout = setTimeout(() => {
|
||
setShowTopShadow(false);
|
||
}, 0);
|
||
|
||
return () => clearTimeout(timeout);
|
||
}
|
||
|
||
// When right-pinned columns exist, use right pinned column's scroll position
|
||
const scrollElement = pinnedRightColumnCount > 0 && pinnedRight ? pinnedRight : row;
|
||
|
||
const checkScrollPosition = throttle(() => {
|
||
const currentScrollTop = scrollElement.scrollTop;
|
||
setShowTopShadow(currentScrollTop > 0);
|
||
}, 50);
|
||
|
||
checkScrollPosition();
|
||
|
||
scrollElement.addEventListener('scroll', checkScrollPosition, { passive: true });
|
||
|
||
return () => {
|
||
checkScrollPosition.cancel();
|
||
scrollElement.removeEventListener('scroll', checkScrollPosition);
|
||
};
|
||
}, [enableHeader, pinnedRightColumnCount]);
|
||
|
||
const getRowHeight = useCallback(
|
||
(index: number, cellProps: TableItemProps) => {
|
||
const height = size === 'compact' ? 40 : size === 'large' ? 88 : 64;
|
||
|
||
const baseHeight =
|
||
typeof rowHeight === 'number' ? rowHeight : rowHeight?.(index, cellProps) || height;
|
||
|
||
// If enableHeader is true and this is the first sticky row, use fixed header height
|
||
if (enableHeader && index === 0 && pinnedRowCount > 0) {
|
||
return headerHeight;
|
||
}
|
||
|
||
return baseHeight;
|
||
},
|
||
[enableHeader, headerHeight, rowHeight, pinnedRowCount, size],
|
||
);
|
||
|
||
// Create a wrapper for getRowHeight that doesn't require cellProps (for sticky group rows hook)
|
||
const getRowHeightWrapper = useCallback(
|
||
(index: number) => {
|
||
const height = size === 'compact' ? 40 : size === 'large' ? 88 : 64;
|
||
|
||
const baseHeight = typeof rowHeight === 'number' ? rowHeight : height;
|
||
|
||
// If enableHeader is true and this is the first sticky row, use fixed header height
|
||
if (enableHeader && index === 0 && pinnedRowCount > 0) {
|
||
return headerHeight;
|
||
}
|
||
|
||
return baseHeight;
|
||
},
|
||
[enableHeader, headerHeight, rowHeight, pinnedRowCount, size],
|
||
);
|
||
|
||
const {
|
||
shouldShowStickyGroupRow,
|
||
stickyGroupIndex,
|
||
stickyTop: stickyGroupTop,
|
||
} = useStickyTableGroupRows({
|
||
containerRef: containerRef,
|
||
enabled: enableStickyGroupRows && !!groups && groups.length > 0,
|
||
getRowHeight: getRowHeightWrapper,
|
||
groups,
|
||
headerHeight,
|
||
mainGridRef: rowRef,
|
||
shouldShowStickyHeader,
|
||
stickyHeaderTop: stickyTop,
|
||
});
|
||
|
||
// Show sticky group row whenever it should be shown
|
||
const shouldRenderStickyGroupRow = shouldShowStickyGroupRow;
|
||
|
||
// Update position and width of sticky group row
|
||
useEffect(() => {
|
||
if (!shouldRenderStickyGroupRow || !stickyGroupRowRef.current || !containerRef.current) {
|
||
return;
|
||
}
|
||
|
||
const stickyGroupRow = stickyGroupRowRef.current;
|
||
const container = containerRef.current;
|
||
let isMounted = true;
|
||
|
||
const updatePosition = () => {
|
||
// Guard against updates after unmount
|
||
if (!isMounted || !stickyGroupRow || !container) {
|
||
return;
|
||
}
|
||
try {
|
||
const containerRect = container.getBoundingClientRect();
|
||
stickyGroupRow.style.left = `${containerRect.left}px`;
|
||
stickyGroupRow.style.width = `${containerRect.width}px`;
|
||
} catch {
|
||
// Silently handle errors if elements are no longer in DOM
|
||
}
|
||
};
|
||
|
||
updatePosition();
|
||
|
||
window.addEventListener('resize', updatePosition);
|
||
window.addEventListener('scroll', updatePosition, true);
|
||
|
||
return () => {
|
||
isMounted = false;
|
||
window.removeEventListener('resize', updatePosition);
|
||
window.removeEventListener('scroll', updatePosition, true);
|
||
};
|
||
}, [shouldRenderStickyGroupRow]);
|
||
|
||
const getDataFn = useCallback(() => {
|
||
return dataWithGroups;
|
||
}, [dataWithGroups]);
|
||
|
||
const extractRowId = useMemo(() => createExtractRowId(getRowId), [getRowId]);
|
||
|
||
const internalState = useItemListState(getDataFn, extractRowId);
|
||
|
||
// Helper function to get ItemListStateItemWithRequiredProperties (rowId is separate, not part of item)
|
||
const getStateItem = useCallback(
|
||
(item: any): ItemListStateItemWithRequiredProperties | null => {
|
||
if (!hasRequiredItemProperties(item)) {
|
||
return null;
|
||
}
|
||
if (
|
||
typeof item === 'object' &&
|
||
item !== null &&
|
||
'_serverId' in item &&
|
||
'_itemType' in item
|
||
) {
|
||
return item as ItemListStateItemWithRequiredProperties;
|
||
}
|
||
return null;
|
||
},
|
||
[],
|
||
);
|
||
|
||
const handleKeyDown = useCallback(
|
||
(e: React.KeyboardEvent<HTMLDivElement>) => {
|
||
if (!enableSelection) return;
|
||
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const selected = internalState.getSelected();
|
||
const validSelected = selected.filter(hasRequiredStateItemProperties);
|
||
let currentIndex = -1;
|
||
|
||
if (validSelected.length > 0) {
|
||
const lastSelected = validSelected[validSelected.length - 1];
|
||
currentIndex = data.findIndex(
|
||
(d) => extractRowId(d) === extractRowId(lastSelected),
|
||
);
|
||
}
|
||
|
||
let newIndex = 0;
|
||
if (currentIndex !== -1) {
|
||
newIndex =
|
||
e.key === 'ArrowDown'
|
||
? Math.min(currentIndex + 1, data.length - 1)
|
||
: Math.max(currentIndex - 1, 0);
|
||
}
|
||
|
||
const newItem: any = data[newIndex];
|
||
if (!newItem) return;
|
||
|
||
const newItemListItem = getStateItem(newItem);
|
||
if (newItemListItem && extractRowId(newItemListItem)) {
|
||
internalState.setSelected([newItemListItem]);
|
||
}
|
||
|
||
// Check if we need to scroll by determining if the item is at the edge of the viewport
|
||
const gridIndex = enableHeader ? newIndex + 1 : newIndex;
|
||
|
||
const mainContainer = rowRef.current?.childNodes[0] as HTMLDivElement | undefined;
|
||
const pinnedRightContainer = pinnedRightColumnRef.current?.childNodes[0] as
|
||
| HTMLDivElement
|
||
| undefined;
|
||
|
||
// Use right pinned column scroll position if right-pinned columns exist
|
||
const scrollContainer =
|
||
pinnedRightColumnCount > 0 && pinnedRightContainer
|
||
? pinnedRightContainer
|
||
: mainContainer;
|
||
|
||
if (scrollContainer) {
|
||
const viewportTop = scrollContainer.scrollTop;
|
||
const viewportHeight = scrollContainer.clientHeight;
|
||
const viewportBottom = viewportTop + viewportHeight;
|
||
|
||
const rowTop = calculateScrollTopForIndex(gridIndex);
|
||
const adjustedIndex = enableHeader ? Math.max(0, newIndex - 1) : newIndex;
|
||
const mockCellProps: TableItemProps = {
|
||
cellPadding,
|
||
columns: parsedColumns,
|
||
controls: {} as ItemControls,
|
||
data: enableHeader ? [null, ...data] : data,
|
||
enableAlternateRowColors,
|
||
enableExpansion,
|
||
enableHeader,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
getRowHeight: () => DEFAULT_ROW_HEIGHT,
|
||
internalState: {} as ItemListStateActions,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
};
|
||
|
||
let calculatedRowHeight: number;
|
||
if (typeof rowHeight === 'number') {
|
||
calculatedRowHeight = rowHeight;
|
||
} else if (typeof rowHeight === 'function') {
|
||
calculatedRowHeight = rowHeight(adjustedIndex, mockCellProps);
|
||
} else {
|
||
calculatedRowHeight = DEFAULT_ROW_HEIGHT;
|
||
}
|
||
|
||
const rowBottom = rowTop + calculatedRowHeight;
|
||
|
||
// Check if row is fully visible within viewport
|
||
const isFullyVisible = rowTop >= viewportTop && rowBottom <= viewportBottom;
|
||
|
||
// Check if row is at the edge (top or bottom of viewport)
|
||
const isAtTopEdge = rowTop < viewportTop;
|
||
const isAtBottomEdge = rowBottom >= viewportBottom;
|
||
|
||
// Only scroll if the item is not fully visible or at the edge
|
||
if (!isFullyVisible || isAtTopEdge || isAtBottomEdge) {
|
||
// Determine alignment based on direction
|
||
const align: 'bottom' | 'top' =
|
||
e.key === 'ArrowDown' && isAtBottomEdge
|
||
? 'bottom'
|
||
: e.key === 'ArrowUp' && isAtTopEdge
|
||
? 'top'
|
||
: isAtBottomEdge
|
||
? 'bottom'
|
||
: isAtTopEdge
|
||
? 'top'
|
||
: 'top';
|
||
|
||
scrollToTableIndex(gridIndex, { align });
|
||
}
|
||
}
|
||
},
|
||
[
|
||
data,
|
||
enableSelection,
|
||
internalState,
|
||
calculateScrollTopForIndex,
|
||
scrollToTableIndex,
|
||
extractRowId,
|
||
getStateItem,
|
||
pinnedRightColumnCount,
|
||
enableHeader,
|
||
cellPadding,
|
||
parsedColumns,
|
||
enableAlternateRowColors,
|
||
enableExpansion,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableVerticalBorders,
|
||
itemType,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
DEFAULT_ROW_HEIGHT,
|
||
rowHeight,
|
||
],
|
||
);
|
||
|
||
const isInitialScrollPositionSet = useRef<boolean>(false);
|
||
|
||
useEffect(() => {
|
||
if (!initialTop || isInitialScrollPositionSet.current) return;
|
||
isInitialScrollPositionSet.current = true;
|
||
|
||
if (initialTop.type === 'offset') {
|
||
scrollToTableOffset(initialTop.to);
|
||
} else {
|
||
scrollToTableIndex(initialTop.to);
|
||
}
|
||
}, [initialTop, scrollToTableIndex, scrollToTableOffset]);
|
||
|
||
// Scroll to top when startRowIndex changes
|
||
useEffect(() => {
|
||
if (startRowIndex !== undefined) {
|
||
scrollToTableOffset(0);
|
||
}
|
||
}, [startRowIndex, scrollToTableOffset]);
|
||
|
||
const imperativeHandle: ItemListHandle = useMemo(() => {
|
||
return {
|
||
internalState,
|
||
scrollToIndex: (index: number, options?: { align?: 'bottom' | 'center' | 'top' }) => {
|
||
scrollToTableIndex(enableHeader ? index + 1 : index, options);
|
||
},
|
||
scrollToOffset: (offset: number) => {
|
||
scrollToTableOffset(offset);
|
||
},
|
||
};
|
||
}, [enableHeader, internalState, scrollToTableIndex, scrollToTableOffset]);
|
||
|
||
useImperativeHandle(ref, () => imperativeHandle);
|
||
|
||
useEffect(() => {
|
||
handleRef.current = imperativeHandle;
|
||
}, [imperativeHandle]);
|
||
|
||
const controls = useDefaultItemListControls({
|
||
onColumnReordered,
|
||
onColumnResized,
|
||
overrides: overrideControls,
|
||
});
|
||
|
||
// Create itemProps for sticky header
|
||
const stickyHeaderItemProps: TableItemProps = useMemo(
|
||
() => ({
|
||
calculatedColumnWidths,
|
||
cellPadding,
|
||
columns: parsedColumns,
|
||
controls,
|
||
data: [null], // Header row
|
||
enableAlternateRowColors,
|
||
enableColumnReorder: !!onColumnReordered,
|
||
enableColumnResize: !!onColumnResized,
|
||
enableDrag,
|
||
enableExpansion,
|
||
enableHeader,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
getRowHeight,
|
||
groups,
|
||
internalState,
|
||
itemType,
|
||
pinnedLeftColumnCount,
|
||
pinnedLeftColumnWidths: calculatedColumnWidths.slice(0, pinnedLeftColumnCount),
|
||
pinnedRightColumnCount,
|
||
pinnedRightColumnWidths: calculatedColumnWidths.slice(
|
||
pinnedLeftColumnCount + totalColumnCount,
|
||
),
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
}),
|
||
[
|
||
calculatedColumnWidths,
|
||
cellPadding,
|
||
controls,
|
||
parsedColumns,
|
||
enableAlternateRowColors,
|
||
enableDrag,
|
||
enableExpansion,
|
||
enableHeader,
|
||
enableHorizontalBorders,
|
||
enableRowHoverHighlight,
|
||
enableSelection,
|
||
enableVerticalBorders,
|
||
getRowHeight,
|
||
groups,
|
||
internalState,
|
||
itemType,
|
||
onColumnReordered,
|
||
onColumnResized,
|
||
pinnedLeftColumnCount,
|
||
pinnedRightColumnCount,
|
||
playerContext,
|
||
size,
|
||
tableId,
|
||
totalColumnCount,
|
||
],
|
||
);
|
||
|
||
const StickyHeader = useMemo(() => {
|
||
if (!shouldShowStickyHeader || !enableHeader) {
|
||
return null;
|
||
}
|
||
|
||
const pinnedLeftWidth = calculatedColumnWidths
|
||
.slice(0, pinnedLeftColumnCount)
|
||
.reduce((sum, width) => sum + width, 0);
|
||
const mainWidth = calculatedColumnWidths
|
||
.slice(pinnedLeftColumnCount, pinnedLeftColumnCount + totalColumnCount)
|
||
.reduce((sum, width) => sum + width, 0);
|
||
const pinnedRightWidth = calculatedColumnWidths
|
||
.slice(pinnedLeftColumnCount + totalColumnCount)
|
||
.reduce((sum, width) => sum + width, 0);
|
||
|
||
return (
|
||
<div
|
||
className={styles.stickyHeader}
|
||
ref={stickyHeaderRef}
|
||
style={{
|
||
top: `${stickyTop}px`,
|
||
}}
|
||
>
|
||
<div className={styles.stickyHeaderRow}>
|
||
{pinnedLeftColumnCount > 0 && (
|
||
<div
|
||
className={clsx(
|
||
styles.stickyHeaderSection,
|
||
styles.stickyHeaderPinnedLeft,
|
||
)}
|
||
ref={stickyHeaderLeftRef}
|
||
style={{
|
||
flex: '0 1 auto',
|
||
minWidth: `${pinnedLeftWidth}px`,
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{parsedColumns
|
||
.filter((col) => col.pinned === 'left')
|
||
.map((col) => {
|
||
const columnIndex = parsedColumns.findIndex((c) => c === col);
|
||
return (
|
||
<CellComponent
|
||
ariaAttributes={{
|
||
'aria-colindex': columnIndex + 1,
|
||
role: 'gridcell',
|
||
}}
|
||
columnIndex={columnIndex}
|
||
key={col.id}
|
||
rowIndex={0}
|
||
style={{
|
||
height: headerHeight,
|
||
width: calculatedColumnWidths[columnIndex],
|
||
}}
|
||
{...stickyHeaderItemProps}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
<div
|
||
className={clsx(
|
||
styles.stickyHeaderSection,
|
||
styles.stickyHeaderMain,
|
||
styles.noScrollbar,
|
||
)}
|
||
ref={stickyHeaderMainRef}
|
||
style={{
|
||
flex: '1 1 auto',
|
||
minWidth: 0,
|
||
overflowX: 'auto',
|
||
overflowY: 'hidden',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
minWidth: `${mainWidth}px`,
|
||
}}
|
||
>
|
||
{parsedColumns
|
||
.filter((col) => col.pinned === null)
|
||
.map((col) => {
|
||
const columnIndex = parsedColumns.findIndex((c) => c === col);
|
||
return (
|
||
<CellComponent
|
||
ariaAttributes={{
|
||
'aria-colindex': columnIndex + 1,
|
||
role: 'gridcell',
|
||
}}
|
||
columnIndex={columnIndex}
|
||
key={col.id}
|
||
rowIndex={0}
|
||
style={{
|
||
flexShrink: 0,
|
||
height: headerHeight,
|
||
width: calculatedColumnWidths[columnIndex],
|
||
}}
|
||
{...stickyHeaderItemProps}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
{pinnedRightColumnCount > 0 && (
|
||
<div
|
||
className={clsx(
|
||
styles.stickyHeaderSection,
|
||
styles.stickyHeaderPinnedRight,
|
||
)}
|
||
ref={stickyHeaderRightRef}
|
||
style={{
|
||
flex: '0 1 auto',
|
||
minWidth: `${pinnedRightWidth}px`,
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{parsedColumns
|
||
.filter((col) => col.pinned === 'right')
|
||
.map((col) => {
|
||
const columnIndex = parsedColumns.findIndex((c) => c === col);
|
||
return (
|
||
<CellComponent
|
||
ariaAttributes={{
|
||
'aria-colindex': columnIndex + 1,
|
||
role: 'gridcell',
|
||
}}
|
||
columnIndex={columnIndex}
|
||
key={col.id}
|
||
rowIndex={0}
|
||
style={{
|
||
height: headerHeight,
|
||
width: calculatedColumnWidths[columnIndex],
|
||
}}
|
||
{...stickyHeaderItemProps}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}, [
|
||
shouldShowStickyHeader,
|
||
enableHeader,
|
||
stickyTop,
|
||
calculatedColumnWidths,
|
||
pinnedLeftColumnCount,
|
||
pinnedRightColumnCount,
|
||
totalColumnCount,
|
||
parsedColumns,
|
||
headerHeight,
|
||
CellComponent,
|
||
stickyHeaderItemProps,
|
||
]);
|
||
|
||
// Calculate group row height (use same as regular table row height)
|
||
const groupRowHeight = useMemo(() => {
|
||
if (stickyGroupIndex === null || !groups) {
|
||
const height = size === 'compact' ? 40 : size === 'large' ? 88 : 64;
|
||
return typeof rowHeight === 'number' ? rowHeight : height;
|
||
}
|
||
|
||
// Calculate the row index for this group header
|
||
let cumulativeDataIndex = 0;
|
||
const headerOffset = enableHeader ? 1 : 0;
|
||
for (let i = 0; i < stickyGroupIndex; i++) {
|
||
cumulativeDataIndex += groups[i].itemCount;
|
||
}
|
||
const groupHeaderIndex = headerOffset + cumulativeDataIndex + stickyGroupIndex;
|
||
|
||
// Use the regular row height for group rows
|
||
return getRowHeightWrapper(groupHeaderIndex);
|
||
}, [stickyGroupIndex, groups, getRowHeightWrapper, enableHeader, rowHeight, size]);
|
||
|
||
const StickyGroupRow = useMemo(() => {
|
||
if (!shouldRenderStickyGroupRow || stickyGroupIndex === null || !groups) {
|
||
return null;
|
||
}
|
||
|
||
const group = groups[stickyGroupIndex];
|
||
const originalData = data.filter((item) => item !== null);
|
||
let cumulativeDataIndex = 0;
|
||
for (let i = 0; i < stickyGroupIndex; i++) {
|
||
cumulativeDataIndex += groups[i].itemCount;
|
||
}
|
||
|
||
const groupContent = group.render({
|
||
data: originalData,
|
||
groupIndex: stickyGroupIndex,
|
||
index: 0,
|
||
internalState,
|
||
startDataIndex: cumulativeDataIndex,
|
||
});
|
||
|
||
const pinnedLeftWidth = calculatedColumnWidths
|
||
.slice(0, pinnedLeftColumnCount)
|
||
.reduce((sum, width) => sum + width, 0);
|
||
const mainWidth = calculatedColumnWidths
|
||
.slice(pinnedLeftColumnCount, pinnedLeftColumnCount + totalColumnCount)
|
||
.reduce((sum, width) => sum + width, 0);
|
||
const pinnedRightWidth = calculatedColumnWidths
|
||
.slice(pinnedLeftColumnCount + totalColumnCount)
|
||
.reduce((sum, width) => sum + width, 0);
|
||
|
||
const totalTableWidth = calculatedColumnWidths.reduce((sum, width) => sum + width, 0);
|
||
|
||
// Calculate the actual sticky position accounting for sticky header
|
||
const actualStickyTop = stickyGroupTop;
|
||
|
||
return (
|
||
<div
|
||
className={styles.stickyGroupRow}
|
||
ref={stickyGroupRowRef}
|
||
style={{
|
||
top: `${actualStickyTop}px`,
|
||
}}
|
||
>
|
||
<div className={styles.stickyGroupRowContent}>
|
||
{pinnedLeftColumnCount > 0 && (
|
||
<div
|
||
className={styles.stickyGroupRowSection}
|
||
style={{ width: `${pinnedLeftWidth}px` }}
|
||
>
|
||
<div
|
||
style={{
|
||
height: groupRowHeight,
|
||
width: `${pinnedLeftWidth}px`,
|
||
}}
|
||
>
|
||
{groupContent}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div
|
||
className={styles.stickyGroupRowSection}
|
||
style={{
|
||
marginLeft: pinnedLeftColumnCount > 0 ? 0 : '-2rem',
|
||
marginRight: '-2rem',
|
||
paddingLeft: pinnedLeftColumnCount > 0 ? 0 : '2rem',
|
||
paddingRight: '2rem',
|
||
width: `${mainWidth}px`,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: groupRowHeight,
|
||
marginLeft: pinnedLeftWidth > 0 ? `-${pinnedLeftWidth}px` : 0,
|
||
width: `${totalTableWidth}px`,
|
||
}}
|
||
>
|
||
{groupContent}
|
||
</div>
|
||
</div>
|
||
{pinnedRightColumnCount > 0 && (
|
||
<div
|
||
className={styles.stickyGroupRowSection}
|
||
style={{ width: `${pinnedRightWidth}px` }}
|
||
>
|
||
<div
|
||
style={{
|
||
height: groupRowHeight,
|
||
width: `${pinnedRightWidth}px`,
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}, [
|
||
shouldRenderStickyGroupRow,
|
||
stickyGroupIndex,
|
||
groups,
|
||
data,
|
||
internalState,
|
||
calculatedColumnWidths,
|
||
pinnedLeftColumnCount,
|
||
pinnedRightColumnCount,
|
||
totalColumnCount,
|
||
groupRowHeight,
|
||
stickyGroupTop,
|
||
]);
|
||
|
||
useListHotkeys({
|
||
controls,
|
||
focused,
|
||
internalState,
|
||
itemType,
|
||
});
|
||
|
||
return (
|
||
<motion.div
|
||
className={styles.itemTableListContainer}
|
||
onKeyDown={handleKeyDown}
|
||
onMouseDown={(e) => {
|
||
const element = e.currentTarget as HTMLDivElement;
|
||
// Focus without scrolling into view
|
||
if (element.focus) {
|
||
element.focus({ preventScroll: true });
|
||
}
|
||
}}
|
||
ref={mergedContainerRef}
|
||
tabIndex={0}
|
||
{...animationProps.fadeIn}
|
||
transition={{ duration: enableEntranceAnimation ? 1 : 0, ease: 'anticipate' }}
|
||
>
|
||
{StickyHeader}
|
||
{StickyGroupRow}
|
||
<MemoizedVirtualizedTableGrid
|
||
activeRowId={activeRowId}
|
||
calculatedColumnWidths={calculatedColumnWidths}
|
||
CellComponent={CellComponent}
|
||
cellPadding={cellPadding}
|
||
controls={controls}
|
||
data={data}
|
||
dataWithGroups={dataWithGroups}
|
||
enableAlternateRowColors={enableAlternateRowColors}
|
||
enableColumnReorder={!!onColumnReordered}
|
||
enableColumnResize={!!onColumnResized}
|
||
enableDrag={enableDrag}
|
||
enableExpansion={enableExpansion}
|
||
enableHeader={enableHeader}
|
||
enableHorizontalBorders={enableHorizontalBorders}
|
||
enableRowHoverHighlight={enableRowHoverHighlight}
|
||
enableScrollShadow={enableScrollShadow}
|
||
enableSelection={enableSelection}
|
||
enableVerticalBorders={enableVerticalBorders}
|
||
getRowHeight={getRowHeight}
|
||
groups={groups}
|
||
headerHeight={headerHeight}
|
||
internalState={internalState}
|
||
itemType={itemType}
|
||
mergedRowRef={mergedRowRef}
|
||
onRangeChanged={onRangeChanged}
|
||
parsedColumns={parsedColumns}
|
||
pinnedLeftColumnCount={pinnedLeftColumnCount}
|
||
pinnedLeftColumnRef={pinnedLeftColumnRef}
|
||
pinnedRightColumnCount={pinnedRightColumnCount}
|
||
pinnedRightColumnRef={pinnedRightColumnRef}
|
||
pinnedRowCount={pinnedRowCount}
|
||
pinnedRowRef={pinnedRowRef}
|
||
playerContext={playerContext}
|
||
showLeftShadow={showLeftShadow}
|
||
showRightShadow={showRightShadow}
|
||
showTopShadow={showTopShadow}
|
||
size={size}
|
||
startRowIndex={startRowIndex}
|
||
tableId={tableId}
|
||
totalColumnCount={totalColumnCount}
|
||
totalRowCount={totalRowCount}
|
||
/>
|
||
<ExpandedContainer internalState={internalState} itemType={itemType} />
|
||
{/* {enableSelectionDialog && <SelectionDialog internalState={internalState} />} */}
|
||
</motion.div>
|
||
);
|
||
};
|
||
|
||
export const ItemTableList = memo(BaseItemTableList);
|
||
|
||
const ExpandedContainer = ({
|
||
internalState,
|
||
itemType,
|
||
}: {
|
||
internalState: ItemListStateActions;
|
||
itemType: LibraryItem;
|
||
}) => {
|
||
const hasExpanded = useItemListStateSubscription(internalState, (state) =>
|
||
state ? state.expanded.size > 0 : false,
|
||
);
|
||
|
||
return (
|
||
<AnimatePresence initial={false}>
|
||
{hasExpanded && (
|
||
<ExpandedListContainer>
|
||
<ExpandedListItem internalState={internalState} itemType={itemType} />
|
||
</ExpandedListContainer>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
};
|
||
|
||
ItemTableList.displayName = 'ItemTableList';
|