Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 14:37:06 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/remote/components/wrapped-slider.tsx
View File

@ -10,7 +10,7 @@ const SliderContainer = styled.div`
margin: 10px 0;
`;
const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
const SliderValueWrapper = styled.div<{ $position: 'left' | 'right' }>`
display: flex;
flex: 1;
align-self: flex-end;
@ -38,7 +38,7 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
return (
<SliderContainer>
{leftLabel && <SliderValueWrapper position="left">{leftLabel}</SliderValueWrapper>}
{leftLabel && <SliderValueWrapper $position="left">{leftLabel}</SliderValueWrapper>}
<SliderWrapper>
<PlayerbarSlider
{...props}
@ -56,7 +56,7 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
}}
/>
</SliderWrapper>
{rightLabel && <SliderValueWrapper position="right">{rightLabel}</SliderValueWrapper>}
{rightLabel && <SliderValueWrapper $position="right">{rightLabel}</SliderValueWrapper>}
</SliderContainer>
);
};

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}

4
src/renderer/features/albums/components/album-detail-content.tsx
View File

@ -66,8 +66,6 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
const handlePlayQueueAdd = usePlayQueueAdd();
const tableConfig = useTableSettings('albumDetail');
console.log('tableConfig :>> ', tableConfig);
const columnDefs = useMemo(() => getColumnDefs(tableConfig.columns), [tableConfig.columns]);
const getRowHeight = useCallback((params: RowHeightParams) => {
@ -266,7 +264,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
return (
<ContentContainer>
<LibraryBackgroundOverlay backgroundColor={background} />
<LibraryBackgroundOverlay $backgroundColor={background} />
<DetailContainer>
<Box component="section">
<Group

2
src/renderer/features/artists/components/album-artist-detail-content.tsx
View File

@ -333,7 +333,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
return (
<ContentContainer ref={cq.ref}>
<LibraryBackgroundOverlay backgroundColor={background} />
<LibraryBackgroundOverlay $backgroundColor={background} />
<DetailContainer>
<Stack spacing="lg">
<Group spacing="md">

6
src/renderer/features/player/components/center-controls.tsx
View File

@ -55,7 +55,7 @@ const SliderContainer = styled.div`
height: 20px;
`;
const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
const SliderValueWrapper = styled.div<{ $position: 'left' | 'right' }>`
display: flex;
flex: 1;
align-self: center;
@ -281,7 +281,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
</ButtonsContainer>
</ControlsContainer>
<SliderContainer>
<SliderValueWrapper position="left">
<SliderValueWrapper $position="left">
<Text
$noSelect
$secondary
@ -309,7 +309,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
}}
/>
</SliderWrapper>
<SliderValueWrapper position="right">
<SliderValueWrapper $position="right">
<Text
$noSelect
$secondary

4
src/renderer/features/shared/components/library-background-overlay.tsx
View File

