LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix useScreensize

Browse source
This commit is contained in:
Asad Umar 2022-01-31 17:34:44 +05:00 committed by Thomas Zarebczan
parent e0f01a58d2
commit 00c9410253
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/effects/use-on-resize.js
View file

@ -2,13 +2,17 @@ import { useEffect } from 'react';
import debounce from 'util/debounce'; import debounce from 'util/debounce';
export function useOnResize(cb) { export function useOnResize(cb) {
const isWindowClient = typeof window === 'object';
useEffect(() => { useEffect(() => {
const handleResize = debounce(cb, 100); const handleResize = debounce(cb, 100);
window.addEventListener('resize', handleResize); if (isWindowClient) {
window.addEventListener('resize', handleResize);
handleResize(); handleResize();
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, []); }
}, [isWindowClient]);
} }

18
ui/effects/use-screensize.js
View file

@ -1,18 +1,23 @@
// Widths are taken from "ui/scss/init/vars.scss" // Widths are taken from "ui/scss/init/vars.scss"
import React from 'react'; import React from 'react';
function useWindowSize() { export function useWindowSize(fn) {
const isWindowClient = typeof window === 'object'; const isWindowClient = typeof window === 'object';
const [windowSize, setWindowSize] = React.useState(isWindowClient ? window.innerWidth : undefined); const [windowSize, setWindowSize] = React.useState(isWindowClient ? window.innerWidth : undefined);
React.useEffect(() => { React.useEffect(() => {
function setSize() { function setSize() {
setWindowSize(window.innerWidth); if (fn) {
const curr = fn(window.innerWidth);
if (windowSize !== curr) setWindowSize(curr);
} else setWindowSize(window.innerWidth);
} }
if (isWindowClient) { if (isWindowClient) {
window.addEventListener('resize', setSize); window.addEventListener('resize', setSize);
setSize();
return () => window.removeEventListener('resize', setSize); return () => window.removeEventListener('resize', setSize);
} }
}, [isWindowClient, setWindowSize]); }, [isWindowClient, setWindowSize]);
@ -21,16 +26,13 @@ function useWindowSize() {
} }
export function useIsMobile() { export function useIsMobile() {
const windowSize = useWindowSize(); return useWindowSize((windowSize) => windowSize < 901);
return windowSize < 901;
} }
export function useIsMediumScreen() { export function useIsMediumScreen() {
const windowSize = useWindowSize(); return useWindowSize((windowSize) => windowSize < 1151);
return windowSize < 1151;
} }
export function useIsLargeScreen() { export function useIsLargeScreen() {
const windowSize = useWindowSize(); return useWindowSize((windowSize) => windowSize > 1600);
return windowSize > 1600;
} }