mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
disable single attribute per line
This commit is contained in:
parent
92ed8e20c9
commit
8b141d652c
154 changed files with 390 additions and 1800 deletions
|
|
@ -47,10 +47,7 @@ export const CardControls = ({
|
|||
return (
|
||||
<div className={styles.gridCardControlsContainer}>
|
||||
<div className={styles.bottomControls}>
|
||||
<button
|
||||
className={styles.playButton}
|
||||
onClick={handlePlay}
|
||||
>
|
||||
<button className={styles.playButton} onClick={handlePlay}>
|
||||
<Icon icon="mediaPlay" />
|
||||
</button>
|
||||
<Group gap="xs">
|
||||
|
|
|
|||
|
|
@ -55,14 +55,8 @@ export const PosterCard = ({
|
|||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<Link
|
||||
className={styles.imageContainer}
|
||||
to={path}
|
||||
>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={data?.imageUrl}
|
||||
/>
|
||||
<Link className={styles.imageContainer} to={path}>
|
||||
<Image className={styles.image} src={data?.imageUrl} />
|
||||
<GridCardControls
|
||||
handleFavorite={controls.handleFavorite}
|
||||
handlePlayQueueAdd={controls.handlePlayQueueAdd}
|
||||
|
|
@ -72,30 +66,21 @@ export const PosterCard = ({
|
|||
/>
|
||||
</Link>
|
||||
<div className={styles.detailContainer}>
|
||||
<CardRows
|
||||
data={data}
|
||||
rows={controls.cardRows}
|
||||
/>
|
||||
<CardRows data={data} rows={controls.cardRows} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
key={`placeholder-${uniqueId}-${data.id}`}
|
||||
>
|
||||
<div className={styles.container} key={`placeholder-${uniqueId}-${data.id}`}>
|
||||
<div className={styles.imageContainer}>
|
||||
<Skeleton className={styles.image} />
|
||||
</div>
|
||||
<div className={styles.detailContainer}>
|
||||
<Stack gap="xs">
|
||||
{(controls?.cardRows || []).map((row, index) => (
|
||||
<Skeleton
|
||||
height={14}
|
||||
key={`${index}-${row.arrayProperty}`}
|
||||
/>
|
||||
<Skeleton height={14} key={`${index}-${row.arrayProperty}`} />
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,14 +35,8 @@ export const ContextMenuButton = forwardRef(
|
|||
onClick={props.onClick}
|
||||
ref={ref}
|
||||
>
|
||||
<Group
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
>
|
||||
<Group
|
||||
className={styles.left}
|
||||
gap="md"
|
||||
>
|
||||
<Group justify="space-between" w="100%">
|
||||
<Group className={styles.left} gap="md">
|
||||
{leftIcon}
|
||||
{children}
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -77,11 +77,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
|
|||
className={styles.wrapper}
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}
|
||||
>
|
||||
<AnimatePresence
|
||||
custom={direction}
|
||||
initial={false}
|
||||
mode="popLayout"
|
||||
>
|
||||
<AnimatePresence custom={direction} initial={false} mode="popLayout">
|
||||
{data && (
|
||||
<motion.div
|
||||
animate="animate"
|
||||
|
|
@ -101,10 +97,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
|
|||
/>
|
||||
</div>
|
||||
<div className={styles.infoColumn}>
|
||||
<Stack
|
||||
gap="md"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<Stack gap="md" style={{ width: '100%' }}>
|
||||
<div className={styles.titleWrapper}>
|
||||
<TextTitle
|
||||
fw={900}
|
||||
|
|
@ -117,10 +110,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
|
|||
</div>
|
||||
<div className={styles.titleWrapper}>
|
||||
{currentItem?.albumArtists.slice(0, 1).map((artist) => (
|
||||
<Text
|
||||
fw={600}
|
||||
key={`carousel-artist-${artist.id}`}
|
||||
>
|
||||
<Text fw={600} key={`carousel-artist-${artist.id}`}>
|
||||
{artist.name}
|
||||
</Text>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -60,10 +60,7 @@ const Title = ({ handleNext, handlePrev, label, pagination }: TitleProps) => {
|
|||
{isValidElement(label) ? (
|
||||
label
|
||||
) : (
|
||||
<TextTitle
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
<TextTitle order={3} weight={700}>
|
||||
{label}
|
||||
</TextTitle>
|
||||
)}
|
||||
|
|
@ -280,11 +277,7 @@ export const SwiperGridCarousel = ({
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
className="grid-carousel"
|
||||
gap="md"
|
||||
ref={containerRef as any}
|
||||
>
|
||||
<Stack className="grid-carousel" gap="md" ref={containerRef as any}>
|
||||
{title ? (
|
||||
<Title
|
||||
{...title}
|
||||
|
|
|
|||
|
|
@ -91,11 +91,7 @@ export const NativeScrollArea = forwardRef(
|
|||
{...pageHeaderProps}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={styles.scrollArea}
|
||||
ref={mergedRef}
|
||||
{...props}
|
||||
>
|
||||
<div className={styles.scrollArea} ref={mergedRef} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -99,10 +99,7 @@ export const QueryBuilder = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
gap="sm"
|
||||
ml={`${level * 10}px`}
|
||||
>
|
||||
<Stack gap="sm" ml={`${level * 10}px`}>
|
||||
<Group gap="sm">
|
||||
<Select
|
||||
data={FILTER_GROUP_OPTIONS_DATA}
|
||||
|
|
@ -112,12 +109,7 @@ export const QueryBuilder = ({
|
|||
value={data.type}
|
||||
width="20%"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="add"
|
||||
onClick={handleAddRule}
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
/>
|
||||
<ActionIcon icon="add" onClick={handleAddRule} size="sm" variant="subtle" />
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<ActionIcon
|
||||
|
|
@ -150,24 +142,14 @@ export const QueryBuilder = ({
|
|||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Item
|
||||
isDanger
|
||||
leftSection={
|
||||
<Icon
|
||||
color="error"
|
||||
icon="refresh"
|
||||
/>
|
||||
}
|
||||
leftSection={<Icon color="error" icon="refresh" />}
|
||||
onClick={onResetFilters}
|
||||
>
|
||||
Reset to default
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
isDanger
|
||||
leftSection={
|
||||
<Icon
|
||||
color="error"
|
||||
icon="delete"
|
||||
/>
|
||||
}
|
||||
leftSection={<Icon color="error" icon="delete" />}
|
||||
onClick={onClearFilters}
|
||||
>
|
||||
Clear filters
|
||||
|
|
|
|||
|
|
@ -48,13 +48,7 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
|
|||
/>
|
||||
);
|
||||
case 'date':
|
||||
return (
|
||||
<TextInput
|
||||
onChange={onChange}
|
||||
size="sm"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
return <TextInput onChange={onChange} size="sm" {...props} />;
|
||||
case 'dateRange':
|
||||
return (
|
||||
<>
|
||||
|
|
@ -92,21 +86,9 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
|
|||
/>
|
||||
);
|
||||
case 'playlist':
|
||||
return (
|
||||
<Select
|
||||
data={data}
|
||||
onChange={onChange}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
return <Select data={data} onChange={onChange} {...props} />;
|
||||
case 'string':
|
||||
return (
|
||||
<TextInput
|
||||
onChange={onChange}
|
||||
size="sm"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
return <TextInput onChange={onChange} size="sm" {...props} />;
|
||||
|
||||
default:
|
||||
return <></>;
|
||||
|
|
@ -188,10 +170,7 @@ export const QueryBuilderOption = ({
|
|||
const ml = (level + 1) * 10;
|
||||
|
||||
return (
|
||||
<Group
|
||||
gap="sm"
|
||||
ml={ml}
|
||||
>
|
||||
<Group gap="sm" ml={ml}>
|
||||
<Select
|
||||
data={filters}
|
||||
maxWidth={170}
|
||||
|
|
|
|||
|
|
@ -81,10 +81,7 @@ export const DefaultCard = ({
|
|||
data?.userFavorite && styles.isFavorite,
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={data?.imageUrl}
|
||||
/>
|
||||
<Image className={styles.image} src={data?.imageUrl} />
|
||||
<GridCardControls
|
||||
handleFavorite={controls.handleFavorite}
|
||||
handlePlayQueueAdd={controls.handlePlayQueueAdd}
|
||||
|
|
@ -95,10 +92,7 @@ export const DefaultCard = ({
|
|||
/>
|
||||
</div>
|
||||
<div className={styles.detailContainer}>
|
||||
<CardRows
|
||||
data={data}
|
||||
rows={controls.cardRows}
|
||||
/>
|
||||
<CardRows data={data} rows={controls.cardRows} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -86,10 +86,7 @@ export const GridCardControls = ({
|
|||
onClick={handlePlay}
|
||||
variant="filled"
|
||||
>
|
||||
<Icon
|
||||
icon="mediaPlay"
|
||||
size="xl"
|
||||
/>
|
||||
<Icon icon="mediaPlay" size="xl" />
|
||||
</Button>
|
||||
<div className={styles.bottomControls}>
|
||||
{itemType !== LibraryItem.PLAYLIST && (
|
||||
|
|
|
|||
|
|
@ -73,17 +73,11 @@ export const PosterCard = ({
|
|||
margin: controls.itemGap,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={styles.linkContainer}
|
||||
onClick={() => navigate(path)}
|
||||
>
|
||||
<div className={styles.linkContainer} onClick={() => navigate(path)}>
|
||||
<div
|
||||
className={`${styles.imageContainer} ${data?.userFavorite ? styles.isFavorite : ''}`}
|
||||
>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={data?.imageUrl}
|
||||
/>
|
||||
<Image className={styles.image} src={data?.imageUrl} />
|
||||
<GridCardControls
|
||||
handleFavorite={controls.handleFavorite}
|
||||
handlePlayQueueAdd={controls.handlePlayQueueAdd}
|
||||
|
|
@ -95,10 +89,7 @@ export const PosterCard = ({
|
|||
</div>
|
||||
</div>
|
||||
<div className={styles.detailContainer}>
|
||||
<CardRows
|
||||
data={data}
|
||||
rows={controls.cardRows}
|
||||
/>
|
||||
<CardRows data={data} rows={controls.cardRows} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,21 +15,14 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
|
|||
if (value === undefined) {
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Skeleton
|
||||
height="1rem"
|
||||
width="80%"
|
||||
/>
|
||||
<Skeleton height="1rem" width="80%" />
|
||||
</CellContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted overflow="hidden" size="md">
|
||||
{value?.map((item: AlbumArtist | Artist, index: number) => (
|
||||
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
||||
{index > 0 && <Separator />}
|
||||
|
|
@ -47,11 +40,7 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
|
|||
{item.name || '—'}
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted overflow="hidden" size="md">
|
||||
{item.name || '—'}
|
||||
</Text>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -15,21 +15,14 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
|
|||
if (value === undefined) {
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Skeleton
|
||||
height="1rem"
|
||||
width="80%"
|
||||
/>
|
||||
<Skeleton height="1rem" width="80%" />
|
||||
</CellContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted overflow="hidden" size="md">
|
||||
{value?.map((item: AlbumArtist | Artist, index: number) => (
|
||||
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
||||
{index > 0 && <Separator />}
|
||||
|
|
@ -47,11 +40,7 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
|
|||
{item.name || '—'}
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted overflow="hidden" size="md">
|
||||
{item.name || '—'}
|
||||
</Text>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -41,11 +41,7 @@ export const CombinedTitleCell = ({
|
|||
>
|
||||
<Skeleton className={styles.image} />
|
||||
</div>
|
||||
<Skeleton
|
||||
className={styles.skeletonMetadata}
|
||||
height="1rem"
|
||||
width="80%"
|
||||
/>
|
||||
<Skeleton className={styles.skeletonMetadata} height="1rem" width="80%" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -62,11 +58,7 @@ export const CombinedTitleCell = ({
|
|||
width: `${(node.rowHeight || 40) - 10}px`,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
alt="cover"
|
||||
className={styles.image}
|
||||
src={value.imageUrl}
|
||||
/>
|
||||
<Image alt="cover" className={styles.image} src={value.imageUrl} />
|
||||
|
||||
<ListCoverControls
|
||||
className={styles.playButton}
|
||||
|
|
@ -77,18 +69,10 @@ export const CombinedTitleCell = ({
|
|||
/>
|
||||
</div>
|
||||
<div className={styles.metadataWrapper}>
|
||||
<Text
|
||||
className="current-song-child"
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text className="current-song-child" overflow="hidden" size="md">
|
||||
{value.name}
|
||||
</Text>
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted overflow="hidden" size="md">
|
||||
{artists?.length ? (
|
||||
artists.map((artist: AlbumArtist | Artist, index: number) => (
|
||||
<React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
|
||||
|
|
|
|||
|
|
@ -25,10 +25,7 @@ export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
|
|||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Group
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
>
|
||||
<Group justify="space-between" w="100%">
|
||||
<Button
|
||||
leftSection={isSelected ? <Icon icon="squareCheck" /> : <Icon icon="square" />}
|
||||
onClick={handleToggleDiscNodes}
|
||||
|
|
|
|||
|
|
@ -23,10 +23,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
|
|||
if (value === undefined) {
|
||||
return (
|
||||
<CellContainer position={position || 'left'}>
|
||||
<Skeleton
|
||||
height="1rem"
|
||||
width="80%"
|
||||
/>
|
||||
<Skeleton height="1rem" width="80%" />
|
||||
</CellContainer>
|
||||
);
|
||||
}
|
||||
|
|
@ -45,12 +42,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
|
|||
{isLink ? displayedValue.value : displayedValue}
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
isMuted={!primary}
|
||||
isNoSelect={false}
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted={!primary} isNoSelect={false} overflow="hidden" size="md">
|
||||
{displayedValue}
|
||||
</Text>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -13,11 +13,7 @@ export const GenreCell = ({ data, value }: ICellRendererParams) => {
|
|||
const genrePath = useGenreRoute();
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted overflow="hidden" size="md">
|
||||
{value?.map((item: AlbumArtist | Artist, index: number) => (
|
||||
<React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
|
||||
{index > 0 && <Separator />}
|
||||
|
|
|
|||
|
|
@ -19,20 +19,14 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
|
|||
if (value === undefined) {
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Skeleton
|
||||
height="1rem"
|
||||
width="80%"
|
||||
/>
|
||||
<Skeleton height="1rem" width="80%" />
|
||||
</CellContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Text
|
||||
isMuted
|
||||
overflow="hidden"
|
||||
>
|
||||
<Text isMuted overflow="hidden">
|
||||
{formattedValue}
|
||||
</Text>
|
||||
</CellContainer>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,7 @@ export const RatingCell = ({ node, value }: ICellRendererParams) => {
|
|||
|
||||
return (
|
||||
<CellContainer position="center">
|
||||
<Rating
|
||||
onChange={handleUpdateRating}
|
||||
size="xs"
|
||||
value={value?.userRating}
|
||||
/>
|
||||
<Rating onChange={handleUpdateRating} size="xs" value={value?.userRating} />
|
||||
</CellContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -144,15 +144,9 @@ export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
|
|||
return (
|
||||
<CellContainer position="right">
|
||||
{isPlaying && isCurrentSong ? (
|
||||
<Icon
|
||||
fill="primary"
|
||||
icon="mediaPlay"
|
||||
/>
|
||||
<Icon fill="primary" icon="mediaPlay" />
|
||||
) : isCurrentSong ? (
|
||||
<Icon
|
||||
fill="primary"
|
||||
icon="mediaPause"
|
||||
/>
|
||||
<Icon fill="primary" icon="mediaPause" />
|
||||
) : (
|
||||
<Text
|
||||
className="current-song-child current-song-index"
|
||||
|
|
|
|||
|
|
@ -8,21 +8,14 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
|
|||
if (value === undefined) {
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Skeleton
|
||||
height="1rem"
|
||||
width="80%"
|
||||
/>
|
||||
<Skeleton height="1rem" width="80%" />
|
||||
</CellContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CellContainer position="left">
|
||||
<Text
|
||||
className="current-song-child"
|
||||
overflow="hidden"
|
||||
size="md"
|
||||
>
|
||||
<Text className="current-song-child" overflow="hidden" size="md">
|
||||
{value}
|
||||
</Text>
|
||||
</CellContainer>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,5 @@ export interface ICustomHeaderParams extends IHeaderParams {
|
|||
}
|
||||
|
||||
export const DurationHeader = () => {
|
||||
return (
|
||||
<Icon
|
||||
icon="duration"
|
||||
size="sm"
|
||||
/>
|
||||
);
|
||||
return <Icon icon="duration" size="sm" />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,36 +16,11 @@ type Options = {
|
|||
type Presets = 'actions' | 'duration' | 'rowIndex' | 'userFavorite' | 'userRating';
|
||||
|
||||
const headerPresets = {
|
||||
actions: (
|
||||
<Icon
|
||||
icon="ellipsisHorizontal"
|
||||
size="sm"
|
||||
/>
|
||||
),
|
||||
duration: (
|
||||
<Icon
|
||||
icon="duration"
|
||||
size="sm"
|
||||
/>
|
||||
),
|
||||
rowIndex: (
|
||||
<Icon
|
||||
icon="hash"
|
||||
size="sm"
|
||||
/>
|
||||
),
|
||||
userFavorite: (
|
||||
<Icon
|
||||
icon="favorite"
|
||||
size="sm"
|
||||
/>
|
||||
),
|
||||
userRating: (
|
||||
<Icon
|
||||
icon="star"
|
||||
size="sm"
|
||||
/>
|
||||
),
|
||||
actions: <Icon icon="ellipsisHorizontal" size="sm" />,
|
||||
duration: <Icon icon="duration" size="sm" />,
|
||||
rowIndex: <Icon icon="hash" size="sm" />,
|
||||
userFavorite: <Icon icon="favorite" size="sm" />,
|
||||
userRating: <Icon icon="star" size="sm" />,
|
||||
};
|
||||
|
||||
export const GenericTableHeader = (
|
||||
|
|
|
|||
|
|
@ -635,15 +635,8 @@ export const VirtualTable = forwardRef(
|
|||
onNewColumnsLoaded={handleNewColumnsLoaded}
|
||||
/>
|
||||
{paginationProps && (
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
mode="wait"
|
||||
presenceAffectsLayout
|
||||
>
|
||||
<TablePagination
|
||||
{...paginationProps}
|
||||
tableRef={tableRef}
|
||||
/>
|
||||
<AnimatePresence initial={false} mode="wait" presenceAffectsLayout>
|
||||
<TablePagination {...paginationProps} tableRef={tableRef} />
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,10 +76,7 @@ export const TablePagination = ({
|
|||
ref={containerQuery.ref}
|
||||
style={{ borderTop: '1px solid var(--theme-generic-border-color)' }}
|
||||
>
|
||||
<Text
|
||||
isMuted
|
||||
size="md"
|
||||
>
|
||||
<Text isMuted size="md">
|
||||
{containerQuery.isMd ? (
|
||||
<>
|
||||
Showing <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
|
||||
|
|
@ -97,11 +94,7 @@ export const TablePagination = ({
|
|||
</>
|
||||
)}
|
||||
</Text>
|
||||
<Group
|
||||
gap="sm"
|
||||
ref={containerQuery.ref}
|
||||
wrap="nowrap"
|
||||
>
|
||||
<Group gap="sm" ref={containerQuery.ref} wrap="nowrap">
|
||||
<Popover
|
||||
onClose={() => handlers.close()}
|
||||
opened={isGoToPageOpen}
|
||||
|
|
@ -127,10 +120,7 @@ export const TablePagination = ({
|
|||
min={1}
|
||||
width={70}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="filled"
|
||||
>
|
||||
<Button type="submit" variant="filled">
|
||||
Go
|
||||
</Button>
|
||||
</Group>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue