Merge branch 'master' of https://github.com/DioxusLabs/dioxus into rusty-events

 Conflicts:

	packages/html/src/events.rs

	packages/tui/src/hooks.rs

examples/rsx_usage.rs

@@ -46,6 +46,9 @@ fn main() {
 /// This type alias specifies the type for you so you don't need to write "None as Option<()>"
 const NONE_ELEMENT: Option<()> = None;
 
+use core::{fmt, str::FromStr};
+use std::fmt::Display;
+
 use baller::Baller;
 use dioxus::prelude::*;
 
@@ -187,6 +190,15 @@ fn app(cx: Scope) -> Element {
                 text: "using functionc all syntax"
             )
 
+            // Components can be geneirc too
+            // This component takes i32 type to give you typed input
+            TypedInput::<TypedInputProps<i32>> {}
+            // Type inference can be used too
+            TypedInput { initial: 10.0 }
+            // geneircs with the `inline_props` macro
+            label(text: "hello geneirc world!")
+            label(text: 99.9)
+
             // helper functions
             // Single values must be wrapped in braces or `Some` to satisfy `IntoIterator`
             [helper(&cx, "hello world!")]
@@ -227,9 +239,35 @@ pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element {
     })
 }
 
+#[derive(Props, PartialEq)]
+pub struct TypedInputProps<T> {
+    #[props(optional, default)]
+    initial: Option<T>,
+}
+
+#[allow(non_snake_case)]
+pub fn TypedInput<T>(_: Scope<TypedInputProps<T>>) -> Element
+where
+    T: FromStr + fmt::Display,
+    <T as FromStr>::Err: std::fmt::Display,
+{
+    todo!()
+}
+
 #[inline_props]
 fn with_inline<'a>(cx: Scope<'a>, text: &'a str) -> Element {
     cx.render(rsx! {
         p { "{text}" }
     })
 }
+
+// generic component with inline_props too
+#[inline_props]
+fn label<T>(cx: Scope, text: T) -> Element
+where
+    T: Display,
+{
+    cx.render(rsx! {
+        p { "{text}" }
+    })
+}

examples/svg_basic.rs

@@ -0,0 +1,75 @@
+use dioxus::prelude::*;
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx!( svg {
+        width: "200",
+        height: "250",
+        xmlns: "http://www.w3.org/2000/svg",
+        version: "1.1",
+        rect {
+            x: "10",
+            y: "10",
+            width: "30",
+            height: "30",
+            stroke: "black",
+            fill: "transparent",
+            stroke_width: "5",
+        }
+        rect {
+            x: "60",
+            y: "10",
+            width: "30",
+            height: "30",
+            stroke: "black",
+            fill: "transparent",
+            stroke_width: "5",
+        }
+        circle {
+            cx: "25",
+            cy: "75",
+            r: "20",
+            stroke: "red",
+            fill: "transparent",
+            stroke_width: "5",
+        }
+        ellipse {
+            cx: "75",
+            cy: "75",
+            rx: "20",
+            ry: "5",
+            stroke: "red",
+            fill: "transparent",
+            stroke_width: "5",
+        }
+        line {
+            x1: "10",
+            x2: "50",
+            y1: "110",
+            y2: "150",
+            stroke: "orange",
+            stroke_width: "5",
+        }
+        polyline {
+            points: "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145",
+            stroke: "orange",
+            fill: "transparent",
+            stroke_width: "5",
+        }
+        polygon {
+            points: "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180",
+            stroke: "green",
+            fill: "transparent",
+            stroke_width: "5",
+        }
+        path {
+            d: "M20,230 Q40,205 50,230 T90,230",
+            fill: "none",
+            stroke: "blue",
+            stroke_width: "5",
+        }
+    }))
+}
+
+fn main() {
+    dioxus::desktop::launch(app);
+}

examples/tui_buttons.rs

@@ -0,0 +1,93 @@
+use dioxus::{events::KeyCode, prelude::*};
+
+fn main() {
+    dioxus::tui::launch(app);
+}
+
+#[derive(PartialEq, Props)]
+struct ButtonProps {
+    color_offset: u32,
+    layer: u16,
+}
+
+#[allow(non_snake_case)]
+fn Button(cx: Scope<ButtonProps>) -> Element {
+    let toggle = use_state(&cx, || false);
+    let hovered = use_state(&cx, || false);
+
+    let hue = cx.props.color_offset % 255;
+    let saturation = if *toggle.get() { 50 } else { 25 } + if *hovered.get() { 50 } else { 25 };
+    let brightness = saturation / 2;
+    let color = format!("hsl({hue}, {saturation}, {brightness})");
+
+    cx.render(rsx! {
+        div{
+            width: "100%",
+            height: "100%",
+            background_color: "{color}",
+            tabindex: "{cx.props.layer}",
+            onkeydown: |e| {
+                if let KeyCode::Space = e.data.key_code{
+                    toggle.modify(|f| !f);
+                }
+            },
+            onclick: |_| {
+                toggle.modify(|f| !f);
+            },
+            onmouseenter: |_|{
+                hovered.set(true);
+            },
+            onmouseleave: |_|{
+                hovered.set(false);
+            },
+            justify_content: "center",
+            align_items: "center",
+            display: "flex",
+            flex_direction: "column",
+
+            p{"tabindex: {cx.props.layer}"}
+        }
+    })
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            display: "flex",
+            flex_direction: "column",
+            width: "100%",
+            height: "100%",
+
+            (1..8).map(|y|
+                cx.render(rsx!{
+                    div{
+                        display: "flex",
+                        flex_direction: "row",
+                        width: "100%",
+                        height: "100%",
+                        (1..8).map(|x|{
+                            if (x + y) % 2 == 0{
+                                cx.render(rsx!{
+                                    div{
+                                        width: "100%",
+                                        height: "100%",
+                                        background_color: "rgb(100, 100, 100)",
+                                    }
+                                })
+                            }
+                            else{
+                                let layer = (x + y) % 3;
+                                cx.render(rsx!{
+                                    Button{
+                                        color_offset: x * y,
+                                        layer: layer as u16,
+                                    }
+                                })
+                            }
+                        })
+                    }
+                })
+            )
+        }
+    })
+}

examples/tui_keys.rs

@@ -11,9 +11,9 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     let key = use_state(&cx, || "".to_string());
-    let mouse = use_state(&cx, || ScreenPoint::zero());
+    let mouse = use_state(&cx, ScreenPoint::zero);
     let count = use_state(&cx, || 0);
-    let buttons = use_state(&cx, || MouseButtonSet::empty());
+    let buttons = use_state(&cx, MouseButtonSet::empty);
     let mouse_clicked = use_state(&cx, || false);
 
     let key_down_handler = move |evt: KeyboardEvent| {