When updating a row the whole Gantt reloads

[synapse]

Hey there, first of all great component. I have a question and issue to report.
When I drag and update an item/row's date it immediately jumps back to it's initial scroll position and closes or opens all collapsed sidebar items.

Question: is there any way to keep the current state and not move the Gantt view after each update.

Thanks

[ahwgs]

Can you provide a moving image demonstration?

[synapse]

Sure thing @ahwgs, here it is (also had to disable toggling the open/close of the sidebar since it would constantly close it).

gantt.mov

[ahwgs]

Please provide the minimum recurrence demo

[synapse]

@ahwgs It should be simple to replicate it yourself in your dev-env. All your example use a const array as the source of the data and non of the Gantt components update it. In my case the Gantt data is stored in the component's state and on onUpdate I'm just updating the correct gantt row.
Another way to do it would be just to trigger a component refresh onUpdate - should have that same effect

[psybor]

Please provide the minimum recurrence demo

It's simple, just as @synapse said, I store data in the AppComponent. When onUpdate, I setData.
Then, every change triggers a whole update.

import dayjs from 'dayjs'
import RcGantt from 'rc-gantt'
import React, { useState } from 'react'

interface Data {
  name: string
  startDate: string
  endDate: string
  id: number
}

const _data = Array.from({ length: 100 })
  .fill({
    name: '一个名称一个名称一个名称一个名称',
    startDate: dayjs().format('YYYY-MM-DD'),
    endDate: dayjs().add(1, 'week').format('YYYY-MM-DD'),
  })
  .map((d: any, idx) => ({
    ...d,
    id: idx,
  })) as Data[]

const App = () => {
  const [data, setData] = useState(_data)
  return (
    <div style={{ width: '100%', height: 500 }}>
      <RcGantt<Data>
        lang='zh-CN'
        data={data}
        columns={[
          {
            name: 'name',
            label: '名称',
            width: 100,
          },
        ]}
        onUpdate={async (row, startDate, endDate) => {
          console.log('update', row, startDate, endDate)
          setData(prev => {
            const newList = [...prev]
            const index = newList.findIndex(val => val.id === row.id)
            newList[index] = {
              ...row,
              startDate: dayjs(startDate).format('YYYY-MM-DD'),
              endDate: dayjs(endDate).format('YYYY-MM-DD'),
            }
            return newList
          })
          return true
        }}
      />
    </div>
  )
}

export default App

[ahwgs]

Please use v0.3.0 version. This issue has been fixed
@synapse @psybor