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

package/utils/classed.js

@@ -0,0 +1,40 @@
+import React, { createElement, forwardRef } from "react";
+export let classed = (component) => {
+    const type = component.type || component;
+    return function (strings, ...args) {
+        const WrappedComponent = forwardRef(function (props, ref) {
+            const argResolved = args
+                .map((arg, index) => {
+                let result = "";
+                if (typeof arg === "function") {
+                    result = arg(props);
+                }
+                else if (typeof arg !== "undefined") {
+                    result = arg.toString();
+                }
+                return strings[index] + result;
+            })
+                .join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement
+                ? {}
+                : props;
+            if (isNativeHtmlElement) {
+                for (const key in props) {
+                    if (!key.startsWith("$")) {
+                        propsToForward[key] = props[key];
+                    }
+                }
+            }
+            let className = argResolved || strings[0];
+            className = className.match(/class="([^"]*)/)?.[1] || className;
+            className += props?.className ? " " + props?.className : "";
+            return createElement(type, {
+                ...propsToForward,
+                className: className || undefined,
+                ref,
+            });
+        });
+        return WrappedComponent;
+    };
+};

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;
+            }
+        });
+    };
+};