guise/input/
dropzone.rs

1//! `Dropzone` — a drag-and-drop file target (stateless builder).
2//!
3//! Accepts OS file drags (gpui `ExternalPaths`) and, by default, opens the
4//! platform file dialog on click. The parent owns whatever happens with the
5//! paths; wire `.on_files(...)`.
6
7use std::path::PathBuf;
8use std::rc::Rc;
9
10use gpui::prelude::*;
11use gpui::{
12    div, px, App, ElementId, ExternalPaths, IntoElement, PathPromptOptions, SharedString, Window,
13};
14
15use super::accept::{filter_paths, normalize_ext};
16use crate::devtools::Probed;
17use crate::icon::{Icon, IconName};
18use crate::theme::{theme, Size};
19
20type FilesHandler = Rc<dyn Fn(Vec<PathBuf>, &mut App) + 'static>;
21
22/// A drop target for OS file drags. `Dropzone::new("dz").on_files(...)`.
23#[derive(IntoElement)]
24pub struct Dropzone {
25    id: ElementId,
26    label: SharedString,
27    hint: Option<SharedString>,
28    icon: IconName,
29    accept: Vec<String>,
30    multiple: bool,
31    clickable: bool,
32    height: f32,
33    on_files: Option<FilesHandler>,
34}
35
36impl Dropzone {
37    pub fn new(id: impl Into<ElementId>) -> Self {
38        Dropzone {
39            id: id.into(),
40            label: SharedString::new_static("Drop files here"),
41            hint: None,
42            icon: IconName::CloudUpload,
43            accept: Vec::new(),
44            multiple: true,
45            clickable: true,
46            height: 140.0,
47            on_files: None,
48        }
49    }
50
51    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
52        self.label = label.into();
53        self
54    }
55
56    /// Secondary line under the label ("PNG or JPG, up to 10 MB").
57    pub fn hint(mut self, hint: impl Into<SharedString>) -> Self {
58        self.hint = Some(hint.into());
59        self
60    }
61
62    pub fn icon(mut self, icon: IconName) -> Self {
63        self.icon = icon;
64        self
65    }
66
67    /// Allowed extensions ("png", ".jpg", case-insensitive). Empty = any.
68    /// Dropped paths that don't pass are silently ignored.
69    pub fn accept<I, S>(mut self, entries: I) -> Self
70    where
71        I: IntoIterator<Item = S>,
72        S: AsRef<str>,
73    {
74        self.accept = entries
75            .into_iter()
76            .map(|e| normalize_ext(e.as_ref()))
77            .collect();
78        self
79    }
80
81    /// Only take the first dropped/browsed file.
82    pub fn single(mut self) -> Self {
83        self.multiple = false;
84        self
85    }
86
87    /// Disable the click-to-browse dialog (drop only).
88    pub fn no_click(mut self) -> Self {
89        self.clickable = false;
90        self
91    }
92
93    pub fn height(mut self, height: f32) -> Self {
94        self.height = height;
95        self
96    }
97
98    /// Receives the accepted paths of every drop or dialog pick.
99    pub fn on_files(mut self, handler: impl Fn(Vec<PathBuf>, &mut App) + 'static) -> Self {
100        self.on_files = Some(Rc::new(handler));
101        self
102    }
103}
104
105impl RenderOnce for Dropzone {
106    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
107        let t = theme(cx);
108        let radius = t.radius(t.default_radius);
109        let surface = t.surface().hsla();
110        let border = t.border().hsla();
111        let text_color = t.text().hsla();
112        let dimmed = t.dimmed().hsla();
113        let accent = t.primary();
114        let accent_border = accent.hsla();
115        let accent_tint = accent.alpha(0.08);
116        let font = t.font_size(Size::Sm);
117
118        let accept = self.accept;
119        let multiple = self.multiple;
120        let handler = self.on_files;
121
122        let deliver = {
123            let accept = accept.clone();
124            let handler = handler.clone();
125            move |mut paths: Vec<PathBuf>, cx: &mut App| {
126                paths = filter_paths(paths, &accept);
127                if !multiple {
128                    paths.truncate(1);
129                }
130                if let (Some(handler), false) = (&handler, paths.is_empty()) {
131                    handler(paths, cx);
132                }
133            }
134        };
135
136        let mut zone = div()
137            .id(self.id)
138            .flex()
139            .flex_col()
140            .items_center()
141            .justify_center()
142            .gap(px(6.0))
143            .w_full()
144            .h(px(self.height))
145            .rounded(px(radius))
146            .border_1()
147            .border_dashed()
148            .border_color(border)
149            .bg(surface)
150            .drag_over::<ExternalPaths>(move |style, _paths, _window, _cx| {
151                style.border_color(accent_border).bg(accent_tint)
152            })
153            .on_drop({
154                let deliver = deliver.clone();
155                move |dropped: &ExternalPaths, _window, cx| {
156                    deliver(dropped.paths().to_vec(), cx);
157                }
158            })
159            .child(
160                div()
161                    .text_color(dimmed)
162                    .child(Icon::new(self.icon).size(Size::Lg)),
163            )
164            .child(
165                div()
166                    .text_size(px(font))
167                    .text_color(text_color)
168                    .child(self.label),
169            );
170
171        if let Some(hint) = self.hint {
172            zone = zone.child(
173                div()
174                    .text_size(px(font - 2.0))
175                    .text_color(dimmed)
176                    .child(hint),
177            );
178        }
179
180        if self.clickable {
181            zone = zone.cursor_pointer().on_click(move |_ev, _window, cx| {
182                let receiver = cx.prompt_for_paths(PathPromptOptions {
183                    files: true,
184                    directories: false,
185                    multiple,
186                    prompt: None,
187                });
188                let deliver = deliver.clone();
189                cx.spawn(async move |cx| {
190                    if let Ok(Ok(Some(paths))) = receiver.await {
191                        cx.update(|cx| deliver(paths, cx)).ok();
192                    }
193                })
194                .detach();
195            });
196        }
197
198        zone.probe("Dropzone")
199    }
200}
guise/input/dropzone.rs

guise/input/
dropzone.rs
