antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix transient props for styled-components v6

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/components/page-header/index.tsx
View file

@ -7,13 +7,13 @@ import { useWindowSettings } from '/@/renderer/store/settings.store';
import { Platform } from '/@/renderer/types';
const Container = styled(motion(Flex))<{
height?: string;
position?: string;
$height?: string;
$position?: string;
}>`
position: ${(props) => props.position || 'relative'};
position: ${(props) => props.$position || 'relative'};
z-index: 200;
width: 100%;
height: ${(props) => props.height || '65px'};
height: ${(props) => props.$height || '65px'};
background: var(--titlebar-bg);
`;
@ -40,13 +40,13 @@ const Header = styled(motion.div)<{
}
`;
const BackgroundImage = styled.div<{ background: string }>`
const BackgroundImage = styled.div<{ $background: string }>`
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: ${(props) => props.background || 'var(--titlebar-bg)'};
background: ${(props) => props.$background || 'var(--titlebar-bg)'};
`;
const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
@ -129,8 +129,8 @@ export const PageHeader = ({
{!isHidden && (
<Container
ref={ref}
height={height}
position={position}
$height={height}
$position={position}
{...props}
>
<Header
@ -151,7 +151,9 @@ export const PageHeader = ({
</Header>
{backgroundColor && (
<>
<BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
<BackgroundImage
$background={backgroundColor || 'var(--titlebar-bg)'}
/>
<BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
</>
)}

9
src/renderer/components/scroll-area/index.tsx
View file

@ -29,7 +29,10 @@ const StyledScrollArea = styled(MantineScrollArea)`
}
`;
const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
const StyledNativeScrollArea = styled.div<{
$scrollBarOffset?: string;
$windowBarStyle?: Platform;
}>`
height: 100%;
`;
@ -133,8 +136,8 @@ export const NativeScrollArea = forwardRef(
/>
<StyledNativeScrollArea
ref={mergedRef}
scrollBarOffset={scrollBarOffset}
windowBarStyle={windowBarStyle}
$scrollBarOffset={scrollBarOffset}
$windowBarStyle={windowBarStyle}
{...props}
>
{children}

2
src/renderer/components/virtual-table/cells/actions-cell.tsx
View file

@ -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"

4
src/renderer/components/virtual-table/cells/album-artist-cell.tsx
View file

@ -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"

4
src/renderer/components/virtual-table/cells/artist-cell.tsx
View file

@ -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"

2
src/renderer/components/virtual-table/cells/favorite-cell.tsx
View file

@ -46,7 +46,7 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
};
return (
<CellContainer position="center">
<CellContainer $position="center">
<Button
compact
sx={{

11
src/renderer/components/virtual-table/cells/generic-cell.tsx
View file

@ -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"

2
src/renderer/components/virtual-table/cells/genre-cell.tsx
View file

@ -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"

2
src/renderer/components/virtual-table/cells/rating-cell.tsx
View file

@ -47,7 +47,7 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
};
return (
<CellContainer position="center">
<CellContainer $position="center">
<Rating
size="xs"
value={value?.userRating}

4
src/renderer/components/virtual-table/cells/title-cell.tsx
View file

@ -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"

18
src/renderer/components/virtual-table/headers/generic-table-header.tsx
View file

@ -14,12 +14,12 @@ type Options = {
preset?: Presets;
};
export const HeaderWrapper = styled.div<{ position: Options['position'] }>`
export const HeaderWrapper = styled.div<{ $position: Options['position'] }>`
display: flex;
justify-content: ${(props) =>
props.position === 'right'
props.$position === 'right'
? 'flex-end'
: props.position === 'center'
: props.$position === 'center'
? 'center'
: 'flex-start'};
width: 100%;
@ -27,16 +27,16 @@ export const HeaderWrapper = styled.div<{ position: Options['position'] }>`
text-transform: uppercase;
`;
const HeaderText = styled(_Text)<{ position: Options['position'] }>`
const HeaderText = styled(_Text)<{ $position: Options['position'] }>`
width: 100%;
height: 100%;
font-weight: 500;
line-height: inherit;
color: var(--ag-header-foreground-color);
text-align: ${(props) =>
props.position === 'right'
props.$position === 'right'
? 'flex-end'
: props.position === 'center'
: props.$position === 'center'
? 'center'
: 'flex-start'};
text-transform: uppercase;
@ -80,14 +80,14 @@ export const GenericTableHeader = (
{ preset, children, position }: Options,
) => {
if (preset) {
return <HeaderWrapper position={position}>{headerPresets[preset]}</HeaderWrapper>;
return <HeaderWrapper $position={position}>{headerPresets[preset]}</HeaderWrapper>;
}
return (
<HeaderWrapper position={position}>
<HeaderWrapper $position={position}>
<HeaderText
$position={position}
overflow="hidden"
position={position}
weight={500}
>
{children || displayName}