swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: todomvc

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-03-29 12:31:47 -04:00
1 parent 0bcff1f88e
commit ce33031519
22 files changed
+753 -203
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/web/examples/deep.rs
+3 -3
View File
@@ -10,7 +10,7 @@ fn main() {
use components::CustomB;
fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
let val = use_state(&ctx, || "abcdef".to_string());
let (val, set_val) = use_state(&ctx, || "abcdef".to_string());
ctx.render(rsx! {
div {
@@ -18,11 +18,11 @@ fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
"CustomA {val}"
button {
"Upper"
onclick: move |_| val.set(val.to_ascii_uppercase())
onclick: move |_| set_val(val.to_ascii_uppercase())
}
button {
"Lower"
onclick: move |_| val.set(val.to_ascii_lowercase())
onclick: move |_| set_val(val.to_ascii_lowercase())
}
CustomB {
val: val.as_ref()
packages/web/examples/infer.rs
+2 -2
View File
@@ -12,10 +12,10 @@ fn main() {
// this is a component
static Example: FC<()> = |ctx, _props| {
let event = use_state(&ctx, || None);
let (event, set_event) = use_state(&ctx, || None);
let handler = move |evt: MouseEvent| {
event.set(Some(evt));
set_event(Some(evt));
};
log::info!("hello world");
packages/web/examples/jackjill.rs
+4 -4
View File
@@ -10,7 +10,7 @@ fn main() {
}
static Example: FC<()> = |ctx, props| {
let name = use_state(&ctx, || "...?");
let (name, set_name) = use_state(&ctx, || "...?");
log::debug!("Running component....");
@@ -32,14 +32,14 @@ static Example: FC<()> = |ctx, props| {
<div>
<button
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
onclick={move |_| name.set("jack")}>
onclick={move |_| set_name("jack")}>
"Jack!"
</button>
<button
class="inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
onclick={move |_| name.set("jill")}
onclick={move |_| name.set("jill")}>
onclick={move |_| set_name("jill")}
onclick={move |_| set_name("jill")}>
"Jill!"
</button>
</div>
packages/web/examples/list.rs
+67 -38
View File
@@ -1,6 +1,6 @@
use std::collections::HashMap;
use std::collections::{BTreeMap, BTreeSet, HashMap};
use dioxus::prelude::*;
use dioxus::{events::on::MouseEvent, prelude::*};
use dioxus_core as dioxus;
use dioxus_web::WebsysRenderer;
@@ -17,37 +17,38 @@ fn main() {
use lazy_static::lazy_static;
lazy_static! {
static ref DummyData: HashMap<String, String> = {
static ref DummyData: BTreeMap<usize, String> = {
let vals = vec![
("0 ", "abc123"),
("1 ", "abc124"),
("2 ", "abc125"),
("3 ", "abc126"),
("4 ", "abc127"),
("5 ", "abc128"),
("6 ", "abc129"),
("7 ", "abc1210"),
("8 ", "abc1211"),
("9 ", "abc1212"),
("10 ", "abc1213"),
("11 ", "abc1214"),
("12 ", "abc1215"),
("13 ", "abc1216"),
("14 ", "abc1217"),
("15 ", "abc1218"),
("16 ", "abc1219"),
("17 ", "abc1220"),
("18 ", "abc1221"),
("19 ", "abc1222"),
"abc123", //
"abc124", //
"abc125", //
"abc126", //
"abc127", //
"abc128", //
"abc129", //
"abc1210", //
"abc1211", //
"abc1212", //
"abc1213", //
"abc1214", //
"abc1215", //
"abc1216", //
"abc1217", //
"abc1218", //
"abc1219", //
"abc1220", //
"abc1221", //
"abc1222", //
];
vals.into_iter()
.map(|(a, b)| (a.to_string(), b.to_string()))
.map(ToString::to_string)
.enumerate()
.collect()
};
}
static App: FC<()> = |ctx, _| {
let items = use_state(&ctx, || DummyData.clone());
let items = use_state_new(&ctx, || DummyData.clone());
// handle new elements
let add_new = move |_| {
@@ -59,20 +60,18 @@ static App: FC<()> = |ctx, _| {
(_, 0) => "Buzz".to_string(),
_ => k.to_string(),
};
m.insert(k.to_string(), v);
m.insert(k, v);
})
};
let elements = items.iter().map(|(k, v)| {
rsx! {
li {
span {"{k}: {v}"}
button {
"Remove"
onclick: move |_| {
let key_to_remove = k.clone();
items.modify(move |m| { m.remove(&key_to_remove); } )
}
ListHelper {
name: k,
value: v
onclick: move |_| {
let key = k.clone();
items.modify(move |m| { m.remove(&key); } )
}
}
}
@@ -81,17 +80,47 @@ static App: FC<()> = |ctx, _| {
ctx.render(rsx!(
div {
h1 {"Some list"}
// button to add new item
button {
"Remove all"
onclick: move |_| items.set(BTreeMap::new())
}
button {
"add new"
onclick: {add_new}
}
// list elements
ul {
{elements}
}
}
))
};
#[derive(Props)]
struct ListProps<'a, F: Fn(MouseEvent) + 'a> {
name: &'a usize,
value: &'a str,
onclick: F,
}
impl<F: Fn(MouseEvent)> PartialEq for ListProps<'_, F> {
fn eq(&self, other: &Self) -> bool {
// no references are ever the same
false
}
}
fn ListHelper<F: Fn(MouseEvent)>(ctx: Context, props: &ListProps<F>) -> DomTree {
let k = props.name;
let v = props.value;
ctx.render(rsx! {
li {
class: "flex items-center text-xl"
key: "{k}"
span { "{k}: {v}" }
button {
"__ Remove"
onclick: {&props.onclick}
}
}
})
}
packages/web/examples/rsxt.rs
+9 -13
View File
@@ -16,16 +16,13 @@ fn main() {
});
}
#[derive(PartialEq, Props)]
struct ExampleProps {
initial_name: &'static str,
}
static Example: FC<ExampleProps> = |ctx, props| {
let name = use_state(&ctx, move || props.initial_name.to_string());
let name = use_state_new(&ctx, move || props.initial_name.to_string());
ctx.render(rsx! {
div {
@@ -39,9 +36,9 @@ static Example: FC<ExampleProps> = |ctx, props| {
"Hello, {name}"
}
CustomButton { name: "Jack!", set_name: name.setter() }
CustomButton { name: "Jill!", set_name: name.setter() }
CustomButton { name: "Bob!", set_name: name.setter() }
CustomButton { name: "Jack!", handler: move |evt| name.set("Jack".to_string()) }
CustomButton { name: "Jill!", handler: move |evt| name.set("Jill".to_string()) }
CustomButton { name: "Bob!", handler: move |evt| name.set("Bob".to_string())}
}
})
};
@@ -49,23 +46,22 @@ static Example: FC<ExampleProps> = |ctx, props| {
#[derive(Props)]
struct ButtonProps<'src> {
struct ButtonProps<'src, F: Fn(MouseEvent)> {
name: &'src str,
set_name: &'src dyn Fn(String)
handler: F
}
fn CustomButton<'a>(ctx: Context<'a>, props: &'a ButtonProps<'a>) -> DomTree {
fn CustomButton<'b, 'a, F: Fn(MouseEvent)>(ctx: Context<'a>, props: &'b ButtonProps<'b, F>) -> DomTree {
ctx.render(rsx!{
button {
class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
onmouseover: move |evt| (props.set_name)(props.name.to_string())
onmouseover: {&props.handler}
"{props.name}"
}
})
}
impl PartialEq for ButtonProps<'_> {
impl<F: Fn(MouseEvent)> PartialEq for ButtonProps<'_, F> {
fn eq(&self, other: &Self) -> bool {
false
}
packages/web/examples/todomvc.rs
+178
View File
@@ -0,0 +1,178 @@
use std::{
collections::{BTreeMap, BTreeSet},
sync::atomic::AtomicUsize,
};
use dioxus_core::prelude::*;
use dioxus_web::WebsysRenderer;
use uuid::Uuid;
// Entry point
fn main() {
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, props| {
ctx.create_context(|| model::TodoManager::new());
ctx.render(rsx! {
div {
TodoList {}
Footer {}
}
})
}))
}
static TodoList: FC<()> = |ctx, props| {
let todos = use_state_new(&ctx, || BTreeMap::<usize, model::TodoItem>::new());
let items = todos.iter().map(|(order, item)| {
rsx!(TodoItem {
// key: "{}",
todo: item
})
});
ctx.render(rsx! {
div {
{items}
}
})
};
#[derive(Debug, PartialEq, Props)]
struct TodoItemsProp<'a> {
todo: &'a model::TodoItem,
}
fn TodoItem(ctx: Context, props: &TodoItemsProp) -> DomTree {
let (editing, set_editing) = use_state(&ctx, || false);
let id = props.todo.id;
ctx.render(rsx! (
li {
div {
"{id}"
}
// {input}
}
))
}
static Footer: FC<()> = |ctx, props| {
ctx.render(html! {
<footer className="info">
<p>"Double-click to edit a todo"</p>
<p>
"Created by "<a href="http://github.com/jkelleyrtp/">"jkelleyrtp"</a>
</p>
<p>
"Part of "<a href="http://todomvc.com">"TodoMVC"</a>
</p>
</footer>
})
};
// The data model that the todo mvc uses
mod model {
use std::{borrow::BorrowMut, future::Future};
use super::*;
#[derive(Debug, PartialEq, Clone)]
pub struct TodoItem {
pub id: Uuid,
pub checked: bool,
pub contents: String,
}
struct Dispatcher {}
struct AppContext<T: Clone> {
_t: std::rc::Rc<T>,
}
impl<T: Clone> AppContext<T> {
fn dispatch(&self, f: impl FnOnce(&mut T)) {}
fn async_dispatch(&self, f: impl Future<Output = ()>) {}
fn get<G>(&self, f: impl Fn(&T) -> &G) -> &G {
f(&self._t)
}
fn set(&self, orig: &mut std::borrow::Cow<T>) {
let r = orig.to_mut();
}
}
// use im-rc if your contexts are too large to clone!
// or, dangerously mutate and update subscriptions manually
#[derive(Clone)]
pub struct TodoManager {
items: Vec<u32>,
}
impl AppContext<TodoManager> {
fn remove_todo(&self, id: Uuid) {
self.dispatch(|f| {})
}
async fn push_todo(&self, todo: TodoItem) {
self.dispatch(|f| {
//
f.items.push(10);
});
}
fn add_todo(&self) {
// self.dispatch(|f| {});
// let items = self.get(|f| &f.items);
}
}
impl TodoManager {
pub fn new() -> Self {
todo!()
}
pub fn get_todo(&self) -> &TodoItem {
todo!()
}
}
pub struct TodoHandle {}
impl TodoHandle {
fn get_todo(&self, id: Uuid) -> &TodoItem {
todo!()
}
fn add_todo(&self, todo: TodoItem) {}
}
// use_reducer, but exposes the reducer and context to children
fn use_reducer_context() {}
fn use_context_selector() {}
fn use_context<'b, 'c, Root: 'static, Item: 'c>(
ctx: &'b Context<'c>,
f: impl Fn(Root) -> &'c Item,
) -> &'c Item {
todo!()
}
pub fn use_todo_item<'b, 'c>(ctx: &'b Context<'c>, item: Uuid) -> &'c TodoItem {
todo!()
// ctx.use_hook(|| TodoManager::new(), |hook| {}, cleanup)
}
fn use_todos(ctx: &Context) -> TodoHandle {
todo!()
}
fn use_todo_context(ctx: &Context) -> AppContext<TodoManager> {
todo!()
}
fn test(ctx: Context) {
let todos = use_todos(&ctx);
let todo = todos.get_todo(Uuid::new_v4());
let c = use_todo_context(&ctx);
// todos.add_todo();
}
}