You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.4 KiB
1 line
9.4 KiB
{"ast":null,"code":"import useMediaQuery from './useMediaQuery';\nimport { useMemo } from 'react';\n\n/**\n * Create a responsive hook we a set of breakpoint names and widths.\n * You can use any valid css units as well as a numbers (for pixels).\n *\n * **NOTE:** The object key order is important! it's assumed to be in order from smallest to largest\n *\n * ```ts\n * const useBreakpoint = createBreakpointHook({\n * xs: 0,\n * sm: 576,\n * md: 768,\n * lg: 992,\n * xl: 1200,\n * })\n * ```\n *\n * **Watch out!** using string values will sometimes construct media queries using css `calc()` which\n * is NOT supported in media queries by all browsers at the moment. use numbers for\n * the widest range of browser support.\n *\n * @param breakpointValues A object hash of names to breakpoint dimensions\n */\nexport function createBreakpointHook(breakpointValues) {\n var names = Object.keys(breakpointValues);\n function and(query, next) {\n if (query === next) {\n return next;\n }\n return query ? query + \" and \" + next : next;\n }\n function getNext(breakpoint) {\n return names[Math.min(names.indexOf(breakpoint) + 1, names.length - 1)];\n }\n function getMaxQuery(breakpoint) {\n var next = getNext(breakpoint);\n var value = breakpointValues[next];\n if (typeof value === 'number') value = value - 0.2 + \"px\";else value = \"calc(\" + value + \" - 0.2px)\";\n return \"(max-width: \" + value + \")\";\n }\n function getMinQuery(breakpoint) {\n var value = breakpointValues[breakpoint];\n if (typeof value === 'number') {\n value = value + \"px\";\n }\n return \"(min-width: \" + value + \")\";\n }\n /**\n * Match a set of breakpoints\n *\n * ```tsx\n * const MidSizeOnly = () => {\n * const isMid = useBreakpoint({ lg: 'down', sm: 'up' });\n *\n * if (isMid) return <div>On a Reasonable sized Screen!</div>\n * return null;\n * }\n * ```\n * @param breakpointMap An object map of breakpoints and directions, queries are constructed using \"and\" to join\n * breakpoints together\n * @param window Optionally specify the target window to match against (useful when rendering into iframes)\n */\n\n function useBreakpoint(breakpointOrMap, direction, window) {\n var breakpointMap;\n if (typeof breakpointOrMap === 'object') {\n breakpointMap = breakpointOrMap;\n window = direction;\n direction = true;\n } else {\n var _breakpointMap;\n direction = direction || true;\n breakpointMap = (_breakpointMap = {}, _breakpointMap[breakpointOrMap] = direction, _breakpointMap);\n }\n var query = useMemo(function () {\n return Object.entries(breakpointMap).reduce(function (query, _ref) {\n var key = _ref[0],\n direction = _ref[1];\n if (direction === 'up' || direction === true) {\n query = and(query, getMinQuery(key));\n }\n if (direction === 'down' || direction === true) {\n query = and(query, getMaxQuery(key));\n }\n return query;\n }, '');\n }, [JSON.stringify(breakpointMap)]);\n return useMediaQuery(query, window);\n }\n return useBreakpoint;\n}\nvar useBreakpoint = createBreakpointHook({\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400\n});\nexport default useBreakpoint;","map":{"version":3,"names":["useMediaQuery","useMemo","createBreakpointHook","breakpointValues","names","Object","keys","and","query","next","getNext","breakpoint","Math","min","indexOf","length","getMaxQuery","value","getMinQuery","useBreakpoint","breakpointOrMap","direction","window","breakpointMap","_breakpointMap","entries","reduce","_ref","key","JSON","stringify","xs","sm","md","lg","xl","xxl"],"sources":["C:/Cours/SAE/SAE-3.01/Scripted/Scripted/website/node_modules/@restart/hooks/esm/useBreakpoint.js"],"sourcesContent":["import useMediaQuery from './useMediaQuery';\nimport { useMemo } from 'react';\n\n/**\n * Create a responsive hook we a set of breakpoint names and widths.\n * You can use any valid css units as well as a numbers (for pixels).\n *\n * **NOTE:** The object key order is important! it's assumed to be in order from smallest to largest\n *\n * ```ts\n * const useBreakpoint = createBreakpointHook({\n * xs: 0,\n * sm: 576,\n * md: 768,\n * lg: 992,\n * xl: 1200,\n * })\n * ```\n *\n * **Watch out!** using string values will sometimes construct media queries using css `calc()` which\n * is NOT supported in media queries by all browsers at the moment. use numbers for\n * the widest range of browser support.\n *\n * @param breakpointValues A object hash of names to breakpoint dimensions\n */\nexport function createBreakpointHook(breakpointValues) {\n var names = Object.keys(breakpointValues);\n\n function and(query, next) {\n if (query === next) {\n return next;\n }\n\n return query ? query + \" and \" + next : next;\n }\n\n function getNext(breakpoint) {\n return names[Math.min(names.indexOf(breakpoint) + 1, names.length - 1)];\n }\n\n function getMaxQuery(breakpoint) {\n var next = getNext(breakpoint);\n var value = breakpointValues[next];\n if (typeof value === 'number') value = value - 0.2 + \"px\";else value = \"calc(\" + value + \" - 0.2px)\";\n return \"(max-width: \" + value + \")\";\n }\n\n function getMinQuery(breakpoint) {\n var value = breakpointValues[breakpoint];\n\n if (typeof value === 'number') {\n value = value + \"px\";\n }\n\n return \"(min-width: \" + value + \")\";\n }\n /**\n * Match a set of breakpoints\n *\n * ```tsx\n * const MidSizeOnly = () => {\n * const isMid = useBreakpoint({ lg: 'down', sm: 'up' });\n *\n * if (isMid) return <div>On a Reasonable sized Screen!</div>\n * return null;\n * }\n * ```\n * @param breakpointMap An object map of breakpoints and directions, queries are constructed using \"and\" to join\n * breakpoints together\n * @param window Optionally specify the target window to match against (useful when rendering into iframes)\n */\n\n\n function useBreakpoint(breakpointOrMap, direction, window) {\n var breakpointMap;\n\n if (typeof breakpointOrMap === 'object') {\n breakpointMap = breakpointOrMap;\n window = direction;\n direction = true;\n } else {\n var _breakpointMap;\n\n direction = direction || true;\n breakpointMap = (_breakpointMap = {}, _breakpointMap[breakpointOrMap] = direction, _breakpointMap);\n }\n\n var query = useMemo(function () {\n return Object.entries(breakpointMap).reduce(function (query, _ref) {\n var key = _ref[0],\n direction = _ref[1];\n\n if (direction === 'up' || direction === true) {\n query = and(query, getMinQuery(key));\n }\n\n if (direction === 'down' || direction === true) {\n query = and(query, getMaxQuery(key));\n }\n\n return query;\n }, '');\n }, [JSON.stringify(breakpointMap)]);\n return useMediaQuery(query, window);\n }\n\n return useBreakpoint;\n}\nvar useBreakpoint = createBreakpointHook({\n xs: 0,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400\n});\nexport default useBreakpoint;"],"mappings":"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"},"metadata":{},"sourceType":"module"} |