guise/dnd/
sortable.rs

1//! `SortableList` — drag rows to reorder.
2//!
3//! Stateless: the parent owns the items; the list reports `(from, to)` and
4//! the parent applies it (usually with [`apply_reorder`](super::apply_reorder)).
5
6use std::rc::Rc;
7
8use gpui::prelude::*;
9use gpui::{div, px, AnyElement, App, ElementId, IntoElement, SharedString, Window};
10
11use super::chip::DragChip;
12use crate::devtools::Probed;
13use crate::theme::theme;
14
15type ItemBuilder = Rc<dyn Fn(usize, &mut Window, &mut App) -> AnyElement + 'static>;
16type ReorderHandler = Rc<dyn Fn(usize, usize, &mut Window, &mut App) + 'static>;
17type Labeler = Rc<dyn Fn(usize) -> SharedString + 'static>;
18
19/// The payload a sortable row drags: its list group + index.
20#[derive(Clone)]
21struct SortDrag {
22  group: SharedString,
23  index: usize,
24}
25
26/// A vertical list whose rows drag to reorder. Dropping row `from` on row
27/// `to` calls `on_reorder(from, to)` — "place it where I dropped it".
28///
29/// ```ignore
30/// let view = cx.entity().downgrade();
31/// SortableList::new("queue", self.tracks.len(), {
32///     let tracks = self.tracks.clone();
33///     move |i, _w, _cx| Text::new(tracks[i].clone()).into_any_element()
34/// })
35/// .on_reorder(move |from, to, _window, cx| {
36///     view.update(cx, |this, cx| {
37///         guise::dnd::apply_reorder(&mut this.tracks, from, to);
38///         cx.notify();
39///     })
40///     .ok();
41/// })
42/// ```
43#[derive(IntoElement)]
44pub struct SortableList {
45  id: ElementId,
46  group: SharedString,
47  count: usize,
48  item: ItemBuilder,
49  labeler: Option<Labeler>,
50  gap: f32,
51  on_reorder: Option<ReorderHandler>,
52}
53
54impl SortableList {
55  /// `group` (from `id`) guards drops: rows only accept drags from the
56  /// same list. `item` builds each row's content, re-invoked every frame.
57  pub fn new<E>(
58    id: impl Into<SharedString>,
59    count: usize,
60    item: impl Fn(usize, &mut Window, &mut App) -> E + 'static,
61  ) -> Self
62  where
63    E: IntoElement,
64  {
65    let group: SharedString = id.into();
66    SortableList {
67      id: ElementId::Name(group.clone()),
68      group,
69      count,
70      item: Rc::new(move |i, window, cx| item(i, window, cx).into_any_element()),
71      labeler: None,
72      gap: 4.0,
73      on_reorder: None,
74    }
75  }
76
77  /// Chip label for the dragged row (default "Item N").
78  pub fn label_of(mut self, labeler: impl Fn(usize) -> SharedString + 'static) -> Self {
79    self.labeler = Some(Rc::new(labeler));
80    self
81  }
82
83  /// Vertical gap between rows in px (default 4).
84  pub fn gap(mut self, gap: f32) -> Self {
85    self.gap = gap.max(0.0);
86    self
87  }
88
89  /// Called with `(from, to)` when a row is dropped on another.
90  pub fn on_reorder(
91    mut self,
92    handler: impl Fn(usize, usize, &mut Window, &mut App) + 'static,
93  ) -> Self {
94    self.on_reorder = Some(Rc::new(handler));
95    self
96  }
97}
98
99impl RenderOnce for SortableList {
100  fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
101    let t = theme(cx);
102    let accent = t.primary().hsla();
103
104    let mut root = div().id(self.id).flex().flex_col().gap(px(self.gap));
105    for i in 0..self.count {
106      let content = (self.item)(i, window, cx);
107      let label = match &self.labeler {
108        Some(labeler) => labeler(i),
109        None => SharedString::from(format!("Item {}", i + 1)),
110      };
111      let chip = DragChip {
112        value: SortDrag {
113          group: self.group.clone(),
114          index: i,
115        },
116        label,
117      };
118
119      let mut row = div()
120        .id(("guise-sortable-row", i))
121        .cursor_grab()
122        // A constant transparent top border keeps layout stable while
123        // the drag-over highlight recolors it as the insert marker.
124        .border_t_2()
125        .border_color(gpui::transparent_black())
126        .on_drag(chip, |dragged: &DragChip<SortDrag>, _off, _w, cx| {
127          cx.new(|_| dragged.clone())
128        })
129        .drag_over::<DragChip<SortDrag>>(move |style, _drag, _window, _cx| {
130          style.border_color(accent)
131        })
132        .child(content);
133
134      if let Some(handler) = self.on_reorder.clone() {
135        let group = self.group.clone();
136        row = row.on_drop(move |dragged: &DragChip<SortDrag>, window, cx| {
137          if dragged.value.group == group && dragged.value.index != i {
138            handler(dragged.value.index, i, window, cx);
139          }
140        });
141      }
142      root = root.child(row);
143    }
144    root.probe("SortableList")
145  }
146}
guise/dnd/sortable.rs

guise/dnd/
sortable.rs
