Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(v2): Add hooks to detect window resize, toggle off sidebar and navbar in desktop #2932

Merged
merged 4 commits into from
Jun 17, 2020
Merged

fix(v2): Add hooks to detect window resize, toggle off sidebar and navbar in desktop #2932

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a95bd04
Add hooks to detect window resize, toggle off sidebar and navbar on d…
guillaume-abtasty Jun 14, 2020
80420b8
Review fixes
guillaume-abtasty Jun 16, 2020
25da3cf
Latest fixes. Refactor window sizes into object
guillaume-abtasty Jun 16, 2020
b189668
Fix deps and checks on windowSize change
guillaume-abtasty Jun 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import useWindowSize, {desktopSize} from '@theme/hooks/useWindowSize';
import useLogo from '@theme/hooks/useLogo';
import useScrollPosition from '@theme/hooks/useScrollPosition';
import Link from '@docusaurus/Link';
Expand Down Expand Up @@ -176,6 +177,13 @@ function DocSidebar(props) {
} = props;

useLockBodyScroll(showResponsiveSidebar);
const windowSize = useWindowSize();

useEffect(() => {
if (windowSize === desktopSize && showResponsiveSidebar) {
setShowResponsiveSidebar(false);
}
}, [windowSize]);

if (!currentSidebar) {
return null;
Expand Down
11 changes: 10 additions & 1 deletion packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/

import React, {useCallback, useState} from 'react';
import React, {useCallback, useState, useEffect} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
Expand All @@ -16,6 +16,7 @@ import Toggle from '@theme/Toggle';
import useThemeContext from '@theme/hooks/useThemeContext';
import useHideableNavbar from '@theme/hooks/useHideableNavbar';
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
import useWindowSize, {desktopSize} from '@theme/hooks/useWindowSize';
import useLogo from '@theme/hooks/useLogo';

import styles from './styles.module.css';
Expand Down Expand Up @@ -201,6 +202,14 @@ function Navbar() {
[setLightTheme, setDarkTheme],
);

const windowSize = useWindowSize();

useEffect(() => {
if (windowSize === desktopSize && sidebarShown) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in the same way setWindowSize(getSize()); does not trigger useless re-renders, it's not necessary to test && sidebarShown because React will already noop if setSidebarShown(false); is called while sidebarShown=false.

(also you didn't capture sidebarShown in the deps array)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://twitter.com/sebastienlorber/status/1272516868994224128

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hum, that's subtle. I updated the code

setSidebarShown(false);
}
}, [windowSize]);

const {leftLinks, rightLinks} = splitLinks(links);

return (
Expand Down
42 changes: 42 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/hooks/useWindowSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import {useEffect, useState} from 'react';

const desktopThresholdWidth = 996;
const desktopSize = 'desktop';
const mobileSize = 'mobile';

function useWindowSize() {
const isClient = typeof window === 'object';
guillaumejacquart marked this conversation as resolved.
Show resolved Hide resolved

function getSize() {
return isClient
? (window.innerWidth > desktopThresholdWidth && desktopSize) || mobileSize
: undefined;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest extracting the fn outside of the hook + making it more "readable".

Usage of && and || is hard to follow

function getSize() {
  if (isClient) {
    return undefined;
  }
  returrn window.innerWidth > desktopThresholdWidth ? desktopSize : mobileSize;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, much clearer. I updated the code.

}

const [windowSize, setWindowSize] = useState(getSize);

useEffect(() => {
if (!isClient) {
return false;
}

function handleResize() {
setWindowSize(getSize());
}

window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

return windowSize;
}

export {desktopSize, mobileSize};
Copy link
Collaborator

@slorber slorber Jun 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about having an object like WindowSizes exposing mobile/desktop attributes.

Similar to this?

docusaurus/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js

Line 12 in 1f00d15

const themes = {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice suggestion, I went and did that

export default useWindowSize;