Set initial scroll for gantt chart

2022-07-23 01:12:51 +09:00
parent d290355a69
commit 87ed39d669
2 changed files with 32 additions and 5 deletions
@@ -8,7 +8,7 @@ import {
  format,
 } from 'date-fns'
 import { times } from 'ramda'
-import React, { useMemo, MouseEventHandler } from 'react'
+import React, { useMemo, MouseEventHandler, useEffect } from 'react'

 export interface GanttChartItem {
  id: string
@@ -23,6 +23,7 @@ interface GanttChartProps {
  endDate: string
  today: Date | null
  items: GanttChartItem[]
+  scrollTo?: (to: number) => void
 }

 const widthOfDay = 20
@@ -35,6 +36,7 @@ const GanttChart = ({
  endDate: endDateString,
  today,
  items,
+  scrollTo,
 }: GanttChartProps) => {
  const startDate = new Date(startDateString)
  const endDate = new Date(endDateString)
@@ -57,6 +59,19 @@ const GanttChart = ({
    }, 1)
  }, [items])

+  useEffect(() => {
+    if (today == null || scrollTo == null) {
+      return
+    }
+
+    const target =
+      differenceInCalendarDays(today, firstDateToRender) * widthOfDay -
+      widthOfWeek -
+      widthOfDay / 2
+
+    scrollTo(target > 0 ? target : 0)
+  }, [firstDateToRender, scrollTo, today])
+
  return (
    <Box sx={{ width: weeksToRender * widthOfWeek + 70 }}>
      <WeekLabelRow
@@ -171,8 +186,8 @@ const GanttChart = ({
                borderWidth: 1,
                borderStyle: 'solid',
                backgroundColor: 'background',
-                width: length,
-                left: offset,
+                width: length + 'px',
+                left: offset + 'px',
                top: (item.row - 1) * (itemHeight + 10) + 30,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
@@ -25,7 +25,7 @@ import { assetsBucketBaseUrl } from '../../lib/consts'
 import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
 import WeaponCard from '../../components/molecules/WeaponCard'
 import BattlesuitCard from '../../components/molecules/BattlesuitCard'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import BossTable from '../../components/organisms/BossTable'
 import { getStigmataSetBySetId } from '../../server/data/honkai3rd/stigmata'
 import { StigmataSet } from '../../lib/honkai3rd/stigmata'
@@ -48,10 +48,18 @@ const VersionIndexPage = ({
 }: VersionIndexPageProps) => {
  const { t } = useTranslation()
  const [today, setToday] = useState<Date | null>(null)
+  const supplyGanttChartScrollContainerRef = useRef<HTMLElement>(null)
  useEffect(() => {
    setToday(new Date(getDateString(new Date())))
  }, [])

+  const scrollSupplyGanttChart = useCallback((to: number) => {
+    if (supplyGanttChartScrollContainerRef.current == null) {
+      return null
+    }
+    supplyGanttChartScrollContainerRef.current.scrollTo(to, 0)
+  }, [])
+
  return (
    <Honkai3rdLayout>
      <Head
@@ -149,8 +157,12 @@ const VersionIndexPage = ({
            {t('versions.supply-events')}
          </Heading>
          <Box mb={2}>
-            <ScrollContainer vertical={false}>
+            <ScrollContainer
+              vertical={false}
+              innerRef={supplyGanttChartScrollContainerRef}
+            >
              <GanttChart
+                scrollTo={scrollSupplyGanttChart}
                items={currentVersionData.supplyEvents.map(
                  (supplyEventData) => {
                    const imgSrc = getIconSrcFromItem(