@koine/react 2.0.0-beta.72 → 2.0.0-beta.74

package/utils/createUseMediaQueryWidth.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { getMediaQueryWidthResolvers, isUndefined, } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "../hooks";
+export let createUseMediaQueryWidth = (customBreakpoints) => {
+    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media, serverValue) {
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
+        useIsomorphicLayoutEffect(() => {
+            const mq = window.matchMedia(query);
+            const handleChange = (event) => {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            if (!mq.addEventListener) {
+                mq.addListener(handleChange);
+                return () => {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return () => {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+};

package/utils/extendComponent.js

@@ -0,0 +1,8 @@
+import { createElement } from "react";
+export let extendComponent = (component, defaultProps) => {
+    const NewComponent = (props) => createElement(component, props);
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps,
+    });
+};

package/utils/index.js

@@ -0,0 +1,4 @@
+export { classed } from "./classed";
+export { createUseMediaQueryWidth, } from "./createUseMediaQueryWidth";
+export { extendComponent, } from "./extendComponent";
+export { mergeRefs } from "./mergeRefs";

package/utils/mergeRefs.js

@@ -0,0 +1,12 @@
+export let mergeRefs = (refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+};