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

Merge branch 'master' into jk/form-ma

Browse Source
This commit is contained in:
Jonathan Kelley committed 2022-02-01 15:24:19 -05:00
2 parents f66d17ca84 80d792910f
commit 7c06b3a9a2
125 files changed
+3940 -2302
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

examples/borderless.rs
+38
View File
@@ -0,0 +1,38 @@
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch_cfg(app, |cfg| {
cfg.with_window(|w| w.with_title("BorderLess Demo").with_decorations(false))
});
}
fn app(cx: Scope) -> Element {
let window = dioxus::desktop::use_window(&cx);
cx.render(rsx!(
link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel:"stylesheet" }
header {
class: "text-gray-400 bg-gray-900 body-font",
onmousedown: move |_| window.drag(),
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",
span { class: "ml-3 text-xl", "Dioxus"}
}
nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center" }
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",
onmousedown: |evt| evt.cancel_bubble(),
onclick: move |_| window.minimize(true),
"Minimize"
}
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",
onmousedown: |evt| evt.cancel_bubble(),
onclick: move |_| window.close(),
"Close"
}
}
}
))
}
examples/borrowed.rs
+2
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
/*
Dioxus manages borrow lifetimes for you. This means any child may borrow from its parent. However, it is not possible
to hand out an &mut T to children - all props are consumed by &P, so you'd only get an &&mut T.
examples/calculator.rs
+21 -19
View File
@@ -18,17 +18,19 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let display_value: UseState<String> = use_state(&cx, || String::from("0"));
let (display_value, set_display_value) = use_state(&cx, || String::from("0"));
let input_digit = move |num: u8| {
if display_value.get() == "0" {
display_value.set(String::new());
if display_value == "0" {
set_display_value(String::new());
}
display_value.modify().push_str(num.to_string().as_str());
set_display_value
.make_mut()
.push_str(num.to_string().as_str());
};
let input_operator = move |key: &str| {
display_value.modify().push_str(key);
set_display_value.make_mut().push_str(key);
};
cx.render(rsx!(
@@ -53,7 +55,7 @@ fn app(cx: Scope) -> Element {
KeyCode::Num9 => input_digit(9),
KeyCode::Backspace => {
if !display_value.len() != 0 {
display_value.modify().pop();
set_display_value.make_mut().pop();
}
}
_ => {}
@@ -65,21 +67,21 @@ fn app(cx: Scope) -> Element {
button {
class: "calculator-key key-clear",
onclick: move |_| {
display_value.set(String::new());
if display_value != "" {
display_value.set("0".into());
set_display_value(String::new());
if !display_value.is_empty(){
set_display_value("0".into());
}
},
[if display_value == "" { "C" } else { "AC" }]
[if display_value.is_empty() { "C" } else { "AC" }]
}
button {
class: "calculator-key key-sign",
onclick: move |_| {
let temp = calc_val(display_value.get().clone());
let temp = calc_val(display_value.clone());
if temp > 0.0 {
display_value.set(format!("-{}", temp));
set_display_value(format!("-{}", temp));
} else {
display_value.set(format!("{}", temp.abs()));
set_display_value(format!("{}", temp.abs()));
}
},
"±"
@@ -87,8 +89,8 @@ fn app(cx: Scope) -> Element {
button {
class: "calculator-key key-percent",
onclick: move |_| {
display_value.set(
format!("{}", calc_val(display_value.get().clone()) / 100.0)
set_display_value(
format!("{}", calc_val(display_value.clone()) / 100.0)
);
},
"%"
@@ -98,7 +100,7 @@ fn app(cx: Scope) -> Element {
button { class: "calculator-key key-0", onclick: move |_| input_digit(0),
"0"
}
button { class: "calculator-key key-dot", onclick: move |_| display_value.modify().push_str("."),
button { class: "calculator-key key-dot", onclick: move |_| set_display_value.make_mut().push('.'),
"●"
}
(1..10).map(|k| rsx!{
@@ -130,7 +132,7 @@ fn app(cx: Scope) -> Element {
}
button { class: "calculator-key key-equals",
onclick: move |_| {
display_value.set(format!("{}", calc_val(display_value.get().clone())));
set_display_value(format!("{}", calc_val(display_value.clone())));
},
"="
}
@@ -175,7 +177,7 @@ fn calc_val(val: String) -> f64 {
for c in val[start_index..].chars() {
if c == '+' || c == '-' || c == '*' || c == '/' {
if temp != "" {
if !temp.is_empty() {
match &operation as &str {
"+" => result += temp.parse::<f64>().unwrap(),
"-" => result -= temp.parse::<f64>().unwrap(),
@@ -191,7 +193,7 @@ fn calc_val(val: String) -> f64 {
}
}
if temp != "" {
if !temp.is_empty() {
match &operation as &str {
"+" => result += temp.parse::<f64>().unwrap(),
"-" => result -= temp.parse::<f64>().unwrap(),
examples/crm.rs
+16 -16
View File
@@ -1,7 +1,7 @@
/*
Tiny CRM: A port of the Yew CRM example to Dioxus.
*/
use dioxus::{events::FormEvent, prelude::*};
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(app);
@@ -20,11 +20,11 @@ pub struct Client {
}
fn app(cx: Scope) -> Element {
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, set_scene) = use_state(&cx, || Scene::ClientsList);
let (firstname, set_firstname) = use_state(&cx, String::new);
let (lastname, set_lastname) = use_state(&cx, String::new);
let (description, set_description) = use_state(&cx, String::new);
cx.render(rsx!(
body {
@@ -38,7 +38,7 @@ fn app(cx: Scope) -> Element {
h1 {"Dioxus CRM Example"}
match *scene {
match scene {
Scene::ClientsList => rsx!(
div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" }
@@ -51,8 +51,8 @@ fn app(cx: Scope) -> Element {
})
)
}
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" }
button { class: "pure-button pure-button-primary", onclick: move |_| set_scene(Scene::NewClientForm), "Add New" }
button { class: "pure-button", onclick: move |_| set_scene(Scene::Settings), "Settings" }
}
),
Scene::NewClientForm => rsx!(
@@ -63,19 +63,19 @@ fn app(cx: Scope) -> Element {
class: "new-client firstname",
placeholder: "First name",
value: "{firstname}",
oninput: move |e| firstname.set(e.value.clone())
oninput: move |e| set_firstname(e.value.clone())
}
input {
class: "new-client lastname",
placeholder: "Last name",
value: "{lastname}",
oninput: move |e| lastname.set(e.value.clone())
oninput: move |e| set_lastname(e.value.clone())
}
textarea {
class: "new-client description",
placeholder: "Description",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
oninput: move |e| set_description(e.value.clone())
}
}
button {
@@ -86,13 +86,13 @@ fn app(cx: Scope) -> Element {
first_name: (*firstname).clone(),
last_name: (*lastname).clone(),
});
description.set(String::new());
firstname.set(String::new());
lastname.set(String::new());
set_description(String::new());
set_firstname(String::new());
set_lastname(String::new());
},
"Add New"
}
button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList),
button { class: "pure-button", onclick: move |_| set_scene(Scene::ClientsList),
"Go Back"
}
}
@@ -108,7 +108,7 @@ fn app(cx: Scope) -> Element {
}
button {
class: "pure-button pure-button-primary",
onclick: move |_| scene.set(Scene::ClientsList),
onclick: move |_| set_scene(Scene::ClientsList),
"Go Back"
}
}
examples/custom_assets.rs
+14
View File
@@ -0,0 +1,14 @@
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(app);
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
"This should show an image:"
img { src: "examples/assets/logo.png", }
}
})
}
examples/disabled.rs
+2 -7
View File
@@ -5,12 +5,12 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let disabled = use_state(&cx, || false);
let (disabled, set_disabled) = use_state(&cx, || false);
cx.render(rsx! {
div {
button {
onclick: move |_| disabled.set(!disabled.get()),
onclick: move |_| set_disabled(!disabled),
"click to " [if *disabled {"enable"} else {"disable"} ] " the lower button"
}
@@ -18,11 +18,6 @@ fn app(cx: Scope) -> Element {
disabled: "{disabled}",
"lower button"
}
input {
value: "false",
}
}
})
}
examples/dog_app.rs
+11 -10
View File
@@ -1,5 +1,6 @@
#![allow(non_snake_case)]
//! Render a bunch of doggos!
//!
use std::collections::HashMap;
@@ -15,7 +16,7 @@ struct ListBreeds {
}
fn app(cx: Scope) -> Element {
let fut = use_future(&cx, || async move {
let breeds = use_future(&cx, || async move {
reqwest::get("https://dog.ceo/api/breeds/list/all")
.await
.unwrap()
@@ -23,9 +24,9 @@ fn app(cx: Scope) -> Element {
.await
});
let selected_breed = use_state(&cx, || None);
let (breed, set_breed) = use_state(&cx, || None);
match fut.value() {
match breeds.value() {
Some(Ok(breeds)) => cx.render(rsx! {
div {
h1 {"Select a dog breed!"}
@@ -35,14 +36,14 @@ fn app(cx: Scope) -> Element {
breeds.message.keys().map(|breed| rsx!(
li {
button {
onclick: move |_| selected_breed.set(Some(breed.clone())),
onclick: move |_| set_breed(Some(breed.clone())),
"{breed}"
}
}
))
}
div { flex: "50%",
match &*selected_breed {
match breed {
Some(breed) => rsx!( Breed { breed: breed.clone() } ),
None => rsx!("No Breed selected"),
}
@@ -50,7 +51,7 @@ fn app(cx: Scope) -> Element {
}
}
}),
Some(Err(e)) => cx.render(rsx! {
Some(Err(_e)) => cx.render(rsx! {
div { "Error fetching breeds" }
}),
None => cx.render(rsx! {
@@ -72,9 +73,9 @@ fn Breed(cx: Scope, breed: String) -> Element {
reqwest::get(endpoint).await.unwrap().json::<DogApi>().await
});
let breed_name = use_state(&cx, || breed.clone());
if breed_name.get() != breed {
breed_name.set(breed.clone());
let (name, set_name) = use_state(&cx, || breed.clone());
if name != breed {
set_name(breed.clone());
fut.restart();
}
examples/file_explorer.rs
+3 -4
View File
@@ -15,7 +15,7 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let files = use_ref(&cx, || Files::new());
let files = use_ref(&cx, Files::new);
rsx!(cx, div {
link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
@@ -28,8 +28,8 @@ fn app(cx: Scope) -> Element {
}
main {
files.read().path_names.iter().enumerate().map(|(dir_id, path)| {
let path_end = path.split('/').last().unwrap_or(path.as_str());
let icon_type = if path_end.contains(".") {
let path_end = path.split('/').last().unwrap_or_else(|| path.as_str());
let icon_type = if path_end.contains('.') {
"description"
} else {
"folder"
@@ -56,7 +56,6 @@ fn app(cx: Scope) -> Element {
)
})
}
})
}
examples/filedragdrop.rs
+2 -2
View File
@@ -2,9 +2,9 @@ use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch_with_props(app, (), |c| {
c.with_file_drop_handler(|w, e| {
c.with_file_drop_handler(|_w, e| {
println!("{:?}", e);
false
true
})
});
}
examples/framework_benchmark.rs
+7 -5
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use rand::prelude::*;
@@ -15,9 +17,9 @@ impl Label {
fn new_list(num: usize) -> Vec<Self> {
let mut rng = SmallRng::from_entropy();
let mut labels = Vec::with_capacity(num);
for _ in 0..num {
for x in 0..num {
labels.push(Label {
key: 0,
key: x,
labels: [
ADJECTIVES.choose(&mut rng).unwrap(),
COLOURS.choose(&mut rng).unwrap(),
@@ -30,8 +32,8 @@ impl Label {
}
fn app(cx: Scope) -> Element {
let items = use_ref(&cx, || vec![]);
let selected = use_state(&cx, || None);
let items = use_ref(&cx, Vec::new);
let (selected, set_selected) = use_state(&cx, || None);
cx.render(rsx! {
div { class: "container",
@@ -69,7 +71,7 @@ fn app(cx: Scope) -> Element {
rsx!(tr { class: "{is_in_danger}",
td { class:"col-md-1" }
td { class:"col-md-1", "{item.key}" }
td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
td { class:"col-md-1", onclick: move |_| set_selected(Some(id)),
a { class: "lbl", item.labels }
}
td { class: "col-md-1",
examples/hydration.rs
+2 -2
View File
@@ -20,13 +20,13 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let val = use_state(&cx, || 0);
let (val, set_val) = use_state(&cx, || 0);
cx.render(rsx! {
div {
h1 { "hello world. Count: {val}" }
button {
onclick: move |_| *val.modify() += 1,
onclick: move |_| set_val(val + 1),
"click to increment"
}
}
examples/inputs.rs
-2
View File
@@ -2,8 +2,6 @@
//!
//! There is some conversion happening when input types are checkbox/radio/select/textarea etc.
use std::sync::Arc;
use dioxus::{events::FormEvent, prelude::*};
fn main() {
examples/pattern_model.rs
+7 -5
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
//! Example: Calculator
//! -------------------
//!
@@ -30,7 +32,7 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let state = use_ref(&cx, || Calculator::new());
let state = use_ref(&cx, Calculator::new);
cx.render(rsx! {
style { [include_str!("./assets/calculator.css")] }
@@ -171,8 +173,8 @@ impl Calculator {
}
}
fn input_dot(&mut self) {
if self.display_value.find(".").is_none() {
self.display_value.push_str(".");
if !self.display_value.contains('.') {
self.display_value.push('.');
}
}
fn perform_operation(&mut self) {
@@ -190,8 +192,8 @@ impl Calculator {
}
}
fn toggle_sign(&mut self) {
if self.display_value.starts_with("-") {
self.display_value = self.display_value.trim_start_matches("-").to_string();
if self.display_value.starts_with('-') {
self.display_value = self.display_value.trim_start_matches('-').to_string();
} else {
self.display_value = format!("-{}", self.display_value);
}
examples/pattern_reducer.rs
+3 -3
View File
@@ -15,16 +15,16 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let state = use_state(&cx, PlayerState::new);
let (state, set_state) = use_state(&cx, PlayerState::new);
cx.render(rsx!(
div {
h1 {"Select an option"}
h3 { "The radio is... " [state.is_playing()] "!" }
button { onclick: move |_| state.modify().reduce(PlayerAction::Pause),
button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Pause),
"Pause"
}
button { onclick: move |_| state.modify().reduce(PlayerAction::Play),
button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Play),
"Play"
}
}
examples/readme.rs
+3 -3
View File
@@ -9,13 +9,13 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let mut count = use_state(&cx, || 0);
let (count, set_count) = use_state(&cx, || 0);
cx.render(rsx! {
div {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
button { onclick: move |_| set_count(count + 1), "Up high!" }
button { onclick: move |_| set_count(count - 1), "Down low!" }
}
})
}
examples/router.rs
+10 -2
View File
@@ -19,7 +19,7 @@ fn app(cx: Scope) -> Element {
Route { to: "/", "Home" }
Route { to: "users",
Route { to: "/", "User list" }
Route { to: ":name", BlogPost {} }
Route { to: ":name", User {} }
}
Route { to: "blog"
Route { to: "/", "Blog list" }
@@ -48,12 +48,20 @@ struct Query {
fn User(cx: Scope) -> Element {
let post = dioxus::router::use_route(&cx).last_segment();
let query = dioxus::router::use_route(&cx).query::<Query>();
let query = dioxus::router::use_route(&cx)
.query::<Query>()
.unwrap_or(Query { bold: false });
cx.render(rsx! {
div {
h1 { "Reading blog post: {post}" }
p { "example blog post" }
if query.bold {
rsx!{ b { "bold" } }
} else {
rsx!{ i { "italic" } }
}
}
})
}
examples/rsx_compile_fail.rs
+1 -1
View File
@@ -12,7 +12,7 @@ fn main() {
}
fn example(cx: Scope) -> Element {
let items = use_state(&cx, || {
let (items, _set_items) = use_state(&cx, || {
vec![Thing {
a: "asd".to_string(),
b: 10,
examples/suspense.rs
+2
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
//! Suspense in Dioxus
//!
//! Currently, `rsx!` does not accept futures as values. To achieve the functionality
examples/tailwind.rs
+2
View File
@@ -1,3 +1,5 @@
#![allow(non_snake_case)]
//! Example: Basic Tailwind usage
//!
//! This example shows how an app might be styled with TailwindCSS.
examples/tasks.rs
+7 -8
View File
@@ -10,16 +10,15 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let count = use_state(&cx, || 0);
let (count, set_count) = use_state(&cx, || 0);
use_future(&cx, move || {
let count = UseState::for_async(&count);
// for_async![count];
let set_count = set_count.to_owned();
async move {
// loop {
// tokio::time::sleep(Duration::from_millis(1000)).await;
// count += 1;
// }
loop {
tokio::time::sleep(Duration::from_millis(1000)).await;
set_count.modify(|f| f + 1);
}
}
});
@@ -27,7 +26,7 @@ fn app(cx: Scope) -> Element {
div {
h1 { "Current count: {count}" }
button {
onclick: move |_| count.set(0),
onclick: move |_| set_count(0),
"Reset the count"
}
}
examples/todomvc.rs
+33 -33
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 mut todo_id = use_state(&cx, || 0);
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,27 +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" {
if !draft.is_empty() {
todos.modify().insert(
*todo_id,
TodoItem {
id: *todo_id,
checked: false,
contents: draft.get().clone(),
},
);
todo_id += 1;
draft.set("".to_string());
}
if evt.key == "Enter" && !draft.is_empty() {
set_todos.make_mut().insert(
*todo_id,
TodoItem {
id: *todo_id,
checked: false,
contents: draft.clone(),
},
);
set_todo_id(todo_id + 1);
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",
@@ -83,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 == false),
onclick: move |_| set_todos.make_mut().retain(|_, todo| !todo.checked),
"Clear completed"
}
))
@@ -108,24 +106,26 @@ pub fn app(cx: Scope<()>) -> Element {
#[derive(Props)]
pub struct TodoEntryProps<'a> {
todos: UseState<'a, 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}" }
@@ -134,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),
_ => {}
}
},
examples/xss_safety.rs
+2 -2
View File
@@ -9,7 +9,7 @@ fn main() {
}
fn app(cx: Scope) -> Element {
let contents = use_state(&cx, || {
let (contents, set_contents) = use_state(&cx, || {
String::from("<script>alert(\"hello world\")</script>")
});
@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
input {
value: "{contents}",
r#type: "text",
oninput: move |e| contents.set(e.value.clone()),
oninput: move |e| set_contents(e.value.clone()),
}
}
})