sp-dev-fx-webparts icon indicating copy to clipboard operation
sp-dev-fx-webparts copied to clipboard

Published 20 hours ago • verified publisher icon pnp

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

Open brianpmccullough opened this issue 3 years ago • 5 comments

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.

image001

SPFx version

1.13.1

Are you willing to help?

Yes

brianpmccullough avatar Jan 29 '22 13:01 brianpmccullough

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

ghost avatar Jan 29 '22 13:01 ghost

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.

PooLP avatar Jan 31 '22 11:01 PooLP

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

Tanddant avatar Mar 05 '23 22:03 Tanddant

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

PooLP avatar Mar 06 '23 11:03 PooLP

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

Tanddant avatar Mar 06 '23 13:03 Tanddant