freya_components/
input.rs

1use std::{
2    borrow::Cow,
3    cell::{
4        Ref,
5        RefCell,
6    },
7    rc::Rc,
8};
9
10use freya_core::prelude::*;
11use freya_edit::*;
12use torin::{
13    prelude::{
14        Alignment,
15        Area,
16        Direction,
17    },
18    size::Size,
19};
20
21use crate::{
22    get_theme,
23    scrollviews::ScrollView,
24    theming::component_themes::InputThemePartial,
25};
26
27#[derive(Default, Clone, PartialEq)]
28pub enum InputMode {
29    #[default]
30    Shown,
31    Hidden(char),
32}
33
34impl InputMode {
35    pub fn new_password() -> Self {
36        Self::Hidden('*')
37    }
38}
39
40#[derive(Debug, Default, PartialEq, Clone, Copy)]
41pub enum InputStatus {
42    /// Default state.
43    #[default]
44    Idle,
45    /// Pointer is hovering the input.
46    Hovering,
47}
48
49#[derive(Clone)]
50pub struct InputValidator {
51    valid: Rc<RefCell<bool>>,
52    text: Rc<RefCell<String>>,
53}
54
55impl InputValidator {
56    pub fn new(text: String) -> Self {
57        Self {
58            valid: Rc::new(RefCell::new(true)),
59            text: Rc::new(RefCell::new(text)),
60        }
61    }
62    pub fn text(&'_ self) -> Ref<'_, String> {
63        self.text.borrow()
64    }
65    pub fn set_valid(&self, is_valid: bool) {
66        *self.valid.borrow_mut() = is_valid;
67    }
68    pub fn is_valid(&self) -> bool {
69        *self.valid.borrow()
70    }
71}
72
73/// Small box to write some text.
74///
75/// # Example
76///
77/// ```rust
78/// # use freya::prelude::*;
79/// fn app() -> impl IntoElement {
80///     let mut value = use_state(String::new);
81///
82///     rect()
83///         .expanded()
84///         .center()
85///         .spacing(6.)
86///         .child(
87///             Input::new()
88///                 .placeholder("Type your name")
89///                 .value(value.read().clone())
90///                 .onchange(move |v| value.set(v)),
91///         )
92///         .child(format!("Your name is {}", value.read()))
93/// }
94///
95/// # use freya_testing::prelude::*;
96/// # launch_doc(|| {
97/// #   rect().center().expanded().child(Input::new() .value("Ferris"))
98/// # }, (250., 250.).into(), "./images/gallery_input.png");
99/// ```
100/// # Preview
101/// ![Input Preview][input]
102#[cfg_attr(feature = "docs",
103    doc = embed_doc_image::embed_image!("input", "images/gallery_input.png")
104)]
105#[derive(Clone, PartialEq)]
106pub struct Input {
107    pub(crate) theme: Option<InputThemePartial>,
108    value: Cow<'static, str>,
109    placeholder: Option<Cow<'static, str>>,
110    on_change: Option<EventHandler<String>>,
111    on_validate: Option<EventHandler<InputValidator>>,
112    mode: InputMode,
113    auto_focus: bool,
114    width: Size,
115    enabled: bool,
116    key: DiffKey,
117}
118
119impl KeyExt for Input {
120    fn write_key(&mut self) -> &mut DiffKey {
121        &mut self.key
122    }
123}
124
125impl Default for Input {
126    fn default() -> Self {
127        Self::new()
128    }
129}
130
131impl Input {
132    pub fn new() -> Self {
133        Input {
134            theme: None,
135            value: Cow::default(),
136            placeholder: None,
137            on_change: None,
138            on_validate: None,
139            mode: InputMode::default(),
140            auto_focus: false,
141            width: Size::px(150.),
142            enabled: true,
143            key: DiffKey::default(),
144        }
145    }
146
147    pub fn enabled(mut self, enabled: impl Into<bool>) -> Self {
148        self.enabled = enabled.into();
149        self
150    }
151
152    pub fn value(mut self, value: impl Into<Cow<'static, str>>) -> Self {
153        self.value = value.into();
154        self
155    }
156
157    pub fn placeholder(mut self, placeholder: impl Into<Cow<'static, str>>) -> Self {
158        self.placeholder = Some(placeholder.into());
159        self
160    }
161
162    pub fn onchange(mut self, handler: impl FnMut(String) + 'static) -> Self {
163        self.on_change = Some(EventHandler::new(handler));
164        self
165    }
166
167    pub fn onvalidate(mut self, handler: impl FnMut(InputValidator) + 'static) -> Self {
168        self.on_validate = Some(EventHandler::new(handler));
169        self
170    }
171
172    pub fn mode(mut self, mode: InputMode) -> Self {
173        self.mode = mode;
174        self
175    }
176
177    pub fn auto_focus(mut self, auto_focus: bool) -> Self {
178        self.auto_focus = auto_focus;
179        self
180    }
181
182    pub fn width(mut self, width: impl Into<Size>) -> Self {
183        self.width = width.into();
184        self
185    }
186
187    pub fn theme(mut self, theme: InputThemePartial) -> Self {
188        self.theme = Some(theme);
189        self
190    }
191
192    pub fn key(mut self, key: impl Into<DiffKey>) -> Self {
193        self.key = key.into();
194        self
195    }
196}
197
198impl Render for Input {
199    fn render(&self) -> impl IntoElement {
200        let focus = use_focus();
201        let focus_status = use_focus_status(focus);
202        let holder = use_state(ParagraphHolder::default);
203        let mut area = use_state(Area::default);
204        let mut status = use_state(InputStatus::default);
205        let mut editable = use_editable(
206            || self.value.to_string(),
207            EditableConfig::new,
208            EditableMode::MultipleLinesSingleEditor,
209        );
210        let mut is_dragging = use_state(|| false);
211        let mut ime_preedit = use_state(|| None);
212
213        let enabled = use_reactive(&self.enabled);
214        use_drop(move || {
215            if status() == InputStatus::Hovering && enabled() {
216                Cursor::set(CursorIcon::default());
217            }
218        });
219
220        let theme = get_theme!(&self.theme, input);
221
222        let display_placeholder = self.value.is_empty() && self.placeholder.is_some();
223        let on_change = self.on_change.clone();
224        let on_validate = self.on_validate.clone();
225
226        if &*self.value != editable.editor().read().rope() {
227            editable.editor_mut().write().set(&self.value);
228            editable.editor_mut().write().editor_history().clear();
229        }
230
231        let on_ime_preedit = move |e: Event<ImePreeditEventData>| {
232            ime_preedit.set(Some(e.data().text.clone()));
233        };
234
235        let on_key_down = move |e: Event<KeyboardEventData>| {
236            if e.key != Key::Enter && e.key != Key::Tab {
237                e.stop_propagation();
238                editable.process_event(EditableEvent::KeyDown {
239                    key: &e.key,
240                    modifiers: e.modifiers,
241                });
242                let text = editable.editor().peek().to_string();
243
244                let apply_change = if let Some(on_validate) = &on_validate {
245                    let editor = editable.editor_mut();
246                    let mut editor = editor.write();
247                    let validator = InputValidator::new(text.clone());
248                    on_validate.call(validator.clone());
249                    let is_valid = validator.is_valid();
250
251                    if !is_valid {
252                        // If it is not valid then undo the latest change and discard all the redos
253                        let undo_result = editor.undo();
254                        if let Some(idx) = undo_result {
255                            editor.set_cursor_pos(idx);
256                        }
257                        editor.editor_history().clear_redos();
258                    }
259
260                    is_valid
261                } else {
262                    true
263                };
264
265                if apply_change && let Some(onchange) = &on_change {
266                    onchange.call(text);
267                }
268            }
269        };
270
271        let on_key_up = move |e: Event<KeyboardEventData>| {
272            e.stop_propagation();
273            editable.process_event(EditableEvent::KeyUp { key: &e.key });
274        };
275
276        let on_input_pointer_down = move |e: Event<PointerEventData>| {
277            if !display_placeholder {
278                editable.process_event(EditableEvent::Down {
279                    location: e.element_location(),
280                    editor_id: 0,
281                    holder: &holder.read(),
282                });
283            }
284            focus.request_focus();
285        };
286
287        let on_pointer_down = move |e: Event<PointerEventData>| {
288            e.stop_propagation();
289            is_dragging.set(true);
290            if !display_placeholder {
291                editable.process_event(EditableEvent::Down {
292                    location: e.element_location(),
293                    editor_id: 0,
294                    holder: &holder.read(),
295                });
296            }
297            focus.request_focus();
298        };
299
300        let on_global_mouse_move = move |e: Event<MouseEventData>| {
301            if focus.is_focused() && *is_dragging.read() {
302                let mut location = e.global_location;
303                location.x -= area.read().min_x() as f64;
304                location.y -= area.read().min_y() as f64;
305                editable.process_event(EditableEvent::Move {
306                    location,
307                    editor_id: 0,
308                    holder: &holder.read(),
309                });
310            }
311        };
312
313        let on_pointer_enter = move |_| {
314            Cursor::set(CursorIcon::Text);
315            *status.write() = InputStatus::Hovering;
316        };
317
318        let on_pointer_leave = move |_| {
319            Cursor::set(CursorIcon::default());
320            *status.write() = InputStatus::default();
321        };
322
323        let on_global_mouse_up = move |_| {
324            match *status.read() {
325                InputStatus::Idle if focus.is_focused() => {
326                    editable.process_event(EditableEvent::Release);
327                }
328                InputStatus::Hovering => {
329                    editable.process_event(EditableEvent::Release);
330                }
331                _ => {}
332            };
333
334            if focus.is_focused() {
335                if *is_dragging.read() {
336                    // The input is focused and dragging, but it just clicked so we assume the dragging can stop
337                    is_dragging.set(false);
338                } else {
339                    // The input is focused but not dragging, so the click means it was clicked outside, therefore we can unfocus this input
340                    focus.request_unfocus();
341                }
342            }
343        };
344
345        let a11y_id = focus.a11y_id();
346
347        let (background, cursor_index, text_selection) = if focus_status() != FocusStatus::Not {
348            (
349                theme.hover_background,
350                Some(editable.editor().read().cursor_pos()),
351                editable.editor().read().get_visible_selection(0),
352            )
353        } else {
354            (theme.background, None, None)
355        };
356
357        let border = if focus_status() == FocusStatus::Keyboard {
358            Border::new()
359                .fill(theme.focus_border_fill)
360                .width(2.)
361                .alignment(BorderAlignment::Inner)
362        } else {
363            Border::new()
364                .fill(theme.border_fill.mul_if(!self.enabled, 0.85))
365                .width(1.)
366                .alignment(BorderAlignment::Inner)
367        };
368
369        let color = if display_placeholder {
370            theme.placeholder_color
371        } else {
372            theme.color
373        };
374
375        let text = match (self.mode.clone(), &self.placeholder) {
376            (_, Some(ph)) if display_placeholder => Cow::Borrowed(ph.as_ref()),
377            (InputMode::Hidden(ch), _) => Cow::Owned(ch.to_string().repeat(self.value.len())),
378            (InputMode::Shown, _) => Cow::Borrowed(self.value.as_ref()),
379        };
380
381        let preedit_text = (!display_placeholder)
382            .then(|| ime_preedit.read().clone())
383            .flatten();
384
385        rect()
386            .a11y_id(a11y_id)
387            .a11y_focusable(self.enabled)
388            // TODO
389            // .a11y_auto_focus(self.auto_focus)
390            .a11y_alt(text.clone())
391            .maybe(self.enabled, |rect| {
392                rect.on_key_up(on_key_up)
393                    .on_key_down(on_key_down)
394                    .on_pointer_down(on_input_pointer_down)
395                    .on_pointer_enter(on_pointer_enter)
396                    .on_pointer_leave(on_pointer_leave)
397                    .on_ime_preedit(on_ime_preedit)
398            })
399            .width(self.width.clone())
400            .background(background.mul_if(!self.enabled, 0.85))
401            .border(border)
402            .corner_radius(theme.corner_radius)
403            .main_align(Alignment::center())
404            .cross_align(Alignment::center())
405            .child(
406                ScrollView::new()
407                    .height(Size::Inner)
408                    .direction(Direction::Horizontal)
409                    .show_scrollbar(false)
410                    .child(
411                        paragraph()
412                            .holder(holder.read().clone())
413                            .on_sized(move |e: Event<SizedEventData>| area.set(e.visible_area))
414                            .min_width(Size::func(move |context| {
415                                Some(context.parent + theme.inner_margin.horizontal())
416                            }))
417                            .maybe(self.enabled, |rect| {
418                                rect.on_pointer_down(on_pointer_down)
419                                    .on_global_mouse_up(on_global_mouse_up)
420                                    .on_global_mouse_move(on_global_mouse_move)
421                            })
422                            .margin(theme.inner_margin)
423                            .cursor_index(cursor_index)
424                            .cursor_color(color)
425                            .color(color)
426                            .max_lines(1)
427                            .highlights(text_selection.map(|h| vec![h]))
428                            .span(text.to_string())
429                            .map(preedit_text, |el, preedit_text| el.span(preedit_text)),
430                    ),
431            )
432    }
433
434    fn render_key(&self) -> DiffKey {
435        self.key.clone().or(self.default_key())
436    }
437}
freya_components/input.rs

freya_components/
input.rs