@ -1,6 +1,6 @@
import styled from 'styled-components';
export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>`
export const LibraryBackgroundOverlay = styled.div<{ $backgroundColor?: string }>`
position: absolute;
z-index: -1;
width: 100%;
@ -8,7 +8,7 @@ export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>
min-height: 200px;
pointer-events: none;
user-select: none;
background: ${(props) => props.backgroundColor};
background: ${(props) => props.$backgroundColor};
background-image: var(--bg-subheader-overlay);
opacity: 0.3;
`;

22
src/renderer/features/shared/components/resize-handle.tsx
View File

@ -1,19 +1,19 @@
import styled from 'styled-components';
export const ResizeHandle = styled.div<{
isResizing: boolean;
placement: 'top' | 'left' | 'bottom' | 'right';
$isResizing: boolean;
$placement: 'top' | 'left' | 'bottom' | 'right';
}>`
position: absolute;
top: ${(props) => props.placement === 'top' && 0};
right: ${(props) => props.placement === 'right' && 0};
bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0};
top: ${(props) => props.$placement === 'top' && 0};
right: ${(props) => props.$placement === 'right' && 0};
bottom: ${(props) => props.$placement === 'bottom' && 0};
left: ${(props) => props.$placement === 'left' && 0};
z-index: 90;
width: 4px;
height: 100%;
cursor: ew-resize;
opacity: ${(props) => (props.isResizing ? 1 : 0)};
opacity: ${(props) => (props.$isResizing ? 1 : 0)};
&:hover {
opacity: 0.7;
@ -21,10 +21,10 @@ export const ResizeHandle = styled.div<{
&::before {
position: absolute;
top: ${(props) => props.placement === 'top' && 0};
right: ${(props) => props.placement === 'right' && 0};
bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0};
top: ${(props) => props.$placement === 'top' && 0};
right: ${(props) => props.$placement === 'right' && 0};
bottom: ${(props) => props.$placement === 'bottom' && 0};
left: ${(props) => props.$placement === 'left' && 0};
width: 1px;
height: 100%;
content: '';

6
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View File

@ -35,12 +35,12 @@ import { AppRoute } from '/@/renderer/router/routes';
import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/renderer/store';
import { Platform } from '/@/renderer/types';
const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>`
display: flex;
flex-direction: column;
height: 100%;
max-height: ${(props) =>
props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
props.$windowBarStyle === Platform.WEB || props.$windowBarStyle === Platform.LINUX
? 'calc(100vh - 149px)'
: 'calc(100vh - 119px)'};
user-select: none;
@ -110,7 +110,7 @@ export const CollapsedSidebar = () => {
}, [sidebarItems]);
return (
<SidebarContainer windowBarStyle={windowBarStyle}>
<SidebarContainer $windowBarStyle={windowBarStyle}>
<ScrollArea
scrollHideDelay={0}
scrollbarSize={8}

6
src/renderer/features/sidebar/components/sidebar.tsx
View File

@ -55,11 +55,11 @@ import {
import { fadeIn } from '/@/renderer/styles';
import { Platform } from '/@/renderer/types';
const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
const SidebarContainer = styled.div<{ $windowBarStyle: Platform }>`
height: 100%;
max-height: ${
(props) =>
props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
props.$windowBarStyle === Platform.WEB || props.$windowBarStyle === Platform.LINUX
? 'calc(100vh - 160px)' // Playerbar (90px) & ActionBar (70px)
: 'calc(100vh - 190px)' // plus windowbar (30px) if the windowBarStyle is Windows/Mac
// We use the height of the SidebarContainer to keep the Stack below the ActionBar at the correct height
@ -199,7 +199,7 @@ export const Sidebar = () => {
return (
<SidebarContainer
ref={cq.ref}
windowBarStyle={windowBarStyle}
$windowBarStyle={windowBarStyle}
>
<ActionBar />
<Stack

6
src/renderer/layouts/default-layout.tsx
View File

@ -24,14 +24,14 @@ if (!isElectron()) {
});
}
const Layout = styled.div<{ windowBarStyle: Platform }>`
const Layout = styled.div<{ $windowBarStyle: Platform }>`
display: grid;
grid-template-areas:
'window-bar'
'main-content'
'player';
grid-template-rows: ${(props) =>
props.windowBarStyle === Platform.WINDOWS || props.windowBarStyle === Platform.MACOS
props.$windowBarStyle === Platform.WINDOWS || props.$windowBarStyle === Platform.MACOS
? '30px calc(100vh - 120px) 90px'
: '0px calc(100vh - 90px) 90px'};
grid-template-columns: 1fr;
@ -84,8 +84,8 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
return (
<>
<Layout
$windowBarStyle={windowBarStyle}
id="default-layout"
windowBarStyle={windowBarStyle}
>
{windowBarStyle !== Platform.WEB && <WindowBar />}
<MainContent shell={shell} />

4
src/renderer/layouts/default-layout/left-sidebar.tsx
View File

@ -25,8 +25,8 @@ export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) =>
<SidebarContainer id="sidebar">
<ResizeHandle
ref={sidebarRef}
isResizing={isResizing}
placement="right"
$isResizing={isResizing}
$placement="right"
onMouseDown={(e) => {
e.preventDefault();
startResizing('left');

28
src/renderer/layouts/default-layout/main-content.tsx
View File

@ -20,20 +20,20 @@ const SideDrawerQueue = lazy(() =>
const MINIMUM_SIDEBAR_WIDTH = 260;
const MainContentContainer = styled.div<{
leftSidebarWidth: string;
rightExpanded?: boolean;
rightSidebarWidth?: string;
shell?: boolean;
sidebarCollapsed?: boolean;
$leftSidebarWidth: string;
$rightExpanded?: boolean;
$rightSidebarWidth?: string;
$shell?: boolean;
$sidebarCollapsed?: boolean;
}>`
position: relative;
display: ${(props) => (props.shell ? 'flex' : 'grid')};
display: ${(props) => (props.$shell ? 'flex' : 'grid')};
grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr;
grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
props,
) => props.rightExpanded && props.rightSidebarWidth};
grid-template-columns: ${(props) =>
props.$sidebarCollapsed ? '80px' : props.$leftSidebarWidth} 1fr ${(props) =>
props.$rightExpanded && props.$rightSidebarWidth};
gap: 0;
background: var(--main-bg);
@ -96,12 +96,12 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
return (
<MainContentContainer
$leftSidebarWidth={leftWidth}
$rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
$rightSidebarWidth={rightWidth}
$shell={shell}
$sidebarCollapsed={collapsed}
id="main-content"
leftSidebarWidth={leftWidth}
rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
rightSidebarWidth={rightWidth}
shell={shell}
sidebarCollapsed={collapsed}
>
{!shell && (
<>

4
src/renderer/layouts/default-layout/right-sidebar.tsx
View File

@ -115,8 +115,8 @@ export const RightSidebar = forwardRef(
>
<ResizeHandle
ref={ref}
isResizing={isResizingRight}
placement="left"
$isResizing={isResizingRight}
$placement="left"
onMouseDown={(e) => {
e.preventDefault();
startResizing('right');

12
src/renderer/layouts/window-bar.tsx
View File

@ -135,13 +135,13 @@ const MacOsButtonGroup = styled.div`
`;
export const MacOsButton = styled.div<{
maxButton?: boolean;
minButton?: boolean;
restoreButton?: boolean;
$maxButton?: boolean;
$minButton?: boolean;
$restoreButton?: boolean;
}>`
grid-row: 1 / span 1;
grid-column: ${(props) =>
props.minButton ? 2 : props.maxButton || props.restoreButton ? 3 : 1};
props.$minButton ? 2 : props.$maxButton || props.$restoreButton ? 3 : 1};
align-items: center;
justify-content: center;
width: 100%;
@ -165,7 +165,7 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
<MacOsContainer>
<MacOsButtonGroup>
<MacOsButton
minButton
$minButton
className="button"
id="min-button"
onClick={handleMinimize}
@ -180,7 +180,7 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
/>
</MacOsButton>
<MacOsButton
maxButton
$maxButton
className="button"
id="max-button"
onClick={handleMaximize}