@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/helpers/createUseMediaQueryWidth.js

@@ -1,26 +1,159 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createUseMediaQueryWidth = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
-var getMediaQueryWidthResolvers_1 = tslib_1.__importDefault(require("@koine/utils/getMediaQueryWidthResolvers"));
-var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("../hooks/useIsomorphicLayoutEffect"));
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createUseMediaQueryWidth: function() {
+        return createUseMediaQueryWidth;
+    },
+    default: function() {
+        return _default //// without creator it would be:
+         //// ---------------------------------------------------------------------------
+         // import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
+         // import type { Split } from "@koine/utils";
+         // import isBrowser from "@koine/utils/isBrowser";
+         // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+         // import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
+         // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+         // type Breakpoints = Record<Breakpoint, number>;
+         // type MediaQuery =
+         //   | `max:${Breakpoint}`
+         //   | `min:${Breakpoint}`
+         //   | `down:${Breakpoint}`
+         //   | `up:${Breakpoint}`
+         //   | `between:${Breakpoint}-${Breakpoint}`
+         //   | `only:${Breakpoint}`;
+         // const breakpoints: Breakpoints = {
+         //   xs: 0,
+         //   ...themeBreakpoints,
+         // };
+         // const sortedBreakpointsNames = (
+         //   Object.keys(breakpoints).map((key) => {
+         //     const br = key as keyof typeof breakpoints;
+         //     return [br, breakpoints[br]];
+         //   }) as [Breakpoint, number][]
+         // )
+         //   .sort((a, b) => a[1] - b[1])
+         //   .map((item) => item[0]);
+         // const getNextBreakpoint = (breakpoint: Breakpoint) => {
+         //   const index = sortedBreakpointsNames.indexOf(breakpoint);
+         //   return sortedBreakpointsNames[index + 1];
+         // };
+         // /**
+         //  * It behaves the same as `(min-width: ${value}px)`
+         //  * where value is the given breakpoint value.
+         //  * For ease of use this can be used both as a function `min("md")` and as an
+         //  * object literal `min.md`.
+         //  */
+         // const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
+         // /**
+         //  * It behaves the same as `(max-width: ${value}px)`
+         //  * where value is the given breakpoint value.
+         //  * For ease of use this can be used both as a function `max("md")` and as an
+         //  * object literal `max.md`.
+         //  */
+         // const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
+         // /**
+         //  * It behaves the same as `min`
+         //  * @inheritdoc {max}
+         //  */
+         // const up = min;
+         // /**
+         //  * It behaves similarly to `max` but you will use the "next" breakpoint,
+         //  * specifying CSS that will apply from the given breakpoint and down.
+         //  */
+         // const down = (br: Breakpoint) => {
+         //   const brNext = getNextBreakpoint(br);
+         //   // TODO: if br does not exists otherwise throw Error
+         //   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
+         // };
+         // /**
+         //  * Media query between the two given breakpoints
+         //  */
+         // const between = (br1: Breakpoint, br2?: Breakpoint) => {
+         //   return br2
+         //     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
+         //         breakpoints[br2] - 0.02
+         //       }px)`
+         //     : min(br1);
+         // };
+         // /**
+         //  * Media query to apply from the given breakpoint until the next, just for its
+         //  * full range
+         //  */
+         // const only = (br: Breakpoint) => {
+         //   const brNext = getNextBreakpoint(br);
+         //   return brNext ? between(br, brNext) : min(br);
+         // };
+         // const queryResolvers = {
+         //   max,
+         //   min,
+         //   down,
+         //   up,
+         //   between,
+         //   only,
+         // };
+         // export function useMqWidth(media: MediaQuery) {
+         //   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
+         //     MediaQuery,
+         //     ":"
+         //   >;
+         //   const [br1, br2] = ruleBreakpoint.split("-") as Split<
+         //     typeof ruleBreakpoint,
+         //     "-"
+         //   >;
+         //   const query = queryResolvers[rule](br1, br2);
+         //   const mq = useMemo(
+         //     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
+         //     [query]
+         //   );
+         //   const [matches, setMatches] = useState(mq.matches);
+         //   useIsomorphicLayoutEffect(() => {
+         //     const mq = window.matchMedia(query);
+         //     const handleChange = (event: MediaQueryListEvent) => {
+         //       setMatches(event.matches);
+         //     };
+         //     setMatches(mq.matches);
+         //     // Safari < 14 can't use addEventListener on a MediaQueryList
+         //     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+         //     if (!mq.addEventListener) {
+         //       // Update the state whenever the media query match state changes
+         //       mq.addListener(handleChange);
+         //       // Clean up on unmount and if the query changes
+         //       return () => {
+         //         mq.removeListener(handleChange);
+         //       };
+         //     }
+         //     mq.addEventListener("change", handleChange);
+         //     return () => {
+         //       mq.removeEventListener("change", handleChange);
+         //     };
+         //   }, [query]);
+         //   return matches;
+         // }
+        ;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _getMediaQueryWidthResolvers = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/getMediaQueryWidthResolvers"));
+const _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
+const _useIsomorphicLayoutEffect = /*#__PURE__*/ _interop_require_default._(require("../hooks/useIsomorphicLayoutEffect"));
 function createUseMediaQueryWidth(customBreakpoints) {
-    var queryResolvers = (0, getMediaQueryWidthResolvers_1.default)(customBreakpoints);
+    const queryResolvers = (0, _getMediaQueryWidthResolvers.default)(customBreakpoints);
     return function useMediaQueryWidth(media, serverValue) {
-        var definition = media.substring(1);
-        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
-        if ((0, isUndefined_1.default)(ruleBreakpoint)) {
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
+        if ((0, _isUndefined.default)(ruleBreakpoint)) {
             ruleBreakpoint = rule;
         }
-        if ((0, isUndefined_1.default)(rule)) {
+        if ((0, _isUndefined.default)(rule)) {
             rule = "min";
         }
         // with the hook creator approach these breakpoint types cannot be deduced
@@ -28,12 +161,12 @@ function createUseMediaQueryWidth(customBreakpoints) {
         //   typeof ruleBreakpoint,
         //   "-"
         // >;
-        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
-        var query = queryResolvers[rule](br1, br2);
-        var _c = (0, react_1.useState)((0, isUndefined_1.default)(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
-        (0, useIsomorphicLayoutEffect_1.default)(function () {
-            var mq = window.matchMedia(query);
-            var handleChange = function (event) {
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = (0, _react.useState)((0, _isUndefined.default)(serverValue) ? null : serverValue);
+        (0, _useIsomorphicLayoutEffect.default)(()=>{
+            const mq = window.matchMedia(query);
+            const handleChange = (event)=>{
                 setMatches(event.matches);
             };
             setMatches(mq.matches);
@@ -43,141 +176,18 @@ function createUseMediaQueryWidth(customBreakpoints) {
                 // Update the state whenever the media query match state changes
                 mq.addListener(handleChange);
                 // Clean up on unmount and if the query changes
-                return function () {
+                return ()=>{
                     mq.removeListener(handleChange);
                 };
             }
             mq.addEventListener("change", handleChange);
-            return function () {
+            return ()=>{
                 mq.removeEventListener("change", handleChange);
             };
-        }, [query]);
+        }, [
+            query
+        ]);
         return matches;
     };
 }
-exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
-exports.default = createUseMediaQueryWidth;
-//// without creator it would be:
-//// ---------------------------------------------------------------------------
-// import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
-// import type { Split } from "@koine/utils";
-// import isBrowser from "@koine/utils/isBrowser";
-// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
-// import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
-// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
-// type Breakpoints = Record<Breakpoint, number>;
-// type MediaQuery =
-//   | `max:${Breakpoint}`
-//   | `min:${Breakpoint}`
-//   | `down:${Breakpoint}`
-//   | `up:${Breakpoint}`
-//   | `between:${Breakpoint}-${Breakpoint}`
-//   | `only:${Breakpoint}`;
-// const breakpoints: Breakpoints = {
-//   xs: 0,
-//   ...themeBreakpoints,
-// };
-// const sortedBreakpointsNames = (
-//   Object.keys(breakpoints).map((key) => {
-//     const br = key as keyof typeof breakpoints;
-//     return [br, breakpoints[br]];
-//   }) as [Breakpoint, number][]
-// )
-//   .sort((a, b) => a[1] - b[1])
-//   .map((item) => item[0]);
-// const getNextBreakpoint = (breakpoint: Breakpoint) => {
-//   const index = sortedBreakpointsNames.indexOf(breakpoint);
-//   return sortedBreakpointsNames[index + 1];
-// };
-// /**
-//  * It behaves the same as `(min-width: ${value}px)`
-//  * where value is the given breakpoint value.
-//  * For ease of use this can be used both as a function `min("md")` and as an
-//  * object literal `min.md`.
-//  */
-// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
-// /**
-//  * It behaves the same as `(max-width: ${value}px)`
-//  * where value is the given breakpoint value.
-//  * For ease of use this can be used both as a function `max("md")` and as an
-//  * object literal `max.md`.
-//  */
-// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
-// /**
-//  * It behaves the same as `min`
-//  * @inheritdoc {max}
-//  */
-// const up = min;
-// /**
-//  * It behaves similarly to `max` but you will use the "next" breakpoint,
-//  * specifying CSS that will apply from the given breakpoint and down.
-//  */
-// const down = (br: Breakpoint) => {
-//   const brNext = getNextBreakpoint(br);
-//   // TODO: if br does not exists otherwise throw Error
-//   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
-// };
-// /**
-//  * Media query between the two given breakpoints
-//  */
-// const between = (br1: Breakpoint, br2?: Breakpoint) => {
-//   return br2
-//     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
-//         breakpoints[br2] - 0.02
-//       }px)`
-//     : min(br1);
-// };
-// /**
-//  * Media query to apply from the given breakpoint until the next, just for its
-//  * full range
-//  */
-// const only = (br: Breakpoint) => {
-//   const brNext = getNextBreakpoint(br);
-//   return brNext ? between(br, brNext) : min(br);
-// };
-// const queryResolvers = {
-//   max,
-//   min,
-//   down,
-//   up,
-//   between,
-//   only,
-// };
-// export function useMqWidth(media: MediaQuery) {
-//   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
-//     MediaQuery,
-//     ":"
-//   >;
-//   const [br1, br2] = ruleBreakpoint.split("-") as Split<
-//     typeof ruleBreakpoint,
-//     "-"
-//   >;
-//   const query = queryResolvers[rule](br1, br2);
-//   const mq = useMemo(
-//     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
-//     [query]
-//   );
-//   const [matches, setMatches] = useState(mq.matches);
-//   useIsomorphicLayoutEffect(() => {
-//     const mq = window.matchMedia(query);
-//     const handleChange = (event: MediaQueryListEvent) => {
-//       setMatches(event.matches);
-//     };
-//     setMatches(mq.matches);
-//     // Safari < 14 can't use addEventListener on a MediaQueryList
-//     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-//     if (!mq.addEventListener) {
-//       // Update the state whenever the media query match state changes
-//       mq.addListener(handleChange);
-//       // Clean up on unmount and if the query changes
-//       return () => {
-//         mq.removeListener(handleChange);
-//       };
-//     }
-//     mq.addEventListener("change", handleChange);
-//     return () => {
-//       mq.removeEventListener("change", handleChange);
-//     };
-//   }, [query]);
-//   return matches;
-// }
+const _default = createUseMediaQueryWidth;