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