Reordering panels using dnd-kit

[andrewdoro]

Hey, I really apreciate the effort that has been made for this library. It is really life changing for me and my team in creating highly interactive UI. One of the requirements for my project is to be able to reorder the panels horizontally.
On the first implementation I've managed to make it work, but when I change the order of them the drag handle no longer works properly, because the ids didn't change. One fix would be to use the index for the order when mapping but this would trigger some flashes.
https://codesandbox.io/s/runtime-thunder-q2nhos?file=/src/WidgetGroup.tsx:1157-1469

runtime-thunder-q2nhos.-.CodeSandbox.mp4

[bvaughn]

I am happy to hear that this library has been working well for you 😄

Ah, that is an interesting challenge.

To simplify the API of this library, I choose to have a panel group automatically associate drag-handles with panels based on the order they're declared in.

I think you could improve the UX of your Sandbox a little bit by adding id and order attributes to each panel:

          {items.map((item, index) => {
            return (
              <Fragment key={item}>
                <Panel
                  id={`${item}`}
                  order={index}
                  style={{ overflow: "initial", minWidth: 0 }}
                >

But there would still be an unpleasant size "jump" when dragging starts, because I didn't write panel group with the expectation that panel ordering may change within a group.

I think supporting this properly would require adding an imperative API to PanelGroup that allowed external code to set a layout (array of sizes/numbers) so you could "reset" the resizes on resize. Basically that would look like:

• Add an onLayout callback to PanelGroup and save each item's most recent size (Map of item to number)
• Listen for a drag-and-drop complete (either an event of an effect that runs when the items array changes)
• Create an array of sizes for the new item ordering (old sizes but in the new order) and pass to panelGroup.ref.setLayout

I don't think I have time to make the imperative API change to PanelGroup, but if you'd be interested in contributing I can try to review it.

[bvaughn]

Imperative API added for PanelGroup – https://react-resizable-panels.vercel.app/examples/imperative-panel-group-api

I think you should be unblocked to do what I suggested above, now.

[bvaughn]

Here you go: https://codesandbox.io/s/silly-hertz-uili6f?file=/src/WidgetGroup.tsx

[andrewdoro]

Thanks you, that was really fast!

[bvaughn]

No problem! 😄

If your company has been finding this library useful in your work– consider becoming a sponsor