feat: Horizontal scroll for Input (#949)

* feat: Horizontal scroll for `Input` * lint * fix test
marc2332 · Oct 6, 2024 · 1c2d852 · 1c2d852
1 parent f35c23a
commit 1c2d852
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
@@ -21,6 +21,8 @@ use freya_hooks::{
 };
 use winit::window::CursorIcon;
 
+use crate::ScrollView;
+
 /// Enum to declare is [`Input`] hidden.
 #[derive(Default, Clone, PartialEq)]
 pub enum InputMode {
@@ -137,7 +139,15 @@ pub fn Input(
         editable.process_event(&EditableEvent::KeyUp(e.data));
     };
 
+    let oninputmousedown = move |e: MouseEvent| {
+        if !display_placeholder {
+            editable.process_event(&EditableEvent::MouseDown(e.data, 0));
+        }
+        focus.focus();
+    };
+
     let onmousedown = move |e: MouseEvent| {
+        e.stop_propagation();
         if !display_placeholder {
             editable.process_event(&EditableEvent::MouseDown(e.data, 0));
         }
@@ -222,22 +232,28 @@ pub fn Input(
             onkeydown,
             onkeyup,
             overflow: "clip",
-            paragraph {
-                margin: "8 12",
-                onglobalclick,
-                onmouseenter,
-                onmouseleave,
-                onmousedown,
-                onmousemove,
-                width: "100%",
-                cursor_id: "0",
-                cursor_index: "{cursor_char}",
-                cursor_mode: "editable",
-                cursor_color: "{color}",
-                max_lines: "1",
-                highlights,
-                text {
-                    "{text}"
+            onmousedown: oninputmousedown,
+            onmouseenter,
+            onmouseleave,
+            ScrollView {
+                height: "auto",
+                direction: "horizontal",
+                show_scrollbar: false,
+                paragraph {
+                    min_width: "1",
+                    margin: "8 12",
+                    onglobalclick,
+                    onmousedown,
+                    onmousemove,
+                    cursor_id: "0",
+                    cursor_index: "{cursor_char}",
+                    cursor_mode: "editable",
+                    cursor_color: "{color}",
+                    max_lines: "1",
+                    highlights,
+                    text {
+                        "{text}"
+                    }
                 }
             }
         }
@@ -264,7 +280,7 @@ mod test {
 
         let mut utils = launch_test(input_app);
         let root = utils.root();
-        let text = root.get(0).get(0).get(0);
+        let text = root.get(0).get(0).get(0).get(0).get(0).get(0);
         utils.wait_for_update().await;
 
         // Default value

diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
@@ -220,8 +220,6 @@ pub fn ScrollView(
             if *scrolled_y.peek() != scroll_position_y {
                 e.stop_propagation();
                 *scrolled_y.write() = scroll_position_y;
-            } else {
-                return;
             }
         } else {
             let scroll_position_x = get_scroll_position_from_wheel(
@@ -235,12 +233,8 @@ pub fn ScrollView(
             if *scrolled_x.peek() != scroll_position_x {
                 e.stop_propagation();
                 *scrolled_x.write() = scroll_position_x;
-            } else {
-                return;
             }
         }
-
-        focus.focus();
     };
 
     // Drag the scrollbars
@@ -382,6 +376,7 @@ pub fn ScrollView(
             onglobalkeydown,
             onglobalkeyup,
             a11y_id,
+            a11y_focusable: "false",
             rect {
                 direction: "vertical",
                 width: "{container_width}",

diff --git a/examples/input.rs b/examples/input.rs
@@ -18,12 +18,14 @@ fn app() -> Element {
             padding: "7",
             width: "100%",
             height: "100%",
+            spacing: "4",
             label {
                 color: "black",
                 "Your name:"
             }
             Input {
                 value: values.read().0.clone(),
+                placeholder: "Name",
                 onchange: move |txt| {
                     values.write().0 = txt;
                 }
@@ -34,6 +36,7 @@ fn app() -> Element {
             }
             Input {
                 value: values.read().1.clone(),
+                placeholder: "Age",
                 onchange: move |txt| {
                     values.write().1 = txt;
                 }