fix: mutliple gantt scroll error

haydenull · May 4, 2022 · 88b7542 · 88b7542
1 parent da5f62b
commit 88b7542
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 12 deletions.
diff --git a/src/packages/Gantt/components/Calendar.tsx b/src/packages/Gantt/components/Calendar.tsx
@@ -10,7 +10,8 @@ const Calendar: React.FC<{
   mode: IMode
   view?: IView
   weekStartDay?: number
-}> = ({ data, mode = 'simple', view = 'day', weekStartDay = 0 }, ref) => {
+  uniqueId?: string
+}> = ({ data, mode = 'simple', view = 'day', weekStartDay = 0, uniqueId = '' }, ref) => {
   const current = dayjs()
   const { start: rangeStart, end: rangeEnd } = getDateRange(data)
   const start = rangeStart.subtract(1, 'day')
@@ -95,7 +96,7 @@ const Calendar: React.FC<{
             if (view === 'month') {
               isShowDate = mark.day() === weekStartDay || isToday
             }
-            return (<div className={`calendar__date inline-flex ${_isWeekend ? 'weekend' : ''} ${isToday ? 'today' : ''}`} id={'date' + mark.format('YYYYMMDD')} key={'date' + mark.valueOf()}>
+            return (<div className={`calendar__date inline-flex ${_isWeekend ? 'weekend' : ''} ${isToday ? 'today' : ''}`} id={'date' + uniqueId + mark.format('YYYYMMDD')} key={'date' + mark.valueOf()}>
               <span className={`inline-block text-center ${!isShowDate ? 'opacity-0' : ''}`} style={{ width: '108px' }}>{date}</span>
             </div>)
           })
@@ -142,6 +143,7 @@ const Calendar: React.FC<{
                           height: size.height + 'px',
                           zIndex: 1,
                         }}
+                        title={event.title}
                       >
                         <Popover
                           content={detailPopup}
