Merge pull request #894 from Demonthos/query-system

Create onmounted Event

examples/control_focus.rs

@@ -0,0 +1,44 @@
+use std::rc::Rc;
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let elements: &UseRef<Vec<Rc<MountedData>>> = use_ref(cx, Vec::new);
+    let running = use_state(cx, || true);
+
+    use_future!(cx, |(elements, running)| async move {
+        let mut focused = 0;
+        if *running.current() {
+            loop {
+                tokio::time::sleep(std::time::Duration::from_millis(10)).await;
+                if let Some(element) = elements.read().get(focused) {
+                    element.set_focus(true);
+                } else {
+                    focused = 0;
+                }
+                focused += 1;
+            }
+        }
+    });
+
+    cx.render(rsx!(
+        div {
+            h1 { "Input Roulette" }
+            for i in 0..100 {
+                input {
+                    value: "{i}",
+                    onmounted: move |cx| {
+                        elements.write().push(cx.inner().clone());
+                    },
+                    oninput: move |_| {
+                        running.set(false);
+                    }
+                }
+            }
+        }
+    ))
+}

examples/read_size.rs

@@ -0,0 +1,60 @@
+#![allow(clippy::await_holding_refcell_ref)]
+use std::rc::Rc;
+
+use dioxus::{html::geometry::euclid::Rect, prelude::*};
+
+fn main() {
+    dioxus_desktop::launch_cfg(
+        app,
+        dioxus_desktop::Config::default().with_custom_head(
+            r#"
+<style type="text/css">
+    html, body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+    }
+    #main {
+        height: 100%;
+        width: 100%;
+    }
+</style>
+"#
+            .to_owned(),
+        ),
+    );
+}
+
+fn app(cx: Scope) -> Element {
+    let div_element: &UseRef<Option<Rc<MountedData>>> = use_ref(cx, || None);
+
+    let dimentions = use_ref(cx, Rect::zero);
+
+    cx.render(rsx!(
+        div {
+            width: "50%",
+            height: "50%",
+            background_color: "red",
+            onmounted: move |cx| {
+                div_element.set(Some(cx.inner().clone()));
+            },
+            "This element is {dimentions.read():?}"
+        }
+
+        button {
+            onclick: move |_| {
+                to_owned![div_element, dimentions];
+                async move {
+                    let read = div_element.read();
+                    let client_rect = read.as_ref().map(|el| el.get_client_rect());
+                    if let Some(client_rect) = client_rect {
+                        if let Ok(rect) = client_rect.await {
+                            dimentions.set(rect);
+                        }
+                    }
+                }
+            },
+            "Read dimentions"
+        }
+    ))
+}

examples/scroll_to_top.rs

@@ -0,0 +1,33 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let header_element = use_ref(cx, || None);
+
+    cx.render(rsx!(
+        div {
+            h1 {
+                onmounted: move |cx| {
+                    header_element.set(Some(cx.inner().clone()));
+                },
+                "Scroll to top example"
+            }
+
+            for i in 0..100 {
+                div { "Item {i}" }
+            }
+
+            button {
+                onclick: move |_| {
+                    if let Some(header) = header_element.read().as_ref() {
+                        header.scroll_to(ScrollBehavior::Smooth);
+                    }
+                },
+                "Scroll to top"
+            }
+        }
+    ))
+}