timeline only missing date on phone

efdevcon · Nov 8, 2024 · 99519d7 · 99519d7
1 parent ad1a17f
commit 99519d7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/devcon-app/src/components/domain/app/dc7/sessions/timeline.tsx b/devcon-app/src/components/domain/app/dc7/sessions/timeline.tsx
@@ -1,11 +1,13 @@
-import React, { useMemo, useRef } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 import { Session as SessionType } from 'types/Session'
 import { Event } from 'types/Event'
 import moment from 'moment'
 import SwipeToScroll from 'lib/components/event-schedule/swipe-to-scroll'
 import { SessionCard, getTrackLogo } from './index'
 import { useRecoilState } from 'recoil'
 import { sessionFilterAtom } from 'pages/_app'
+import useDimensions from "react-cool-dimensions";
+import { cn } from 'lib/shadcn/lib/utils'
 
 const RoomGrid = ({ rooms }: { rooms: string[] }) => {
   const [sessionFilter] = useRecoilState(sessionFilterAtom)
@@ -49,6 +51,16 @@ const DayGrid = ({
   day: string
 }) => {
   const scrollSyncRef = useRef<HTMLDivElement>(null)
+  const [isNativeScroll, setIsNativeScroll] = useState(false)
+  // When element changes size, record its max scroll boundary and reset all scroll related state to avoid edge cases
+  const { observe } = useDimensions({
+    onResize: ({ width }) => {
+      const isNativeScroll = !window.matchMedia('not all and (hover: none)').matches
+
+      setIsNativeScroll(isNativeScroll)
+    },
+  })
+
   return (
     <div className="flex shrink-0 w-full relative left-[100px] lg:left-0">
       {/* <div
@@ -61,9 +73,23 @@ const DayGrid = ({
       </div> */}
       <div className="flex flex-col">
         <div
-          className="grid shrink-0 sticky top-[100px] lg:top-[106px] z-[6] glass !border-none"
-          style={{ gridTemplateColumns: `repeat(${timeSlots.length}, minmax(100px, 1fr))` }}
-          ref={scrollSyncRef}
+          className={cn(
+            'grid shrink-0 sticky top-[100px] lg:top-[106px] z-[6] glass !border-none pointer-events-none',
+            isNativeScroll ? '!overflow-x-auto !translate-x-0' : ''
+          )}
+          style={{
+            gridTemplateColumns: `repeat(${timeSlots.length}, minmax(100px, 1fr))`
+          }}
+          // onScroll={(e: any) => {
+          //   console.log('scroll', e.target.scrollLeft)
+          //   e.preventDefault()
+          //   e.stopPropagation()
+          // }}
+          ref={(element) => {
+            // @ts-ignore
+            scrollSyncRef.current = element!
+            observe(element)
+          }}
         >
           <div
             data-type="day"
@@ -78,6 +104,7 @@ const DayGrid = ({
               key={index}
               data-id={time.format('h:mm')}
               className="py-2 text-sm whitespace-nowrap flex items-center w-[100px] h-[40px] border-top !bg-[#F5F7FA] border-bottom"
+              style={{ transform: isNativeScroll ? undefined : 'translateX(var(--scroll-x))' }}
             >
               <div
                 style={{ transform: index > 0 ? 'translateX(-50%)' : 'translateX(0)' }}

diff --git a/lib/components/event-schedule/swipe-to-scroll/SwipeToScroll.tsx b/lib/components/event-schedule/swipe-to-scroll/SwipeToScroll.tsx
@@ -107,7 +107,8 @@ const SwipeToScroll = forwardRef((props: SwipeToScrollProps, ref) => {
       scrollContainer.style.transform = `translateX(0px)`;
 
       if (props.syncElement?.current) {
-        props.syncElement.current.style.transform = `translateX(0px)`;
+        // props.syncElement.current.style.transform = `translateX(0px)`; 
+        props.syncElement.current.style.setProperty('--scroll-x', '0px');
       }
 
       syncScrollIndicators(scrollContainer);
@@ -184,7 +185,8 @@ const SwipeToScroll = forwardRef((props: SwipeToScrollProps, ref) => {
           scrollContainer.style.transform = `translateX(-${clampedScrollLeft}px)`;
 
           if (props.syncElement?.current) {
-            props.syncElement.current.style.transform = `translateX(-${clampedScrollLeft}px)`;
+            // props.syncElement.current.style.transform = `translateX(-${clampedScrollLeft}px)`;
+            props.syncElement.current.style.setProperty('--scroll-x', `-${clampedScrollLeft}px`);
           }
         }
 
@@ -212,7 +214,8 @@ const SwipeToScroll = forwardRef((props: SwipeToScrollProps, ref) => {
     scrollContainer.style.transform = `translateX(-${lastX.current}px)`;
 
     if (props.syncElement?.current) {
-      props.syncElement.current.style.transform = `translateX(-${lastX.current}px)`;
+      // props.syncElement.current.style.transform = `translateX(-${lastX.current}px)`;
+      props.syncElement.current.style.setProperty('--scroll-x', `-${lastX.current}px`);
     }
 
     if (down) {
@@ -248,6 +251,7 @@ const SwipeToScroll = forwardRef((props: SwipeToScrollProps, ref) => {
           if (props.syncElement?.current) {
             // @ts-ignore
             props.syncElement.current.scrollLeft = e.target.scrollLeft;
+            // props.syncElement.current.style.setProperty('--scroll-x', `-${e.target.scrollLeft}px`);
           }
         }}
         // This prevents selection (text, image) while dragging