remove automatic autosize, use dummy fill column instead

This commit is contained in:
jeffvli
2026-04-05 09:06:03 -07:00
parent d61587b16f
commit 37501f2983
5 changed files with 30 additions and 8 deletions
@@ -1,8 +1,16 @@
import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types'; import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
import { TableColumn } from '/@/shared/types/types';
// Automatically set autoSize for all unpinned columns when auto-fit is off const LAYOUT_FILL_COLUMN: ItemTableListColumnConfig = {
// This is a view-only helper and does not persist to settings align: 'start',
export const autoSizeUnpinnedColumns = ( autoSize: true,
id: TableColumn.LAYOUT_FILL,
isEnabled: true,
pinned: null,
width: 0,
};
export const appendLayoutFillColumn = (
columns: ItemTableListColumnConfig[], columns: ItemTableListColumnConfig[],
autoFitColumns: boolean, autoFitColumns: boolean,
): ItemTableListColumnConfig[] => { ): ItemTableListColumnConfig[] => {
@@ -18,6 +26,5 @@ export const autoSizeUnpinnedColumns = (
return columns; return columns;
} }
const idSet = new Set(unpinnedEnabled.map((c) => c.id)); return [...columns, LAYOUT_FILL_COLUMN];
return columns.map((c) => (idSet.has(c.id) ? { ...c, autoSize: true } : c));
}; };
@@ -67,6 +67,7 @@ const getRowIdFromTableColumn = (tableColumn: TableColumn): null | string => {
[TableColumn.ID]: null, [TableColumn.ID]: null,
[TableColumn.IMAGE]: null, [TableColumn.IMAGE]: null,
[TableColumn.LAST_PLAYED]: 'lastPlayedAt', [TableColumn.LAST_PLAYED]: 'lastPlayedAt',
[TableColumn.LAYOUT_FILL]: null,
[TableColumn.OWNER]: null, [TableColumn.OWNER]: null,
[TableColumn.PATH]: null, [TableColumn.PATH]: null,
[TableColumn.PLAY_COUNT]: 'playCount', [TableColumn.PLAY_COUNT]: 'playCount',
@@ -194,6 +194,14 @@ const ItemTableListColumnBase = (props: ItemTableListColumn) => {
); );
} }
if (type === TableColumn.LAYOUT_FILL) {
return (
<TableColumnContainer {...props} {...dragProps} controls={controls} type={type}>
{null}
</TableColumnContainer>
);
}
if (itemType !== LibraryItem.FOLDER) { if (itemType !== LibraryItem.FOLDER) {
switch (type) { switch (type) {
case TableColumn.ACTIONS: case TableColumn.ACTIONS:
@@ -829,7 +837,11 @@ export const TableColumnHeaderContainer = (
const [isDraggedOver, setIsDraggedOver] = useState<Edge | null>(null); const [isDraggedOver, setIsDraggedOver] = useState<Edge | null>(null);
useEffect(() => { useEffect(() => {
if (!containerRef.current || !props.enableColumnReorder) { if (
!containerRef.current ||
!props.enableColumnReorder ||
props.type === TableColumn.LAYOUT_FILL
) {
return; return;
} }
@@ -1011,6 +1023,7 @@ export const columnLabelMap: Record<TableColumn, ReactNode | string> = {
[TableColumn.LAST_PLAYED]: i18n.t('table.column.lastPlayed', { [TableColumn.LAST_PLAYED]: i18n.t('table.column.lastPlayed', {
postProcess: 'upperCase', postProcess: 'upperCase',
}) as string, }) as string,
[TableColumn.LAYOUT_FILL]: '',
[TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'upperCase' }) as string, [TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'upperCase' }) as string,
[TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'upperCase' }) as string, [TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'upperCase' }) as string,
[TableColumn.PLAY_COUNT]: i18n.t('table.column.playCount', { [TableColumn.PLAY_COUNT]: i18n.t('table.column.playCount', {
@@ -21,7 +21,7 @@ import { type CellComponentProps, Grid } from 'react-window-v2';
import styles from './item-table-list.module.css'; import styles from './item-table-list.module.css';
import { autoSizeUnpinnedColumns } from '/@/renderer/components/item-list/helpers/autosize-unpinned-columns'; import { appendLayoutFillColumn } from '/@/renderer/components/item-list/helpers/append-layout-fill-column';
import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id'; import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id';
import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls'; import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
import { import {
@@ -1280,7 +1280,7 @@ const BaseItemTableList = ({
const [totalContainerWidth, setTotalContainerWidth] = useState(0); const [totalContainerWidth, setTotalContainerWidth] = useState(0);
const columnsForLayout = useMemo( const columnsForLayout = useMemo(
() => autoSizeUnpinnedColumns(columns, autoFitColumns), () => appendLayoutFillColumn(columns, autoFitColumns),
[autoFitColumns, columns], [autoFitColumns, columns],
); );
+1
View File
@@ -184,6 +184,7 @@ export enum TableColumn {
ID = 'id', ID = 'id',
IMAGE = 'imageUrl', IMAGE = 'imageUrl',
LAST_PLAYED = 'lastPlayedAt', LAST_PLAYED = 'lastPlayedAt',
LAYOUT_FILL = '__layoutFill',
OWNER = 'username', OWNER = 'username',
PATH = 'path', PATH = 'path',
PLAY_COUNT = 'playCount', PLAY_COUNT = 'playCount',