mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
mbrucedogs 2025-07-21 10:01:52 -05:00
parent 318707b990
commit fb2a06129d
1 changed files with 1 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/common/ListItem.tsx
View File

@ -1,7 +1,6 @@
import React, { forwardRef, useMemo } from 'react'; import React, { forwardRef } from 'react';
import { IonItem, IonLabel, IonIcon } from '@ionic/react'; import { IonItem, IonLabel, IonIcon } from '@ionic/react';
import { chevronForward } from 'ionicons/icons'; import { chevronForward } from 'ionicons/icons';
import type { Song } from '../../types';
import { NumberDisplay } from './NumberDisplay'; import { NumberDisplay } from './NumberDisplay';
// Generic ListItem interface for different types of data // Generic ListItem interface for different types of data
@ -22,27 +21,6 @@ interface GenericListItemProps {
showSeparator?: boolean; showSeparator?: boolean;
} }
// Song-specific ListItem interface
interface SongListItemProps {
song: Song;
onClick?: () => void;
showPath?: boolean;
showCount?: boolean;
showChevron?: boolean;
className?: string;
children?: React.ReactNode;
}
// Utility function to extract filename from path
const extractFilename = (path: string): string => {
if (!path) return '';
// Handle different path separators (Windows backslash, Unix forward slash)
const normalizedPath = path.replace(/\\/g, '/');
const parts = normalizedPath.split('/');
return parts[parts.length - 1] || '';
};
// Generic ListItem component for different types of data // Generic ListItem component for different types of data
export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListItemProps>(({ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListItemProps>(({
primaryText, primaryText,
@ -104,89 +82,6 @@ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListIte
); );
})); }));
// Song-specific ListItem component
export const SongListItem = React.memo(forwardRef<HTMLIonItemElement, SongListItemProps>(({
song,
onClick,
showPath = false,
showCount = false,
showChevron = false,
className = '',
children
}, ref) => {
// Memoize the filename extraction
const filename = useMemo(() => extractFilename(song.path), [song.path]);
return (
<IonItem
ref={ref}
className={className}
onClick={onClick}
button={!!onClick}
>
<IonLabel>
<div
className="ion-text-bold"
style={{
fontWeight: 'bold',
fontSize: '1rem',
color: 'var(--ion-color-dark)',
marginBottom: '4px'
}}
>
{song.title}
</div>
<div
className="ion-text-italic ion-color-medium"
style={{
fontSize: '0.875rem',
fontStyle: 'italic',
color: 'var(--ion-color-medium)',
marginBottom: '4px'
}}
>
{song.artist}
</div>
{/* Show filename if showPath is true */}
{showPath && song.path && (
<div
className="ion-text-sm ion-color-medium"
style={{
fontSize: '0.75rem',
color: 'var(--ion-color-medium)'
}}
>
{filename}
</div>
)}
{/* Show play count if showCount is true */}
{showCount && song.count && (
<div
className="ion-text-sm ion-color-medium"
style={{
fontSize: '0.75rem',
color: 'var(--ion-color-medium)'
}}
>
Played {song.count} times
</div>
)}
</IonLabel>
{children}
{showChevron && (
<IonIcon
slot="end"
icon={chevronForward}
className="ion-color-medium"
/>
)}
</IonItem>
);
}));
ListItem.displayName = 'ListItem'; ListItem.displayName = 'ListItem';
SongListItem.displayName = 'SongListItem';
export default ListItem; export default ListItem;