[bug] for sort group, if unuse setList , component will work fail
vaynevayne opened this issue · 0 comments
vaynevayne commented
const [localColumns, setLocaleColumns] = useState(
mapStateToColumns(columns, columnsState, !!meta.defaultVisible)
)
const leftColumns = useMemo(() => {
return localColumns
.filter((item) => item.visible)
.filter((column) => column.fixed === "left")
.map((item) => ({
...item,
id: findColKey(item),
name: item.title,
}))
}, [localColumns])
const centerColumns = useMemo(() => {
return localColumns
.filter((item) => item.visible)
.filter((column) => column.fixed !== "left")
.map((item) => ({
...item,
id: item.id ?? findColKey(item),
name: item.name || item.title,
}))
}, [localColumns])
<ReactSortable
style={{
height: 50,
overflowY: "auto",
}}
animation={150}
group="shared-group-name"
list={leftColumns}
setList={(newColumns) => {
setLocaleColumns(
produce(localColumns, (draft) => {
newColumns.forEach((col, order) => {
const idx = localColumns.findIndex(
(item) => findColKey(item) === findColKey(col)
)
draft[idx].fixed = "left"
draft[idx].order = order
})
})
)
}}
>
{leftColumns.map((item) => (
<SortItem key={item.id}>{item.name}</SortItem>
))}
</ReactSortable>
<ReactSortable
style={{
minHeight: 50,
maxHeight: 300,
overflowY: "auto",
}}
animation={150}
group="shared-group-name"
list={centerColumns}
setList={(newColumns) => {
setLocaleColumns(
produce(localColumns, (draft) => {
newColumns.forEach((col, order) => {
const idx = localColumns.findIndex(
(item) => findColKey(item) === findColKey(col)
)
draft[idx].fixed = false
draft[idx].order = order + 10000
})
})
)
}}
>
{centerColumns.map((item) => (
<SortItem key={item.id}>{item.name}</SortItem>
))}
</ReactSortable>Is there something wrong with the above code? Why does it not work properly?