feat: add useOverflow & useScroll hooks

src/lib/shared/hooks/index.ts

@@ -4,3 +4,5 @@ export * from "./useGetDeviceStateFromRoomConfiguration";
 export * from "./usePressHoldRelease";
 export * from "./useRoomIBasicVolumeWithFeedback";
 export * from "./useTimeAndDate";
+export * from "./useOverflow";
+export * from "./useScroll";

src/lib/shared/hooks/useOverflow.ts

@@ -0,0 +1,36 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+
+export function useOverflow<T extends HTMLElement | undefined>(ref:RefObject<T | undefined>, callback?:(hasOverflowVertical: boolean, hasOverflowHorizontal: boolean) => void):UseIsOverflowProps {
+  const [overflowHorizontal, setOverflowHorizontal] = useState(false);
+  const [overflowVertical, setOverflowVertical] = useState(false);
+
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {
+      const hasOverflowVertical = current && current.scrollHeight > current.clientHeight;
+      const hasOverflowHorizontal = current && current.scrollWidth > current.clientWidth;
+
+      setOverflowVertical(hasOverflowVertical ?? false);
+      setOverflowHorizontal(hasOverflowHorizontal ?? false);
+
+      if (!callback) return;
+
+      callback(hasOverflowVertical ?? false, hasOverflowHorizontal ?? false);
+    }
+
+    if (!current) return;
+
+    trigger();
+  }, [ref, callback])
+
+  return { overflowHorizontal, overflowVertical };
+}
+
+export interface UseIsOverflowProps {
+  overflowHorizontal: boolean;
+  overflowVertical: boolean;
+}
+
+export default useOverflow;

src/lib/shared/hooks/useScroll.ts

@@ -0,0 +1,55 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+
+export function useScroll<T extends HTMLElement | undefined>(ref: RefObject<T | undefined>): UseScrollProps {  
+
+  const [horizontalScrollPosition, setHorizontalScrollPosition] = useState(ref?.current?.scrollLeft ?? 0);
+  const [verticalScrollPosition, setVerticalScrollPosition] = useState(ref?.current?.scrollTop ?? 0);
+
+  const scrollHorizontal = (increment: number) => {
+    const { current } = ref;
+
+    if (!current) return;
+
+    console.log(current.scrollLeft);
+
+    current.scrollLeft += increment;
+
+    console.log(current.scrollLeft);
+  }
+
+  const scrollVertical = (increment: number) => {
+    const { current } = ref;
+
+    if (!current) return;
+
+    console.log(current.scrollTop);
+
+    current.scrollTop += increment;
+
+    console.log(current.scrollTop);
+  }
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {           
+      setHorizontalScrollPosition(current?.scrollLeft ?? 0);
+      setVerticalScrollPosition(current?.scrollTop ?? 0); 
+    }
+
+    if (!current) return;
+
+    trigger();
+  }, [ref])
+
+  return {horizontalScrollPosition, verticalScrollPosition, scrollHorizontal, scrollVertical};
+}
+
+export default useScroll;
+
+export interface UseScrollProps {
+  scrollHorizontal: (increment: number) => void;
+  scrollVertical: (increment: number) => void;
+  horizontalScrollPosition: number;
+  verticalScrollPosition: number;
+}