@truedat/core 4.40.3 → 4.40.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.40.3",
+  "version": "4.40.7",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -32,7 +32,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.40.3",
+    "@truedat/test": "4.40.5",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -106,5 +106,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "03104a28941b568007ad53b85874ff58225eaa6a"
+  "gitHead": "57ce60d30f6238ab63207ae402dfc0bc0e5c934a"
 }

package/src/hooks/index.js

@@ -2,3 +2,4 @@ export * from "./useActiveRoute";
 export * from "./useActiveRoutes";
 export * from "./useAuthorized";
 export * from "./usePath";
+export * from "./useOnScreen";

package/src/hooks/useIsOverflow.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+import { useWindowSize } from "./useWindowSize";
+
+export const useIsOverflow = (ref) => {
+  const [isOverflow, setIsOverflow] = useState(undefined);
+  const size = useWindowSize();
+
+  useEffect(() => {
+    const { current } = ref;
+    if (current) {
+      setIsOverflow(current.scrollWidth > current.clientWidth);
+    }
+  }, [ref, size]);
+
+  return isOverflow;
+};

package/src/hooks/useOnScreen.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export const useOnScreen = (ref, rootMargin = "0px") => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { rootMargin }
+    );
+
+    const currentElement = ref?.current;
+
+    if (currentElement) {
+      observer.observe(currentElement);
+    }
+
+    return () => observer.unobserve(currentElement);
+  }, []);
+
+  return isVisible;
+};
+
+export default useOnScreen;

package/src/hooks/useWindowSize.js

@@ -0,0 +1,23 @@
+import _ from "lodash/fp";
+import { useState, useEffect } from "react";
+
+export const useWindowSize = (delay = 600) => {
+  const [size, setSize] = useState();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    const debouncedHandleResize = _.debounce(delay)(handleResize);
+    window.addEventListener("resize", debouncedHandleResize);
+    return () => {
+      window.removeEventListener("resize", debouncedHandleResize);
+    };
+  }, [delay]);
+
+  return size;
+};