1//! # UI – Text Field
2//!
3//! This crate provides a text field component that can be used to create text fields like search inputs, form fields, etc.
4//!
5//! It can't be located in the `ui` crate because it depends on `editor`.
6//!
7
8use editor::*;
9use gpui::*;
10use settings::Settings;
11use theme::ThemeSettings;
12use ui::*;
13
14#[derive(Debug, Clone, Copy, PartialEq)]
15pub enum FieldLabelLayout {
16 Hidden,
17 Inline,
18 Stacked,
19}
20
21pub struct TextFieldStyle {
22 text_color: Hsla,
23 background_color: Hsla,
24 border_color: Hsla,
25}
26
27/// A Text Field view that can be used to create text fields like search inputs, form fields, etc.
28///
29/// It wraps a single line [`Editor`] view and allows for common field properties like labels, placeholders, icons, etc.
30pub struct TextField {
31 /// An optional label for the text field.
32 ///
33 /// Its position is determined by the [`FieldLabelLayout`].
34 label: SharedString,
35 /// The placeholder text for the text field.
36 placeholder: SharedString,
37 /// Exposes the underlying [`View<Editor>`] to allow for customizing the editor beyond the provided API.
38 ///
39 /// This likely will only be public in the short term, ideally the API will be expanded to cover necessary use cases.
40 pub editor: View<Editor>,
41 /// An optional icon that is displayed at the start of the text field.
42 ///
43 /// For example, a magnifying glass icon in a search field.
44 start_icon: Option<IconName>,
45 /// The layout of the label relative to the text field.
46 with_label: FieldLabelLayout,
47}
48
49impl FocusableView for TextField {
50 fn focus_handle(&self, cx: &AppContext) -> FocusHandle {
51 self.editor.focus_handle(cx)
52 }
53}
54
55impl TextField {
56 pub fn new(
57 cx: &mut WindowContext,
58 label: impl Into<SharedString>,
59 placeholder: impl Into<SharedString>,
60 ) -> Self {
61 let placeholder_text = placeholder.into();
62
63 let editor = cx.new_view(|cx| {
64 let mut input = Editor::single_line(cx);
65 input.set_placeholder_text(placeholder_text.clone(), cx);
66 input
67 });
68
69 Self {
70 label: label.into(),
71 placeholder: placeholder_text,
72 editor,
73 start_icon: None,
74 with_label: FieldLabelLayout::Hidden,
75 }
76 }
77
78 pub fn start_icon(mut self, icon: IconName) -> Self {
79 self.start_icon = Some(icon);
80 self
81 }
82
83 pub fn with_label(mut self, layout: FieldLabelLayout) -> Self {
84 self.with_label = layout;
85 self
86 }
87}
88
89impl Render for TextField {
90 fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
91 let settings = ThemeSettings::get_global(cx);
92 let theme_color = cx.theme().colors();
93
94 let style = TextFieldStyle {
95 text_color: theme_color.text,
96 background_color: theme_color.ghost_element_background,
97 border_color: theme_color.border,
98 };
99
100 // if self.disabled {
101 // style.text_color = theme_color.text_disabled;
102 // style.background_color = theme_color.ghost_element_disabled;
103 // style.border_color = theme_color.border_disabled;
104 // }
105
106 // if self.error_message.is_some() {
107 // style.text_color = cx.theme().status().error;
108 // style.border_color = cx.theme().status().error_border
109 // }
110
111 let text_style = TextStyle {
112 font_family: settings.buffer_font.family.clone(),
113 font_features: settings.buffer_font.features,
114 font_size: rems(0.875).into(),
115 font_weight: FontWeight::NORMAL,
116 font_style: FontStyle::Normal,
117 line_height: relative(1.2),
118 color: style.text_color,
119 ..Default::default()
120 };
121
122 let editor_style = EditorStyle {
123 background: theme_color.ghost_element_background,
124 local_player: cx.theme().players().local(),
125 text: text_style,
126 ..Default::default()
127 };
128
129 div()
130 .id(self.placeholder.clone())
131 .group("text-field")
132 .w_full()
133 .when(self.with_label == FieldLabelLayout::Stacked, |this| {
134 this.child(Label::new(self.label.clone()).size(LabelSize::Default))
135 })
136 .child(
137 v_flex().w_full().child(
138 h_flex()
139 .w_full()
140 .flex_grow()
141 .gap_2()
142 .when(self.with_label == FieldLabelLayout::Inline, |this| {
143 this.child(Label::new(self.label.clone()).size(LabelSize::Default))
144 })
145 .child(
146 h_flex()
147 .px_2()
148 .py_1()
149 .bg(style.background_color)
150 .text_color(style.text_color)
151 .rounded_lg()
152 .border()
153 .border_color(style.border_color)
154 .min_w_48()
155 .w_full()
156 .flex_grow()
157 .gap_1()
158 .when_some(self.start_icon, |this, icon| {
159 this.child(
160 Icon::new(icon).size(IconSize::Small).color(Color::Muted),
161 )
162 })
163 .child(EditorElement::new(&self.editor, editor_style)),
164 ),
165 ),
166 )
167 }
168}