Fix transient props for styled-components v6

This commit is contained in:
jeffvli
2023-09-22 02:34:57 -07:00
parent bb9bf7ba6a
commit 1a87adb728
24 changed files with 96 additions and 92 deletions
@@ -5,7 +5,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
export const ActionsCell = ({ context, api }: ICellRendererParams) => {
return (
<CellContainer position="center">
<CellContainer $position="center">
<Button
compact
variant="subtle"
@@ -11,7 +11,7 @@ import { Skeleton } from '/@/renderer/components/skeleton';
export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<CellContainer $position="left">
<Skeleton
height="1rem"
width="80%"
@@ -21,7 +21,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
}
return (
<CellContainer position="left">
<CellContainer $position="left">
<Text
$secondary
overflow="hidden"
@@ -11,7 +11,7 @@ import { Skeleton } from '/@/renderer/components/skeleton';
export const ArtistCell = ({ value, data }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<CellContainer $position="left">
<Skeleton
height="1rem"
width="80%"
@@ -21,7 +21,7 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
}
return (
<CellContainer position="left">
<CellContainer $position="left">
<Text
$secondary
overflow="hidden"
@@ -46,7 +46,7 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
};
return (
<CellContainer position="center">
<CellContainer $position="center">
<Button
compact
sx={{
@@ -4,13 +4,13 @@ import styled from 'styled-components';
import { Skeleton } from '/@/renderer/components/skeleton';
import { Text } from '/@/renderer/components/text';
export const CellContainer = styled.div<{ position?: 'left' | 'center' | 'right' }>`
export const CellContainer = styled.div<{ $position?: 'left' | 'center' | 'right' }>`
display: flex;
align-items: center;
justify-content: ${(props) =>
props.position === 'right'
props.$position === 'right'
? 'flex-end'
: props.position === 'center'
: props.$position === 'center'
? 'center'
: 'flex-start'};
width: 100%;
@@ -34,7 +34,7 @@ export const GenericCell = (
if (value === undefined) {
return (
<CellContainer position={position || 'left'}>
<CellContainer $position={position || 'left'}>
<Skeleton
height="1rem"
width="80%"
@@ -44,7 +44,7 @@ export const GenericCell = (
}
return (
<CellContainer position={position || 'left'}>
<CellContainer $position={position || 'left'}>
{isLink ? (
<Text
$link={isLink}
@@ -58,6 +58,7 @@ export const GenericCell = (
</Text>
) : (
<Text
$noSelect={false}
$secondary={!primary}
overflow="hidden"
size="md"
@@ -8,7 +8,7 @@ import { AppRoute } from '/@/renderer/router/routes';
export const GenreCell = ({ value, data }: ICellRendererParams) => {
return (
<CellContainer position="left">
<CellContainer $position="left">
<Text
$secondary
overflow="hidden"
@@ -47,7 +47,7 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
};
return (
<CellContainer position="center">
<CellContainer $position="center">
<Rating
size="xs"
value={value?.userRating}
@@ -6,7 +6,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
export const TitleCell = ({ value }: ICellRendererParams) => {
if (value === undefined) {
return (
<CellContainer position="left">
<CellContainer $position="left">
<Skeleton
height="1rem"
width="80%"
@@ -16,7 +16,7 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
}
return (
<CellContainer position="left">
<CellContainer $position="left">
<Text
className="current-song-child"
overflow="hidden"