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

fix: exampels

Browse Source
This commit is contained in:
Jonathan Kelley committed 2022-01-25 21:41:40 -05:00
1 parent 5c4bd0881b
commit a8952a9ee8
14 files changed
+400 -285
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/todomvc.rs
+25 -23
View File
@@ -19,15 +19,15 @@ pub struct TodoItem {
}
pub fn app(cx: Scope<()>) -> Element {
let todos = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
let filter = use_state(&cx, || FilterState::All);
let draft = use_state(&cx, || "".to_string());
let (todo_id, set_todo_id) = use_state(&cx, || 0).split();
let (todos, set_todos) = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
let (filter, set_filter) = use_state(&cx, || FilterState::All);
let (draft, set_draft) = use_state(&cx, || "".to_string());
let (todo_id, set_todo_id) = use_state(&cx, || 0);
// Filter the todos based on the filter state
let mut filtered_todos = todos
.iter()
.filter(|(_, item)| match **filter {
.filter(|(_, item)| match filter {
FilterState::All => true,
FilterState::Active => !item.checked,
FilterState::Completed => item.checked,
@@ -54,25 +54,25 @@ pub fn app(cx: Scope<()>) -> Element {
placeholder: "What needs to be done?",
value: "{draft}",
autofocus: "true",
oninput: move |evt| draft.set(evt.value.clone()),
oninput: move |evt| set_draft(evt.value.clone()),
onkeydown: move |evt| {
if evt.key == "Enter" && !draft.is_empty() {
todos.modify().insert(
set_todos.make_mut().insert(
*todo_id,
TodoItem {
id: *todo_id,
checked: false,
contents: draft.get().clone(),
contents: draft.clone(),
},
);
set_todo_id(todo_id + 1);
draft.set("".to_string());
set_draft("".to_string());
}
}
}
}
ul { class: "todo-list",
filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, todos: todos )))
filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, set_todos: set_todos )))
}
(!todos.is_empty()).then(|| rsx!(
footer { class: "footer",
@@ -81,14 +81,14 @@ pub fn app(cx: Scope<()>) -> Element {
span {"{item_text} left"}
}
ul { class: "filters",
li { class: "All", a { onclick: move |_| filter.set(FilterState::All), "All" }}
li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
li { class: "All", a { onclick: move |_| set_filter(FilterState::All), "All" }}
li { class: "Active", a { onclick: move |_| set_filter(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| set_filter(FilterState::Completed), "Completed" }}
}
(show_clear_completed).then(|| rsx!(
button {
class: "clear-completed",
onclick: move |_| todos.modify().retain(|_, todo| !todo.checked),
onclick: move |_| set_todos.make_mut().retain(|_, todo| !todo.checked),
"Clear completed"
}
))
@@ -106,24 +106,26 @@ pub fn app(cx: Scope<()>) -> Element {
#[derive(Props)]
pub struct TodoEntryProps<'a> {
todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
set_todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
id: u32,
}
pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
let todo = &cx.props.todos[&cx.props.id];
let is_editing = use_state(&cx, || false);
let (is_editing, set_is_editing) = use_state(&cx, || false);
let todos = cx.props.set_todos.get();
let todo = &todos[&cx.props.id];
let completed = if todo.checked { "completed" } else { "" };
let editing = if *is_editing.get() { "editing" } else { "" };
let editing = if *is_editing { "editing" } else { "" };
rsx!(cx, li {
class: "{completed} {editing}",
onclick: move |_| is_editing.set(true),
onfocusout: move |_| is_editing.set(false),
onclick: move |_| set_is_editing(true),
onfocusout: move |_| set_is_editing(false),
div { class: "view",
input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
onchange: move |evt| {
cx.props.todos.modify()[&cx.props.id].checked = evt.value.parse().unwrap();
cx.props.set_todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
}
}
label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" }
@@ -132,11 +134,11 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
input {
class: "edit",
value: "{todo.contents}",
oninput: move |evt| cx.props.todos.modify()[&cx.props.id].contents = evt.value.clone(),
oninput: move |evt| cx.props.set_todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
autofocus: "true",
onkeydown: move |evt| {
match evt.key.as_str() {
"Enter" | "Escape" | "Tab" => is_editing.set(false),
"Enter" | "Escape" | "Tab" => set_is_editing(false),
_ => {}
}
},