antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Move common table functions into base component

Browse source
This commit is contained in:
jeffvli 2023-01-06 17:59:02 -08:00
parent f7b8e34905
commit b569ec31ae
4 changed files with 88 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -60,14 +60,6 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const [pagination, setPagination] = useSetState({
artist: 0,
});
@ -223,33 +215,20 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
<Box ref={tableContainerRef}>
<VirtualTable
ref={tableRef}
animateRows
autoFitColumns
autoHeight
deselectOnClickOutside
detailRowAutoHeight
maintainColumnOrder
suppressCellFocus
suppressCopyRowsToClipboard
suppressHorizontalScroll
suppressLoadingOverlay
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressRowDrag
suppressScrollOnNewData
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
rowData={detailQuery.data?.songs}
rowHeight={60}
rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onGridReady={(params) => {
params.api.setDomLayout('autoHeight');
params.api.sizeColumnsToFit();
}}
onGridSizeChanged={(params) => {
params.api.sizeColumnsToFit();
}}
onRowDoubleClicked={handleRowDoubleClick}
/>
</Box>

33
src/renderer/features/now-playing/components/play-queue.tsx
View file

@ -2,7 +2,6 @@ import type { Ref } from 'react';
import { useState, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
import type {
CellDoubleClickedEvent,
ColDef,
RowClassRules,
RowDragEvent,
RowNode,
@ -68,13 +67,6 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
}));
const columnDefs = useMemo(() => getColumnDefs(tableConfig.columns), [tableConfig.columns]);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const handleDoubleClick = (e: CellDoubleClickedEvent) => {
const playerData = setCurrentTrack(e.data.uniqueId);
@ -196,20 +188,6 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
}
}, [currentSong, previousSong, tableConfig.followCurrentSong]);
// Auto resize the columns when the column config changes
useEffect(() => {
if (tableConfig.autoFit) {
const { api } = tableRef?.current || {};
api?.sizeColumnsToFit();
}
}, [tableConfig.autoFit, tableConfig.columns]);
useEffect(() => {
const { api } = tableRef?.current || {};
api?.resetRowHeights();
api?.redrawRows();
}, [tableConfig.rowHeight]);
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<VirtualGridContainer>
@ -217,23 +195,14 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
<VirtualTable
ref={mergedRef}
alwaysShowHorizontalScroll
animateRows
maintainColumnOrder
rowDragEntireRow
rowDragMultiRow
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging
suppressRowDrag
suppressScrollOnNewData
autoFitColumns={tableConfig.autoFit}
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.uniqueId}
rowBuffer={30}
rowClassRules={rowClassRules}
rowData={queue}
rowHeight={tableConfig.rowHeight || 40}
rowSelection="multiple"
onCellDoubleClicked={handleDoubleClick}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}

26
src/renderer/features/playlists/components/playlist-detail-content.tsx
View file

@ -87,14 +87,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const handleContextMenu = (e: CellContextMenuEvent) => {
if (!e.event) return;
const clickEvent = e.event as MouseEvent;
@ -268,21 +260,14 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
<Box ref={tableContainerRef}>
<VirtualTable
ref={tableRef}
animateRows
autoFitColumns
autoHeight
deselectOnClickOutside
detailRowAutoHeight
maintainColumnOrder
suppressCellFocus
suppressCopyRowsToClipboard
suppressHorizontalScroll
suppressLoadingOverlay
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressRowDrag
suppressScrollOnNewData
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => {
// It's possible that there are duplicate song ids in a playlist
return `${data.data.id}-${data.data.pageIndex}`;
@ -291,13 +276,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
rowHeight={60}
rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onGridReady={(params) => {
params.api.setDomLayout('autoHeight');
params.api.sizeColumnsToFit();
}}
onGridSizeChanged={(params) => {
params.api.sizeColumnsToFit();
}}
onRowDoubleClicked={handleRowDoubleClick}
/>
</Box>