Merge pull request #54 from dolthub/liuliu/add-useSetContainerHeight

liuliu/add useSetContainerHeight to hooks

packages/hooks/package.json

@@ -2,7 +2,7 @@
   "name": "@dolthub/react-hooks",
   "author": "DoltHub",
   "description": "A collection of React hooks for common tasks",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",

packages/hooks/src/__tests__/useSetContainerHeight.test.ts

@@ -0,0 +1,44 @@
+import { renderHook } from "@testing-library/react-hooks";
+import useSetContainerHeight from "../useSetContainerHeight";
+import { useReactiveHeight } from "../useReactiveSize";
+
+describe("useSetContainerHeight", () => {
+  const componentID = "testComponent";
+
+  beforeAll(() => {
+    const mockElement = document.createElement("div");
+    mockElement.id = componentID;
+
+    mockElement.getBoundingClientRect = jest.fn().mockReturnValue({ top: 100 });
+
+    document.body.appendChild(mockElement);
+
+    global.document.getElementById = jest.fn(id => {
+      if (id === componentID) {
+        return mockElement;
+      }
+      return null;
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    const mockElement = document.getElementById(componentID);
+    if (mockElement) {
+      document.body.removeChild(mockElement);
+    }
+  });
+
+  it("calculates container height correctly based on window height", () => {
+    const { result: windowHeightResult } = renderHook(() =>
+      useReactiveHeight(),
+    );
+    const windowHeight = windowHeightResult.current;
+
+    const { result } = renderHook(() => useSetContainerHeight(componentID));
+
+    const expectedHeight = windowHeight - 100;
+
+    expect(result.current.containerHeight).toBe(expectedHeight);
+  });
+});

packages/hooks/src/index.ts

@@ -19,5 +19,6 @@ export {
   useReactiveWidth,
 } from "./useReactiveSize";
 export { default as useSessionQueryHistory } from "./useSessionQueryHistory";
+export { default as useSetContainerHeight } from "./useSetContainerHeight";
 export { default as useSetState } from "./useSetState";
 export { default as useStateWithSessionStorage } from "./useStateWithSessionStorage";

packages/hooks/src/useSetContainerHeight.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { useReactiveHeight } from "./useReactiveSize";
+
+type ReturnType = {
+  containerHeight: number;
+};
+
+export default function useSetContainerHeight(componentID: string): ReturnType {
+  const [containerHeight, setContainerHeight] = useState(0);
+  const scrollContainer = document.getElementById(componentID);
+  const windowHeight = useReactiveHeight();
+  const scrollContainerTop = scrollContainer?.getBoundingClientRect().top;
+
+  useEffect(() => {
+    const top = scrollContainerTop || 0;
+    const height = windowHeight - top;
+    setContainerHeight(height);
+  }, [windowHeight, scrollContainer, scrollContainerTop]);
+
+  return { containerHeight };
+}