Merge pull request #205 from cosmology-tech/fix/collapse-height-timeline

fix(timeline): items container collapses height to zero
hyperweb-io · Oct 10, 2024 · 007b918 · 007b918
2 parents 238c561 + ce44113
commit 007b918
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/packages/react/stories/marketing/Timeline.stories.tsx b/packages/react/stories/marketing/Timeline.stories.tsx
@@ -51,7 +51,7 @@ const SecondaryContent = () => {
 export const Default: Story = {
   render() {
     return (
-      <Box height="4000px" paddingBottom="$24">
+      <Box paddingBottom="$24">
         <Timeline
           events={[
             {

diff --git a/src/ui/timeline/timeline.lite.tsx b/src/ui/timeline/timeline.lite.tsx
@@ -1,6 +1,7 @@
 import {
   Show,
   For,
+  onUpdate,
   onMount,
   onUnMount,
   useMetadata,
@@ -21,20 +22,47 @@ useMetadata({
 });
 
 export default function Timeline(props: TimelineProps) {
+  const timelineRef = useRef<HTMLDivElement>(null);
+  let cleanupRef = useRef<() => void>(null);
+
   const state = useStore<{
     internalTheme: UIState["theme"];
+    timelineHeight: number;
+    updateTimelineHeight: () => void;
   }>({
     internalTheme: store.getState().theme,
+    timelineHeight: 0,
+    updateTimelineHeight: () => {
+      if (timelineRef) {
+        const height = timelineRef.scrollHeight;
+        state.timelineHeight = height;
+      }
+    },
   });
 
-  let cleanupRef = useRef<() => void>(null);
-
   onMount(() => {
-    cleanupRef = store.subscribe((newState, prevState) => {
+    const handleResize = () => {
+      state.updateTimelineHeight();
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    const cleanupStore = store.subscribe((newState, prevState) => {
       state.internalTheme = newState.theme;
     });
+
+    state.updateTimelineHeight();
+
+    cleanupRef = () => {
+      window.removeEventListener("resize", handleResize);
+      cleanupStore();
+    };
   });
 
+  onUpdate(() => {
+    state.updateTimelineHeight();
+  }, [props.events]);
+
   onUnMount(() => {
     if (typeof cleanupRef === "function") {
       cleanupRef();
@@ -43,6 +71,8 @@ export default function Timeline(props: TimelineProps) {
 
   return (
     <Box
+      boxRef={timelineRef}
+      minHeight={`${state.timelineHeight}px`}
       display="flex"
       flexDirection="column"
       gap="$16"