SortableJS / react-sortablejs

React bindings for SortableJS
http://sortablejs.github.io/react-sortablejs/
MIT License
2.07k stars 211 forks source link

[bug] for sort group, if unuse setList , component will work fail #276

Open vaynevayne opened 1 year ago

vaynevayne commented 1 year ago
 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?