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

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}

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