@blocz/react-responsive 4.0.0-beta.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -88
- package/lib/Only.d.ts +0 -3
- package/lib/index.d.ts +1 -2
- package/lib/react-responsive.js +1 -1
- package/lib/react-responsive.js.map +1 -1
- package/lib/react-responsive.modern.js +1 -1
- package/lib/react-responsive.modern.js.map +1 -1
- package/lib/react-responsive.modern.mjs +1 -1
- package/lib/react-responsive.modern.mjs.map +1 -1
- package/lib/react-responsive.umd.js +1 -1
- package/lib/react-responsive.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,14 +24,11 @@ If you need a responsive layout and adaptive components, `@blocz/react-responsiv
|
|
|
24
24
|
2. [Change default breakpoints](#change-default-breakpoints)
|
|
25
25
|
3. [Units](#units)
|
|
26
26
|
4. [Direction](#direction)
|
|
27
|
-
4. [
|
|
28
|
-
|
|
29
|
-
2. [`toCSS`](#tocss)
|
|
30
|
-
5. [Comparison to other libraries](#comparison-to-other-libraries)
|
|
31
|
-
6. [`matchMedia` polyfill](#matchmedia-polyfill)
|
|
27
|
+
4. [Comparison to other libraries](#comparison-to-other-libraries)
|
|
28
|
+
5. [`matchMedia` polyfill](#matchmedia-polyfill)
|
|
32
29
|
1. [Browser](#browser)
|
|
33
30
|
2. [Node](#node)
|
|
34
|
-
|
|
31
|
+
6. [FAQ](#faq)
|
|
35
32
|
|
|
36
33
|
## How to use
|
|
37
34
|
|
|
@@ -299,88 +296,6 @@ Every CSS units are supported.
|
|
|
299
296
|
|
|
300
297
|
The default unit is `px`.
|
|
301
298
|
|
|
302
|
-
### CSS in JS
|
|
303
|
-
|
|
304
|
-
`@blocz/react-responsive` includes 2 utility functions `toJSON` and `toCSS` so that you can re-use `@blocz/react-responsive` breakpoints as media queries for `css-in-js` libraries.
|
|
305
|
-
|
|
306
|
-
#### `toJSON`
|
|
307
|
-
|
|
308
|
-
Example with [`styletron`](https://github.com/styletron/styletron):
|
|
309
|
-
|
|
310
|
-
```jsx
|
|
311
|
-
import React from "react";
|
|
312
|
-
import { toJSON as createToJSON, BreakpointsContext } from "@blocz/react-responsive";
|
|
313
|
-
import { styled } from "styletron-react";
|
|
314
|
-
|
|
315
|
-
const styles = {
|
|
316
|
-
mdDown: {
|
|
317
|
-
color: "red",
|
|
318
|
-
":hover": { color: "blue" },
|
|
319
|
-
},
|
|
320
|
-
lgUp: {
|
|
321
|
-
color: "green",
|
|
322
|
-
},
|
|
323
|
-
};
|
|
324
|
-
|
|
325
|
-
const Panel = styled("div", (props) => ({
|
|
326
|
-
...props.$toJSON(styles),
|
|
327
|
-
}));
|
|
328
|
-
|
|
329
|
-
const App = () => {
|
|
330
|
-
const breakpoints = React.useContext(BreakpointsContext);
|
|
331
|
-
const toJSON = createToJSON(breakpoints);
|
|
332
|
-
// toJSON(styles) returns:
|
|
333
|
-
// {
|
|
334
|
-
// "@media (max-width:991px)": {
|
|
335
|
-
// "color": "red",
|
|
336
|
-
// ":hover": {
|
|
337
|
-
// "color": "blue"
|
|
338
|
-
// }
|
|
339
|
-
// },
|
|
340
|
-
// "@media (min-width:992px)": {
|
|
341
|
-
// "color": "green"
|
|
342
|
-
// }
|
|
343
|
-
// }
|
|
344
|
-
return <Panel $toJSON={toJSON}>content</Panel>;
|
|
345
|
-
};
|
|
346
|
-
```
|
|
347
|
-
|
|
348
|
-
#### `toCSS`
|
|
349
|
-
|
|
350
|
-
Example with [`emotion`](https://emotion.sh):
|
|
351
|
-
|
|
352
|
-
```jsx
|
|
353
|
-
import React from "react";
|
|
354
|
-
import { toCSS as createToCSS, BreakpointsContext } from "@blocz/react-responsive";
|
|
355
|
-
import { css } from "@emotion/css";
|
|
356
|
-
|
|
357
|
-
const styles = {
|
|
358
|
-
mdDown: {
|
|
359
|
-
color: "red",
|
|
360
|
-
":hover": { color: "blue" },
|
|
361
|
-
},
|
|
362
|
-
lgUp: {
|
|
363
|
-
color: "green",
|
|
364
|
-
},
|
|
365
|
-
};
|
|
366
|
-
|
|
367
|
-
const App = () => {
|
|
368
|
-
const breakpoints = React.useContext(BreakpointsContext);
|
|
369
|
-
const toCSS = createToCSS(breakpoints);
|
|
370
|
-
// toCSS(styles) returns:
|
|
371
|
-
// `@media (max-width:991px) {
|
|
372
|
-
// color: red;
|
|
373
|
-
// :hover {
|
|
374
|
-
// color: blue;
|
|
375
|
-
// }
|
|
376
|
-
// }
|
|
377
|
-
// @media (min-width:992px) {
|
|
378
|
-
// color: green;
|
|
379
|
-
// }`
|
|
380
|
-
return <div className={css(toCSS(styles))}>content</div>;
|
|
381
|
-
};
|
|
382
|
-
```
|
|
383
|
-
|
|
384
299
|
### Comparison to other libraries
|
|
385
300
|
|
|
386
301
|
| Lib | Breakpoints | Custom breakpoints | Media query | `matchMedia` listener' | hooks | SSR support |
|
package/lib/Only.d.ts
CHANGED
|
@@ -5,6 +5,3 @@ export type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {
|
|
|
5
5
|
as?: string | React.ComponentType<OtherProps>;
|
|
6
6
|
};
|
|
7
7
|
export declare function Only<OtherProps = Record<string, never>>({ matchMedia, on, as, children, ...props }: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null;
|
|
8
|
-
export declare namespace Only {
|
|
9
|
-
var displayName: string;
|
|
10
|
-
}
|
package/lib/index.d.ts
CHANGED
|
@@ -2,5 +2,4 @@ export { BreakpointsProvider, BreakpointsContext } from "./BreakpointsContext";
|
|
|
2
2
|
export { Only } from "./Only";
|
|
3
3
|
export { useBreakpoint } from "./useBreakpoint";
|
|
4
4
|
export { useMediaQuery } from "./useMediaQuery";
|
|
5
|
-
export { Units } from "./sanitize";
|
|
6
|
-
export { toJSON, toCSS } from "./css-in-js";
|
|
5
|
+
export { type Units } from "./sanitize";
|
package/lib/react-responsive.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function e(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var n=/*#__PURE__*/e(require("react"));function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(null,arguments)}var t=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],i=["width","height"],o=function(e){return Object.keys(e).reduce(function(n,r){var o=e[r];if(!Array.isArray(o)||o.length<=1)return n;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var p=new Error('The following fields "'+l+'" have been ignored');console.error(p)}if("number"!=typeof c||"number"!=typeof f)return n;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var v=Math.min(c,f),d=Math.max(c,f),m=a&&t.includes(a)?a:"px",h=u&&i.includes(u)?u:"width";return n[r]=[v,d,m,h],n[r+"Up"]=[v,Infinity,m,h],n[r+"Down"]=[0,d,m,h],n},{})},a={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(o(a)),c=function(e){var t=e.breakpoints,i=e.
|
|
1
|
+
function e(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var n=/*#__PURE__*/e(require("react"));function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(null,arguments)}var t=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],i=["width","height"],o=function(e){return Object.keys(e).reduce(function(n,r){var o=e[r];if(!Array.isArray(o)||o.length<=1)return n;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var p=new Error('The following fields "'+l+'" have been ignored');console.error(p)}if("number"!=typeof c||"number"!=typeof f)return n;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var v=Math.min(c,f),d=Math.max(c,f),m=a&&t.includes(a)?a:"px",h=u&&i.includes(u)?u:"width";return n[r]=[v,d,m,h],n[r+"Up"]=[v,Infinity,m,h],n[r+"Down"]=[0,d,m,h],n},{})},a={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(o(a)),c=function(e){var t=e.breakpoints,i=e.children;return n.createElement(u.Provider,{value:o(r({},void 0===t?a:t,e.additionalBreakpoints))},i)};c.displayName="BreakpointsProvider";var f=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(r.matches);var e=function(e){o(e.matches)};return r.addListener(e),function(){r.removeListener(e)}},[r]),i},s=function(e){var r=n.useContext(u),t=n.useMemo(function(){return function(e){return function(n){if(void 0===n&&(n=""),!n)return"";var r=n.split(" "),t=r.map(function(n){return e[n]}).filter(Boolean).map(function(e){return function(e){var n=[],r=e[0],t=e[1],i=e[2],o=e[3];return 0!==r&&n.push("(min-"+o+":"+r+i+")"),Infinity!==t&&n.push("(max-"+o+":"+t+i+")")," "+n.join(" and ")}(e)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return f(i||"-")},l=["matchMedia","on","as","children"];exports.BreakpointsContext=u,exports.BreakpointsProvider=c,exports.Only=function(e){var r=e.matchMedia,t=e.on,i=e.as,o=e.children,a=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(n.includes(t))continue;r[t]=e[t]}return r}(e,l),u=s(t),c=f(r||"-");return u||c?n.createElement(i||n.Fragment,i?a:void 0,o):null},exports.useBreakpoint=s,exports.useMediaQuery=f;
|
|
2
2
|
//# sourceMappingURL=react-responsive.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-responsive.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext = React.createContext<Breakpoints>(sanitize(defaultBreakpoints));\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints = {},\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // We use startTransition as those update aren't urgent\n // startTransition(() => {\n setIsShown(event.matches);\n // });\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n | CSSProperties\n | {\n [key: string]: CSSProperties;\n };\n\ninterface Points {\n [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n (breakpoints: Breakpoints) =>\n (points: Points): CSSinJS => {\n const css: CSSinJS = {};\n Object.keys(points).forEach((point) => {\n const breakpoint = breakpoints[point];\n if (!breakpoint) {\n throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n }\n css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n });\n return css;\n };\n\nconst stringify = (object: CSSinJSProperties) => {\n let string = \"\";\n Object.entries(object).forEach(([key, value]) => {\n if (typeof value !== \"object\") {\n string += `${key}: ${value};\\n`;\n return;\n }\n string += `${key} {\\n${stringify(value)}}\\n`;\n });\n return string;\n};\n\nexport const toCSS =\n (breakpoints: Breakpoints) =>\n (points: Points): string =>\n stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","_ref$additionalBreakp","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-responsive.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints,\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // Those are important updates, so we don't want to use transitions on them\n setIsShown(event.matches);\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","children","Provider","value","_extends","additionalBreakpoints","displayName","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","mediaList","minValue","maxValue","push","str","join","fromBreakpointToMedia","isUniqBreakpoint","mediaQueryBuilder","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as n from"react";function
|
|
1
|
+
import*as n from"react";function e(){return e=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)({}).hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},e.apply(null,arguments)}var r=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],t=["width","height"],i=function(n){return Object.keys(n).reduce(function(e,i){var o=n[i];if(!Array.isArray(o)||o.length<=1)return e;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var m=new Error('The following fields "'+l+'" have been ignored');console.error(m)}if("number"!=typeof c||"number"!=typeof f)return e;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var v=Math.min(c,f),p=Math.max(c,f),d=a&&r.includes(a)?a:"px",h=u&&t.includes(u)?u:"width";return e[i]=[v,p,d,h],e[i+"Up"]=[v,Infinity,d,h],e[i+"Down"]=[0,p,d,h],e},{})},o={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},a=n.createContext(i(o)),u=function(r){var t=r.breakpoints,u=r.children;return n.createElement(a.Provider,{value:i(e({},void 0===t?o:t,r.additionalBreakpoints))},u)};u.displayName="BreakpointsProvider";var c=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(r.matches);var n=function(n){o(n.matches)};return r.addListener(n),function(){r.removeListener(n)}},[r]),i},f=function(e){var r=n.useContext(a),t=n.useMemo(function(){return function(n){return function(e){if(void 0===e&&(e=""),!e)return"";var r=e.split(" "),t=r.map(function(e){return n[e]}).filter(Boolean).map(function(n){return function(n){var e=[],r=n[0],t=n[1],i=n[2],o=n[3];return 0!==r&&e.push("(min-"+o+":"+r+i+")"),Infinity!==t&&e.push("(max-"+o+":"+t+i+")")," "+e.join(" and ")}(n)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return c(i||"-")},s=["matchMedia","on","as","children"];function l(e){var r=e.matchMedia,t=e.on,i=e.as,o=e.children,a=function(n,e){if(null==n)return{};var r={};for(var t in n)if({}.hasOwnProperty.call(n,t)){if(e.includes(t))continue;r[t]=n[t]}return r}(e,s),u=f(t),l=c(r||"-");return u||l?n.createElement(i||n.Fragment,i?a:void 0,o):null}export{a as BreakpointsContext,u as BreakpointsProvider,l as Only,f as useBreakpoint,c as useMediaQuery};
|
|
2
2
|
//# sourceMappingURL=react-responsive.modern.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-responsive.modern.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext = React.createContext<Breakpoints>(sanitize(defaultBreakpoints));\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints = {},\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // We use startTransition as those update aren't urgent\n // startTransition(() => {\n setIsShown(event.matches);\n // });\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n | CSSProperties\n | {\n [key: string]: CSSProperties;\n };\n\ninterface Points {\n [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n (breakpoints: Breakpoints) =>\n (points: Points): CSSinJS => {\n const css: CSSinJS = {};\n Object.keys(points).forEach((point) => {\n const breakpoint = breakpoints[point];\n if (!breakpoint) {\n throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n }\n css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n });\n return css;\n };\n\nconst stringify = (object: CSSinJSProperties) => {\n let string = \"\";\n Object.entries(object).forEach(([key, value]) => {\n if (typeof value !== \"object\") {\n string += `${key}: ${value};\\n`;\n return;\n }\n string += `${key} {\\n${stringify(value)}}\\n`;\n });\n return string;\n};\n\nexport const toCSS =\n (breakpoints: Breakpoints) =>\n (points: Points): string =>\n stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","_ref$additionalBreakp","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key","toCSS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-responsive.modern.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints,\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // Those are important updates, so we don't want to use transitions on them\n setIsShown(event.matches);\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","children","Provider","value","_extends","additionalBreakpoints","displayName","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","mediaList","minValue","maxValue","push","str","join","fromBreakpointToMedia","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as n from"react";function
|
|
1
|
+
import*as n from"react";function e(){return e=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)({}).hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},e.apply(null,arguments)}var r=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],t=["width","height"],i=function(n){return Object.keys(n).reduce(function(e,i){var o=n[i];if(!Array.isArray(o)||o.length<=1)return e;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var m=new Error('The following fields "'+l+'" have been ignored');console.error(m)}if("number"!=typeof c||"number"!=typeof f)return e;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var v=Math.min(c,f),p=Math.max(c,f),d=a&&r.includes(a)?a:"px",h=u&&t.includes(u)?u:"width";return e[i]=[v,p,d,h],e[i+"Up"]=[v,Infinity,d,h],e[i+"Down"]=[0,p,d,h],e},{})},o={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},a=n.createContext(i(o)),u=function(r){var t=r.breakpoints,u=r.children;return n.createElement(a.Provider,{value:i(e({},void 0===t?o:t,r.additionalBreakpoints))},u)};u.displayName="BreakpointsProvider";var c=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(r.matches);var n=function(n){o(n.matches)};return r.addListener(n),function(){r.removeListener(n)}},[r]),i},f=function(e){var r=n.useContext(a),t=n.useMemo(function(){return function(n){return function(e){if(void 0===e&&(e=""),!e)return"";var r=e.split(" "),t=r.map(function(e){return n[e]}).filter(Boolean).map(function(n){return function(n){var e=[],r=n[0],t=n[1],i=n[2],o=n[3];return 0!==r&&e.push("(min-"+o+":"+r+i+")"),Infinity!==t&&e.push("(max-"+o+":"+t+i+")")," "+e.join(" and ")}(n)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return c(i||"-")},s=["matchMedia","on","as","children"];function l(e){var r=e.matchMedia,t=e.on,i=e.as,o=e.children,a=function(n,e){if(null==n)return{};var r={};for(var t in n)if({}.hasOwnProperty.call(n,t)){if(e.includes(t))continue;r[t]=n[t]}return r}(e,s),u=f(t),l=c(r||"-");return u||l?n.createElement(i||n.Fragment,i?a:void 0,o):null}export{a as BreakpointsContext,u as BreakpointsProvider,l as Only,f as useBreakpoint,c as useMediaQuery};
|
|
2
2
|
//# sourceMappingURL=react-responsive.modern.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-responsive.modern.mjs","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext = React.createContext<Breakpoints>(sanitize(defaultBreakpoints));\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints = {},\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // We use startTransition as those update aren't urgent\n // startTransition(() => {\n setIsShown(event.matches);\n // });\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n | CSSProperties\n | {\n [key: string]: CSSProperties;\n };\n\ninterface Points {\n [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n (breakpoints: Breakpoints) =>\n (points: Points): CSSinJS => {\n const css: CSSinJS = {};\n Object.keys(points).forEach((point) => {\n const breakpoint = breakpoints[point];\n if (!breakpoint) {\n throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n }\n css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n });\n return css;\n };\n\nconst stringify = (object: CSSinJSProperties) => {\n let string = \"\";\n Object.entries(object).forEach(([key, value]) => {\n if (typeof value !== \"object\") {\n string += `${key}: ${value};\\n`;\n return;\n }\n string += `${key} {\\n${stringify(value)}}\\n`;\n });\n return string;\n};\n\nexport const toCSS =\n (breakpoints: Breakpoints) =>\n (points: Points): string =>\n stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedMin","supposedMax","options","rest","error","Error","console","supposedUnit","supposedDirection","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","str","push","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","isShown","setIsShown","useState","matches","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","_ref","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key","toCSS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-responsive.modern.mjs","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/fromBreakpointToMedia.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints,\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // Those are important updates, so we don't want to use transitions on them\n setIsShown(event.matches);\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedMin","supposedMax","options","rest","error","Error","console","supposedUnit","supposedDirection","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","additionalBreakpoints","children","Provider","value","_extends","displayName","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","isShown","setIsShown","useState","matches","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","mediaList","minValue","maxValue","str","push","join","fromBreakpointToMedia","isUniqBreakpoint","mediaQueryBuilder","Only","_ref","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined"],"mappings":"gPAiBA,MAAMA,EAAgC,CACpC,KACA,KACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,MACA,KACA,KACA,OACA,QAKIC,EAA0C,CAAC,QAAS,UAiB7CC,EAAYC,GAChBC,OAAOC,KAAKF,GAAeG,OAAoB,CAACC,EAAaC,KAClE,MAAMC,EAAaN,EAAcK,GAEjC,IAAKE,MAAMC,QAAQF,IAAeA,EAAWG,QAAU,EACrD,OAAOL,EAGT,MAAOM,EAAaC,EAAaC,KAAYC,GAAQP,EACrD,GAAIO,EAAKJ,OAAS,EAAG,CACnB,MAAMK,EAAQ,IAAIC,MAAM,yBAAyBF,wBACjDG,QAAQF,MAAMA,EAChB,CAEA,GAA2B,iBAAhBJ,GAAmD,iBAAhBC,EAC5C,OAAOP,EAGT,IAAIa,EACAC,EACmB,iBAAZN,EACTK,EAAeL,EACa,iBAAZA,IAChBM,EAAoBN,EAAQO,UAC5BF,EAAeL,EAAQQ,MAGzB,MAAMC,EAAMC,KAAKD,IAAIX,EAAaC,GAC5BY,EAAMD,KAAKC,IAAIb,EAAaC,GAC5BS,EAAOH,GAAgBpB,EAAqB2B,SAASP,GAAgBA,EAAe,KACpFE,EACJD,GAAqBpB,EAA0B0B,SAASN,GAAqBA,EAAoB,QAMnG,OAJAd,EAAYC,GAAkB,CAACgB,EAAKE,EAAKH,EAAMD,GAC/Cf,EAAY,GAAGC,OAAsB,CAACgB,EAAKI,SAAUL,EAAMD,GAC3Df,EAAY,GAAGC,SAAwB,CAAC,EAAGkB,EAAKH,EAAMD,GAE/Cf,GACN,CAAA,GCxFCsB,EAAyC,CAC7CC,GAAI,CAAC,EAAG,IAAK,MACbC,GAAI,CAAC,IAAK,IAAK,MACfC,GAAI,CAAC,IAAK,IAAK,MACfC,GAAI,CAAC,IAAK,KAAM,MAChBC,GAAI,CAAC,KAAMN,SAAU,OAGVO,EAAiDC,EAAMC,cAClEnC,EAAS2B,IAQES,EAAkGA,EAC7G/B,YAAAA,EAAcsB,EACdU,wBACAC,cAGEJ,gBAACD,EAAmBM,SAClB,CAAAC,MAAOxC,EAAQyC,EACVpC,CAAAA,EAAAA,EACAgC,KAGJC,GAKPF,EAAoBM,YAAc,4BCpCrBC,EAAiBC,IAC5B,MAAMC,EAAiBX,EAAMY,QAAQ,IAAMC,WAAWH,GAAa,CAACA,KAC7DI,EAASC,GAAcf,EAAMgB,SAAkBL,EAAeM,SAgBrE,OAdAjB,EAAMkB,gBAAgB,KACpBH,EAAWJ,EAAeM,SAC1B,MAAME,EAAYC,IAEhBL,EAAWK,EAAMH,UAKnB,OADAN,EAAeU,YAAYF,GACpB,KACLR,EAAeW,eAAeH,GAChC,EACC,CAACR,IAEGG,GCZIS,EAAiBC,IAC5B,MAAMrD,EAAc6B,EAAMyB,WAAW1B,GAC/B2B,EAAe1B,EAAMY,QAAQ,ICNlCzC,IACD,CAACqD,EAAK,MACJ,IAAKA,EACH,MAAO,GAET,MAAMG,EAAqBH,EAAGI,MAAM,KAE9BlB,EADsBiB,EAAmBE,IAAKzD,GAAmBD,EAAYC,IAAiB0D,OAAOC,SAExGF,IAAKxD,GCV0BA,KACpC,MAAM2D,EAAsB,IACrBC,EAAUC,EAAU/C,EAAMD,GAAab,EAC9C,IAAI8D,EAcJ,OAXiB,IAAbF,IACFE,EAAM,GAAGF,IAAW9C,IACpB6C,EAAUI,KAAK,QAAQlD,KAAaiD,OAIrB3C,WAAb0C,IACFC,EAAM,GAAGD,IAAW/C,IACpB6C,EAAUI,KAAK,QAAQlD,KAAaiD,OAG/B,IAAMH,EAAUK,KAAK,QAAO,EDPVC,CAAsBjE,IAC1CyD,OAAOC,SACPM,KAAK,KACR,IAAK3B,EAAY,CACf,MAAM6B,EAAiD,IAA9BZ,EAAmBnD,OAC5CO,QAAQF,MACN,IAAI8C,EAAmBU,KAAK,YAAYE,EAAmB,KAAO,YAChEA,EAAmB,KAAO,qBACTA,EAAmB,GAAK,MAE/C,CACA,OAAO7B,GDbgC8B,CAAkBrE,GAAc,CAACA,IAEpEuC,EAAaV,EAAMY,QAAQ,IAAMc,EAAaF,GAAK,CAACE,EAAcF,IAExE,OAAOf,EAAcC,GAAc,IAAG,wCGHxB,SAAA+B,EAAIC,OAAqC7B,WACvDA,EAAUW,GACVA,EAAEmB,GACFA,EAAEvC,SACFA,GAE+CsC,EAD5CE,yIAAKC,CAAAH,EAAAI,GAER,MAAMC,EAAUxB,EAAcC,GACxBwB,EAAavC,EAAcI,GAAc,KAG/C,OAFgBkC,GAAWC,EAMpBhD,EAAMiD,cAEXN,GAAM3C,EAAMkD,SACZP,EAAMC,OAAuBO,EAC7B/C,OAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e||self)["@blocz/react-responsive"]={},e.React)}(this,function(e,n){function r(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var t=/*#__PURE__*/r(n);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},i.apply(null,arguments)}var o=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],a=["width","height"],u=function(e){return Object.keys(e).reduce(function(n,r){var t=e[r];if(!Array.isArray(t)||t.length<=1)return n;var i,u,c=t[0],f=t[1],s=t[2],l=t.slice(3);if(l.length>0){var d=new Error('The following fields "'+l+'" have been ignored');console.error(d)}if("number"!=typeof c||"number"!=typeof f)return n;"string"==typeof s?i=s:"object"==typeof s&&(u=s.direction,i=s.unit);var p=Math.min(c,f),v=Math.max(c,f),m=i&&o.includes(i)?i:"px",h=u&&a.includes(u)?u:"width";return n[r]=[p,v,m,h],n[r+"Up"]=[p,Infinity,m,h],n[r+"Down"]=[0,v,m,h],n},{})},c={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},f=t.createContext(u(c)),s=function(e){var n=e.breakpoints,r=e.
|
|
1
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e||self)["@blocz/react-responsive"]={},e.React)}(this,function(e,n){function r(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var t=/*#__PURE__*/r(n);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},i.apply(null,arguments)}var o=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],a=["width","height"],u=function(e){return Object.keys(e).reduce(function(n,r){var t=e[r];if(!Array.isArray(t)||t.length<=1)return n;var i,u,c=t[0],f=t[1],s=t[2],l=t.slice(3);if(l.length>0){var d=new Error('The following fields "'+l+'" have been ignored');console.error(d)}if("number"!=typeof c||"number"!=typeof f)return n;"string"==typeof s?i=s:"object"==typeof s&&(u=s.direction,i=s.unit);var p=Math.min(c,f),v=Math.max(c,f),m=i&&o.includes(i)?i:"px",h=u&&a.includes(u)?u:"width";return n[r]=[p,v,m,h],n[r+"Up"]=[p,Infinity,m,h],n[r+"Down"]=[0,v,m,h],n},{})},c={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},f=t.createContext(u(c)),s=function(e){var n=e.breakpoints,r=e.children;return t.createElement(f.Provider,{value:u(i({},void 0===n?c:n,e.additionalBreakpoints))},r)};s.displayName="BreakpointsProvider";var l=function(e){var n=t.useMemo(function(){return matchMedia(e)},[e]),r=t.useState(n.matches),i=r[0],o=r[1];return t.useLayoutEffect(function(){o(n.matches);var e=function(e){o(e.matches)};return n.addListener(e),function(){n.removeListener(e)}},[n]),i},d=function(e){var n=t.useContext(f),r=t.useMemo(function(){return function(e){return function(n){if(void 0===n&&(n=""),!n)return"";var r=n.split(" "),t=r.map(function(n){return e[n]}).filter(Boolean).map(function(e){return function(e){var n=[],r=e[0],t=e[1],i=e[2],o=e[3];return 0!==r&&n.push("(min-"+o+":"+r+i+")"),Infinity!==t&&n.push("(max-"+o+":"+t+i+")")," "+n.join(" and ")}(e)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(n)},[n]),i=t.useMemo(function(){return r(e)},[r,e]);return l(i||"-")},p=["matchMedia","on","as","children"];e.BreakpointsContext=f,e.BreakpointsProvider=s,e.Only=function(e){var n=e.matchMedia,r=e.on,i=e.as,o=e.children,a=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(n.includes(t))continue;r[t]=e[t]}return r}(e,p),u=d(r),c=l(n||"-");return u||c?t.createElement(i||t.Fragment,i?a:void 0,o):null},e.useBreakpoint=d,e.useMediaQuery=l});
|
|
2
2
|
//# sourceMappingURL=react-responsive.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-responsive.umd.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext = React.createContext<Breakpoints>(sanitize(defaultBreakpoints));\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints = {},\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // We use startTransition as those update aren't urgent\n // startTransition(() => {\n setIsShown(event.matches);\n // });\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n | CSSProperties\n | {\n [key: string]: CSSProperties;\n };\n\ninterface Points {\n [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n (breakpoints: Breakpoints) =>\n (points: Points): CSSinJS => {\n const css: CSSinJS = {};\n Object.keys(points).forEach((point) => {\n const breakpoint = breakpoints[point];\n if (!breakpoint) {\n throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n }\n css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n });\n return css;\n };\n\nconst stringify = (object: CSSinJSProperties) => {\n let string = \"\";\n Object.entries(object).forEach(([key, value]) => {\n if (typeof value !== \"object\") {\n string += `${key}: ${value};\\n`;\n return;\n }\n string += `${key} {\\n${stringify(value)}}\\n`;\n });\n return string;\n};\n\nexport const toCSS =\n (breakpoints: Breakpoints) =>\n (points: Points): string =>\n stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","_ref$additionalBreakp","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"react-responsive.umd.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n | \"em\"\n | \"ex\"\n | \"%\"\n | \"px\"\n | \"cm\"\n | \"mm\"\n | \"in\"\n | \"pt\"\n | \"pc\"\n | \"ch\"\n | \"rem\"\n | \"vh\"\n | \"vw\"\n | \"vmin\"\n | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n \"em\",\n \"ex\",\n \"%\",\n \"px\",\n \"cm\",\n \"mm\",\n \"in\",\n \"pt\",\n \"pc\",\n \"ch\",\n \"rem\",\n \"vh\",\n \"vw\",\n \"vmin\",\n \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n | [number, number]\n | [number, number, Units]\n | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n const breakpoint = inBreakpoints[breakpointName];\n\n if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n return breakpoints;\n }\n\n const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n if (rest.length > 0) {\n const error = new Error(`The following fields \"${rest}\" have been ignored`);\n console.error(error);\n }\n\n if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n return breakpoints;\n }\n\n let supposedUnit: Units | undefined;\n let supposedDirection: Directions | undefined;\n if (typeof options === \"string\") {\n supposedUnit = options;\n } else if (typeof options === \"object\") {\n supposedDirection = options.direction;\n supposedUnit = options.unit;\n }\n\n const min = Math.min(supposedMin, supposedMax);\n const max = Math.max(supposedMin, supposedMax);\n const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n const direction =\n supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n breakpoints[breakpointName] = [min, max, unit, direction];\n breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n return breakpoints;\n }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n sm: [576, 767, \"px\"], // Small devices (landscape phones)\n md: [768, 991, \"px\"], // Medium devices (tablets)\n lg: [992, 1199, \"px\"], // Large devices (desktops)\n xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n breakpoints?: ExposedBreakpoints;\n additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n breakpoints = defaultBreakpoints,\n additionalBreakpoints,\n children,\n}) => {\n return (\n <BreakpointsContext.Provider\n value={sanitize({\n ...breakpoints,\n ...additionalBreakpoints,\n })}\n >\n {children}\n </BreakpointsContext.Provider>\n );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n const mediaList: string[] = [];\n const [minValue, maxValue, unit, direction] = breakpoint;\n let str;\n\n // Min value\n if (minValue !== 0) {\n str = `${minValue}${unit}`;\n mediaList.push(`(min-${direction}:${str})`);\n }\n\n // Max value\n if (maxValue !== Infinity) {\n str = `${maxValue}${unit}`;\n mediaList.push(`(max-${direction}:${str})`);\n }\n\n return \" \" + mediaList.join(\" and \");\n};\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n React.useLayoutEffect(() => {\n setIsShown(mediaQueryList.matches);\n const listener = (event: MediaQueryListEvent) => {\n // Those are important updates, so we don't want to use transitions on them\n setIsShown(event.matches);\n };\n\n // cannot use addEventListener for IE 11 and safari 13-\n mediaQueryList.addListener(listener);\n return () => {\n mediaQueryList.removeListener(listener);\n };\n }, [mediaQueryList]);\n\n return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n const breakpoints = React.useContext(BreakpointsContext);\n const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n return useMediaQuery(mediaQuery || \"-\");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n (breakpoints: Breakpoints) =>\n (on = \"\"): string => {\n if (!on) {\n return \"\";\n }\n const rawBreakpointNames = on.split(\" \");\n const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n const mediaQuery = filteredBreakpoints\n .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n .filter(Boolean)\n .join(\",\");\n if (!mediaQuery) {\n const isUniqBreakpoint = rawBreakpointNames.length === 1;\n console.error(\n `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n isUniqBreakpoint ? \"a \" : \"\"\n }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n );\n }\n return mediaQuery;\n };\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n matchMedia?: string;\n on?: string;\n as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n matchMedia,\n on,\n as,\n children,\n ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n const matchOn = useBreakpoint(on);\n const matchQuery = useMediaQuery(matchMedia || \"-\");\n const isShown = matchOn || matchQuery;\n\n if (!isShown) {\n return null;\n }\n\n return React.createElement(\n // @ts-expect-error – this is a complex type\n as || React.Fragment,\n as ? (props as OtherProps) : undefined,\n children,\n );\n}\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","children","Provider","value","_extends","additionalBreakpoints","displayName","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","mediaList","minValue","maxValue","push","str","join","fromBreakpointToMedia","isUniqBreakpoint","mediaQueryBuilder","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined"],"mappings":"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"}
|