-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: useStableArray, useBreakpoints, useMediaQueries (#253)
- Loading branch information
Showing
18 changed files
with
726 additions
and
181 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
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,15 +1,18 @@ | ||
| export * from './useAutoFocus'; | ||
| export * from './useBreakpoints'; | ||
| export * from './useDebouncedCallback'; | ||
| export * from './useDebouncedReducer'; | ||
| export * from './useDebouncedState'; | ||
| export * from './useDebouncedUpdates'; | ||
| export * from './useDebouncedValue'; | ||
| export * from './useIsomorphicLayoutEffect'; | ||
| export * from './useLazyRef'; | ||
| export * from './useMediaQueries'; | ||
| export * from './useMediaQuery'; | ||
| export * from './useMergedRefs'; | ||
| export * from './useMutableCallback'; | ||
| export * from './useResizeObserver'; | ||
| export * from './useSafely'; | ||
| export * from './useStableArray'; | ||
| export * from './useToggle'; | ||
| export * from './useUniqueId'; |
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,67 @@ | ||
| import breakpointsDefinitions from '@rocket.chat/fuselage-tokens/breakpoints.json'; | ||
| import { FunctionComponent, createElement, StrictMode } from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import { act } from 'react-dom/test-utils'; | ||
|
|
||
| import resizeToMock from './__mocks__/resizeTo'; | ||
| import matchMediaMock from './__mocks__/matchMedia'; | ||
| import { useBreakpoints } from '.'; | ||
|
|
||
| beforeAll(() => { | ||
| window.resizeTo = resizeToMock; | ||
| window.matchMedia = jest.fn(matchMediaMock); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| window.resizeTo(1024, 768); | ||
| }); | ||
|
|
||
| it('returns at least the smallest breakpoint name', () => { | ||
| let breakpoints: string[]; | ||
| const TestComponent: FunctionComponent = () => { | ||
| breakpoints = useBreakpoints(); | ||
| return null; | ||
| }; | ||
|
|
||
| act(() => { | ||
| render( | ||
| createElement(StrictMode, {}, createElement(TestComponent)), | ||
| document.createElement('div'), | ||
| ); | ||
| }); | ||
|
|
||
| expect(breakpoints[0]).toBe(breakpointsDefinitions[0].name); | ||
| }); | ||
|
|
||
| it('returns matching breakpoint names', () => { | ||
| const initialBreakpoints = breakpointsDefinitions.slice(0, -1); | ||
| const finalBreakpoints = breakpointsDefinitions.slice(0, -2); | ||
|
|
||
| let breakpoints: string[]; | ||
| const TestComponent: FunctionComponent = () => { | ||
| breakpoints = useBreakpoints(); | ||
| return null; | ||
| }; | ||
|
|
||
| act(() => { | ||
| window.resizeTo(initialBreakpoints[initialBreakpoints.length - 1].minViewportWidth, 768); | ||
|
|
||
| render( | ||
| createElement(StrictMode, {}, createElement(TestComponent)), | ||
| document.createElement('div'), | ||
| ); | ||
| }); | ||
|
|
||
| expect(breakpoints).toStrictEqual(initialBreakpoints.map((breakpoint) => breakpoint.name)); | ||
|
|
||
| act(() => { | ||
| window.resizeTo(finalBreakpoints[finalBreakpoints.length - 1].minViewportWidth, 768); | ||
|
|
||
| render( | ||
| createElement(StrictMode, {}, createElement(TestComponent)), | ||
| document.createElement('div'), | ||
| ); | ||
| }); | ||
|
|
||
| expect(breakpoints).toStrictEqual(finalBreakpoints.map((breakpoint) => breakpoint.name)); | ||
| }); |
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 breakpointsDefinitions from '@rocket.chat/fuselage-tokens/breakpoints.json'; | ||
| import { useMemo } from 'react'; | ||
|
|
||
| import { useMediaQueries } from './useMediaQueries'; | ||
|
|
||
| const mediaQueries = breakpointsDefinitions | ||
| .slice(1) | ||
| .map((breakpoint) => `(min-width: ${ breakpoint.minViewportWidth }px)`); | ||
|
|
||
| /** | ||
| * Hook to catch which responsive design' breakpoints are active. | ||
| * | ||
| * @returns an array of the active breakpoint names. | ||
| */ | ||
| export const useBreakpoints = (): string[] => { | ||
| const matches = useMediaQueries(...mediaQueries); | ||
|
|
||
| return useMemo(() => matches.reduce<string[]>((names, matches, i) => { | ||
| if (matches) { | ||
| return [...names, breakpointsDefinitions[i + 1].name]; | ||
| } | ||
|
|
||
| return names; | ||
| }, [breakpointsDefinitions[0].name]), [matches]); | ||
| }; |
36 changes: 36 additions & 0 deletions
36
packages/fuselage-hooks/src/useMediaQueries.server.spec.ts
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,36 @@ | ||
| /** | ||
| * @jest-environment node | ||
| */ | ||
|
|
||
| import { FunctionComponent, createElement, StrictMode } from 'react'; | ||
| import { renderToString } from 'react-dom/server'; | ||
|
|
||
| import { useMediaQueries } from '.'; | ||
|
|
||
| it('returns empty array for undefined media query', () => { | ||
| let matches: boolean[]; | ||
| const TestComponent: FunctionComponent = () => { | ||
| matches = useMediaQueries(); | ||
| return null; | ||
| }; | ||
|
|
||
| renderToString( | ||
| createElement(StrictMode, {}, createElement(TestComponent)), | ||
| ); | ||
|
|
||
| expect(matches).toStrictEqual([]); | ||
| }); | ||
|
|
||
| it('returns false for defined media query', () => { | ||
| let matches: boolean[]; | ||
| const TestComponent: FunctionComponent = () => { | ||
| matches = useMediaQueries('(max-width: 1024)'); | ||
| return null; | ||
| }; | ||
|
|
||
| renderToString( | ||
| createElement(StrictMode, {}, createElement(TestComponent)), | ||
| ); | ||
|
|
||
| expect(matches).toStrictEqual([false]); | ||
| }); |
Oops, something went wrong.