1 line
13 KiB
JSON
1 line
13 KiB
JSON
|
{"ast":null,"code":"import React from 'react';\nimport { useToken } from '../theme/internal';\nexport const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];\nconst getResponsiveMap = token => ({\n xs: `(max-width: ${token.screenXSMax}px)`,\n sm: `(min-width: ${token.screenSM}px)`,\n md: `(min-width: ${token.screenMD}px)`,\n lg: `(min-width: ${token.screenLG}px)`,\n xl: `(min-width: ${token.screenXL}px)`,\n xxl: `(min-width: ${token.screenXXL}px)`\n});\n/**\n * Ensures that the breakpoints token are valid, in good order\n * For each breakpoint : screenMin <= screen <= screenMax and screenMax <= nextScreenMin\n */\nconst validateBreakpoints = token => {\n const indexableToken = token;\n const revBreakpoints = [].concat(responsiveArray).reverse();\n revBreakpoints.forEach((breakpoint, i) => {\n const breakpointUpper = breakpoint.toUpperCase();\n const screenMin = `screen${breakpointUpper}Min`;\n const screen = `screen${breakpointUpper}`;\n if (!(indexableToken[screenMin] <= indexableToken[screen])) {\n throw new Error(`${screenMin}<=${screen} fails : !(${indexableToken[screenMin]}<=${indexableToken[screen]})`);\n }\n if (i < revBreakpoints.length - 1) {\n const screenMax = `screen${breakpointUpper}Max`;\n if (!(indexableToken[screen] <= indexableToken[screenMax])) {\n throw new Error(`${screen}<=${screenMax} fails : !(${indexableToken[screen]}<=${indexableToken[screenMax]})`);\n }\n const nextBreakpointUpperMin = revBreakpoints[i + 1].toUpperCase();\n const nextScreenMin = `screen${nextBreakpointUpperMin}Min`;\n if (!(indexableToken[screenMax] <= indexableToken[nextScreenMin])) {\n throw new Error(`${screenMax}<=${nextScreenMin} fails : !(${indexableToken[screenMax]}<=${indexableToken[nextScreenMin]})`);\n }\n }\n });\n return token;\n};\nexport default function useResponsiveObserver() {\n const [, token] = useToken();\n const responsiveMap = getResponsiveMap(validateBreakpoints(token));\n // To avoid repeat create instance, we add `useMemo` here.\n return React.useMemo(() => {\n const subscribers = new Map();\n let subUid = -1;\n let screens = {};\n return {\n matchHandlers: {},\n dispatch(pointMap) {\n screens = pointMap;\n subscribers.forEach(func => func(screens));\n return subscribers.size >= 1;\n },\n subscribe(func) {\n if (!subscribers.size) this.register();\n subUid += 1;\n subscribers.set(subUid, func);\n func(screens);\n return subUid;\n },\n unsubscribe(paramToken) {\n subscribers.delete(paramToken);\n if (!subscribers.size) this.unregister();\n },\n unregister() {\n Object.keys(responsiveMap).forEach(screen => {\n const matchMediaQuery = responsiveMap[screen];\n const handler = this.matchHandlers[matchMediaQuery];\n handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);\n });\n subscribers.clear();\n },\n register() {\n Object.keys(responsiveMap).forEach(screen => {\n const matchMediaQuery = responsiveMap[screen];\n const listener = _ref => {\n let {\n matches\n } = _ref;\n this.dispatch(Object.assign(Object.assign({}, screens), {\n [screen]: matches\n }));\n };\n const mql = window.matchMedia(matchMediaQuery);\n mql.addListener(listener);\n this.matchHandlers[matchMediaQuery] = {\n mql,\n listener\n };\n listener(mql);\n });\n },\n responsiveMap\n };\n }, [token]);\n}\nexport const matchScreen = (screens, screenSizes) => {\n if (screenSizes && typeof screenSizes === 'object') {\n for (let i = 0; i < responsiveArray.length; i++) {\n const breakpoint = responsiveArray[i];\n if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) {\n
|