|
| 1 | +import type { GlobalToken } from '../theme/interface'; |
| 2 | +import { useToken } from '../theme/internal'; |
| 3 | +import useMemo from './hooks/useMemo'; |
| 4 | + |
1 | 5 | export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; |
2 | 6 | export type BreakpointMap = Record<Breakpoint, string>; |
3 | 7 | export type ScreenMap = Partial<Record<Breakpoint, boolean>>; |
4 | 8 | export type ScreenSizeMap = Partial<Record<Breakpoint, number>>; |
5 | 9 |
|
6 | 10 | export const responsiveArray: Breakpoint[] = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs']; |
| 11 | +type SubscribeFunc = (screens: ScreenMap) => void; |
7 | 12 |
|
8 | | -export const responsiveMap: BreakpointMap = { |
9 | | - xs: '(max-width: 575px)', |
10 | | - sm: '(min-width: 576px)', |
11 | | - md: '(min-width: 768px)', |
12 | | - lg: '(min-width: 992px)', |
13 | | - xl: '(min-width: 1200px)', |
14 | | - xxl: '(min-width: 1600px)', |
15 | | - xxxl: '(min-width: 2000px)', |
16 | | -}; |
| 13 | +const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({ |
| 14 | + xs: `(max-width: ${token.screenXSMax}px)`, |
| 15 | + sm: `(min-width: ${token.screenSM}px)`, |
| 16 | + md: `(min-width: ${token.screenMD}px)`, |
| 17 | + lg: `(min-width: ${token.screenLG}px)`, |
| 18 | + xl: `(min-width: ${token.screenXL}px)`, |
| 19 | + xxl: `(min-width: ${token.screenXXL}px)`, |
| 20 | + xxxl: `{min-width: ${token.screenXXXL}px}`, |
| 21 | +}); |
17 | 22 |
|
18 | | -type SubscribeFunc = (screens: ScreenMap) => void; |
19 | | -const subscribers = new Map<Number, SubscribeFunc>(); |
20 | | -let subUid = -1; |
21 | | -let screens = {}; |
| 23 | +export default function useResponsiveObserver() { |
| 24 | + const [, token] = useToken(); |
| 25 | + const responsiveMap: BreakpointMap = getResponsiveMap(token.value); |
22 | 26 |
|
23 | | -const responsiveObserve = { |
24 | | - matchHandlers: {} as { |
25 | | - [prop: string]: { |
26 | | - mql: MediaQueryList; |
27 | | - listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null; |
28 | | - }; |
29 | | - }, |
30 | | - dispatch(pointMap: ScreenMap) { |
31 | | - screens = pointMap; |
32 | | - subscribers.forEach(func => func(screens)); |
33 | | - return subscribers.size >= 1; |
34 | | - }, |
35 | | - subscribe(func: SubscribeFunc): number { |
36 | | - if (!subscribers.size) this.register(); |
37 | | - subUid += 1; |
38 | | - subscribers.set(subUid, func); |
39 | | - func(screens); |
40 | | - return subUid; |
41 | | - }, |
42 | | - unsubscribe(token: number) { |
43 | | - subscribers.delete(token); |
44 | | - if (!subscribers.size) this.unregister(); |
45 | | - }, |
46 | | - unregister() { |
47 | | - Object.keys(responsiveMap).forEach((screen: string) => { |
48 | | - const matchMediaQuery = responsiveMap[screen]; |
49 | | - const handler = this.matchHandlers[matchMediaQuery]; |
50 | | - handler?.mql.removeListener(handler?.listener); |
51 | | - }); |
52 | | - subscribers.clear(); |
53 | | - }, |
54 | | - register() { |
55 | | - Object.keys(responsiveMap).forEach((screen: string) => { |
56 | | - const matchMediaQuery = responsiveMap[screen]; |
57 | | - const listener = ({ matches }: { matches: boolean }) => { |
58 | | - this.dispatch({ |
59 | | - ...screens, |
60 | | - [screen]: matches, |
61 | | - }); |
62 | | - }; |
63 | | - const mql = window.matchMedia(matchMediaQuery); |
64 | | - mql.addListener(listener); |
65 | | - this.matchHandlers[matchMediaQuery] = { |
66 | | - mql, |
67 | | - listener, |
68 | | - }; |
| 27 | + // To avoid repeat create instance, we add `useMemo` here. |
| 28 | + return useMemo(() => { |
| 29 | + const subscribers = new Map<Number, SubscribeFunc>(); |
| 30 | + let subUid = -1; |
| 31 | + let screens = {}; |
69 | 32 |
|
70 | | - listener(mql); |
71 | | - }); |
72 | | - }, |
73 | | -}; |
| 33 | + return { |
| 34 | + matchHandlers: {} as { |
| 35 | + [prop: string]: { |
| 36 | + mql: MediaQueryList; |
| 37 | + listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null; |
| 38 | + }; |
| 39 | + }, |
| 40 | + dispatch(pointMap: ScreenMap) { |
| 41 | + screens = pointMap; |
| 42 | + subscribers.forEach(func => func(screens)); |
| 43 | + return subscribers.size >= 1; |
| 44 | + }, |
| 45 | + subscribe(func: SubscribeFunc): number { |
| 46 | + if (!subscribers.size) this.register(); |
| 47 | + subUid += 1; |
| 48 | + subscribers.set(subUid, func); |
| 49 | + func(screens); |
| 50 | + return subUid; |
| 51 | + }, |
| 52 | + unsubscribe(paramToken: number) { |
| 53 | + subscribers.delete(paramToken); |
| 54 | + if (!subscribers.size) this.unregister(); |
| 55 | + }, |
| 56 | + unregister() { |
| 57 | + Object.keys(responsiveMap).forEach((screen: string) => { |
| 58 | + const matchMediaQuery = responsiveMap[screen]; |
| 59 | + const handler = this.matchHandlers[matchMediaQuery]; |
| 60 | + handler?.mql.removeListener(handler?.listener); |
| 61 | + }); |
| 62 | + subscribers.clear(); |
| 63 | + }, |
| 64 | + register() { |
| 65 | + Object.keys(responsiveMap).forEach((screen: string) => { |
| 66 | + const matchMediaQuery = responsiveMap[screen]; |
| 67 | + const listener = ({ matches }: { matches: boolean }) => { |
| 68 | + this.dispatch({ |
| 69 | + ...screens, |
| 70 | + [screen]: matches, |
| 71 | + }); |
| 72 | + }; |
| 73 | + const mql = window.matchMedia(matchMediaQuery); |
| 74 | + mql.addListener(listener); |
| 75 | + this.matchHandlers[matchMediaQuery] = { |
| 76 | + mql, |
| 77 | + listener, |
| 78 | + }; |
74 | 79 |
|
75 | | -export default responsiveObserve; |
| 80 | + listener(mql); |
| 81 | + }); |
| 82 | + }, |
| 83 | + responsiveMap, |
| 84 | + }; |
| 85 | + }, [token]); |
| 86 | +} |
0 commit comments