@koine/react 1.0.85 → 1.0.86

package/hooks/useMediaQueryWidthCreator.js

@@ -0,0 +1,169 @@
+import { useState, useEffect, useMemo } from "react";
+import { isBrowser, isUndefined, getMediaQueryWidthResolvers, } from "@koine/utils";
+export function useMediaQueryWidthCreator(customBreakpoints) {
+    var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media) {
+        var definition = media.substring(1);
+        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        // with the hook creator approach these breakpoint types cannot be deduced
+        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
+        //   typeof ruleBreakpoint,
+        //   "-"
+        // >;
+        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
+        var query = queryResolvers[rule](br1, br2);
+        var mq = useMemo(function () { return (isBrowser ? window.matchMedia(query) : { matches: false }); }, [query]);
+        var _c = useState(mq.matches), matches = _c[0], setMatches = _c[1];
+        useEffect(function () {
+            var mq = window.matchMedia(query);
+            var handleChange = function (event) {
+                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 function () {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return function () {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+}
+export default useMediaQueryWidthCreator;
+//// without creator it would be:
+//// ---------------------------------------------------------------------------
+// import { useState, useEffect, useMemo } from "react";
+// import { isBrowser, type Split } from "@koine/utils";
+// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+// 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);
+//   useEffect(() => {
+//     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;
+// }

package/node/hooks/index.js

@@ -8,9 +8,9 @@ tslib_1.__exportStar(require("./useFirstMountState"), exports);
 tslib_1.__exportStar(require("./useFocus"), exports);
 tslib_1.__exportStar(require("./useId"), exports);
 tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
+tslib_1.__exportStar(require("./useMediaQueryWidthCreator"), exports);
 tslib_1.__exportStar(require("./useMount"), exports);
 tslib_1.__exportStar(require("./useMountedState"), exports);
-tslib_1.__exportStar(require("./useMqWidthCreator"), exports);
 tslib_1.__exportStar(require("./usePrevious"), exports);
 tslib_1.__exportStar(require("./useScrollPosition"), exports);
 // export * from "./useScrollTo";

package/node/hooks/{useMqWidthCreator.js → useMediaQueryWidthCreator.js}

@@ -1,84 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMqWidthCreator = void 0;
-var tslib_1 = require("tslib");
+exports.useMediaQueryWidthCreator = void 0;
 var react_1 = require("react");
 var utils_1 = require("@koine/utils");
-function useMqWidthCreator(customBreakpoints) {
-    var breakpoints = tslib_1.__assign({ xs: 0 }, customBreakpoints);
-    var sortedBreakpointsNames = Object.keys(breakpoints).map(function (key) {
-        var br = key;
-        return [br, breakpoints[br]];
-    })
-        .sort(function (a, b) { return a[1] - b[1]; })
-        .map(function (item) { return item[0]; });
-    var getNextBreakpoint = function (breakpoint) {
-        var 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`.
-     */
-    var min = function (br) { return "(min-width: ".concat(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`.
-     */
-    var max = function (br) { return "(max-width: ".concat(breakpoints[br] - 0.02, "px)"); };
-    /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    var 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.
-     */
-    var down = function (br) {
-        var brNext = getNextBreakpoint(br);
-        // TODO: if br does not exists otherwise throw Error
-        return brNext && "(max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
-    };
-    /**
-     * Media query between the two given breakpoints
-     */
-    var between = function (br1, br2) {
-        return br2
-            ? "(min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)")
-            : min(br1);
-    };
-    /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    var only = function (br) {
-        var brNext = getNextBreakpoint(br);
-        return brNext ? between(br, brNext) : min(br);
-    };
-    var queryResolvers = {
-        max: max,
-        min: min,
-        down: down,
-        up: up,
-        between: between,
-        only: only,
-    };
-    return function useMqWidth(media) {
-        var _a = media.split(":"), _b = _a[0], rule = _b === void 0 ? "min" : _b, ruleBreakpoint = _a[1];
+function useMediaQueryWidthCreator(customBreakpoints) {
+    var queryResolvers = (0, utils_1.getMediaQueryWidthResolvers)(customBreakpoints);
+    return function useMediaQueryWidth(media) {
+        var definition = media.substring(1);
+        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
+        if ((0, utils_1.isUndefined)(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if ((0, utils_1.isUndefined)(rule)) {
+            rule = "min";
+        }
         // with the hook creator approach these breakpoint types cannot be deduced
         // const [br1, br2] = ruleBreakpoint.split("-") as Split<
         //   typeof ruleBreakpoint,
         //   "-"
         // >;
-        var _c = ruleBreakpoint.split("-"), br1 = _c[0], br2 = _c[1];
+        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
         var query = queryResolvers[rule](br1, br2);
         var mq = (0, react_1.useMemo)(function () { return (utils_1.isBrowser ? window.matchMedia(query) : { matches: false }); }, [query]);
-        var _d = (0, react_1.useState)(mq.matches), matches = _d[0], setMatches = _d[1];
+        var _c = (0, react_1.useState)(mq.matches), matches = _c[0], setMatches = _c[1];
         (0, react_1.useEffect)(function () {
             var mq = window.matchMedia(query);
             var handleChange = function (event) {
@@ -103,8 +47,8 @@ function useMqWidthCreator(customBreakpoints) {
         return matches;
     };
 }
-exports.useMqWidthCreator = useMqWidthCreator;
-exports.default = useMqWidthCreator;
+exports.useMediaQueryWidthCreator = useMediaQueryWidthCreator;
+exports.default = useMediaQueryWidthCreator;
 //// without creator it would be:
 //// ---------------------------------------------------------------------------
 // import { useState, useEffect, useMemo } from "react";

package/package.json

@@ -8,7 +8,7 @@
     "framer-motion": "^7.2.1",
     "react": "^18.2.0",
     "@mui/base": "^5.0.0-alpha.95",
-    "@koine/utils": "1.0.85",
+    "@koine/utils": "1.0.86",
     "ts-debounce": "^4.0.0",
     "date-fns-tz": "^1.3.7",
     "react-icons": "^4.4.0",
@@ -22,7 +22,7 @@
     "tslib": "^2.4.0"
   },
   "peerDependencies": {},
-  "version": "1.0.85",
+  "version": "1.0.86",
   "module": "./index.js",
   "types": "./index.d.ts"
 }