gpui_component/input/
text_input.rs

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

gpui_component/input/
text_input.rs
