vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

remove memoization from individual table columns

Browse Source 
- causes issues with drag/drop state
This commit is contained in:
jeffvli
2026-01-23 20:43:28 -08:00
parent 819945dcba
commit a50984d2cb
24 changed files with 89 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/columns/actions-column.tsx
+1 -16
View File
@@ -1,5 +1,3 @@
import { memo } from 'react';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -7,7 +5,7 @@ import {
import { ItemListItem } from '/@/renderer/components/item-list/types';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
const ActionsColumnBase = (props: ItemTableListInnerColumn) => {
export const ActionsColumn = (props: ItemTableListInnerColumn) => {
const row: any = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -53,16 +51,3 @@ const ActionsColumnBase = (props: ItemTableListInnerColumn) => {
return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
};
export const ActionsColumn = memo(ActionsColumnBase, (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 &&
prevItem === nextItem
);
});
src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx
+1 -12
View File
@@ -1,5 +1,4 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './album-artists-column.module.css';
@@ -54,14 +53,4 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevProps.size === nextProps.size
);
});
export { AlbumArtistsColumnMemo as AlbumArtistsColumn };
export { AlbumArtistsColumn };
src/renderer/components/item-list/item-table-list/columns/album-column.tsx
+2 -16
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { memo, useMemo } from 'react';
import { useMemo } from 'react';
import { generatePath, Link } from 'react-router';
import styles from './album-column.module.css';
@@ -75,18 +75,4 @@ const AlbumColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const AlbumColumnMemo = memo(AlbumColumn, (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.size === nextProps.size &&
prevItem === nextItem
);
});
export { AlbumColumnMemo as AlbumColumn };
export { AlbumColumn };
src/renderer/components/item-list/item-table-list/columns/artists-column.tsx
+2 -13
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { Fragment, memo, useMemo } from 'react';
import { Fragment, useMemo } from 'react';
import { generatePath, Link } from 'react-router';
import styles from './album-artists-column.module.css';
@@ -109,15 +109,4 @@ const BaseArtistsColumn = (props: ItemTableListInnerColumn) => {
}
};
const ArtistsColumnMemo = memo(BaseArtistsColumn, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevProps.itemType === nextProps.itemType &&
prevProps.size === nextProps.size
);
});
export { ArtistsColumnMemo as ArtistsColumn };
export { BaseArtistsColumn as ArtistsColumn };
src/renderer/components/item-list/item-table-list/columns/composer-column.tsx
+1 -18
View File
@@ -1,5 +1,4 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './composer-column.module.css';
@@ -12,7 +11,7 @@ import {
import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
import { Album, RelatedArtist, Song } from '/@/shared/types/domain-types';
const ComposerColumn = (props: ItemTableListInnerColumn) => {
export const ComposerColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const item = rowItem as Album | Song | undefined;
@@ -44,19 +43,3 @@ const ComposerColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const ComposerColumnMemo = memo(ComposerColumn, (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.size === nextProps.size &&
prevItem === nextItem
);
});
export { ComposerColumnMemo as ComposerColumn };
src/renderer/components/item-list/item-table-list/columns/date-column.tsx
+4 -26
View File
@@ -1,4 +1,4 @@
import { memo, useMemo } from 'react';
import { useMemo } from 'react';
import {
ColumnNullFallback,
@@ -62,14 +62,7 @@ const DateColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const DateColumn = memo(DateColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
export const DateColumn = DateColumnBase;
const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -152,15 +145,7 @@ const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const AbsoluteDateColumn = memo(AbsoluteDateColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevProps.type === nextProps.type
);
});
export const AbsoluteDateColumn = AbsoluteDateColumnBase;
const RelativeDateColumnBase = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -193,11 +178,4 @@ const RelativeDateColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const RelativeDateColumn = memo(RelativeDateColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
export const RelativeDateColumn = RelativeDateColumnBase;
src/renderer/components/item-list/item-table-list/columns/default-column.tsx
+1 -12
View File
@@ -1,5 +1,3 @@
import { memo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -7,7 +5,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
const DefaultColumnBase = (props: ItemTableListInnerColumn) => {
export const DefaultColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: any | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
@@ -21,12 +19,3 @@ const DefaultColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const DefaultColumn = memo(DefaultColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
src/renderer/components/item-list/item-table-list/columns/duration-column.tsx
+2 -9
View File
@@ -1,5 +1,5 @@
import formatDuration from 'format-duration';
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import {
ColumnNullFallback,
@@ -27,11 +27,4 @@ const DurationColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const DurationColumn = React.memo(DurationColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
export const DurationColumn = DurationColumnBase;
src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
+1 -19
View File
@@ -1,5 +1,3 @@
import { memo } from 'react';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -9,7 +7,7 @@ import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutatio
import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
const FavoriteColumnBase = (props: ItemTableListInnerColumn) => {
export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: boolean | undefined = rowItem?.[props.columns[props.columnIndex].id];
@@ -57,19 +55,3 @@ const FavoriteColumnBase = (props: ItemTableListInnerColumn) => {
return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
};
export const FavoriteColumn = memo(FavoriteColumnBase, (prevProps, nextProps) => {
const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
const prevFavorite = prevItem?.[prevProps.columns[prevProps.columnIndex].id];
const nextFavorite = nextItem?.[nextProps.columns[nextProps.columnIndex].id];
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevItem === nextItem &&
prevFavorite === nextFavorite
);
});
src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx
+2 -11
View File
@@ -1,4 +1,4 @@
import { memo, useMemo } from 'react';
import { useMemo } from 'react';
import { generatePath, Link } from 'react-router';
import styles from './genre-badge-column.module.css';
@@ -60,13 +60,4 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const GenreColumnMemo = memo(GenreBadgeColumn, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
export { GenreColumnMemo as GenreBadgeColumn };
export { GenreBadgeColumn };
src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
+2 -12
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { Fragment, memo, useMemo } from 'react';
import { Fragment, useMemo } from 'react';
import { generatePath, Link } from 'react-router';
import styles from './genre-column.module.css';
@@ -64,14 +64,4 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const GenreColumnMemo = memo(GenreColumn, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevProps.size === nextProps.size
);
});
export { GenreColumnMemo as GenreColumn };
export { GenreColumn };
src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+2 -15
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { memo, useState } from 'react';
import { useState } from 'react';
import styles from './image-column.module.css';
@@ -137,17 +137,4 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
);
};
export const ImageColumn = memo(ImageColumnBase, (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.itemType === nextProps.itemType &&
prevProps.size === nextProps.size &&
prevItem === nextItem
);
});
export const ImageColumn = ImageColumnBase;
src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx
+1 -12
View File
@@ -1,5 +1,3 @@
import { memo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -7,7 +5,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
const NumericColumnBase = (props: ItemTableListInnerColumn) => {
export const NumericColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: number | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
@@ -21,12 +19,3 @@ const NumericColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const NumericColumn = memo(NumericColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
src/renderer/components/item-list/item-table-list/columns/path-column.tsx
+1 -12
View File
@@ -1,5 +1,3 @@
import { memo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonVariable,
@@ -7,7 +5,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
const PathColumnBase = (props: ItemTableListInnerColumn) => {
export const PathColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
@@ -25,12 +23,3 @@ const PathColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const PathColumn = memo(PathColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx
+2 -15
View File
@@ -1,4 +1,4 @@
import { memo, useCallback } from 'react';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
@@ -364,17 +364,4 @@ const PlaylistReorderColumnBase = (props: ItemTableListInnerColumn) => {
);
};
export const PlaylistReorderColumn = memo(PlaylistReorderColumnBase, (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.itemType === nextProps.itemType &&
prevProps.enableHeader === nextProps.enableHeader &&
prevItem === nextItem
);
});
export const PlaylistReorderColumn = PlaylistReorderColumnBase;
src/renderer/components/item-list/item-table-list/columns/rating-column.tsx
+1 -19
View File
@@ -1,5 +1,3 @@
import { memo } from 'react';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -8,7 +6,7 @@ import { ItemListItem } from '/@/renderer/components/item-list/types';
import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
import { Rating } from '/@/shared/components/rating/rating';
const RatingColumnBase = (props: ItemTableListInnerColumn) => {
export const RatingColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: null | number | undefined = rowItem?.[props.columns[props.columnIndex].id];
@@ -42,19 +40,3 @@ const RatingColumnBase = (props: ItemTableListInnerColumn) => {
return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
};
export const RatingColumn = memo(RatingColumnBase, (prevProps, nextProps) => {
const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
const prevRating = prevItem?.[prevProps.columns[prevProps.columnIndex].id];
const nextRating = nextItem?.[nextProps.columns[nextProps.columnIndex].id];
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevItem === nextItem &&
prevRating === nextRating
);
});
src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx
+25 -39
View File
@@ -1,5 +1,4 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './row-index-column.module.css';
@@ -32,18 +31,7 @@ const RowIndexColumnBase = (props: ItemTableListInnerColumn) => {
}
};
export const RowIndexColumn = memo(RowIndexColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevProps.itemType === nextProps.itemType &&
prevProps.enableExpansion === nextProps.enableExpansion &&
prevProps.enableHeader === nextProps.enableHeader &&
prevProps.startRowIndex === nextProps.startRowIndex
);
});
export const RowIndexColumn = RowIndexColumnBase;
const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
const {
@@ -125,30 +113,28 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
);
};
const InnerQueueSongRowIndexColumn = memo(
(
props: ItemTableListInnerColumn & {
adjustedRowIndex: number;
isActive: boolean;
isPlaying: boolean;
},
) => {
return (
<TableColumnTextContainer {...props}>
{props.isActive ? (
props.isPlaying ? (
<Flex>
<Icon fill="primary" icon="mediaPlay" />
</Flex>
) : (
<Flex>
<Icon fill="primary" icon="mediaPause" />
</Flex>
)
) : (
props.adjustedRowIndex
)}
</TableColumnTextContainer>
);
const InnerQueueSongRowIndexColumn = (
props: ItemTableListInnerColumn & {
adjustedRowIndex: number;
isActive: boolean;
isPlaying: boolean;
},
);
) => {
return (
<TableColumnTextContainer {...props}>
{props.isActive ? (
props.isPlaying ? (
<Flex>
<Icon fill="primary" icon="mediaPlay" />
</Flex>
) : (
<Flex>
<Icon fill="primary" icon="mediaPause" />
</Flex>
)
) : (
props.adjustedRowIndex
)}
</TableColumnTextContainer>
);
};
src/renderer/components/item-list/item-table-list/columns/size-column.tsx
+2 -9
View File
@@ -1,4 +1,4 @@
import { memo, useMemo } from 'react';
import { useMemo } from 'react';
import {
ColumnNullFallback,
@@ -27,11 +27,4 @@ const SizeColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const SizeColumn = memo(SizeColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
export const SizeColumn = SizeColumnBase;
src/renderer/components/item-list/item-table-list/columns/text-column.tsx
+1 -12
View File
@@ -1,5 +1,4 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './text-column.module.css';
@@ -10,7 +9,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
const TextColumnBase = (props: ItemTableListInnerColumn) => {
export const TextColumn = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
@@ -34,13 +33,3 @@ const TextColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const TextColumn = memo(TextColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns &&
prevProps.size === nextProps.size
);
});
src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx
+2 -15
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { CSSProperties, memo } from 'react';
import { CSSProperties } from 'react';
import { Link } from 'react-router';
import styles from './title-artist-column.module.css';
@@ -208,17 +208,4 @@ const TitleArtistColumnBase = (props: ItemTableListInnerColumn) => {
}
};
export const TitleArtistColumn = memo(TitleArtistColumnBase, (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.itemType === nextProps.itemType &&
prevProps.size === nextProps.size &&
prevItem === nextItem
);
});
export const TitleArtistColumn = TitleArtistColumnBase;
src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+1 -15
View File
@@ -1,5 +1,4 @@
import clsx from 'clsx';
import { memo } from 'react';
import { Link } from 'react-router';
import styles from './title-column.module.css';
@@ -29,20 +28,7 @@ const TitleColumnBase = (props: ItemTableListInnerColumn) => {
}
};
export const TitleColumn = memo(TitleColumnBase, (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.itemType === nextProps.itemType &&
prevProps.size === nextProps.size &&
prevItem === nextItem
);
});
export const TitleColumn = TitleColumnBase;
function DefaultTitleColumn(props: ItemTableListInnerColumn) {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+1 -16
View File
@@ -361,8 +361,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
return <ColumnSkeletonVariable {...props} />;
};
import { memo } from 'react';
const TitleCombinedColumnBase = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
@@ -377,17 +375,4 @@ const TitleCombinedColumnBase = (props: ItemTableListInnerColumn) => {
}
};
export const TitleCombinedColumn = memo(TitleCombinedColumnBase, (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.itemType === nextProps.itemType &&
prevProps.size === nextProps.size &&
prevItem === nextItem
);
});
export const TitleCombinedColumn = TitleCombinedColumnBase;
src/renderer/components/item-list/item-table-list/columns/year-column.tsx
+2 -13
View File
@@ -1,4 +1,4 @@
import { memo, useMemo } from 'react';
import { useMemo } from 'react';
import {
ColumnNullFallback,
@@ -42,15 +42,4 @@ const YearColumnBase = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const YearColumn = memo(YearColumnBase, (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 &&
prevItem === nextItem
);
});
export const YearColumn = YearColumnBase;
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+29 -5
View File
@@ -446,14 +446,16 @@ const VirtualizedTableGrid = ({
/>
);
},
[pinnedLeftColumnCount, CellComponent],
// eslint-disable-next-line react-hooks/exhaustive-deps
[pinnedLeftColumnCount, CellComponent, featureFlags, calculatedColumnWidths],
);
const PinnedColumnCell = useCallback(
(cellProps: CellComponentProps & TableItemProps) => {
return <CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />;
},
[pinnedRowCount, CellComponent],
// eslint-disable-next-line react-hooks/exhaustive-deps
[pinnedRowCount, CellComponent, featureFlags, calculatedColumnWidths],
);
const PinnedRightColumnCell = useCallback(
@@ -466,7 +468,15 @@ const VirtualizedTableGrid = ({
/>
);
},
[pinnedLeftColumnCount, pinnedRowCount, totalColumnCount, CellComponent],
// eslint-disable-next-line react-hooks/exhaustive-deps
[
pinnedLeftColumnCount,
pinnedRowCount,
totalColumnCount,
CellComponent,
featureFlags,
calculatedColumnWidths,
],
);
const PinnedRightIntersectionCell = useCallback(
@@ -478,7 +488,14 @@ const VirtualizedTableGrid = ({
/>
);
},
[pinnedLeftColumnCount, totalColumnCount, CellComponent],
// eslint-disable-next-line react-hooks/exhaustive-deps
[
pinnedLeftColumnCount,
totalColumnCount,
CellComponent,
featureFlags,
calculatedColumnWidths,
],
);
const RowCell = useCallback(
@@ -491,7 +508,14 @@ const VirtualizedTableGrid = ({
/>
);
},
[pinnedLeftColumnCount, pinnedRowCount, CellComponent],
// eslint-disable-next-line react-hooks/exhaustive-deps
[
pinnedLeftColumnCount,
pinnedRowCount,
CellComponent,
featureFlags,
calculatedColumnWidths,
],
);
const handleOnCellsRendered = useCallback(