@@ -163,7 +165,12 @@ const Calendar: React.FC<{
                         <div key={'milestone-line' + milestone.id} className="calendar__milestone__line absolute" style={{ left: coordinates.x + calendarEventWidth / 2, top: group.coordinate.y, height: group.height + 16 }}>
                           {/* <span className="absolute ml-3">{milestone.title}</span> */}
                         </div>
-                        <div key={'milestone-text' + milestone.id} className="calendar__milestone__text absolute flex items-center cursor-pointer" style={{ left: coordinates.x + 2 + calendarEventWidth / 2, top: coordinates.y + SIDEBAR_GROUP_TITLE_HEIGHT }}>
+                        <div
+                          key={'milestone-text' + milestone.id}
+                          className="calendar__milestone__text absolute flex items-center cursor-pointer"
+                          style={{ left: coordinates.x + 2 + calendarEventWidth / 2, top: coordinates.y + SIDEBAR_GROUP_TITLE_HEIGHT }}
+                          title={milestone.title}
+                        >
                           <span className="single_ellipsis" style={{ maxWidth: calendarEventWidth - 20 }}>
                             <Popover
                               content={detailPopup}

diff --git a/src/packages/Gantt/components/Group.tsx b/src/packages/Gantt/components/Group.tsx
@@ -9,8 +9,9 @@ const Group: React.FC<{
   events: IEvent[]
   milestones?: IEvent[]
   levelCount?: number
+  uniqueId?: string
   mode: IMode
-}> = ({ groupName, events, milestones = [], mode, levelCount = 0 }) => {
+}> = ({ groupName, events, milestones = [], mode, levelCount = 0, uniqueId = '' }) => {
   return (
     <div className="group rounded-sm">
       <div className="group__title font-medium sticky bg-quaternary title-text">{groupName}</div>
@@ -21,7 +22,7 @@ const Group: React.FC<{
             <div className="group__event cursor-pointer"></div>
           ))
           : events.map((event) => (
-            <div className="group__event cursor-pointer single_ellipsis" onClick={() => scrollToDate(dayjs(event.start))}>
+            <div className="group__event cursor-pointer single_ellipsis" onClick={() => scrollToDate(dayjs(event.start), uniqueId)}>
               {event?.title}
             </div>
           ))
@@ -30,7 +31,7 @@ const Group: React.FC<{
           mode === 'simple'
           ? (milestones?.length > 0 ? <div className="group__event cursor-pointer flex justify-between items-center">{/* Milestones */}</div> : null)
           : milestones?.map((milestone, index) => (
-            <div className="group__event cursor-pointer single_ellipsis" onClick={() => scrollToDate(dayjs(milestone.start))}>
+            <div className="group__event cursor-pointer single_ellipsis" onClick={() => scrollToDate(dayjs(milestone.start), uniqueId)}>
               {milestone?.title}
             </div>
           ))

diff --git a/src/packages/Gantt/index.tsx b/src/packages/Gantt/index.tsx
@@ -18,8 +18,9 @@ const Gantt: React.FC<{
   defaultView?: IView
   defaultMode?: IMode
   theme?: 'light' | 'dark' | string
+  uniqueId?: string
   [prop: string]: any
-}> = ({ weekStartDay, data, showSidebar = true, showOptions = true, defaultView = 'day', defaultMode = 'simple', showModeSelector = false, theme = 'light', ...props }) => {
+}> = ({ weekStartDay, data, showSidebar = true, showOptions = true, defaultView = 'day', defaultMode = 'simple', showModeSelector = false, theme = 'light', uniqueId = '', ...props }) => {
   const calendarRef = useRef<{ scrollToToday: () => void }>()
   const [view, setView] = useState<IView>(defaultView)
   const [mode, setMode] = useState<IMode>(defaultMode)
@@ -124,7 +125,7 @@ const Gantt: React.FC<{
       {
         showOptions && (
           <div className="operation absolute right-0 top-0 z-30 bg-quaternary">
-            <Button size="small" shape="round" onClick={() => scrollToDate(dayjs())}>Today</Button>
+            <Button size="small" shape="round" onClick={() => scrollToDate(dayjs(), uniqueId)}>Today</Button>
             <Select size="small" options={VIEWS} defaultValue={view} onChange={(e: IView) => setView(e)} style={{ minWidth: '80px' }} className="ml-2 select-style" />
             {showModeSelector && (
               <Select size="small" options={MODES} defaultValue="simple" onChange={(e: IMode) => setMode(e)} style={{ minWidth: '110px' }} className="ml-2 select-style" />
@@ -145,13 +146,14 @@ const Gantt: React.FC<{
                     events={group?.events}
                     milestones={group?.milestones}
                     levelCount={group.levelCount}
+                    uniqueId={uniqueId}
                   />
                 ))
               }
             </div>
           )
         }
-        <Calendar data={_data} ref={calendarRef} mode={mode} view={view} />
+        <Calendar data={_data} ref={calendarRef} mode={mode} view={view} uniqueId={uniqueId} />
       </div>
     </div>
   )

diff --git a/src/packages/Gantt/util.ts b/src/packages/Gantt/util.ts
@@ -60,8 +60,8 @@ export const getXCoordinate = (start: Dayjs, day: Dayjs, itemWidth: number): num
   return day.diff(start, 'day') * itemWidth
 }
 
-export const scrollToDate = (date: Dayjs) => {
-  document.querySelector(`#date${date.format('YYYYMMDD')}`)?.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' })
+export const scrollToDate = (date: Dayjs, uniqueId = '') => {
+  document.querySelector(`#date${uniqueId}${date.format('YYYYMMDD')}`)?.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' })
 }
 
 export const transformDataToAdvancedMode = (data: IGroup[]) => {

diff --git a/src/pages/Dashboard/components/Project.tsx b/src/pages/Dashboard/components/Project.tsx
@@ -71,7 +71,7 @@ const Project: React.FC<{
               exit={{ opacity: 0, height: 0, marginTop: 0, padding: 0 }}
               transition={{ ease: 'easeInOut', duration: 0.2 }}
             >
-              <Gantt data={[data]} weekStartDay={0} showOptions={false} showSidebar={false} defaultView="week" theme={theme} />
+              <Gantt data={[data]} weekStartDay={0} showOptions={false} showSidebar={false} defaultView="week" theme={theme} uniqueId={data?.id} />
             </motion.div>
           )}
         </AnimatePresence>

diff --git a/src/pages/Gantt/components/Gantt.tsx b/src/pages/Gantt/components/Gantt.tsx
@@ -33,6 +33,8 @@ const Timeline: React.FC<{
               data={[project]}
               weekStartDay={logseq.settings?.weekStartDay || 0}
               theme={theme}
+              defaultMode="advanced"
+              uniqueId={project.id}
             />
           </motion.div>
         )}

diff --git a/src/pages/Timeline/components/Timeline.tsx b/src/pages/Timeline/components/Timeline.tsx
@@ -34,6 +34,7 @@ const Timeline: React.FC<{
               weekStartDay={logseq.settings?.weekStartDay || 0}
               showSidebar={false}
               theme={theme}
+              uniqueId={project.id}
             />
           </motion.div>
         )}