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 component::{example_group, single_example};
9use editor::{Editor, EditorElement, EditorStyle};
10use gpui::{App, Entity, FocusHandle, Focusable, FontStyle, Hsla, Length, TextStyle};
11use settings::Settings;
12use std::sync::Arc;
13use theme::ThemeSettings;
14use ui::prelude::*;
15
16pub struct SingleLineInputStyle {
17 text_color: Hsla,
18 background_color: Hsla,
19 border_color: Hsla,
20}
21
22/// A Text Field that can be used to create text fields like search inputs, form fields, etc.
23///
24/// It wraps a single line [`Editor`] and allows for common field properties like labels, placeholders, icons, etc.
25#[derive(RegisterComponent)]
26pub struct SingleLineInput {
27 /// An optional label for the text field.
28 ///
29 /// Its position is determined by the [`FieldLabelLayout`].
30 label: Option<SharedString>,
31 /// The size of the label text.
32 label_size: LabelSize,
33 /// The placeholder text for the text field.
34 placeholder: SharedString,
35 /// Exposes the underlying [`Entity<Editor>`] to allow for customizing the editor beyond the provided API.
36 ///
37 /// This likely will only be public in the short term, ideally the API will be expanded to cover necessary use cases.
38 pub editor: Entity<Editor>,
39 /// An optional icon that is displayed at the start of the text field.
40 ///
41 /// For example, a magnifying glass icon in a search field.
42 start_icon: Option<IconName>,
43 /// Whether the text field is disabled.
44 disabled: bool,
45 /// The minimum width of for the input
46 min_width: Length,
47}
48
49impl Focusable for SingleLineInput {
50 fn focus_handle(&self, cx: &App) -> FocusHandle {
51 self.editor.focus_handle(cx)
52 }
53}
54
55impl SingleLineInput {
56 pub fn new(window: &mut Window, cx: &mut App, placeholder: impl Into<SharedString>) -> Self {
57 let placeholder_text = placeholder.into();
58
59 let editor = cx.new(|cx| {
60 let mut input = Editor::single_line(window, cx);
61 input.set_placeholder_text(&placeholder_text, window, cx);
62 input
63 });
64
65 Self {
66 label: None,
67 label_size: LabelSize::Small,
68 placeholder: placeholder_text,
69 editor,
70 start_icon: None,
71 disabled: false,
72 min_width: px(192.).into(),
73 }
74 }
75
76 pub fn start_icon(mut self, icon: IconName) -> Self {
77 self.start_icon = Some(icon);
78 self
79 }
80
81 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
82 self.label = Some(label.into());
83 self
84 }
85
86 pub fn label_size(mut self, size: LabelSize) -> Self {
87 self.label_size = size;
88 self
89 }
90
91 pub fn label_min_width(mut self, width: impl Into<Length>) -> Self {
92 self.min_width = width.into();
93 self
94 }
95
96 pub fn set_disabled(&mut self, disabled: bool, cx: &mut Context<Self>) {
97 self.disabled = disabled;
98 self.editor
99 .update(cx, |editor, _| editor.set_read_only(disabled))
100 }
101
102 pub fn is_empty(&self, cx: &App) -> bool {
103 self.editor().read(cx).text(cx).trim().is_empty()
104 }
105
106 pub fn editor(&self) -> &Entity<Editor> {
107 &self.editor
108 }
109
110 pub fn text(&self, cx: &App) -> String {
111 self.editor().read(cx).text(cx)
112 }
113
114 pub fn set_text(&self, text: impl Into<Arc<str>>, window: &mut Window, cx: &mut App) {
115 self.editor()
116 .update(cx, |editor, cx| editor.set_text(text, window, cx))
117 }
118}
119
120impl Render for SingleLineInput {
121 fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
122 let settings = ThemeSettings::get_global(cx);
123 let theme_color = cx.theme().colors();
124
125 let mut style = SingleLineInputStyle {
126 text_color: theme_color.text,
127 background_color: theme_color.editor_background,
128 border_color: theme_color.border_variant,
129 };
130
131 if self.disabled {
132 style.text_color = theme_color.text_disabled;
133 style.background_color = theme_color.editor_background;
134 style.border_color = theme_color.border_disabled;
135 }
136
137 // if self.error_message.is_some() {
138 // style.text_color = cx.theme().status().error;
139 // style.border_color = cx.theme().status().error_border
140 // }
141
142 let text_style = TextStyle {
143 font_family: settings.ui_font.family.clone(),
144 font_features: settings.ui_font.features.clone(),
145 font_size: rems(0.875).into(),
146 font_weight: settings.buffer_font.weight,
147 font_style: FontStyle::Normal,
148 line_height: relative(1.2),
149 color: style.text_color,
150 ..Default::default()
151 };
152
153 let editor_style = EditorStyle {
154 background: theme_color.ghost_element_background,
155 local_player: cx.theme().players().local(),
156 syntax: cx.theme().syntax().clone(),
157 text: text_style,
158 ..Default::default()
159 };
160
161 v_flex()
162 .id(self.placeholder.clone())
163 .w_full()
164 .gap_1()
165 .when_some(self.label.clone(), |this, label| {
166 this.child(
167 Label::new(label)
168 .size(self.label_size)
169 .color(if self.disabled {
170 Color::Disabled
171 } else {
172 Color::Default
173 }),
174 )
175 })
176 .child(
177 h_flex()
178 .min_w(self.min_width)
179 .min_h_8()
180 .w_full()
181 .px_2()
182 .py_1p5()
183 .flex_grow()
184 .text_color(style.text_color)
185 .rounded_md()
186 .bg(style.background_color)
187 .border_1()
188 .border_color(style.border_color)
189 .when_some(self.start_icon, |this, icon| {
190 this.gap_1()
191 .child(Icon::new(icon).size(IconSize::Small).color(Color::Muted))
192 })
193 .child(EditorElement::new(&self.editor, editor_style)),
194 )
195 }
196}
197
198impl Component for SingleLineInput {
199 fn scope() -> ComponentScope {
200 ComponentScope::Input
201 }
202
203 fn preview(window: &mut Window, cx: &mut App) -> Option<AnyElement> {
204 let input_small =
205 cx.new(|cx| SingleLineInput::new(window, cx, "placeholder").label("Small Label"));
206
207 let input_regular = cx.new(|cx| {
208 SingleLineInput::new(window, cx, "placeholder")
209 .label("Regular Label")
210 .label_size(LabelSize::Default)
211 });
212
213 Some(
214 v_flex()
215 .gap_6()
216 .children(vec![example_group(vec![
217 single_example(
218 "Small Label (Default)",
219 div().child(input_small).into_any_element(),
220 ),
221 single_example(
222 "Regular Label",
223 div().child(input_regular).into_any_element(),
224 ),
225 ])])
226 .into_any_element(),
227 )
228 }
229}