From 9b06383a296b0a211edf382304c4db733e699f57 Mon Sep 17 00:00:00 2001
From: Andrew Welker <awelker@pepperdash.com>
Date: Wed, 22 May 2024 15:25:00 -0500
Subject: [PATCH] feat: add useOverflow & useScroll hooks
---
src/lib/shared/hooks/index.ts | 2 ++
src/lib/shared/hooks/useOverflow.ts | 36 +++++++++++++++++++
src/lib/shared/hooks/useScroll.ts | 55 +++++++++++++++++++++++++++++
3 files changed, 93 insertions(+)
create mode 100644 src/lib/shared/hooks/useOverflow.ts
create mode 100644 src/lib/shared/hooks/useScroll.ts
diff --git a/src/lib/shared/hooks/index.ts b/src/lib/shared/hooks/index.ts
index 9f9e603..0148807 100644
--- a/src/lib/shared/hooks/index.ts
+++ b/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";
\ No newline at end of file
diff --git a/src/lib/shared/hooks/useOverflow.ts b/src/lib/shared/hooks/useOverflow.ts
new file mode 100644
index 0000000..5c0fa53
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/lib/shared/hooks/useScroll.ts b/src/lib/shared/hooks/useScroll.ts
new file mode 100644
index 0000000..68830a5
--- /dev/null
+++ b/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;
+}
\ No newline at end of file