Skip to main content

Module multiselect

Module multiselect 

Source
Expand description

Multi-select drag: select several items, drag them as one payload.

The design leans on the core being generic: the payload type flowing through the provider is simply Vec<K> - so wrap your app in DndProvider::<Vec<K>> and your DropZones receive the whole selection in one DropOutcome<Vec<K>>.

What this module adds is the interaction layer:

  • use_selection - selection state with the usual click semantics (click selects one, Ctrl/Cmd+click toggles).
  • SelectableDraggable - a Draggable that resolves its payload from the selection: dragging a selected item carries the whole selection; dragging an unselected item carries just that item.
  • SelectionCount - a badge for your DragOverlay ghost (“3 items”).
let selection = use_selection::<FileId>();
rsx! {
    DndProvider::<Vec<FileId>> {
        for file in files {
            SelectableDraggable::<FileId> {
                key: "{file.id.0}",
                item: file.id,
                selection,
                FileRow { file }
            }
        }
        DropZone::<Vec<FileId>> {
            on_drop: move |o: DropOutcome<Vec<FileId>>| trash(o.payload),
            "Trash"
        }
        DragOverlay::<Vec<FileId>> { SelectionCount::<FileId> {} }
    }
}

Re-exports§

pub use SelectableDraggable_completions::Component::SelectableDraggable;
pub use SelectionCount_completions::Component::SelectionCount;

Structs§

SelectableDraggableProps
Properties for the SelectableDraggable component.
Selection
Selection state for keys of type K. Cheap to copy.
SelectionCountProps
Properties for the SelectionCount component.

Functions§

SelectableDraggable
A draggable list/grid item participating in a selection.
SelectionCount
A “N items” badge for the drag ghost. Render inside DragOverlay::<Vec<K>>; shows the size of the payload being dragged.
use_selection
Create selection state owned by this component.