retr0volkov/abyss-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set initial scroll for gantt chart

Browse Source
This commit is contained in:
Sakura Knoll
2022-07-23 01:12:51 +09:00 Unverified
parent d290355a69
commit 87ed39d669
2 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/organisms/GanttChart.tsx
+18 -3
View File
@@ -8,7 +8,7 @@ import {
format, format,
} from 'date-fns' } from 'date-fns'
import { times } from 'ramda' import { times } from 'ramda'
import React, { useMemo, MouseEventHandler } from 'react' import React, { useMemo, MouseEventHandler, useEffect } from 'react'
export interface GanttChartItem { export interface GanttChartItem {
id: string id: string
@@ -23,6 +23,7 @@ interface GanttChartProps {
endDate: string endDate: string
today: Date | null today: Date | null
items: GanttChartItem[] items: GanttChartItem[]
scrollTo?: (to: number) => void
} }
const widthOfDay = 20 const widthOfDay = 20
@@ -35,6 +36,7 @@ const GanttChart = ({
endDate: endDateString, endDate: endDateString,
today, today,
items, items,
scrollTo,
}: GanttChartProps) => { }: GanttChartProps) => {
const startDate = new Date(startDateString) const startDate = new Date(startDateString)
const endDate = new Date(endDateString) const endDate = new Date(endDateString)
@@ -57,6 +59,19 @@ const GanttChart = ({
}, 1) }, 1)
}, [items]) }, [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 ( return (
<Box sx={{ width: weeksToRender * widthOfWeek + 70 }}> <Box sx={{ width: weeksToRender * widthOfWeek + 70 }}>
<WeekLabelRow <WeekLabelRow
@@ -171,8 +186,8 @@ const GanttChart = ({
borderWidth: 1, borderWidth: 1,
borderStyle: 'solid', borderStyle: 'solid',
backgroundColor: 'background', backgroundColor: 'background',
width: length, width: length + 'px',
left: offset, left: offset + 'px',
top: (item.row - 1) * (itemHeight + 10) + 30, top: (item.row - 1) * (itemHeight + 10) + 30,
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
src/pages/honkai3rd/index.tsx
+14 -2
View File
@@ -25,7 +25,7 @@ import { assetsBucketBaseUrl } from '../../lib/consts'
import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout' import Honkai3rdLayout from '../../components/layouts/Honkai3rdLayout'
import WeaponCard from '../../components/molecules/WeaponCard' import WeaponCard from '../../components/molecules/WeaponCard'
import BattlesuitCard from '../../components/molecules/BattlesuitCard' 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 BossTable from '../../components/organisms/BossTable'
import { getStigmataSetBySetId } from '../../server/data/honkai3rd/stigmata' import { getStigmataSetBySetId } from '../../server/data/honkai3rd/stigmata'
import { StigmataSet } from '../../lib/honkai3rd/stigmata' import { StigmataSet } from '../../lib/honkai3rd/stigmata'
@@ -48,10 +48,18 @@ const VersionIndexPage = ({
}: VersionIndexPageProps) => { }: VersionIndexPageProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const [today, setToday] = useState<Date | null>(null) const [today, setToday] = useState<Date | null>(null)
const supplyGanttChartScrollContainerRef = useRef<HTMLElement>(null)
useEffect(() => { useEffect(() => {
setToday(new Date(getDateString(new Date()))) setToday(new Date(getDateString(new Date())))
}, []) }, [])
const scrollSupplyGanttChart = useCallback((to: number) => {
if (supplyGanttChartScrollContainerRef.current == null) {
return null
}
supplyGanttChartScrollContainerRef.current.scrollTo(to, 0)
}, [])
return ( return (
<Honkai3rdLayout> <Honkai3rdLayout>
<Head <Head
@@ -149,8 +157,12 @@ const VersionIndexPage = ({
{t('versions.supply-events')} {t('versions.supply-events')}
</Heading> </Heading>
<Box mb={2}> <Box mb={2}>
<ScrollContainer vertical={false}> <ScrollContainer
vertical={false}
innerRef={supplyGanttChartScrollContainerRef}
>
<GanttChart <GanttChart
scrollTo={scrollSupplyGanttChart}
items={currentVersionData.supplyEvents.map( items={currentVersionData.supplyEvents.map(
(supplyEventData) => { (supplyEventData) => {
const imgSrc = getIconSrcFromItem( const imgSrc = getIconSrcFromItem(