gpui_component/input/
input.rs

1use gpui::prelude::FluentBuilder as _;
2use gpui::{
3    AnyElement, App, DefiniteLength, Edges, EdgesRefinement, Entity, InteractiveElement as _,
4    IntoElement, IsZero, MouseButton, ParentElement as _, Rems, RenderOnce, StyleRefinement,
5    Styled, Window, div, px, relative,
6};
7
8use crate::button::{Button, ButtonVariants as _};
9use crate::input::clear_button;
10use crate::input::element::{LINE_NUMBER_RIGHT_MARGIN, RIGHT_MARGIN};
11use crate::scroll::Scrollbar;
12use crate::spinner::Spinner;
13use crate::{ActiveTheme, v_flex};
14use crate::{IconName, Size};
15use crate::{Selectable, StyledExt, h_flex};
16use crate::{Sizable, StyleSized};
17
18use super::InputState;
19
20/// A text input element bind to an [`InputState`].
21#[derive(IntoElement)]
22pub struct Input {
23    state: Entity<InputState>,
24    style: StyleRefinement,
25    size: Size,
26    prefix: Option<AnyElement>,
27    suffix: Option<AnyElement>,
28    height: Option<DefiniteLength>,
29    appearance: bool,
30    cleanable: bool,
31    mask_toggle: bool,
32    disabled: bool,
33    bordered: bool,
34    focus_bordered: bool,
35    tab_index: isize,
36    selected: bool,
37}
38
39impl Sizable for Input {
40    fn with_size(mut self, size: impl Into<Size>) -> Self {
41        self.size = size.into();
42        self
43    }
44}
45
46impl Selectable for Input {
47    fn selected(mut self, selected: bool) -> Self {
48        self.selected = selected;
49        self
50    }
51
52    fn is_selected(&self) -> bool {
53        self.selected
54    }
55}
56
57impl Input {
58    /// Create a new [`Input`] element bind to the [`InputState`].
59    pub fn new(state: &Entity<InputState>) -> Self {
60        Self {
61            state: state.clone(),
62            size: Size::default(),
63            style: StyleRefinement::default(),
64            prefix: None,
65            suffix: None,
66            height: None,
67            appearance: true,
68            cleanable: false,
69            mask_toggle: false,
70            disabled: false,
71            bordered: true,
72            focus_bordered: true,
73            tab_index: 0,
74            selected: false,
75        }
76    }
77
78    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
79        self.prefix = Some(prefix.into_any_element());
80        self
81    }
82
83    pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
84        self.suffix = Some(suffix.into_any_element());
85        self
86    }
87
88    /// Set full height of the input (Multi-line only).
89    pub fn h_full(mut self) -> Self {
90        self.height = Some(relative(1.));
91        self
92    }
93
94    /// Set height of the input (Multi-line only).
95    pub fn h(mut self, height: impl Into<DefiniteLength>) -> Self {
96        self.height = Some(height.into());
97        self
98    }
99
100    /// Set the appearance of the input field, if false the input field will no border, background.
101    pub fn appearance(mut self, appearance: bool) -> Self {
102        self.appearance = appearance;
103        self
104    }
105
106    /// Set the bordered for the input, default: true
107    pub fn bordered(mut self, bordered: bool) -> Self {
108        self.bordered = bordered;
109        self
110    }
111
112    /// Set focus border for the input, default is true.
113    pub fn focus_bordered(mut self, bordered: bool) -> Self {
114        self.focus_bordered = bordered;
115        self
116    }
117
118    /// Set whether to show the clear button when the input field is not empty, default is false.
119    pub fn cleanable(mut self, cleanable: bool) -> Self {
120        self.cleanable = cleanable;
121        self
122    }
123
124    /// Set to enable toggle button for password mask state.
125    pub fn mask_toggle(mut self) -> Self {
126        self.mask_toggle = true;
127        self
128    }
129
130    /// Set to disable the input field.
131    pub fn disabled(mut self, disabled: bool) -> Self {
132        self.disabled = disabled;
133        self
134    }
135
136    /// Set the tab index for the input, default is 0.
137    pub fn tab_index(mut self, index: isize) -> Self {
138        self.tab_index = index;
139        self
140    }
141
142    fn render_toggle_mask_button(state: Entity<InputState>) -> impl IntoElement {
143        Button::new("toggle-mask")
144            .icon(IconName::Eye)
145            .xsmall()
146            .ghost()
147            .tab_stop(false)
148            .on_mouse_down(MouseButton::Left, {
149                let state = state.clone();
150                move |_, window, cx| {
151                    state.update(cx, |state, cx| {
152                        state.set_masked(false, window, cx);
153                    })
154                }
155            })
156            .on_mouse_up(MouseButton::Left, {
157                let state = state.clone();
158                move |_, window, cx| {
159                    state.update(cx, |state, cx| {
160                        state.set_masked(true, window, cx);
161                    })
162                }
163            })
164    }
165
166    /// This method must after the refine_style.
167    fn render_editor(
168        paddings: EdgesRefinement<DefiniteLength>,
169        input_state: &Entity<InputState>,
170        state: &InputState,
171        window: &Window,
172        _cx: &App,
173    ) -> impl IntoElement {
174        let base_size = window.text_style().font_size;
175        let rem_size = window.rem_size();
176
177        let paddings = Edges {
178            left: paddings
179                .left
180                .map(|v| v.to_pixels(base_size, rem_size))
181                .unwrap_or(px(0.)),
182            right: paddings
183                .right
184                .map(|v| v.to_pixels(base_size, rem_size))
185                .unwrap_or(px(0.)),
186            top: paddings
187                .top
188                .map(|v| v.to_pixels(base_size, rem_size))
189                .unwrap_or(px(0.)),
190            bottom: paddings
191                .bottom
192                .map(|v| v.to_pixels(base_size, rem_size))
193                .unwrap_or(px(0.)),
194        };
195
196        v_flex()
197            .size_full()
198            .children(state.search_panel.clone())
199            .child(div().flex_1().child(input_state.clone()).map(|this| {
200                if let Some(last_layout) = state.last_layout.as_ref() {
201                    let left = if last_layout.line_number_width.is_zero() {
202                        px(0.)
203                    } else {
204                        // Align left edge to the Line number.
205                        paddings.left + last_layout.line_number_width - LINE_NUMBER_RIGHT_MARGIN
206                    };
207
208                    let scroll_size = gpui::Size {
209                        width: state.scroll_size.width - left + paddings.right + RIGHT_MARGIN,
210                        height: state.scroll_size.height,
211                    };
212
213                    let scrollbar = if !state.soft_wrap {
214                        Scrollbar::new(&state.scroll_handle)
215                    } else {
216                        Scrollbar::vertical(&state.scroll_handle)
217                    };
218
219                    this.relative().child(
220                        div()
221                            .absolute()
222                            .top(-paddings.top)
223                            .left(left)
224                            .right(-paddings.right)
225                            .bottom(-paddings.bottom)
226                            .child(scrollbar.scroll_size(scroll_size)),
227                    )
228                } else {
229                    this
230                }
231            }))
232    }
233}
234
235impl Styled for Input {
236    fn style(&mut self) -> &mut StyleRefinement {
237        &mut self.style
238    }
239}
240
241impl RenderOnce for Input {
242    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
243        const LINE_HEIGHT: Rems = Rems(1.25);
244
245        self.state.update(cx, |state, _| {
246            state.disabled = self.disabled;
247            state.size = self.size;
248        });
249
250        let state = self.state.read(cx);
251        let focused = state.focus_handle.is_focused(window);
252        let gap_x = match self.size {
253            Size::Small => px(4.),
254            Size::Large => px(8.),
255            _ => px(6.),
256        };
257
258        let bg = if state.disabled {
259            cx.theme().muted
260        } else {
261            if state.mode.is_code_editor() {
262                cx.theme().editor_background()
263            } else {
264                cx.theme().background
265            }
266        };
267
268        let prefix = self.prefix;
269        let suffix = self.suffix;
270        let show_clear_button =
271            self.cleanable && !state.loading && state.text.len() > 0 && state.mode.is_single_line();
272        let has_suffix = suffix.is_some() || state.loading || self.mask_toggle || show_clear_button;
273
274        div()
275            .id(("input", self.state.entity_id()))
276            .flex()
277            .key_context(crate::input::CONTEXT)
278            .track_focus(&state.focus_handle.clone())
279            .tab_index(self.tab_index)
280            .when(!state.disabled, |this| {
281                this.on_action(window.listener_for(&self.state, InputState::backspace))
282                    .on_action(window.listener_for(&self.state, InputState::delete))
283                    .on_action(
284                        window.listener_for(&self.state, InputState::delete_to_beginning_of_line),
285                    )
286                    .on_action(window.listener_for(&self.state, InputState::delete_to_end_of_line))
287                    .on_action(window.listener_for(&self.state, InputState::delete_previous_word))
288                    .on_action(window.listener_for(&self.state, InputState::delete_next_word))
289                    .on_action(window.listener_for(&self.state, InputState::enter))
290                    .on_action(window.listener_for(&self.state, InputState::escape))
291                    .on_action(window.listener_for(&self.state, InputState::paste))
292                    .on_action(window.listener_for(&self.state, InputState::cut))
293                    .on_action(window.listener_for(&self.state, InputState::undo))
294                    .on_action(window.listener_for(&self.state, InputState::redo))
295                    .when(state.mode.is_multi_line(), |this| {
296                        this.on_action(window.listener_for(&self.state, InputState::indent_inline))
297                            .on_action(window.listener_for(&self.state, InputState::outdent_inline))
298                            .on_action(window.listener_for(&self.state, InputState::indent_block))
299                            .on_action(window.listener_for(&self.state, InputState::outdent_block))
300                    })
301                    .on_action(
302                        window.listener_for(&self.state, InputState::on_action_toggle_code_actions),
303                    )
304            })
305            .on_action(window.listener_for(&self.state, InputState::left))
306            .on_action(window.listener_for(&self.state, InputState::right))
307            .on_action(window.listener_for(&self.state, InputState::select_left))
308            .on_action(window.listener_for(&self.state, InputState::select_right))
309            .when(state.mode.is_multi_line(), |this| {
310                this.on_action(window.listener_for(&self.state, InputState::up))
311                    .on_action(window.listener_for(&self.state, InputState::down))
312                    .on_action(window.listener_for(&self.state, InputState::select_up))
313                    .on_action(window.listener_for(&self.state, InputState::select_down))
314                    .on_action(window.listener_for(&self.state, InputState::page_up))
315                    .on_action(window.listener_for(&self.state, InputState::page_down))
316                    .on_action(
317                        window.listener_for(&self.state, InputState::on_action_go_to_definition),
318                    )
319            })
320            .on_action(window.listener_for(&self.state, InputState::select_all))
321            .on_action(window.listener_for(&self.state, InputState::select_to_start_of_line))
322            .on_action(window.listener_for(&self.state, InputState::select_to_end_of_line))
323            .on_action(window.listener_for(&self.state, InputState::select_to_previous_word))
324            .on_action(window.listener_for(&self.state, InputState::select_to_next_word))
325            .on_action(window.listener_for(&self.state, InputState::home))
326            .on_action(window.listener_for(&self.state, InputState::end))
327            .on_action(window.listener_for(&self.state, InputState::move_to_start))
328            .on_action(window.listener_for(&self.state, InputState::move_to_end))
329            .on_action(window.listener_for(&self.state, InputState::move_to_previous_word))
330            .on_action(window.listener_for(&self.state, InputState::move_to_next_word))
331            .on_action(window.listener_for(&self.state, InputState::select_to_start))
332            .on_action(window.listener_for(&self.state, InputState::select_to_end))
333            .on_action(window.listener_for(&self.state, InputState::show_character_palette))
334            .on_action(window.listener_for(&self.state, InputState::copy))
335            .on_action(window.listener_for(&self.state, InputState::on_action_search))
336            .on_key_down(window.listener_for(&self.state, InputState::on_key_down))
337            .on_mouse_down(
338                MouseButton::Left,
339                window.listener_for(&self.state, InputState::on_mouse_down),
340            )
341            .on_mouse_down(
342                MouseButton::Right,
343                window.listener_for(&self.state, InputState::on_mouse_down),
344            )
345            .on_mouse_up(
346                MouseButton::Left,
347                window.listener_for(&self.state, InputState::on_mouse_up),
348            )
349            .on_mouse_up(
350                MouseButton::Right,
351                window.listener_for(&self.state, InputState::on_mouse_up),
352            )
353            .on_mouse_move(window.listener_for(&self.state, InputState::on_mouse_move))
354            .on_scroll_wheel(window.listener_for(&self.state, InputState::on_scroll_wheel))
355            .size_full()
356            .line_height(LINE_HEIGHT)
357            .input_px(self.size)
358            .input_py(self.size)
359            .input_h(self.size)
360            .input_text_size(self.size)
361            .cursor_text()
362            .items_center()
363            .when(state.mode.is_multi_line(), |this| {
364                this.h_auto()
365                    .when_some(self.height, |this, height| this.h(height))
366            })
367            .when(self.appearance, |this| {
368                this.bg(bg)
369                    .rounded(cx.theme().radius)
370                    .when(self.bordered, |this| {
371                        this.border_color(cx.theme().input)
372                            .border_1()
373                            .when(cx.theme().shadow, |this| this.shadow_xs())
374                            .when(focused && self.focus_bordered, |this| {
375                                this.focused_border(cx)
376                            })
377                    })
378            })
379            .items_center()
380            .gap(gap_x)
381            .refine_style(&self.style)
382            .children(prefix)
383            .when(state.mode.is_multi_line(), |mut this| {
384                let paddings = this.style().padding.clone();
385                this.child(Self::render_editor(
386                    paddings,
387                    &self.state,
388                    &state,
389                    window,
390                    cx,
391                ))
392            })
393            .when(!state.mode.is_multi_line(), |this| {
394                this.child(self.state.clone())
395            })
396            .when(has_suffix, |this| {
397                this.pr(self.size.input_px()).child(
398                    h_flex()
399                        .id("suffix")
400                        .gap(gap_x)
401                        .when(self.appearance, |this| this.bg(bg))
402                        .items_center()
403                        .when(state.loading, |this| {
404                            this.child(Spinner::new().color(cx.theme().muted_foreground))
405                        })
406                        .when(self.mask_toggle, |this| {
407                            this.child(Self::render_toggle_mask_button(self.state.clone()))
408                        })
409                        .when(show_clear_button, |this| {
410                            this.child(clear_button(cx).on_click({
411                                let state = self.state.clone();
412                                move |_, window, cx| {
413                                    state.update(cx, |state, cx| {
414                                        state.clean(window, cx);
415                                        state.focus(window, cx);
416                                    })
417                                }
418                            }))
419                        })
420                        .children(suffix),
421                )
422            })
423    }
424}
gpui_component/input/input.rs

gpui_component/input/
input.rs
