Replicate Edit, Order/Arrange/Move, and Delete as done in QuickLinks WebPart

[brianpmccullough]

Sample description

Replicate Edit, Order/Arrange/Move, and Delete as done in QuickLinks WebPart including accessibility behaviors of Left/Right arrows for selection of card and Ctrl + Left/Right Arrows for movement of card.

SPFx version

1.13.1

Are you willing to help?

Yes

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[PooLP]

i have this => https://github.com/PooLP/spfx-react-drag-drop-inline-edit-sample
it's a POC to reproduce the UX of quick links, but i don't have accessibility behaviors.
i have make this for test "getDetailsPaneConfiguration" to open another property pane, but it's not documented by MS.

[Tanddant]

I hadn't seen @PooLP already answered your question, but I've submitted a PR that mostly solves this one - you can freely update it to support keyboard shoutcuts, for inspiration take a look under keycodes in the react-sortable-hoc docs

Instead of using the getDetailsPaneConfiguration I'm forcing a rerender of the propertypane, I really couldn't find a pretty way that's documented to do this, yet another reason MS should open source some of their webparts

[PooLP]

I think we should use dnd kit for that, much more complete and maintained.
For MS and real open Source for SPFx, good luck :D

[Tanddant]

DnD kit is probably the better way to go, I just went for something I knew to be working 😊

Well if we don't push for it, it won't happen