2021-02-21 03:57:13 +00:00
|
|
|
//! Demonstrate that borrowed data is possible as a property type
|
|
|
|
//! Borrowing (rather than cloning) is very important for speed and ergonomics.
|
2021-02-22 18:10:36 +00:00
|
|
|
//!
|
|
|
|
//! It's slightly more advanced than just cloning, but well worth the investment.
|
|
|
|
//!
|
|
|
|
//! If you use the FC macro, we handle the lifetimes automatically, making it easy to write efficient & performant components.
|
2021-02-21 03:57:13 +00:00
|
|
|
|
|
|
|
fn main() {}
|
|
|
|
|
2021-03-26 19:50:28 +00:00
|
|
|
use std::borrow::Borrow;
|
|
|
|
|
2021-03-09 19:45:52 +00:00
|
|
|
use dioxus_core::prelude::*;
|
2021-02-21 03:57:13 +00:00
|
|
|
|
|
|
|
struct Props {
|
|
|
|
items: Vec<ListItem>,
|
|
|
|
}
|
|
|
|
|
2021-03-09 05:58:20 +00:00
|
|
|
#[derive(PartialEq)]
|
2021-02-21 03:57:13 +00:00
|
|
|
struct ListItem {
|
|
|
|
name: String,
|
|
|
|
age: u32,
|
|
|
|
}
|
|
|
|
|
2021-03-26 19:50:28 +00:00
|
|
|
fn app<'a>(ctx: Context<'a>, props: &Props) -> DomTree {
|
2021-03-29 16:31:47 +00:00
|
|
|
let (val, set_val) = use_state(&ctx, || 0);
|
2021-03-01 02:21:17 +00:00
|
|
|
|
2021-03-23 03:52:54 +00:00
|
|
|
ctx.render(dioxus::prelude::LazyNodes::new(move |c| {
|
2021-03-09 05:58:20 +00:00
|
|
|
let mut root = builder::ElementBuilder::new(c, "div");
|
2021-02-21 03:57:13 +00:00
|
|
|
for child in &props.items {
|
|
|
|
// notice that the child directly borrows from our vec
|
|
|
|
// this makes lists very fast (simply views reusing lifetimes)
|
2021-03-09 05:58:20 +00:00
|
|
|
// <ChildItem item=child hanldler=setter />
|
2021-02-21 03:57:13 +00:00
|
|
|
root = root.child(builder::virtual_child(
|
2021-03-09 05:58:20 +00:00
|
|
|
c,
|
2021-03-09 19:45:52 +00:00
|
|
|
ChildItem,
|
|
|
|
// create the props with nothing but the fc<T>
|
|
|
|
fc_to_builder(ChildItem)
|
|
|
|
.item(child)
|
2021-03-29 16:31:47 +00:00
|
|
|
.item_handler(set_val)
|
2021-03-09 19:45:52 +00:00
|
|
|
.build(),
|
2021-02-21 03:57:13 +00:00
|
|
|
));
|
|
|
|
}
|
|
|
|
root.finish()
|
2021-03-23 03:52:54 +00:00
|
|
|
}))
|
2021-02-21 03:57:13 +00:00
|
|
|
}
|
|
|
|
|
2021-03-09 05:58:20 +00:00
|
|
|
// props should derive a partialeq implementation automatically, but implement ptr compare for & fields
|
|
|
|
#[derive(Props)]
|
2021-02-21 03:57:13 +00:00
|
|
|
struct ChildProps<'a> {
|
2021-03-01 02:21:17 +00:00
|
|
|
// Pass down complex structs
|
2021-02-21 03:57:13 +00:00
|
|
|
item: &'a ListItem,
|
2021-03-01 02:21:17 +00:00
|
|
|
|
|
|
|
// Even pass down handlers!
|
2021-03-26 19:50:28 +00:00
|
|
|
item_handler: &'a dyn Fn(i32),
|
2021-02-21 03:57:13 +00:00
|
|
|
}
|
|
|
|
|
2021-03-09 05:58:20 +00:00
|
|
|
impl PartialEq for ChildProps<'_> {
|
2021-03-11 00:42:31 +00:00
|
|
|
fn eq(&self, _other: &Self) -> bool {
|
2021-03-09 19:45:52 +00:00
|
|
|
false
|
2021-03-09 05:58:20 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-26 19:50:28 +00:00
|
|
|
fn ChildItem<'a>(ctx: Context<'a>, props: &ChildProps) -> DomTree {
|
2021-03-01 02:21:17 +00:00
|
|
|
ctx.render(rsx! {
|
|
|
|
div {
|
2021-03-26 19:50:28 +00:00
|
|
|
onclick: move |evt| (props.item_handler)(10)
|
|
|
|
h1 { "abcd123" }
|
|
|
|
h2 { "abcd123" }
|
2021-03-01 02:21:17 +00:00
|
|
|
div {
|
2021-03-26 19:50:28 +00:00
|
|
|
"abcd123"
|
|
|
|
h2 { }
|
|
|
|
p { }
|
|
|
|
}
|
2021-03-01 02:21:17 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|