paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

Reduce rerendering caused by useMediaQuery & fix expand button

Browse Source 
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2021-12-20 12:33:58 +01:00
parent b60c08c46b
commit 4faf47fc9d
2 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/src/layout/Sidebar/Bar.tsx
+11 -10
View File
@@ -103,15 +103,14 @@ const DesktopSidebar = ({
children,
}: PropsWithChildren<Props>) => {
const classes = useStyles();
const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
theme.breakpoints.down('md'),
const isSmallScreen = useMediaQuery<BackstageTheme>(
theme => theme.breakpoints.down('md'),
{ noSsr: true },
);
const [state, setState] = useState(State.Closed);
const hoverTimerRef = useRef<number>();
const { isPinned } = useContext(SidebarPinStateContext);
useEffect(() => clearTimeout(hoverTimerRef.current));
const handleOpen = () => {
if (isPinned || disableExpandOnHover) {
return;
@@ -152,9 +151,9 @@ const DesktopSidebar = ({
const setOpen = (open: boolean) => {
if (open) {
handleOpen();
setState(State.Open);
} else {
handleClose();
setState(State.Closed);
}
};
@@ -187,8 +186,9 @@ export const Sidebar = ({
closeDelayMs,
disableExpandOnHover,
}: React.PropsWithChildren<Props>) => {
const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
theme.breakpoints.down('xs'),
const isMobileScreen = useMediaQuery<BackstageTheme>(
theme => theme.breakpoints.down('xs'),
{ noSsr: true },
);
return isMobileScreen ? (
@@ -214,8 +214,9 @@ export const SidebarExpandButton = () => {
const classes = useStyles();
const { isOpen, setOpen } = useContext(SidebarContext);
const { isPinned } = useContext(SidebarPinStateContext);
const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
theme.breakpoints.down('md'),
const isSmallScreen = useMediaQuery<BackstageTheme>(
theme => theme.breakpoints.down('md'),
{ noSsr: true },
);
if (isPinned || isSmallScreen || !setOpen) {
packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
+27 -24
View File
@@ -77,34 +77,37 @@ export const SampleScalableSidebar = () => (
<Sidebar disableExpandOnHover>
<SidebarSearchField onSearch={handleSearch} to="/search" />
<SidebarDivider />
<SidebarItem icon={MenuBookIcon} text="Catalog">
<SidebarSubmenu title="Catalog">
<SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
<SidebarSubmenuItem title="APIs" to="/2" icon={CloudQueueIcon} />
<SidebarSubmenuItem title="Components" to="/3" icon={AppsIcon} />
<SidebarSubmenuItem
title="Misc"
to="/6"
icon={AcUnitIcon}
dropdownItems={[
{
title: 'Lorem Ipsum',
to: '/7',
},
{
title: 'Lorem Ipsum',
to: '/8',
},
]}
/>
</SidebarSubmenu>
</SidebarItem>
<SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
<SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
<SidebarGroup label="Menu" icon={<MenuIcon />}>
<SidebarItem icon={MenuBookIcon} text="Catalog">
<SidebarSubmenu title="Catalog">
<SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
<SidebarSubmenuItem title="APIs" to="/2" icon={CloudQueueIcon} />
<SidebarSubmenuItem title="Components" to="/3" icon={AppsIcon} />
<SidebarSubmenuItem
title="Misc"
to="/6"
icon={AcUnitIcon}
dropdownItems={[
{
title: 'Lorem Ipsum',
to: '/7',
},
{
title: 'Lorem Ipsum',
to: '/8',
},
]}
/>
</SidebarSubmenu>
</SidebarItem>
<SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
<SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
</SidebarGroup>
<SidebarDivider />
<SidebarIntro />
<SidebarSpace />
<SidebarExpandButton />
</Sidebar>
Test
</SidebarPage>
);