This repository has been archived by the owner on Jun 22, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from siriwatknp/develop
v1.2.4
- Loading branch information
Showing
5 changed files
with
26 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,25 @@ | ||
| /* eslint-disable max-len */ | ||
| import { useState, useEffect } from 'react'; | ||
| import { useTheme } from '@material-ui/styles'; | ||
| import useMediaQuery from '@material-ui/core/useMediaQuery'; | ||
| import getWindowSizes from 'utils/getWindowSizes'; | ||
| /** | ||
| * Be careful using this hook. It only works because the number of | ||
| * breakpoints in theme is static. It will break once you change the number of | ||
| * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level | ||
| */ | ||
| const getNextScreen = (keys, screen) => { | ||
| const index = keys.indexOf(screen); | ||
| if (index === keys.length - 1) return null; | ||
| return keys[index + 1]; | ||
| }; | ||
| const getScreenBefore = (keys, screen) => { | ||
| const index = keys.indexOf(screen); | ||
| if (index === 0) return null; | ||
| return keys[index - 1]; | ||
| }; | ||
|
|
||
| const getScreen = breakpoints => { | ||
| const { width } = getWindowSizes(); | ||
| let screen = 'xs'; | ||
| breakpoints.keys.some(key => { | ||
| if (width < breakpoints.values[key]) { | ||
| screen = key; | ||
| return true; | ||
| } | ||
| return false; | ||
| }); | ||
| return screen; | ||
| }; | ||
|
|
||
| function useWidth() { | ||
| const theme = useTheme(); | ||
| const { breakpoints } = theme; | ||
| const [screen, setScreen] = useState(getScreen(breakpoints)); | ||
| const keys = [...breakpoints.keys].reverse(); | ||
| const result = | ||
| keys.reduce((output, key) => { | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const matches = useMediaQuery(theme.breakpoints.only(key)); | ||
|
|
||
| return !output && matches ? key : output; | ||
| }, null) || 'xs'; | ||
|
|
||
| useEffect(() => { | ||
| if ( | ||
| getNextScreen(keys, screen) === result || | ||
| getScreenBefore(keys, screen) === result | ||
| ) { | ||
| setScreen(result); | ||
| } | ||
| }, [result]); | ||
| return screen; | ||
| const isXs = useMediaQuery(theme.breakpoints.up('xs')); | ||
| const isSm = useMediaQuery(theme.breakpoints.up('sm')); | ||
| const isMd = useMediaQuery(theme.breakpoints.up('md')); | ||
| const isLg = useMediaQuery(theme.breakpoints.up('lg')); | ||
| const isXl = useMediaQuery(theme.breakpoints.up('xl')); | ||
| if (isXl) return 'xl'; | ||
| if (isLg) return 'lg'; | ||
| if (isMd) return 'md'; | ||
| if (isSm) return 'sm'; | ||
| if (isXs) return 'xs'; | ||
| return null; | ||
| } | ||
|
|
||
| export default useWidth; | ||
|
|
||
| // import { useEffect, useRef, useState } from 'react'; | ||
| // import { useTheme } from '@material-ui/core/styles'; | ||
| // import getWindowSizes from 'utils/getWindowSizes'; | ||
| // | ||
| // const useWidth = (interval = 200) => { | ||
| // const { breakpoints } = useTheme(); | ||
| // const [screen, setScreen] = useState(getScreen(breakpoints)); | ||
| // | ||
| // const debounced = useRef(() => | ||
| // setTimeout(() => { | ||
| // const calculatedScreen = getScreen(breakpoints); | ||
| // if (screen !== calculatedScreen) { | ||
| // setScreen(calculatedScreen); | ||
| // } | ||
| // }, interval), | ||
| // ); | ||
| // useEffect(() => { | ||
| // window.addEventListener('resize', debounced.current); | ||
| // return () => { | ||
| // window.removeEventListener('resize', debounced.current); | ||
| // }; | ||
| // }, []); | ||
| // console.log('screen', screen); | ||
| // return screen; | ||
| // }; | ||
| // | ||
| // export default useWidth; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters