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