mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
add more memoization to the ItemTableList
This commit is contained in:
jeffvli
@@ -10,18 +10,22 @@ import {
|
||||
} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
|
||||
import clsx from 'clsx';
|
||||
import React, { CSSProperties, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
|
||||
import React, {
|
||||
CSSProperties,
|
||||
memo,
|
||||
ReactElement,
|
||||
ReactNode,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { CellComponentProps } from 'react-window-v2';
|
||||
|
||||
import styles from './item-table-list-column.module.css';
|
||||
|
||||
import i18n from '/@/i18n/i18n';
|
||||
import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
|
||||
import {
|
||||
useItemDraggingState,
|
||||
useItemSelectionState,
|
||||
} from '/@/renderer/components/item-list/helpers/item-list-state';
|
||||
import { useItemSelectionState } from '/@/renderer/components/item-list/helpers/item-list-state';
|
||||
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
|
||||
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
|
||||
import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
|
||||
@@ -50,27 +54,22 @@ import { TitleArtistColumn } from '/@/renderer/components/item-list/item-table-l
|
||||
import { TitleColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-column';
|
||||
import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-combined-column';
|
||||
import { YearColumn } from '/@/renderer/components/item-list/item-table-list/columns/year-column';
|
||||
import { useItemDragDropState } from '/@/renderer/components/item-list/item-table-list/hooks/use-item-drag-drop-state';
|
||||
import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
|
||||
import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types';
|
||||
import { eventEmitter } from '/@/renderer/events/event-emitter';
|
||||
import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
|
||||
import { Flex } from '/@/shared/components/flex/flex';
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { useDoubleClick } from '/@/shared/hooks/use-double-click';
|
||||
import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
|
||||
import { Folder, LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
|
||||
import {
|
||||
dndUtils,
|
||||
DragData,
|
||||
DragOperation,
|
||||
DragTarget,
|
||||
DragTargetMap,
|
||||
} from '/@/shared/types/drag-and-drop';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/drag-and-drop';
|
||||
import { TableColumn } from '/@/shared/types/types';
|
||||
|
||||
export interface ItemTableListColumn extends CellComponentProps<TableItemProps> {}
|
||||
export interface ItemTableListColumn extends CellComponentProps<TableItemProps> {
|
||||
columnType?: TableColumn;
|
||||
}
|
||||
|
||||
export interface ItemTableListInnerColumn extends ItemTableListColumn {
|
||||
controls: ItemControls;
|
||||
@@ -80,9 +79,9 @@ export interface ItemTableListInnerColumn extends ItemTableListColumn {
|
||||
type: TableColumn;
|
||||
}
|
||||
|
||||
export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
const ItemTableListColumnBase = (props: ItemTableListColumn) => {
|
||||
const { playlistId } = useParams() as { playlistId?: string };
|
||||
const type = props.columns[props.columnIndex].id as TableColumn;
|
||||
const type = props.columnType ?? (props.columns[props.columnIndex].id as TableColumn);
|
||||
|
||||
const isHeaderEnabled = !!props.enableHeader;
|
||||
const isDataRow = isHeaderEnabled ? props.rowIndex > 0 : true;
|
||||
@@ -127,270 +126,16 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
isDraggedOver,
|
||||
isDragging: isDraggingLocal,
|
||||
ref: dragRef,
|
||||
} = useDragDrop<HTMLDivElement>({
|
||||
drag: {
|
||||
getId: () => {
|
||||
if (!item || !isDataRow) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const draggedItems = getDraggedItems(item as any, props.internalState);
|
||||
|
||||
return draggedItems.map((draggedItem) => draggedItem.id);
|
||||
},
|
||||
getItem: () => {
|
||||
if (!item || !isDataRow) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const draggedItems = getDraggedItems(item as any, props.internalState);
|
||||
|
||||
return draggedItems;
|
||||
},
|
||||
itemType: props.itemType,
|
||||
onDragStart: () => {
|
||||
if (!item || !isDataRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
const draggedItems = getDraggedItems(item as any, props.internalState);
|
||||
if (props.internalState) {
|
||||
props.internalState.setDragging(draggedItems);
|
||||
}
|
||||
},
|
||||
onDrop: () => {
|
||||
if (props.internalState) {
|
||||
props.internalState.setDragging([]);
|
||||
}
|
||||
},
|
||||
operation:
|
||||
props.itemType === LibraryItem.QUEUE_SONG
|
||||
? [DragOperation.REORDER, DragOperation.ADD]
|
||||
: props.itemType === LibraryItem.PLAYLIST_SONG
|
||||
? [DragOperation.REORDER, DragOperation.ADD]
|
||||
: [DragOperation.ADD],
|
||||
target: DragTargetMap[props.itemType] || DragTarget.GENERIC,
|
||||
},
|
||||
drop: {
|
||||
canDrop: (args) => {
|
||||
if (args.source.type === DragTarget.TABLE_COLUMN) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Allow drops for QUEUE_SONG (queue reordering)
|
||||
if (props.itemType === LibraryItem.QUEUE_SONG) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Allow drops for PLAYLIST_SONG (playlist reordering)
|
||||
// Only allow drops when drag is started from the reorder handle
|
||||
if (
|
||||
props.itemType === LibraryItem.PLAYLIST_SONG &&
|
||||
args.source.itemType === LibraryItem.PLAYLIST_SONG &&
|
||||
args.source.metadata?.fromReorderHandle === true
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
getData: () => {
|
||||
return {
|
||||
id: [(item as unknown as { id: string }).id],
|
||||
item: [item as unknown as unknown[]],
|
||||
itemType: props.itemType,
|
||||
type: DragTargetMap[props.itemType] || DragTarget.GENERIC,
|
||||
};
|
||||
},
|
||||
onDrag: () => {
|
||||
return;
|
||||
},
|
||||
onDragLeave: () => {
|
||||
return;
|
||||
},
|
||||
onDrop: (args) => {
|
||||
if (args.self.type === DragTarget.QUEUE_SONG) {
|
||||
const sourceServerId = (
|
||||
args.source.item?.[0] as unknown as { _serverId: string }
|
||||
)._serverId;
|
||||
|
||||
const sourceItemType = args.source.itemType as LibraryItem;
|
||||
|
||||
const droppedOnUniqueId = (
|
||||
args.self.item?.[0] as unknown as { _uniqueId: string }
|
||||
)._uniqueId;
|
||||
|
||||
switch (args.source.type) {
|
||||
case DragTarget.ALBUM: {
|
||||
props.playerContext.addToQueueByFetch(
|
||||
sourceServerId,
|
||||
args.source.id,
|
||||
sourceItemType,
|
||||
{ edge: args.edge, uniqueId: droppedOnUniqueId },
|
||||
);
|
||||
break;
|
||||
}
|
||||
case DragTarget.ALBUM_ARTIST: {
|
||||
props.playerContext.addToQueueByFetch(
|
||||
sourceServerId,
|
||||
args.source.id,
|
||||
sourceItemType,
|
||||
{ edge: args.edge, uniqueId: droppedOnUniqueId },
|
||||
);
|
||||
break;
|
||||
}
|
||||
case DragTarget.ARTIST: {
|
||||
props.playerContext.addToQueueByFetch(
|
||||
sourceServerId,
|
||||
args.source.id,
|
||||
sourceItemType,
|
||||
{ edge: args.edge, uniqueId: droppedOnUniqueId },
|
||||
);
|
||||
break;
|
||||
}
|
||||
case DragTarget.FOLDER: {
|
||||
const items = args.source.item;
|
||||
|
||||
const { folders, songs } = (items || []).reduce<{
|
||||
folders: Folder[];
|
||||
songs: Song[];
|
||||
}>(
|
||||
(acc, item) => {
|
||||
if ((item as unknown as Song)._itemType === LibraryItem.SONG) {
|
||||
acc.songs.push(item as unknown as Song);
|
||||
} else if (
|
||||
(item as unknown as Folder)._itemType === LibraryItem.FOLDER
|
||||
) {
|
||||
acc.folders.push(item as unknown as Folder);
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{ folders: [], songs: [] },
|
||||
);
|
||||
|
||||
const folderIds = folders.map((folder) => folder.id);
|
||||
|
||||
// Handle folders: fetch and add to queue
|
||||
if (folderIds.length > 0) {
|
||||
props.playerContext.addToQueueByFetch(
|
||||
sourceServerId,
|
||||
folderIds,
|
||||
LibraryItem.FOLDER,
|
||||
{ edge: args.edge, uniqueId: droppedOnUniqueId },
|
||||
);
|
||||
}
|
||||
|
||||
// Handle songs: add directly to queue
|
||||
if (songs.length > 0) {
|
||||
props.playerContext.addToQueueByData(songs, {
|
||||
edge: args.edge,
|
||||
uniqueId: droppedOnUniqueId,
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case DragTarget.GENRE: {
|
||||
props.playerContext.addToQueueByFetch(
|
||||
sourceServerId,
|
||||
args.source.id,
|
||||
sourceItemType,
|
||||
{ edge: args.edge, uniqueId: droppedOnUniqueId },
|
||||
);
|
||||
break;
|
||||
}
|
||||
case DragTarget.PLAYLIST: {
|
||||
props.playerContext.addToQueueByFetch(
|
||||
sourceServerId,
|
||||
args.source.id,
|
||||
sourceItemType,
|
||||
{ edge: args.edge, uniqueId: droppedOnUniqueId },
|
||||
);
|
||||
break;
|
||||
}
|
||||
case DragTarget.QUEUE_SONG: {
|
||||
const sourceItems = (args.source.item || []) as QueueSong[];
|
||||
if (
|
||||
sourceItems.length > 0 &&
|
||||
args.edge &&
|
||||
(args.edge === 'top' || args.edge === 'bottom')
|
||||
) {
|
||||
props.playerContext.moveSelectedTo(
|
||||
sourceItems,
|
||||
args.edge,
|
||||
droppedOnUniqueId,
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case DragTarget.SONG: {
|
||||
const sourceItems = (args.source.item || []) as Song[];
|
||||
if (sourceItems.length > 0) {
|
||||
props.playerContext.addToQueueByData(sourceItems, {
|
||||
edge: args.edge,
|
||||
uniqueId: droppedOnUniqueId,
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle PLAYLIST_SONG reordering
|
||||
// Only allow drops when drag is started from the reorder handle
|
||||
if (
|
||||
args.self.itemType === LibraryItem.PLAYLIST_SONG &&
|
||||
args.source.itemType === LibraryItem.PLAYLIST_SONG &&
|
||||
args.source.metadata?.fromReorderHandle === true &&
|
||||
playlistId
|
||||
) {
|
||||
const sourceItems = (args.source.item || []) as any[];
|
||||
const targetItem = item as any;
|
||||
|
||||
if (
|
||||
sourceItems.length > 0 &&
|
||||
args.edge &&
|
||||
(args.edge === 'top' || args.edge === 'bottom') &&
|
||||
targetItem
|
||||
) {
|
||||
// Emit event to reorder playlist songs
|
||||
eventEmitter.emit('PLAYLIST_REORDER', {
|
||||
edge: args.edge,
|
||||
playlistId,
|
||||
sourceIds: args.source.id,
|
||||
targetId: targetItem.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (props.internalState) {
|
||||
props.internalState.setDragging([]);
|
||||
}
|
||||
|
||||
return;
|
||||
},
|
||||
},
|
||||
isEnabled: shouldEnableDrag,
|
||||
const { dragRef, isDraggedOver, isDragging } = useItemDragDropState({
|
||||
enableDrag: !!props.enableDrag,
|
||||
internalState: props.internalState,
|
||||
isDataRow,
|
||||
item,
|
||||
itemType: props.itemType,
|
||||
playerContext: props.playerContext,
|
||||
playlistId,
|
||||
});
|
||||
|
||||
const itemRowId =
|
||||
item && typeof item === 'object' && 'id' in item && props.internalState
|
||||
? props.internalState.extractRowId(item)
|
||||
: undefined;
|
||||
const isDraggingState = useItemDraggingState(
|
||||
props.internalState,
|
||||
itemRowId ||
|
||||
(item && typeof item === 'object' && 'id' in item ? (item as any).id : undefined),
|
||||
);
|
||||
const isDragging = props.internalState ? isDraggingState : isDraggingLocal;
|
||||
|
||||
const controls = props.controls;
|
||||
|
||||
const dragProps = {
|
||||
@@ -583,6 +328,37 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const ItemTableListColumn = memo(ItemTableListColumnBase, (prevProps, nextProps) => {
|
||||
const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
|
||||
const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
|
||||
|
||||
return (
|
||||
prevProps.rowIndex === nextProps.rowIndex &&
|
||||
prevProps.columnIndex === nextProps.columnIndex &&
|
||||
prevProps.data === nextProps.data &&
|
||||
prevProps.columns === nextProps.columns &&
|
||||
prevProps.style === nextProps.style &&
|
||||
prevProps.columnType === nextProps.columnType &&
|
||||
prevProps.itemType === nextProps.itemType &&
|
||||
prevProps.enableHeader === nextProps.enableHeader &&
|
||||
prevProps.enableDrag === nextProps.enableDrag &&
|
||||
prevProps.groups === nextProps.groups &&
|
||||
prevProps.groupHeaderInfoByRowIndex === nextProps.groupHeaderInfoByRowIndex &&
|
||||
prevProps.pinnedLeftColumnCount === nextProps.pinnedLeftColumnCount &&
|
||||
prevProps.pinnedLeftColumnWidths === nextProps.pinnedLeftColumnWidths &&
|
||||
prevProps.size === nextProps.size &&
|
||||
prevProps.enableAlternateRowColors === nextProps.enableAlternateRowColors &&
|
||||
prevProps.enableHorizontalBorders === nextProps.enableHorizontalBorders &&
|
||||
prevProps.enableVerticalBorders === nextProps.enableVerticalBorders &&
|
||||
prevProps.enableRowHoverHighlight === nextProps.enableRowHoverHighlight &&
|
||||
prevProps.enableSelection === nextProps.enableSelection &&
|
||||
prevProps.enableColumnResize === nextProps.enableColumnResize &&
|
||||
prevProps.enableColumnReorder === nextProps.enableColumnReorder &&
|
||||
prevProps.cellPadding === nextProps.cellPadding &&
|
||||
prevItem === nextItem
|
||||
);
|
||||
});
|
||||
|
||||
const NonMutedColumns = [TableColumn.TITLE, TableColumn.TITLE_ARTIST, TableColumn.TITLE_COMBINED];
|
||||
|
||||
export const TableColumnTextContainer = (
|
||||
|
||||
Reference in New Issue
Block a user