wip: move examples around

2021-11-03 15:13:50 -04:00
1 parent d298b626d3
commit 1e6e5e611b
@@ -0,0 +1,53 @@
+//! Basic example that renders a simple VNode to the browser.
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_hooks::*;
+use dioxus_html as dioxus_elements;
+
+fn main() {
+    console_error_panic_hook::set_once();
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    dioxus_web::launch(APP, |c| c)
+}
+
+#[derive(serde::Deserialize)]
+struct DogApi {
+    message: String,
+}
+
+static APP: FC<()> = |(cx, _props)| {
+    let state = use_state(cx, || 0);
+
+    const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
+    let doggo = use_suspense(
+        cx,
+        || async { reqwest::get(ENDPOINT).await.unwrap().json::<DogApi>().await },
+        |cx, res| match res {
+            Ok(res) => rsx!(
+                cx,
+                img {
+                    src: "{res.message}"
+                }
+            ),
+            Err(_err) => rsx!(cx, div { "No doggos for you :(" }),
+        },
+    );
+
+    rsx!(cx, div { align_items: "center"
+        section { class: "py-12 px-4 text-center"
+            div { class: "w-full max-w-2xl mx-auto"
+                span { class: "text-sm font-semibold"
+                    "count: {state}"
+                }
+                div {
+                    button { onclick: move |_| state.set(state + 1), "incr" }
+                    button { onclick: move |_| state.set(state - 1), "decr" }
+                }
+                div {
+                    {doggo}
+                }
+            }
+        }
+    })
+};
@@ -0,0 +1,89 @@
+//! Basic example that renders a simple VNode to the browser.
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_hooks::*;
+use dioxus_html as dioxus_elements;
+
+fn main() {
+    // Setup logging
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    // Run the app
+    dioxus_web::launch(APP, |c| c)
+}
+
+static APP: FC<()> = |(cx, _)| {
+    let mut count = use_state(cx, || 3);
+    let content = use_state(cx, || String::from("h1"));
+    let text_content = use_state(cx, || String::from("Hello, world!"));
+
+    cx.render(rsx! {
+        div {
+            h1 { "content val is {content}" }
+
+            input {
+                r#type: "text",
+                value: "{text_content}"
+                oninput: move |e| text_content.set(e.value.clone())
+            }
+
+            {(0..10).map(|_| {
+                rsx!(
+                    button {
+                        onclick: move |_| count += 1,
+                        "Click to add."
+                        "Current count: {count}"
+                    }
+                    br {}
+                )
+            })}
+
+            select {
+                name: "cars"
+                id: "cars"
+                value: "{content}"
+                oninput: move |ev| {
+                    content.set(ev.value.clone());
+                    match ev.value.as_str() {
+                        "h1" => count.set(0),
+                        "h2" => count.set(5),
+                        "h3" => count.set(10),
+                        _ => {}
+                    }
+                },
+
+                option { value: "h1", "h1" }
+                option { value: "h2", "h2" }
+                option { value: "h3", "h3" }
+            }
+
+            {render_list(cx, *count)}
+
+            {render_bullets(cx)}
+
+            CHILD {}
+        }
+    })
+};
+
+fn render_bullets(cx: Context) -> Element {
+    rsx!(cx, div {
+        "bite me"
+    })
+}
+
+fn render_list(cx: Context, count: usize) -> Element {
+    let items = (0..count).map(|f| {
+        rsx! {
+            li { "a - {f}" }
+            li { "b - {f}" }
+            li { "c - {f}" }
+        }
+    });
+
+    rsx!(cx, ul { {items} })
+}
+
+static CHILD: FC<()> = |(cx, _)| rsx!(cx, div {"hello child"});
@@ -0,0 +1,55 @@
+//! Basic example that renders a simple VNode to the browser.
+
+use dioxus::events::on::MouseEvent;
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_hooks::*;
+use dioxus_html as dioxus_elements;
+
+use std::future::Future;
+
+use std::{pin::Pin, time::Duration};
+
+use dioxus::prelude::*;
+
+use dioxus_web::*;
+
+fn main() {
+    // Setup logging
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    // Run the app
+    dioxus_web::launch(App, |c| c)
+}
+
+static App: FC<()> = |(cx, props)| {
+    let mut state = use_state(cx, || 0);
+    cx.render(rsx! {
+        div {
+            style: {
+                align_items: "center"
+            }
+            section { class: "py-12 px-4 text-center"
+                div { class: "w-full max-w-2xl mx-auto"
+                    span { class: "text-sm font-semibold"
+                        "static subtree"
+                    }
+                }
+            }
+            section { class: "py-12 px-4 text-center"
+                div { class: "w-full max-w-2xl mx-auto"
+                    span { class: "text-sm font-semibold"
+                        "dynamic subtree {state}"
+                    }
+                    div {
+                        button { onclick: move |e| state+=1, "incr" }
+                        br {}
+                        button { onclick: move |e| state-=1, "decr" }
+                    }
+                }
+            }
+        }
+    })
+};
@@ -0,0 +1,69 @@
+//! Example: Webview Renderer
+//! -------------------------
+//!
+//! This example shows how to use the dioxus_desktop crate to build a basic desktop application.
+//!
+//! Under the hood, the dioxus_desktop crate bridges a native Dioxus VirtualDom with a custom prebuit application running
+//! in the webview runtime. Custom handlers are provided for the webview instance to consume patches and emit user events
+//! into the native VDom instance.
+//!
+//! Currently, NodeRefs won't work properly, but all other event functionality will.
+
+use dioxus::prelude::*;
+use dioxus_core as dioxus;
+use dioxus_core_macro::*;
+use dioxus_hooks::*;
+use dioxus_html as dioxus_elements;
+
+// #[cfg]
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    dioxus_web::launch(App, |c| c);
+    // env_logger::init();
+    // dioxus::web::launch(App, |c| c);
+}
+
+static App: FC<()> = |(cx, props)| {
+    dbg!("rednering parent");
+    cx.render(rsx! {
+        div {
+            But {
+                h1 {"he"}
+            }
+            // But {
+            //     h1 {"llo"}
+            // }
+            // But {
+            //     h1 {"world"}
+            // }
+        }
+    })
+};
+
+static But: FC<()> = |(cx, props)| {
+    let mut count = use_state(cx, || 0);
+
+    // let d = Dropper { name: "asd" };
+    // let handler = move |_| {
+    //     dbg!(d.name);
+    // };
+
+    cx.render(rsx! {
+        div {
+            h1 { "Hifive counter: {count}" }
+            {cx.children()}
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+            // button { onclick: {handler}, "Down low!" }
+        }
+    })
+};
+
+// struct Dropper {
+//     name: &'static str,
+// }
+// impl Drop for Dropper {
+//     fn drop(&mut self) {
+//         dbg!("dropped");
+//     }
+// }
@@ -0,0 +1,116 @@
+/*
+Tiny CRM: A port of the Yew CRM example to Dioxus.
+*/
+
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_hooks::*;
+use dioxus_html as dioxus_elements;
+fn main() {
+    // Setup logging
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    dioxus_web::launch(App, |c| c)
+}
+
+enum Scene {
+    ClientsList,
+    NewClientForm,
+    Settings,
+}
+
+#[derive(Clone, Debug, Default)]
+pub struct Client {
+    pub first_name: String,
+    pub last_name: String,
+    pub description: String,
+}
+
+static App: FC<()> = |(cx, _)| {
+    let scene = use_state(cx, || Scene::ClientsList);
+    let clients = use_ref(cx, || vec![] as Vec<Client>);
+
+    let firstname = use_state(cx, || String::new());
+    let lastname = use_state(cx, || String::new());
+    let description = use_state(cx, || String::new());
+
+    let scene = match *scene {
+        Scene::ClientsList => {
+            rsx!(cx, div { class: "crm"
+                h2 { "List of clients" margin_bottom: "10px" }
+                div { class: "clients" margin_left: "10px"
+                    {clients.read().iter().map(|client| rsx!(
+                        div { class: "client" style: "margin-bottom: 50px"
+                            p { "First Name: {client.first_name}" }
+                            p { "Last Name: {client.last_name}" }
+                            p {"Description: {client.description}"}
+                        })
+                    )}
+                }
+                button { class: "pure-button pure-button-primary" onclick: move |_| scene.set(Scene::NewClientForm), "Add New" }
+                button { class: "pure-button" onclick: move |_| scene.set(Scene::Settings), "Settings" }
+            })
+        }
+        Scene::NewClientForm => {
+            let add_new = move |_| {
+                clients.write().push(Client {
+                    description: (*description).clone(),
+                    first_name: (*firstname).clone(),
+                    last_name: (*lastname).clone(),
+                });
+                description.set(String::new());
+                firstname.set(String::new());
+                lastname.set(String::new());
+            };
+            rsx!(cx, div { class: "crm"
+                h2 {"Add new client" margin_bottom: "10px" }
+                form { class: "pure-form"
+                    input { class: "new-client firstname" placeholder: "First name" value: "{firstname}"
+                        oninput: move |evt| firstname.set(evt.value.clone())
+                    }
+                    input { class: "new-client lastname" placeholder: "Last name" value: "{lastname}"
+                        oninput: move |evt| lastname.set(evt.value.clone())
+                    }
+                    textarea { class: "new-client description" placeholder: "Description" value: "{description}"
+                        oninput: move |evt| description.set(evt.value.clone())
+                    }
+                }
+                button { class: "pure-button pure-button-primary", onclick: {add_new}, "Add New" }
+                button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList), "Go Back" }
+            })
+        }
+        Scene::Settings => {
+            rsx!(cx, div {
+                h2 { "Settings" margin_bottom: "10px" }
+                button {
+                    background: "rgb(202, 60, 60)"
+                    class: "pure-button pure-button-primary"
+                    onclick: move |_| {
+                        clients.write().clear();
+                        scene.set(Scene::ClientsList);
+                    },
+                    "Remove all clients"
+                }
+                button {
+                    class: "pure-button pure-button-primary"
+                    onclick: move |_| scene.set(Scene::ClientsList),
+                    "Go Back"
+                }
+            })
+        }
+    };
+
+    rsx!(cx, body {
+        link {
+            rel: "stylesheet"
+            href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css"
+            integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
+            crossorigin: "anonymous"
+        }
+        margin_left: "35%"
+        h1 {"Dioxus CRM Example"}
+        {scene}
+    })
+};
@@ -0,0 +1,147 @@
+//! Basic example that renders a simple VNode to the browser.
+
+use dioxus::events::on::MouseEvent;
+use dioxus_core as dioxus;
+use dioxus_core::prelude::*;
+use dioxus_core_macro::*;
+use dioxus_hooks::*;
+use dioxus_html as dioxus_elements;
+use std::future::Future;
+
+use std::{pin::Pin, time::Duration};
+
+use dioxus::prelude::*;
+use dioxus_html::SvgAttributes;
+
+use dioxus_web::*;
+
+fn main() {
+    // Setup logging
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    // Run the app
+    dioxus_web::launch(App, |c| c)
+}
+
+pub static App: FC<()> = |(cx, props)| {
+    cx.render(rsx!(
+        div { class: "overflow-hidden"
+            link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
+            Header {}
+            // Entry {}
+            Hero {}
+            Hero {}
+            Hero {}
+            Hero {}
+            Hero {}
+        }
+    ))
+};
+
+pub static Header: FC<()> = |(cx, props)| {
+    cx.render(rsx! {
+        div {
+            header { class: "text-gray-400 bg-gray-900 body-font"
+                div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"
+                    a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0"
+                        StacksIcon {}
+                        span { class: "ml-3 text-xl" "Hello Dioxus!"}
+                    }
+                    nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center"
+                        a { class: "mr-5 hover:text-white" "First Link"}
+                        a { class: "mr-5 hover:text-white" "Second Link"}
+                        a { class: "mr-5 hover:text-white" "Third Link"}
+                        a { class: "mr-5 hover:text-white" "Fourth Link"}
+                    }
+                    button {
+                        class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0"
+                        "Button"
+                        RightArrowIcon {}
+                    }
+                }
+            }
+        }
+    })
+};
+
+pub static Hero: FC<()> = |(cx, props)| {
+    //
+    cx.render(rsx! {
+        section{ class: "text-gray-400 bg-gray-900 body-font"
+            div { class: "container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+                div { class: "lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center"
+                    h1 { class: "title-font sm:text-4xl text-3xl mb-4 font-medium text-white"
+                        br { class: "hidden lg:inline-block" }
+                        "Dioxus Sneak Peek"
+                    }
+                    p {
+                        class: "mb-8 leading-relaxed"
+
+                        "Dioxus is a new UI framework that makes it easy and simple to write cross-platform apps using web
+                        technologies! It is functional, fast, and portable. Dioxus can run on the web, on the desktop, and
+                        on mobile and embedded platforms."
+
+                    }
+                    div { class: "flex justify-center"
+                        button {
+                            class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
+                            "Learn more"
+                        }
+                        button {
+                            class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg" 
+                            "Build an app"
+                        }
+                    }
+                }
+                div { class: "lg:max-w-lg lg:w-full md:w-1/2 w-5/6"
+                    img { class: "object-cover object-center rounded" alt: "hero" src: "https://i.imgur.com/oK6BLtw.png" 
+                    referrerpolicy:"no-referrer"
+                }
+                }
+            }
+        }
+    })
+};
+pub static Entry: FC<()> = |(cx, props)| {
+    //
+    cx.render(rsx! {
+        section{ class: "text-gray-400 bg-gray-900 body-font"
+            div { class: "container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+                textarea {
+
+                }
+            }
+        }
+    })
+};
+
+pub static StacksIcon: FC<()> = |(cx, props)| {
+    cx.render(rsx!(
+        svg {
+            // xmlns: "http://www.w3.org/2000/svg"
+            fill: "none"
+            stroke: "currentColor"
+            stroke_linecap: "round"
+            stroke_linejoin: "round"
+            stroke_width: "2"
+            // class: "w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
+            viewBox: "0 0 24 24"
+            path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"}
+        }
+    ))
+};
+pub static RightArrowIcon: FC<()> = |(cx, props)| {
+    cx.render(rsx!(
+        svg {
+            fill: "none"
+            stroke: "currentColor"
+            stroke_linecap: "round"
+            stroke_linejoin: "round"
+            stroke_width: "2"
+            // class: "w-4 h-4 ml-1"
+            viewBox: "0 0 24 24"
+            path { d: "M5 12h14M12 5l7 7-7 7"}
+        }
+    ))
+};