59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import type { ICellRendererParams } from '@ag-grid-community/core';
|
|
import { generatePath } from 'react-router';
|
|
import { Link } from 'react-router-dom';
|
|
import type { AlbumArtist, Artist } from '/@/renderer/api/types';
|
|
import { Text } from '/@/renderer/components/text';
|
|
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
|
|
import { AppRoute } from '/@/renderer/router/routes';
|
|
import { Skeleton } from '/@/renderer/components/skeleton';
|
|
|
|
export const ArtistCell = ({ value, data }: ICellRendererParams) => {
|
|
if (value === undefined) {
|
|
return (
|
|
<CellContainer position="left">
|
|
<Skeleton
|
|
height="1rem"
|
|
width="80%"
|
|
/>
|
|
</CellContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<CellContainer position="left">
|
|
<Text
|
|
$secondary
|
|
overflow="hidden"
|
|
size="sm"
|
|
>
|
|
{value?.map((item: Artist | AlbumArtist, index: number) => (
|
|
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
|
{index > 0 && (
|
|
<Text
|
|
$link
|
|
$secondary
|
|
size="sm"
|
|
style={{ display: 'inline-block' }}
|
|
>
|
|
,
|
|
</Text>
|
|
)}{' '}
|
|
<Text
|
|
$link
|
|
$secondary
|
|
component={Link}
|
|
overflow="hidden"
|
|
size="sm"
|
|
to={generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, {
|
|
artistId: item.id,
|
|
})}
|
|
>
|
|
{item.name || '—'}
|
|
</Text>
|
|
</React.Fragment>
|
|
))}
|
|
</Text>
|
|
</CellContainer>
|
|
);
|
|
};
|