-
-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add useTheme & useUp / useDown
- Loading branch information
Showing
20 changed files
with
3,027 additions
and
2,645 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 |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| /* eslint-disable no-undef */ | ||
| import React from 'react' | ||
| import { getBreakpoints } from '@xstyled/system' | ||
|
|
||
| export function useThemeBreakpoints(theme) { | ||
| return getBreakpoints({ theme }) | ||
| } | ||
|
|
||
| /** | ||
| * Minimum breakpoint width. | ||
| * Null for the smallest breakpoint. | ||
| */ | ||
| function useThemeMinValue(theme, key) { | ||
| const breakpoints = useThemeBreakpoints(theme) | ||
| const value = breakpoints[key] | ||
| return value === 0 ? null : value | ||
| } | ||
|
|
||
| /** | ||
| * Maximum breakpoint width. Null for the largest (last) breakpoint. | ||
| * The maximum value is calculated as the minimum of the next one less 0.02px | ||
| * to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. | ||
| * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max | ||
| * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. | ||
| * See https://bugs.webkit.org/show_bug.cgi?id=178261 | ||
| */ | ||
| function useThemeMaxValue(theme, key) { | ||
| const breakpoints = useThemeBreakpoints(theme) | ||
| const breakPoint = breakpoints[key] | ||
| return breakPoint === 0 ? null : breakPoint - 0.02 | ||
| } | ||
|
|
||
| export function useViewportWidth() { | ||
| const [width, setWidth] = React.useState(null) | ||
|
|
||
| React.useLayoutEffect(() => { | ||
| setWidth(window.innerWidth) | ||
|
|
||
| function handleResize() { | ||
| setWidth(window.innerWidth) | ||
| } | ||
|
|
||
| window.addEventListener('resize', handleResize) | ||
| return () => window.removeEventListener('resize', handleResize) | ||
| }, []) | ||
|
|
||
| return width | ||
| } | ||
|
|
||
| export function useThemeBreakpoint(theme) { | ||
| const breakpoints = useThemeBreakpoints(theme) | ||
| const width = useViewportWidth() | ||
| return React.useMemo(() => { | ||
| return ( | ||
| Object.keys(breakpoints) | ||
| .reverse() | ||
| .find(breakpoint => width > breakpoints[breakpoint]) || null | ||
| ) | ||
| }, [breakpoints, width]) | ||
| } | ||
|
|
||
| export function useThemeUp(theme, key) { | ||
| const value = useThemeMinValue(theme, key) | ||
| const width = useViewportWidth() | ||
| return width > value | ||
| } | ||
|
|
||
| export function useThemeDown(theme, key) { | ||
| const value = useThemeMaxValue(theme, key) | ||
| const width = useViewportWidth() | ||
| return width < value | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { | ||
| useThemeBreakpoints, | ||
| useThemeBreakpoint, | ||
| useThemeUp, | ||
| useThemeDown, | ||
| } from '@xstyled/core' | ||
| import { useTheme } from 'emotion-theming' | ||
|
|
||
| export { useViewportWidth } from '@xstyled/core' | ||
|
|
||
| export function useBreakpoints() { | ||
| return useThemeBreakpoints(useTheme()) | ||
| } | ||
|
|
||
| export function useBreakpoint() { | ||
| return useThemeBreakpoint(useTheme()) | ||
| } | ||
|
|
||
| export function useUp(key) { | ||
| return useThemeUp(useTheme(), key) | ||
| } | ||
|
|
||
| export function useDown(key) { | ||
| return useThemeDown(useTheme(), key) | ||
| } |
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 |
|---|---|---|
|
|
@@ -27,6 +27,6 @@ | |
| "prop-types": "^15.0.0" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.5.5" | ||
| "@babel/runtime": "^7.7.2" | ||
| } | ||
| } | ||
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 |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { | ||
| useThemeBreakpoints, | ||
| useThemeBreakpoint, | ||
| useThemeUp, | ||
| useThemeDown, | ||
| } from '@xstyled/core' | ||
| import { useTheme } from './theme' | ||
|
|
||
| export { useViewportWidth } from '@xstyled/core' | ||
|
|
||
| export function useBreakpoints() { | ||
| return useThemeBreakpoints(useTheme()) | ||
| } | ||
|
|
||
| export function useBreakpoint() { | ||
| return useThemeBreakpoint(useTheme()) | ||
| } | ||
|
|
||
| export function useUp(key) { | ||
| return useThemeUp(useTheme(), key) | ||
| } | ||
|
|
||
| export function useDown(key) { | ||
| return useThemeDown(useTheme(), key) | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import React from 'react' | ||
| import { ThemeContext } from 'styled-components' | ||
|
|
||
| export function useTheme() { | ||
| return React.useContext(ThemeContext) | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react' | ||
| import '@testing-library/jest-dom/extend-expect' | ||
| import { render, cleanup } from '@testing-library/react' | ||
| import { ThemeProvider } from 'styled-components' | ||
| import { useTheme } from '.' | ||
|
|
||
| afterEach(cleanup) | ||
|
|
||
| describe('#useTheme', () => { | ||
| it('returns theme', () => { | ||
| const theme = { foo: 'bar' } | ||
| const spy = jest.fn() | ||
| function ThemeLogger() { | ||
| const theme = useTheme() | ||
| React.useEffect(() => { | ||
| spy(theme) | ||
| }, [theme]) | ||
| return null | ||
| } | ||
| render( | ||
| <ThemeProvider theme={theme}> | ||
| <ThemeLogger /> | ||
| </ThemeProvider>, | ||
| ) | ||
| expect(spy).toHaveBeenCalledWith(theme) | ||
| }) | ||
| }) |
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 |
|---|---|---|
|
|
@@ -16,6 +16,6 @@ | |
| "access": "public" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.5.5" | ||
| "@babel/runtime": "^7.7.2" | ||
| } | ||
| } | ||
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
Oops, something went wrong.