mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-08 04:50:12 +02:00
add new table to album detail
This commit is contained in:
jeffvli
@@ -0,0 +1,43 @@
|
||||
import { useInView } from 'motion/react';
|
||||
import { RefObject, useMemo } from 'react';
|
||||
|
||||
import { useWindowSettings } from '/@/renderer/store/settings.store';
|
||||
import { Platform } from '/@/shared/types/types';
|
||||
|
||||
export const useFixedTableHeader = ({
|
||||
containerRef,
|
||||
enabled,
|
||||
headerRef,
|
||||
}: {
|
||||
containerRef: RefObject<HTMLDivElement | null>;
|
||||
enabled: boolean;
|
||||
headerRef: RefObject<HTMLDivElement | null>;
|
||||
}) => {
|
||||
const { windowBarStyle } = useWindowSettings();
|
||||
|
||||
const topMargin =
|
||||
windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
|
||||
? '-130px'
|
||||
: '-100px';
|
||||
|
||||
const isTableHeaderInView = useInView(headerRef, {
|
||||
margin: `${topMargin} 0px 0px 0px`,
|
||||
});
|
||||
|
||||
const isTableInView = useInView(containerRef, {
|
||||
margin: `${topMargin} 0px 0px 0px`,
|
||||
});
|
||||
|
||||
const shouldShowStickyHeader = useMemo(() => {
|
||||
return enabled && !isTableHeaderInView && isTableInView;
|
||||
}, [enabled, isTableHeaderInView, isTableInView]);
|
||||
|
||||
const stickyTop = useMemo(() => {
|
||||
return windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS ? 95 : 65;
|
||||
}, [windowBarStyle]);
|
||||
|
||||
return {
|
||||
shouldShowStickyHeader,
|
||||
stickyTop,
|
||||
};
|
||||
};
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
|
||||
import { useMergedRef } from '@mantine/hooks';
|
||||
import clsx from 'clsx';
|
||||
import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
|
||||
import React, { CSSProperties, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
|
||||
import { CellComponentProps } from 'react-window-v2';
|
||||
|
||||
import styles from './item-table-list-column.module.css';
|
||||
@@ -76,6 +76,48 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
const item = isDataRow ? props.data[props.rowIndex] : null;
|
||||
const shouldEnableDrag = !!props.enableDrag && isDataRow && !!item;
|
||||
|
||||
// Check if this row should render a group header (must be before conditional returns)
|
||||
// Group headers are rendered in the main grid at columnIndex 0 (first unpinned column)
|
||||
// We detect this by checking if columnIndex equals pinnedLeftColumnCount (first column of main grid)
|
||||
// or if columnIndex is 0 and there are no pinned columns
|
||||
// Groups are defined by itemCount, so we calculate which group this row belongs to
|
||||
let groupHeader: 'GROUP_HEADER' | null | ReactElement = null;
|
||||
if (props.groups && isDataRow && props.groups.length > 0) {
|
||||
// Calculate which group this row index belongs to
|
||||
let cumulativeDataIndex = 0;
|
||||
const headerOffset = props.enableHeader ? 1 : 0;
|
||||
|
||||
const originalData = props.data.filter((item) => item !== null);
|
||||
|
||||
for (let groupIndex = 0; groupIndex < props.groups.length; groupIndex++) {
|
||||
const group = props.groups[groupIndex];
|
||||
const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
|
||||
|
||||
if (props.rowIndex === groupHeaderIndex) {
|
||||
const isMainGridFirstColumn =
|
||||
props.columnIndex === (props.pinnedLeftColumnCount || 0) ||
|
||||
(props.columnIndex === 0 && (props.pinnedLeftColumnCount || 0) === 0);
|
||||
|
||||
// Only render group header in the first column of the main grid
|
||||
if (isMainGridFirstColumn) {
|
||||
groupHeader = group.render({
|
||||
data: originalData,
|
||||
groupIndex,
|
||||
index: props.rowIndex,
|
||||
internalState: props.internalState,
|
||||
startDataIndex: cumulativeDataIndex,
|
||||
});
|
||||
} else {
|
||||
// For other columns in this row, return marker to skip rendering
|
||||
groupHeader = 'GROUP_HEADER';
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
cumulativeDataIndex += group.itemCount;
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
isDraggedOver,
|
||||
isDragging: isDraggingLocal,
|
||||
@@ -264,6 +306,49 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
return <TableColumnHeaderContainer {...props} controls={controls} type={type} />;
|
||||
}
|
||||
|
||||
// Render group header if this row should have one
|
||||
if (groupHeader) {
|
||||
if (groupHeader === 'GROUP_HEADER') {
|
||||
// For non-first columns, render empty cell (group header spans all columns)
|
||||
return null;
|
||||
}
|
||||
// For first column of main grid, render the group header spanning full table width
|
||||
// Calculate widths to span across all grids using calculated column widths
|
||||
const pinnedLeftWidth =
|
||||
props.pinnedLeftColumnWidths?.reduce((sum, width) => sum + width, 0) || 0;
|
||||
const pinnedRightWidth =
|
||||
props.pinnedRightColumnWidths?.reduce((sum, width) => sum + width, 0) || 0;
|
||||
|
||||
// Use calculated column widths if available (they include all columns in order)
|
||||
// Otherwise fall back to summing column config widths
|
||||
const totalTableWidth = props.calculatedColumnWidths
|
||||
? props.calculatedColumnWidths.reduce((sum, width) => sum + width, 0)
|
||||
: pinnedLeftWidth +
|
||||
props.columns
|
||||
.slice(
|
||||
props.pinnedLeftColumnCount || 0,
|
||||
props.columns.length - (props.pinnedRightColumnCount || 0),
|
||||
)
|
||||
.reduce((sum, col) => sum + col.width, 0) +
|
||||
pinnedRightWidth;
|
||||
|
||||
// Use negative margins to extend beyond cell boundaries and span full width
|
||||
// Apply props.style for virtualization positioning (top, left, position, etc.)
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...props.style, // Apply virtualization styles (position, top, left, width, height)
|
||||
backgroundColor: 'var(--theme-bg-secondary)',
|
||||
borderBottom: '1px solid var(--theme-border-color)',
|
||||
marginLeft: pinnedLeftWidth > 0 ? `-${pinnedLeftWidth}px` : 0,
|
||||
width: `${totalTableWidth}px`,
|
||||
}}
|
||||
>
|
||||
{groupHeader}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case TableColumn.ACTIONS:
|
||||
case TableColumn.SKIP:
|
||||
|
||||
@@ -45,6 +45,49 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item-table-pinned-rows-grid-container.header-fixed {
|
||||
position: fixed !important;
|
||||
top: 65px;
|
||||
z-index: 15;
|
||||
background-color: var(--theme-bg-primary);
|
||||
box-shadow: 0 -1px 0 0 var(--theme-colors-border);
|
||||
transition: position 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.item-table-pinned-rows-grid-container.header-window-bar {
|
||||
top: 95px;
|
||||
}
|
||||
|
||||
.item-table-list-container.header-fixed-margin {
|
||||
margin-top: 36px !important;
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 2rem;
|
||||
margin: 0 -2rem;
|
||||
pointer-events: none;
|
||||
background-color: var(--theme-colors-background);
|
||||
border-bottom: 1px solid var(--theme-colors-border);
|
||||
box-shadow: 0 -1px 0 0 var(--theme-colors-border);
|
||||
}
|
||||
|
||||
.sticky-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sticky-header-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.item-table-pinned-rows-grid-container.with-header::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@@ -7,6 +7,7 @@ import { AnimatePresence } from 'motion/react';
|
||||
import { useOverlayScrollbars } from 'overlayscrollbars-react';
|
||||
import React, {
|
||||
type JSXElementConstructor,
|
||||
ReactElement,
|
||||
Ref,
|
||||
useCallback,
|
||||
useEffect,
|
||||
@@ -18,6 +19,7 @@ import React, {
|
||||
} from 'react';
|
||||
import { type CellComponentProps, Grid } from 'react-window-v2';
|
||||
|
||||
import { useFixedTableHeader } from './hooks/use-fixed-table-header';
|
||||
import styles from './item-table-list.module.css';
|
||||
|
||||
import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
|
||||
@@ -97,6 +99,7 @@ interface VirtualizedTableGridProps {
|
||||
enableSelection: boolean;
|
||||
enableVerticalBorders: boolean;
|
||||
getRowHeight: (index: number, cellProps: TableItemProps) => number;
|
||||
groups?: TableGroupHeader[];
|
||||
headerHeight: number;
|
||||
internalState: ItemListStateActions;
|
||||
itemType: LibraryItem;
|
||||
@@ -104,11 +107,11 @@ interface VirtualizedTableGridProps {
|
||||
onRangeChanged?: ItemTableListProps['onRangeChanged'];
|
||||
parsedColumns: ReturnType<typeof parseTableColumns>;
|
||||
pinnedLeftColumnCount: number;
|
||||
pinnedLeftColumnRef: React.RefObject<HTMLDivElement>;
|
||||
pinnedLeftColumnRef: React.RefObject<HTMLDivElement | null>;
|
||||
pinnedRightColumnCount: number;
|
||||
pinnedRightColumnRef: React.RefObject<HTMLDivElement>;
|
||||
pinnedRightColumnRef: React.RefObject<HTMLDivElement | null>;
|
||||
pinnedRowCount: number;
|
||||
pinnedRowRef: React.RefObject<HTMLDivElement>;
|
||||
pinnedRowRef: React.RefObject<HTMLDivElement | null>;
|
||||
playerContext: PlayerContext;
|
||||
showLeftShadow: boolean;
|
||||
showRightShadow: boolean;
|
||||
@@ -137,6 +140,7 @@ const VirtualizedTableGrid = React.memo(
|
||||
enableSelection,
|
||||
enableVerticalBorders,
|
||||
getRowHeight,
|
||||
groups,
|
||||
headerHeight,
|
||||
internalState,
|
||||
itemType,
|
||||
@@ -163,12 +167,71 @@ const VirtualizedTableGrid = React.memo(
|
||||
[calculatedColumnWidths],
|
||||
);
|
||||
|
||||
// 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]);
|
||||
|
||||
// Create data array with group headers inserted as null values
|
||||
// Groups are defined by itemCount, so we calculate indexes based on cumulative item counts
|
||||
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;
|
||||
}
|
||||
|
||||
// Calculate group header indexes based on itemCounts
|
||||
const groupIndexes: number[] = [];
|
||||
let cumulativeDataIndex = 0;
|
||||
const headerOffset = enableHeader ? 1 : 0;
|
||||
|
||||
groups.forEach((group, groupIndex) => {
|
||||
// Group header appears before its items
|
||||
// Index = header offset + cumulative data index + number of previous group headers
|
||||
const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
|
||||
groupIndexes.push(groupHeaderIndex);
|
||||
cumulativeDataIndex += group.itemCount;
|
||||
});
|
||||
|
||||
let dataIndex = 0;
|
||||
const startIndex = enableHeader ? 1 : 0;
|
||||
let groupHeaderCount = 0;
|
||||
|
||||
// Iterate through the expanded row space (data + group headers)
|
||||
for (
|
||||
let rowIndex = startIndex;
|
||||
rowIndex < startIndex + data.length + groupIndexes.length;
|
||||
rowIndex++
|
||||
) {
|
||||
// Check if this row should have a group header
|
||||
const expectedGroupIndex = groupIndexes[groupHeaderCount];
|
||||
if (expectedGroupIndex !== undefined && rowIndex === expectedGroupIndex) {
|
||||
result.push(null); // Group header row
|
||||
groupHeaderCount++;
|
||||
} else if (dataIndex < data.length) {
|
||||
result.push(data[dataIndex]);
|
||||
dataIndex++;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}, [data, enableHeader, groups]);
|
||||
|
||||
const itemProps: TableItemProps = useMemo(
|
||||
() => ({
|
||||
calculatedColumnWidths,
|
||||
cellPadding,
|
||||
columns: parsedColumns,
|
||||
controls,
|
||||
data: enableHeader ? [null, ...data] : data,
|
||||
data: dataWithGroups,
|
||||
enableAlternateRowColors,
|
||||
enableColumnReorder,
|
||||
enableColumnResize,
|
||||
@@ -180,31 +243,42 @@ const VirtualizedTableGrid = React.memo(
|
||||
enableSelection,
|
||||
enableVerticalBorders,
|
||||
getRowHeight,
|
||||
groups,
|
||||
internalState,
|
||||
itemType,
|
||||
pinnedLeftColumnCount,
|
||||
pinnedLeftColumnWidths,
|
||||
pinnedRightColumnCount,
|
||||
pinnedRightColumnWidths,
|
||||
playerContext,
|
||||
size,
|
||||
tableId,
|
||||
}),
|
||||
[
|
||||
calculatedColumnWidths,
|
||||
cellPadding,
|
||||
controls,
|
||||
parsedColumns,
|
||||
enableHeader,
|
||||
data,
|
||||
dataWithGroups,
|
||||
enableAlternateRowColors,
|
||||
enableColumnReorder,
|
||||
enableColumnResize,
|
||||
enableDrag,
|
||||
enableExpansion,
|
||||
enableHeader,
|
||||
enableHorizontalBorders,
|
||||
enableRowHoverHighlight,
|
||||
enableSelection,
|
||||
enableVerticalBorders,
|
||||
getRowHeight,
|
||||
groups,
|
||||
internalState,
|
||||
playerContext,
|
||||
itemType,
|
||||
pinnedLeftColumnCount,
|
||||
pinnedLeftColumnWidths,
|
||||
pinnedRightColumnCount,
|
||||
pinnedRightColumnWidths,
|
||||
playerContext,
|
||||
size,
|
||||
tableId,
|
||||
],
|
||||
@@ -490,7 +564,20 @@ const VirtualizedTableGrid = React.memo(
|
||||
|
||||
VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
|
||||
|
||||
export interface TableGroupHeader {
|
||||
itemCount: number;
|
||||
render: (props: {
|
||||
data: unknown[];
|
||||
groupIndex: number;
|
||||
index: number;
|
||||
internalState: ItemListStateActions;
|
||||
startDataIndex: number;
|
||||
}) => ReactElement;
|
||||
rowHeight?: ((index: number) => number) | number;
|
||||
}
|
||||
|
||||
export interface TableItemProps {
|
||||
calculatedColumnWidths?: number[];
|
||||
cellPadding?: ItemTableListProps['cellPadding'];
|
||||
columns: ItemTableListColumnConfig[];
|
||||
controls: ItemControls;
|
||||
@@ -506,9 +593,14 @@ export interface TableItemProps {
|
||||
enableSelection?: ItemTableListProps['enableSelection'];
|
||||
enableVerticalBorders?: ItemTableListProps['enableVerticalBorders'];
|
||||
getRowHeight: (index: number, cellProps: TableItemProps) => 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'];
|
||||
tableId: string;
|
||||
@@ -528,8 +620,10 @@ interface ItemTableListProps {
|
||||
enableHorizontalBorders?: boolean;
|
||||
enableRowHoverHighlight?: boolean;
|
||||
enableSelection?: boolean;
|
||||
enableStickyHeader?: boolean;
|
||||
enableVerticalBorders?: boolean;
|
||||
getRowId?: ((item: unknown) => string) | string;
|
||||
groups?: TableGroupHeader[];
|
||||
headerHeight?: number;
|
||||
initialTop?: {
|
||||
behavior?: 'auto' | 'smooth';
|
||||
@@ -564,8 +658,10 @@ export const ItemTableList = ({
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableStickyHeader = false,
|
||||
enableVerticalBorders = false,
|
||||
getRowId,
|
||||
groups,
|
||||
headerHeight = 40,
|
||||
initialTop,
|
||||
itemType,
|
||||
@@ -666,7 +762,15 @@ export const ItemTableList = ({
|
||||
const pinnedRightColumnCount = parsedColumns.filter((col) => col.pinned === 'right').length;
|
||||
|
||||
const pinnedRowCount = enableHeader ? 1 : 0;
|
||||
const totalRowCount = totalItemCount - pinnedRowCount;
|
||||
|
||||
// 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);
|
||||
@@ -680,6 +784,59 @@ export const ItemTableList = ({
|
||||
const handleRef = useRef<ItemListHandle | null>(null);
|
||||
const containerFocusRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const { shouldShowStickyHeader, stickyTop } = useFixedTableHeader({
|
||||
containerRef: containerFocusRef,
|
||||
enabled: enableHeader && enableStickyHeader,
|
||||
headerRef: pinnedRowRef,
|
||||
});
|
||||
|
||||
const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// Sync scroll position and update position of sticky header
|
||||
useEffect(() => {
|
||||
if (
|
||||
!shouldShowStickyHeader ||
|
||||
!stickyHeaderRef.current ||
|
||||
!rowRef.current ||
|
||||
!containerFocusRef.current
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stickyHeader = stickyHeaderRef.current;
|
||||
const stickyMainSection = stickyHeader.querySelector(
|
||||
`.${styles.stickyHeaderSection}`,
|
||||
) as HTMLDivElement;
|
||||
const mainGrid = rowRef.current.childNodes[0] as HTMLDivElement;
|
||||
const container = containerFocusRef.current;
|
||||
|
||||
if (!stickyMainSection || !mainGrid || !container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatePosition = () => {
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
stickyHeader.style.left = `${containerRect.left}px`;
|
||||
};
|
||||
|
||||
const syncScroll = () => {
|
||||
stickyMainSection.scrollLeft = mainGrid.scrollLeft;
|
||||
};
|
||||
|
||||
updatePosition();
|
||||
syncScroll();
|
||||
|
||||
window.addEventListener('resize', updatePosition);
|
||||
window.addEventListener('scroll', updatePosition, true);
|
||||
mainGrid.addEventListener('scroll', syncScroll);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updatePosition);
|
||||
window.removeEventListener('scroll', updatePosition, true);
|
||||
mainGrid.removeEventListener('scroll', syncScroll);
|
||||
};
|
||||
}, [shouldShowStickyHeader]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = rowRef.current;
|
||||
if (!el) return;
|
||||
@@ -1177,9 +1334,12 @@ export const ItemTableList = ({
|
||||
const row = rowRef.current?.childNodes[0] as HTMLDivElement;
|
||||
|
||||
if (!row) {
|
||||
setShowLeftShadow(false);
|
||||
setShowRightShadow(false);
|
||||
return;
|
||||
const timeout = setTimeout(() => {
|
||||
setShowLeftShadow(false);
|
||||
setShowRightShadow(false);
|
||||
}, 0);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
|
||||
const checkScrollPosition = () => {
|
||||
@@ -1204,13 +1364,16 @@ export const ItemTableList = ({
|
||||
const row = rowRef.current?.childNodes[0] as HTMLDivElement;
|
||||
|
||||
if (!row || !enableHeader) {
|
||||
setShowTopShadow(false);
|
||||
return;
|
||||
const timeout = setTimeout(() => {
|
||||
setShowTopShadow(false);
|
||||
}, 0);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
|
||||
const checkScrollPosition = () => {
|
||||
const scrollTop = row.scrollTop;
|
||||
setShowTopShadow(scrollTop > 0);
|
||||
const currentScrollTop = row.scrollTop;
|
||||
setShowTopShadow(currentScrollTop > 0);
|
||||
};
|
||||
|
||||
checkScrollPosition();
|
||||
@@ -1226,6 +1389,33 @@ export const ItemTableList = ({
|
||||
(index: number, cellProps: TableItemProps) => {
|
||||
const height = size === 'compact' ? 40 : size === 'large' ? 88 : 64;
|
||||
|
||||
// Check if this row is a group header row and has a custom row height
|
||||
if (groups && groups.length > 0) {
|
||||
// Calculate which group this index belongs to
|
||||
let cumulativeDataIndex = 0;
|
||||
const headerOffset = enableHeader ? 1 : 0;
|
||||
|
||||
for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
|
||||
const group = groups[groupIndex];
|
||||
const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
|
||||
|
||||
if (index === groupHeaderIndex) {
|
||||
if (group.rowHeight !== undefined) {
|
||||
const groupRowHeight =
|
||||
typeof group.rowHeight === 'number'
|
||||
? group.rowHeight
|
||||
: group.rowHeight(index);
|
||||
if (groupRowHeight !== undefined) {
|
||||
return groupRowHeight;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
cumulativeDataIndex += group.itemCount;
|
||||
}
|
||||
}
|
||||
|
||||
const baseHeight =
|
||||
typeof rowHeight === 'number' ? rowHeight : rowHeight?.(index, cellProps) || height;
|
||||
|
||||
@@ -1236,12 +1426,55 @@ export const ItemTableList = ({
|
||||
|
||||
return baseHeight;
|
||||
},
|
||||
[enableHeader, headerHeight, rowHeight, pinnedRowCount, size],
|
||||
[enableHeader, headerHeight, rowHeight, pinnedRowCount, size, groups],
|
||||
);
|
||||
|
||||
const getDataFn = useCallback(() => {
|
||||
return enableHeader ? [null, ...data] : data;
|
||||
}, [data, enableHeader]);
|
||||
// Reconstruct data array with group headers inserted
|
||||
// Groups are defined by itemCount, so we calculate indexes based on cumulative item counts
|
||||
const result: (null | unknown)[] = enableHeader ? [null] : [];
|
||||
|
||||
if (!groups || groups.length === 0) {
|
||||
// No groups, just add all data
|
||||
result.push(...data);
|
||||
return result;
|
||||
}
|
||||
|
||||
// Calculate group header indexes based on itemCounts
|
||||
const groupIndexes: number[] = [];
|
||||
let cumulativeDataIndex = 0;
|
||||
const headerOffset = enableHeader ? 1 : 0;
|
||||
|
||||
groups.forEach((group, groupIndex) => {
|
||||
// Group header appears before its items
|
||||
// Index = header offset + cumulative data index + number of previous group headers
|
||||
const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
|
||||
groupIndexes.push(groupHeaderIndex);
|
||||
cumulativeDataIndex += group.itemCount;
|
||||
});
|
||||
|
||||
let dataIndex = 0;
|
||||
const startIndex = enableHeader ? 1 : 0;
|
||||
let groupHeaderCount = 0;
|
||||
|
||||
// Iterate through the expanded row space (data + group headers)
|
||||
for (
|
||||
let rowIndex = startIndex;
|
||||
rowIndex < startIndex + data.length + groupIndexes.length;
|
||||
rowIndex++
|
||||
) {
|
||||
// Check if this row should have a group header
|
||||
const expectedGroupIndex = groupIndexes[groupHeaderCount];
|
||||
if (expectedGroupIndex !== undefined && rowIndex === expectedGroupIndex) {
|
||||
result.push(null); // Group header row
|
||||
groupHeaderCount++;
|
||||
} else if (dataIndex < data.length) {
|
||||
result.push(data[dataIndex]);
|
||||
dataIndex++;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}, [data, enableHeader, groups]);
|
||||
|
||||
const extractRowId = useMemo(() => createExtractRowId(getRowId), [getRowId]);
|
||||
|
||||
@@ -1428,14 +1661,201 @@ export const ItemTableList = ({
|
||||
onColumnResized,
|
||||
});
|
||||
|
||||
// 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={styles.stickyHeaderSection}
|
||||
style={{ width: `${pinnedLeftWidth}px` }}
|
||||
>
|
||||
{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={styles.stickyHeaderSection} style={{ width: `${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={{
|
||||
height: headerHeight,
|
||||
width: calculatedColumnWidths[columnIndex],
|
||||
}}
|
||||
{...stickyHeaderItemProps}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{pinnedRightColumnCount > 0 && (
|
||||
<div
|
||||
className={styles.stickyHeaderSection}
|
||||
style={{ width: `${pinnedRightWidth}px` }}
|
||||
>
|
||||
{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,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.itemTableListContainer}
|
||||
onKeyDown={handleKeyDown}
|
||||
onMouseDown={(e) => (e.currentTarget as HTMLDivElement).focus()}
|
||||
onMouseDown={(e) => {
|
||||
const element = e.currentTarget as HTMLDivElement;
|
||||
// Focus without scrolling into view
|
||||
if (element.focus) {
|
||||
element.focus({ preventScroll: true });
|
||||
}
|
||||
}}
|
||||
ref={containerFocusRef}
|
||||
tabIndex={0}
|
||||
>
|
||||
{StickyHeader}
|
||||
<VirtualizedTableGrid
|
||||
calculatedColumnWidths={calculatedColumnWidths}
|
||||
CellComponent={CellComponent}
|
||||
@@ -1453,6 +1873,7 @@ export const ItemTableList = ({
|
||||
enableSelection={enableSelection}
|
||||
enableVerticalBorders={enableVerticalBorders}
|
||||
getRowHeight={getRowHeight}
|
||||
groups={groups}
|
||||
headerHeight={headerHeight}
|
||||
internalState={internalState}
|
||||
itemType={itemType}
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
.simple-item-table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* .alternate-row-even {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.alternate-row-odd {
|
||||
@mixin dark {
|
||||
background-color: darken(var(--theme-colors-background), 30%);
|
||||
}
|
||||
|
||||
@mixin light {
|
||||
background-color: darken(var(--theme-colors-background), 2%);
|
||||
}
|
||||
} */
|
||||
|
||||
/* .row-hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.row-hover:hover {
|
||||
background-color: var(--theme-colors-surface);
|
||||
opacity: 0.7;
|
||||
} */
|
||||
|
||||
.row-selected {
|
||||
}
|
||||
|
||||
/* .with-horizontal-border {
|
||||
border-bottom: 1px solid var(--theme-colors-border);
|
||||
}
|
||||
|
||||
.with-vertical-border {
|
||||
border-right: 1px solid var(--theme-colors-border);
|
||||
} */
|
||||
@@ -0,0 +1,243 @@
|
||||
import clsx from 'clsx';
|
||||
import { useId, useMemo } from 'react';
|
||||
|
||||
import styles from './simple-item-table.module.css';
|
||||
|
||||
import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id';
|
||||
import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
|
||||
import { useItemListState } from '/@/renderer/components/item-list/helpers/item-list-state';
|
||||
import { parseTableColumns } from '/@/renderer/components/item-list/helpers/parse-table-columns';
|
||||
import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
|
||||
import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
|
||||
import { TableColumnHeaderContainer } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
|
||||
import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
|
||||
import { usePlayer } from '/@/renderer/features/player/context/player-context';
|
||||
import { Table } from '/@/shared/components/table/table';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
|
||||
enum TableItemSize {
|
||||
COMPACT = 40,
|
||||
DEFAULT = 64,
|
||||
LARGE = 88,
|
||||
}
|
||||
|
||||
interface SimpleItemTableProps {
|
||||
cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
|
||||
columns: ItemTableListColumnConfig[];
|
||||
data: unknown[];
|
||||
enableAlternateRowColors?: boolean;
|
||||
enableHeader?: boolean;
|
||||
enableHorizontalBorders?: boolean;
|
||||
enableRowHoverHighlight?: boolean;
|
||||
enableSelection?: boolean;
|
||||
enableVerticalBorders?: boolean;
|
||||
getRowId?: ((item: unknown) => string) | string;
|
||||
itemType: LibraryItem;
|
||||
size?: 'compact' | 'default' | 'large';
|
||||
}
|
||||
|
||||
export const SimpleItemTable = ({
|
||||
cellPadding = 'sm',
|
||||
columns,
|
||||
data,
|
||||
enableAlternateRowColors = false,
|
||||
enableHeader = true,
|
||||
enableHorizontalBorders = false,
|
||||
enableRowHoverHighlight = true,
|
||||
enableSelection = true,
|
||||
enableVerticalBorders = false,
|
||||
getRowId,
|
||||
itemType,
|
||||
size = 'default',
|
||||
}: SimpleItemTableProps) => {
|
||||
const tableId = useId();
|
||||
const playerContext = usePlayer();
|
||||
|
||||
// Filter out pinned columns by setting pinned to null
|
||||
const columnsWithoutPinning = useMemo(
|
||||
() =>
|
||||
columns.map((col) => ({
|
||||
...col,
|
||||
pinned: null,
|
||||
})),
|
||||
[columns],
|
||||
);
|
||||
|
||||
// Parse columns (filters disabled and sorts by pinned position, but we've removed pinning)
|
||||
const parsedColumns = useMemo(
|
||||
() => parseTableColumns(columnsWithoutPinning),
|
||||
[columnsWithoutPinning],
|
||||
);
|
||||
|
||||
// Create extractRowId function
|
||||
const extractRowId = useMemo(() => createExtractRowId(getRowId), [getRowId]);
|
||||
|
||||
// Use item list state for selection
|
||||
const internalState = useItemListState(() => data, extractRowId);
|
||||
|
||||
// Get default item controls
|
||||
const controls = useDefaultItemListControls();
|
||||
|
||||
// Calculate row height based on size
|
||||
const DEFAULT_ROW_HEIGHT = useMemo(() => {
|
||||
switch (size) {
|
||||
case 'compact':
|
||||
return TableItemSize.COMPACT;
|
||||
case 'large':
|
||||
return TableItemSize.LARGE;
|
||||
case 'default':
|
||||
default:
|
||||
return TableItemSize.DEFAULT;
|
||||
}
|
||||
}, [size]);
|
||||
|
||||
const tableItemProps: TableItemProps = useMemo(
|
||||
() => ({
|
||||
cellPadding,
|
||||
columns: parsedColumns,
|
||||
controls,
|
||||
data: enableHeader ? [null, ...data] : data,
|
||||
enableAlternateRowColors,
|
||||
enableColumnReorder: false,
|
||||
enableColumnResize: false,
|
||||
enableDrag: false,
|
||||
enableExpansion: false,
|
||||
enableHeader,
|
||||
enableHorizontalBorders,
|
||||
enableRowHoverHighlight,
|
||||
enableSelection,
|
||||
enableVerticalBorders,
|
||||
getRowHeight: () => DEFAULT_ROW_HEIGHT,
|
||||
internalState,
|
||||
itemType,
|
||||
playerContext,
|
||||
size,
|
||||
tableId,
|
||||
}),
|
||||
[
|
||||
cellPadding,
|
||||
parsedColumns,
|
||||
controls,
|
||||
enableHeader,
|
||||
data,
|
||||
enableAlternateRowColors,
|
||||
enableHorizontalBorders,
|
||||
enableRowHoverHighlight,
|
||||
enableSelection,
|
||||
enableVerticalBorders,
|
||||
DEFAULT_ROW_HEIGHT,
|
||||
internalState,
|
||||
itemType,
|
||||
playerContext,
|
||||
size,
|
||||
tableId,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.simpleItemTableContainer}>
|
||||
<Table
|
||||
highlightOnHover={enableRowHoverHighlight}
|
||||
striped={enableAlternateRowColors}
|
||||
withColumnBorders={enableVerticalBorders}
|
||||
withRowBorders={enableHorizontalBorders}
|
||||
>
|
||||
{enableHeader && (
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
{parsedColumns.map((column, columnIndex) => (
|
||||
<Table.Th
|
||||
key={column.id}
|
||||
style={{
|
||||
textAlign:
|
||||
column.align === 'start'
|
||||
? 'left'
|
||||
: column.align === 'end'
|
||||
? 'right'
|
||||
: 'center',
|
||||
width: column.width,
|
||||
}}
|
||||
>
|
||||
<TableColumnHeaderContainer
|
||||
{...tableItemProps}
|
||||
ariaAttributes={{
|
||||
'aria-colindex': columnIndex + 1,
|
||||
role: 'gridcell',
|
||||
}}
|
||||
columnIndex={columnIndex}
|
||||
controls={controls}
|
||||
rowIndex={0}
|
||||
style={{ width: column.width }}
|
||||
type={column.id}
|
||||
/>
|
||||
</Table.Th>
|
||||
))}
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
)}
|
||||
<Table.Tbody>
|
||||
{data.map((item, rowIndex) => {
|
||||
const adjustedRowIndex = enableHeader ? rowIndex + 1 : rowIndex;
|
||||
const isSelected =
|
||||
item && typeof item === 'object' && 'id' in item
|
||||
? internalState.isSelected(internalState.extractRowId(item) || '')
|
||||
: false;
|
||||
|
||||
const isLastRow = rowIndex === data.length - 1;
|
||||
|
||||
return (
|
||||
<Table.Tr
|
||||
className={clsx({
|
||||
[styles.alternateRowEven]:
|
||||
enableAlternateRowColors && rowIndex % 2 === 0,
|
||||
[styles.alternateRowOdd]:
|
||||
enableAlternateRowColors && rowIndex % 2 === 1,
|
||||
[styles.rowHover]: enableRowHoverHighlight,
|
||||
[styles.rowSelected]: isSelected,
|
||||
[styles.withHorizontalBorder]:
|
||||
enableHorizontalBorders && enableHeader && !isLastRow,
|
||||
})}
|
||||
data-row-index={`${tableId}-${adjustedRowIndex}`}
|
||||
key={internalState.extractRowId(item) || rowIndex}
|
||||
>
|
||||
{parsedColumns.map((column, columnIndex) => {
|
||||
const isLastColumn = columnIndex === parsedColumns.length - 1;
|
||||
|
||||
return (
|
||||
<Table.Td
|
||||
className={clsx({
|
||||
[styles.withVerticalBorder]:
|
||||
enableVerticalBorders && !isLastColumn,
|
||||
})}
|
||||
key={column.id}
|
||||
style={{
|
||||
textAlign:
|
||||
column.align === 'start'
|
||||
? 'left'
|
||||
: column.align === 'end'
|
||||
? 'right'
|
||||
: 'center',
|
||||
width: column.width,
|
||||
}}
|
||||
>
|
||||
<ItemTableListColumn
|
||||
{...tableItemProps}
|
||||
ariaAttributes={{
|
||||
'aria-colindex': columnIndex + 1,
|
||||
role: 'gridcell',
|
||||
}}
|
||||
columnIndex={columnIndex}
|
||||
rowIndex={adjustedRowIndex}
|
||||
style={{ width: column.width }}
|
||||
/>
|
||||
</Table.Td>
|
||||
);
|
||||
})}
|
||||
</Table.Tr>
|
||||
);
|
||||
})}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user