react-better-html 1.1.10 → 1.1.12

package/dist/utils/hooks.js

@@ -2,18 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyledComponentStyles = useStyledComponentStyles;
 exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
+exports.useComponentPropsWithExcludedStyle = useComponentPropsWithExcludedStyle;
 exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
+exports.usePageResize = usePageResize;
+exports.useMediaQuery = useMediaQuery;
+exports.useBooleanState = useBooleanState;
+exports.useDebounceState = useDebounceState;
 const react_1 = require("react");
 const cssProps = Object.keys(document.documentElement.style).reduce((previousValue, currentValue) => {
     previousValue[currentValue.toLowerCase()] = true;
+    previousValue[`${currentValue}Hover`.toLowerCase()] = true;
     return previousValue;
 }, {});
-function useStyledComponentStyles(props, theme) {
-    const styles = (0, react_1.useMemo)(() => {
+const cssPropsToExclude = [
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "margin",
+    "marginTop",
+    "marginBottom",
+    "marginLeft",
+    "marginRight",
+    "marginBlock",
+    "marginInline",
+    "marginBlockStart",
+    "marginBlockEnd",
+    "marginInlineStart",
+    "marginInlineEnd",
+    "marginTrim",
+    "zIndex",
+];
+function useStyledComponentStyles(props, theme, 
+/** @default false */
+excludeProps) {
+    return (0, react_1.useMemo)(() => {
         const normalStyle = {};
         const hoverStyle = {};
         let haveHover = false;
         for (const key in props) {
+            if (excludeProps && cssPropsToExclude.includes(key))
+                continue;
             if (key.endsWith("Hover")) {
                 haveHover = true;
                 const normalKey = key.slice(0, -5);
@@ -32,7 +68,6 @@ function useStyledComponentStyles(props, theme) {
             hoverStyle,
         };
     }, [props, theme]);
-    return styles;
 }
 function useComponentPropsWithPrefix(props, prefix) {
     return (0, react_1.useMemo)(() => {
@@ -45,6 +80,15 @@ function useComponentPropsWithPrefix(props, prefix) {
         return returnValue;
     }, [props, prefix]);
 }
+function useComponentPropsWithExcludedStyle(props) {
+    return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
+        const key = currentValue;
+        if (!cssPropsToExclude.includes(key))
+            return previousValue;
+        previousValue[key] = props[key];
+        return previousValue;
+    }, {}), [props]);
+}
 function useComponentPropsWithoutStyle(props) {
     return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
         if (!cssProps[currentValue.toLowerCase()])
@@ -52,3 +96,63 @@ function useComponentPropsWithoutStyle(props) {
         return previousValue;
     }, {}), [props]);
 }
+function usePageResize() {
+    const [width, setWidth] = (0, react_1.useState)(window.innerWidth);
+    const [height, setHeight] = (0, react_1.useState)(window.innerHeight);
+    (0, react_1.useEffect)(() => {
+        const onResize = () => {
+            setWidth(window.innerWidth);
+            setHeight(window.innerHeight);
+        };
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+        };
+    }, []);
+    return {
+        width,
+        height,
+    };
+}
+function useMediaQuery() {
+    const { width } = usePageResize();
+    return {
+        size320: width <= 320,
+        size400: width <= 400,
+        size500: width <= 500,
+        size600: width <= 600,
+        size700: width <= 700,
+        size800: width <= 800,
+        size900: width <= 900,
+        size1000: width <= 1000,
+        size1100: width <= 1100,
+        size1200: width <= 1200,
+        size1300: width <= 1300,
+        size1400: width <= 1400,
+        size1500: width <= 1500,
+        size1600: width <= 1600,
+    };
+}
+function useBooleanState(initialValue = false) {
+    const [state, setState] = (0, react_1.useState)(initialValue);
+    const setTrue = (0, react_1.useCallback)(() => setState(true), []);
+    const setFalse = (0, react_1.useCallback)(() => setState(false), []);
+    const toggle = (0, react_1.useCallback)(() => setState((oldValue) => !oldValue), []);
+    return [state, { setState, setTrue, setFalse, toggle }];
+}
+function useDebounceState(initialValue, delay = 0.5) {
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(initialValue);
+    const [isLoading, setIsLoading] = useBooleanState();
+    (0, react_1.useEffect)(() => {
+        setIsLoading.setTrue();
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+            setIsLoading.setFalse();
+        }, delay * 1000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return [value, debouncedValue, setValue, isLoading];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.10",
+   "version": "1.1.12",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [