mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
remove calculated width from group row
- prevents overflow when pinned right columns
This commit is contained in:
@@ -324,21 +324,6 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
// If rendering in main grid, extend left to cover pinned columns
|
||||
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;
|
||||
|
||||
// Determine if we're rendering in the first pinned left column
|
||||
const isFirstPinnedLeftColumn =
|
||||
@@ -364,7 +349,6 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
style={{
|
||||
...props.style,
|
||||
marginLeft: pinnedLeftWidth > 0 ? `-${pinnedLeftWidth}px` : 0,
|
||||
width: `${totalTableWidth}px`,
|
||||
}}
|
||||
>
|
||||
{groupHeader}
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import { useInView } from 'motion/react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import { useWindowSettings } from '/@/renderer/store/settings.store';
|
||||
import { Platform } from '/@/shared/types/types';
|
||||
|
||||
export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
|
||||
const tableHeaderRef = useRef<HTMLDivElement | null>(null);
|
||||
const tableContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const { windowBarStyle } = useWindowSettings();
|
||||
|
||||
const topMargin =
|
||||
windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
|
||||
? '-130px'
|
||||
: '-100px';
|
||||
|
||||
const isTableHeaderInView = useInView(tableHeaderRef, {
|
||||
margin: `${topMargin} 0px 0px 0px`,
|
||||
});
|
||||
|
||||
const isTableInView = useInView(tableContainerRef, {
|
||||
margin: `${topMargin} 0px 0px 0px`,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const header = document.querySelector('main .ag-header');
|
||||
const root = document.querySelector('main .ag-root');
|
||||
|
||||
if (!isTableHeaderInView && isTableInView) {
|
||||
header?.classList.add('ag-header-fixed');
|
||||
root?.classList.add('ag-header-fixed-margin');
|
||||
|
||||
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
|
||||
header?.classList.add('ag-header-window-bar');
|
||||
}
|
||||
} else if (!isTableInView) {
|
||||
header?.classList.remove('ag-header-fixed');
|
||||
root?.classList.remove('ag-header-fixed-margin');
|
||||
|
||||
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
|
||||
header?.classList.remove('ag-header-window-bar');
|
||||
}
|
||||
} else if (isTableHeaderInView) {
|
||||
header?.classList.remove('ag-header-fixed');
|
||||
root?.classList.remove('ag-header-fixed-margin');
|
||||
|
||||
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
|
||||
header?.classList.remove('ag-header-window-bar');
|
||||
}
|
||||
}
|
||||
}, [enabled, isTableHeaderInView, isTableInView, windowBarStyle]);
|
||||
|
||||
return { tableContainerRef, tableHeaderRef };
|
||||
};
|
||||
Reference in New Issue
Block a user