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

add more memoization to the ItemTableList

Browse Source
This commit is contained in:
jeffvli
2026-01-21 12:40:38 -08:00
parent f4072c183b
commit f6012d3b03
29 changed files with 955 additions and 391 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
+16 -1
View File
@@ -1,3 +1,5 @@
import { memo } from 'react';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -5,7 +7,7 @@ import {
import { ItemListItem } from '/@/renderer/components/item-list/types';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
export const ActionsColumn = (props: ItemTableListInnerColumn) => {
const ActionsColumnBase = (props: ItemTableListInnerColumn) => {
const row: any = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -51,3 +53,16 @@ export const ActionsColumn = (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
+9 -1
View File
@@ -54,6 +54,14 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn);
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 };
src/renderer/components/item-list/item-table-list/columns/album-column.tsx
+13 -1
View File
@@ -75,6 +75,18 @@ const AlbumColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const AlbumColumnMemo = memo(AlbumColumn);
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 };
src/renderer/components/item-list/item-table-list/columns/artists-column.tsx
+10 -1
View File
@@ -109,6 +109,15 @@ const BaseArtistsColumn = (props: ItemTableListInnerColumn) => {
}
};
const ArtistsColumnMemo = memo(BaseArtistsColumn);
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 };
src/renderer/components/item-list/item-table-list/columns/composer-column.tsx
+13 -1
View File
@@ -45,6 +45,18 @@ const ComposerColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const ComposerColumnMemo = memo(ComposerColumn);
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
+109 -40
View File
@@ -1,3 +1,5 @@
import { memo, useMemo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -29,15 +31,25 @@ const getDateTooltipLabel = (utcString: string) => {
);
};
export const DateColumn = (props: ItemTableListInnerColumn) => {
const DateColumnBase = (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];
const { formattedDate, tooltipLabel } = useMemo(() => {
if (typeof row === 'string' && row) {
return {
formattedDate: formatDateAbsolute(row),
tooltipLabel: getDateTooltipLabel(row),
};
}
return { formattedDate: null, tooltipLabel: null };
}, [row]);
if (typeof row === 'string' && row) {
return (
<TableColumnTextContainer {...props}>
<Tooltip label={getDateTooltipLabel(row)} multiline={false}>
<span>{formatDateAbsolute(row)}</span>
<Tooltip label={tooltipLabel} multiline={false}>
<span>{formattedDate}</span>
</Tooltip>
</TableColumnTextContainer>
);
@@ -50,42 +62,70 @@ export const DateColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const AbsoluteDateColumn = (props: ItemTableListInnerColumn) => {
export const DateColumn = memo(DateColumnBase, (prevProps, nextProps) => {
return (
prevProps.rowIndex === nextProps.rowIndex &&
prevProps.columnIndex === nextProps.columnIndex &&
prevProps.data === nextProps.data &&
prevProps.columns === nextProps.columns
);
});
const AbsoluteDateColumnBase = (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];
const releaseDateContent = useMemo(() => {
if (props.type === TableColumn.RELEASE_DATE) {
const item = rowItem as any;
if (item && 'releaseDate' in item && item.releaseDate) {
const releaseDate = item.releaseDate;
const originalDate =
'originalDate' in item && item.originalDate && item.originalDate !== releaseDate
? item.originalDate
: null;
if (originalDate) {
const formattedOriginalDate = formatDateAbsoluteUTC(originalDate);
const formattedReleaseDate = formatDateAbsoluteUTC(releaseDate);
const displayText = `${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
return {
displayText,
tooltipLabel: getDateTooltipLabel(releaseDate),
};
}
if (typeof releaseDate === 'string' && releaseDate) {
return {
displayText: formatDateAbsoluteUTC(releaseDate),
tooltipLabel: getDateTooltipLabel(releaseDate),
};
}
}
}
return null;
}, [props.type, rowItem]);
const { formattedDate, tooltipLabel } = useMemo(() => {
if (typeof row === 'string' && row) {
return {
formattedDate: formatDateAbsoluteUTC(row),
tooltipLabel: getDateTooltipLabel(row),
};
}
return { formattedDate: null, tooltipLabel: null };
}, [row]);
if (props.type === TableColumn.RELEASE_DATE) {
const item = rowItem as any;
if (item && 'releaseDate' in item && item.releaseDate) {
const releaseDate = item.releaseDate;
const originalDate =
'originalDate' in item && item.originalDate && item.originalDate !== releaseDate
? item.originalDate
: null;
if (originalDate) {
const formattedOriginalDate = formatDateAbsoluteUTC(originalDate);
const formattedReleaseDate = formatDateAbsoluteUTC(releaseDate);
const displayText = `${formattedOriginalDate}${SEPARATOR_STRING}${formattedReleaseDate}`;
return (
<TableColumnTextContainer {...props}>
<Tooltip label={getDateTooltipLabel(releaseDate)} multiline={false}>
<span>{displayText}</span>
</Tooltip>
</TableColumnTextContainer>
);
}
if (typeof releaseDate === 'string' && releaseDate) {
return (
<TableColumnTextContainer {...props}>
<Tooltip label={getDateTooltipLabel(releaseDate)} multiline={false}>
<span>{formatDateAbsoluteUTC(releaseDate)}</span>
</Tooltip>
</TableColumnTextContainer>
);
}
if (releaseDateContent) {
return (
<TableColumnTextContainer {...props}>
<Tooltip label={releaseDateContent.tooltipLabel} multiline={false}>
<span>{releaseDateContent.displayText}</span>
</Tooltip>
</TableColumnTextContainer>
);
}
if (row === null) {
@@ -98,8 +138,8 @@ export const AbsoluteDateColumn = (props: ItemTableListInnerColumn) => {
if (typeof row === 'string' && row) {
return (
<TableColumnTextContainer {...props}>
<Tooltip label={getDateTooltipLabel(row)} multiline={false}>
<span>{formatDateAbsoluteUTC(row)}</span>
<Tooltip label={tooltipLabel} multiline={false}>
<span>{formattedDate}</span>
</Tooltip>
</TableColumnTextContainer>
);
@@ -112,15 +152,35 @@ export const AbsoluteDateColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonFixed {...props} />;
};
export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
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
);
});
const RelativeDateColumnBase = (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];
const { formattedDate, tooltipLabel } = useMemo(() => {
if (typeof row === 'string') {
return {
formattedDate: formatDateRelative(row),
tooltipLabel: getDateTooltipLabel(row),
};
}
return { formattedDate: null, tooltipLabel: null };
}, [row]);
if (typeof row === 'string') {
return (
<TableColumnTextContainer {...props}>
<Tooltip label={getDateTooltipLabel(row)} multiline={false}>
<span>{formatDateRelative(row)}</span>
<Tooltip label={tooltipLabel} multiline={false}>
<span>{formattedDate}</span>
</Tooltip>
</TableColumnTextContainer>
);
@@ -132,3 +192,12 @@ export const RelativeDateColumn = (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
);
});
src/renderer/components/item-list/item-table-list/columns/default-column.tsx
+12 -1
View File
@@ -1,3 +1,5 @@
import { memo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -5,7 +7,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
export const DefaultColumn = (props: ItemTableListInnerColumn) => {
const DefaultColumnBase = (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];
@@ -19,3 +21,12 @@ export const DefaultColumn = (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
+16 -4
View File
@@ -1,4 +1,5 @@
import formatDuration from 'format-duration';
import React, { useMemo } from 'react';
import {
ColumnNullFallback,
@@ -7,14 +8,16 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
export const DurationColumn = (props: ItemTableListInnerColumn) => {
const DurationColumnBase = (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];
const formattedDuration = useMemo(() => {
return typeof row === 'number' ? formatDuration(row) : null;
}, [row]);
if (typeof row === 'number') {
return (
<TableColumnTextContainer {...props}>{formatDuration(row)}</TableColumnTextContainer>
);
return <TableColumnTextContainer {...props}>{formattedDuration}</TableColumnTextContainer>;
}
if (row === null) {
@@ -23,3 +26,12 @@ export const DurationColumn = (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
);
});
src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
+19 -1
View File
@@ -1,3 +1,5 @@
import { memo } from 'react';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -7,7 +9,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';
export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
const FavoriteColumnBase = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: boolean | undefined = rowItem?.[props.columns[props.columnIndex].id];
@@ -55,3 +57,19 @@ export const FavoriteColumn = (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
+8 -1
View File
@@ -60,6 +60,13 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const GenreColumnMemo = memo(GenreBadgeColumn);
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 };
src/renderer/components/item-list/item-table-list/columns/genre-column.tsx
+9 -1
View File
@@ -64,6 +64,14 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const GenreColumnMemo = memo(GenreColumn);
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 };
src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+17 -2
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useState } from 'react';
import { memo, useState } from 'react';
import styles from './image-column.module.css';
@@ -19,7 +19,7 @@ import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Folder, LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
export const ImageColumn = (props: ItemTableListInnerColumn) => {
const ImageColumnBase = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: string | undefined = rowItem?.id;
const item = rowItem as any;
@@ -136,3 +136,18 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
</TableColumnContainer>
);
};
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
);
});
src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx
+12 -1
View File
@@ -1,3 +1,5 @@
import { memo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -5,7 +7,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
export const NumericColumn = (props: ItemTableListInnerColumn) => {
const NumericColumnBase = (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];
@@ -19,3 +21,12 @@ export const NumericColumn = (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
+12 -1
View File
@@ -1,3 +1,5 @@
import { memo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonVariable,
@@ -5,7 +7,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
export const PathColumn = (props: ItemTableListInnerColumn) => {
const PathColumnBase = (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];
@@ -23,3 +25,12 @@ export const PathColumn = (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
+17 -2
View File
@@ -1,4 +1,4 @@
import { useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
@@ -19,7 +19,7 @@ import { useLongPress } from '/@/shared/hooks/use-long-press';
import { LibraryItem } from '/@/shared/types/domain-types';
import { DragOperation, DragTarget, DragTargetMap } from '/@/shared/types/drag-and-drop';
export const PlaylistReorderColumn = (props: ItemTableListInnerColumn) => {
const PlaylistReorderColumnBase = (props: ItemTableListInnerColumn) => {
const { t } = useTranslation();
const { playlistId } = useParams() as { playlistId?: string };
const isHeaderEnabled = !!props.enableHeader;
@@ -363,3 +363,18 @@ export const PlaylistReorderColumn = (props: ItemTableListInnerColumn) => {
</TableColumnContainer>
);
};
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
);
});
src/renderer/components/item-list/item-table-list/columns/rating-column.tsx
+19 -1
View File
@@ -1,3 +1,5 @@
import { memo } from 'react';
import {
ItemTableListInnerColumn,
TableColumnContainer,
@@ -6,7 +8,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';
export const RatingColumn = (props: ItemTableListInnerColumn) => {
const RatingColumnBase = (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];
@@ -40,3 +42,19 @@ export const RatingColumn = (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
+14 -1
View File
@@ -18,7 +18,7 @@ import { Text } from '/@/shared/components/text/text';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
import { PlayerStatus } from '/@/shared/types/types';
export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
const RowIndexColumnBase = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
@@ -32,6 +32,19 @@ export const RowIndexColumn = (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
);
});
const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
const {
controls,
src/renderer/components/item-list/item-table-list/columns/size-column.tsx
+17 -4
View File
@@ -1,3 +1,5 @@
import { memo, useMemo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -6,14 +8,16 @@ import {
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
import { formatSizeString } from '/@/renderer/utils/format';
export const SizeColumn = (props: ItemTableListInnerColumn) => {
const SizeColumnBase = (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];
const formattedSize = useMemo(() => {
return typeof row === 'number' ? formatSizeString(row) : null;
}, [row]);
if (typeof row === 'number') {
return (
<TableColumnTextContainer {...props}>{formatSizeString(row)}</TableColumnTextContainer>
);
return <TableColumnTextContainer {...props}>{formattedSize}</TableColumnTextContainer>;
}
if (row === null) {
@@ -22,3 +26,12 @@ export const SizeColumn = (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
);
});
src/renderer/components/item-list/item-table-list/columns/text-column.tsx
+12 -1
View File
@@ -1,4 +1,5 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './text-column.module.css';
@@ -9,7 +10,7 @@ import {
TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
export const TextColumn = (props: ItemTableListInnerColumn) => {
const TextColumnBase = (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];
@@ -33,3 +34,13 @@ export const TextColumn = (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
+17 -2
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { CSSProperties } from 'react';
import { CSSProperties, memo } from 'react';
import { Link } from 'react-router';
import styles from './title-artist-column.module.css';
@@ -194,7 +194,7 @@ export const QueueSongTitleArtistColumn = (props: ItemTableListInnerColumn) => {
return <ColumnSkeletonVariable {...props} />;
};
export const TitleArtistColumn = (props: ItemTableListInnerColumn) => {
const TitleArtistColumnBase = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
@@ -207,3 +207,18 @@ export const TitleArtistColumn = (props: ItemTableListInnerColumn) => {
return <DefaultTitleArtistColumn {...props} />;
}
};
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
);
});
src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+17 -1
View File
@@ -1,4 +1,5 @@
import clsx from 'clsx';
import { memo } from 'react';
import { Link } from 'react-router';
import styles from './title-column.module.css';
@@ -14,7 +15,7 @@ import { useIsActiveRow } from '/@/renderer/components/item-list/item-table-list
import { Text } from '/@/shared/components/text/text';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
export const TitleColumn = (props: ItemTableListInnerColumn) => {
const TitleColumnBase = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
@@ -28,6 +29,21 @@ export const TitleColumn = (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
);
});
function DefaultTitleColumn(props: ItemTableListInnerColumn) {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const row: string | undefined = rowItem?.[props.columns[props.columnIndex].id];
src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+18 -1
View File
@@ -361,7 +361,9 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
return <ColumnSkeletonVariable {...props} />;
};
export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => {
import { memo } from 'react';
const TitleCombinedColumnBase = (props: ItemTableListInnerColumn) => {
const { itemType } = props;
switch (itemType) {
@@ -374,3 +376,18 @@ export const TitleCombinedColumn = (props: ItemTableListInnerColumn) => {
return <DefaultTitleCombinedColumn {...props} />;
}
};
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
);
});
src/renderer/components/item-list/item-table-list/columns/year-column.tsx
+32 -16
View File
@@ -1,3 +1,5 @@
import { memo, useMemo } from 'react';
import {
ColumnNullFallback,
ColumnSkeletonFixed,
@@ -6,28 +8,29 @@ import {
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
import { SEPARATOR_STRING } from '/@/shared/api/utils';
export const YearColumn = (props: ItemTableListInnerColumn) => {
const YearColumnBase = (props: ItemTableListInnerColumn) => {
const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
const item = rowItem as any;
if (item && 'releaseYear' in item && item.releaseYear !== null) {
const releaseYear = item.releaseYear;
const originalYear =
'originalYear' in item && item.originalYear !== null ? item.originalYear : null;
const yearDisplay = useMemo(() => {
if (item && 'releaseYear' in item && item.releaseYear !== null) {
const releaseYear = item.releaseYear;
const originalYear =
'originalYear' in item && item.originalYear !== null ? item.originalYear : null;
if (originalYear !== null && originalYear !== releaseYear) {
return (
<TableColumnTextContainer {...props}>
{originalYear}
{SEPARATOR_STRING}
{releaseYear}
</TableColumnTextContainer>
);
}
if (originalYear !== null && originalYear !== releaseYear) {
return `${originalYear}${SEPARATOR_STRING}${releaseYear}`;
}
if (typeof releaseYear === 'number') {
return <TableColumnTextContainer {...props}>{releaseYear}</TableColumnTextContainer>;
if (typeof releaseYear === 'number') {
return releaseYear;
}
}
return null;
}, [item]);
if (yearDisplay !== null) {
return <TableColumnTextContainer {...props}>{yearDisplay}</TableColumnTextContainer>;
}
const row: number | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
@@ -38,3 +41,16 @@ export const YearColumn = (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
);
});