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

useHasWindowWidthChangedEnough

Browse source
This commit is contained in:
Asad Umar 2022-02-05 20:34:51 +05:00 committed by Thomas Zarebczan
parent bdc5c2e9fb
commit 373f7f75e0
1 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,15 @@
// @flow
// Widths are taken from "ui/scss/init/vars.scss" // Widths are taken from "ui/scss/init/vars.scss"
import React, { useRef } from 'react'; import React, { useRef } from 'react';
const DEFAULT_SCREEN_SIZE = 1080;
export function useWindowSize(fn) { export function useWindowSize() {
const isWindowClient = typeof window === 'object'; const isWindowClient = typeof window === 'object';
const initialState = fn ? fn(window.innerWidth) : window.innerWidth; const [windowSize, setWindowSize] = React.useState(isWindowClient ? window.innerWidth : DEFAULT_SCREEN_SIZE);
const [windowSize, setWindowSize] = React.useState(isWindowClient ? initialState : undefined);
const prev = useRef();
React.useEffect(() => { React.useEffect(() => {
function setSize() { function setSize() {
if (fn) { setWindowSize(window.innerWidth);
const curr = fn(window.innerWidth);
if (prev !== curr) {
setWindowSize(curr);
prev.current = curr;
}
} else setWindowSize(window.innerWidth);
} }
if (isWindowClient) { if (isWindowClient) {
@ -23,19 +17,44 @@ export function useWindowSize(fn) {
return () => window.removeEventListener('resize', setSize); return () => window.removeEventListener('resize', setSize);
} }
}, [fn, isWindowClient, setWindowSize, windowSize]); }, [isWindowClient]);
return windowSize;
}
function useHasWindowWidthChangedEnough(comparisonFn: (windowSize: number) => boolean) {
const isWindowClient = typeof window === 'object';
const initialState = isWindowClient ? comparisonFn(window.innerWidth) : comparisonFn(DEFAULT_SCREEN_SIZE);
const [windowSize, setWindowSize] = React.useState(initialState);
const prev = useRef(window.innerWidth);
React.useEffect(() => {
function setSize() {
const curr = comparisonFn(window.innerWidth);
if (prev !== curr) {
setWindowSize(curr);
prev.current = curr;
}
}
if (isWindowClient) {
window.addEventListener('resize', setSize);
return () => window.removeEventListener('resize', setSize);
}
}, [isWindowClient]);
return windowSize; return windowSize;
} }
export function useIsMobile() { export function useIsMobile() {
return useWindowSize((windowSize) => windowSize < 901); return useHasWindowWidthChangedEnough((windowSize) => windowSize < 901);
} }
export function useIsMediumScreen() { export function useIsMediumScreen() {
return useWindowSize((windowSize) => windowSize < 1151); return useHasWindowWidthChangedEnough((windowSize) => windowSize < 1151);
} }
export function useIsLargeScreen() { export function useIsLargeScreen() {
return useWindowSize((windowSize) => windowSize > 1600); return useHasWindowWidthChangedEnough((windowSize) => windowSize > 1600);
} }