2021-11-19 05:49:04 +00:00
|
|
|
use dioxus::prelude::*;
|
|
|
|
use rand::prelude::*;
|
2021-06-22 21:20:54 +00:00
|
|
|
|
|
|
|
fn main() {
|
2022-01-02 23:35:38 +00:00
|
|
|
dioxus::desktop::launch(app);
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
|
|
|
|
2021-11-19 05:49:04 +00:00
|
|
|
#[derive(Clone, PartialEq)]
|
|
|
|
struct Label {
|
|
|
|
key: usize,
|
|
|
|
labels: [&'static str; 3],
|
|
|
|
}
|
2021-06-22 21:20:54 +00:00
|
|
|
|
2021-11-19 05:49:04 +00:00
|
|
|
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 {
|
|
|
|
labels.push(Label {
|
|
|
|
key: 0,
|
|
|
|
labels: [
|
|
|
|
ADJECTIVES.choose(&mut rng).unwrap(),
|
|
|
|
COLOURS.choose(&mut rng).unwrap(),
|
|
|
|
NOUNS.choose(&mut rng).unwrap(),
|
|
|
|
],
|
|
|
|
});
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
2021-11-19 05:49:04 +00:00
|
|
|
labels
|
|
|
|
}
|
|
|
|
}
|
2021-06-22 21:20:54 +00:00
|
|
|
|
2022-01-02 23:35:38 +00:00
|
|
|
fn app(cx: Scope) -> Element {
|
2021-12-30 08:14:47 +00:00
|
|
|
let items = use_ref(&cx, || vec![]);
|
|
|
|
let selected = use_state(&cx, || None);
|
2021-06-22 21:20:54 +00:00
|
|
|
|
|
|
|
cx.render(rsx! {
|
2021-12-30 08:14:47 +00:00
|
|
|
div { class: "container",
|
|
|
|
div { class: "jumbotron",
|
|
|
|
div { class: "row",
|
2021-06-22 21:20:54 +00:00
|
|
|
div { class: "col-md-6", h1 { "Dioxus" } }
|
2021-12-30 08:14:47 +00:00
|
|
|
div { class: "col-md-6",
|
|
|
|
div { class: "row",
|
2021-11-19 05:49:04 +00:00
|
|
|
ActionButton { name: "Create 1,000 rows", id: "run",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| items.set(Label::new_list(1_000)),
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
|
|
|
ActionButton { name: "Create 10,000 rows", id: "runlots",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| items.set(Label::new_list(10_000)),
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
|
|
|
ActionButton { name: "Append 1,000 rows", id: "add",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| items.write().extend(Label::new_list(1_000)),
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
|
|
|
ActionButton { name: "Update every 10th row", id: "update",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| items.write().iter_mut().step_by(10).for_each(|item| item.labels[2] = "!!!"),
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
|
|
|
ActionButton { name: "Clear", id: "clear",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| items.write().clear(),
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
|
|
|
ActionButton { name: "Swap rows", id: "swaprows",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| items.write().swap(0, 998),
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-07-12 17:03:24 +00:00
|
|
|
table {
|
2021-06-22 21:20:54 +00:00
|
|
|
tbody {
|
2022-01-02 23:35:38 +00:00
|
|
|
items.read().iter().enumerate().map(|(id, item)| {
|
2021-11-19 05:49:04 +00:00
|
|
|
let is_in_danger = if (*selected).map(|s| s == id).unwrap_or(false) {"danger"} else {""};
|
2021-12-30 08:14:47 +00:00
|
|
|
rsx!(tr { class: "{is_in_danger}",
|
2021-11-19 05:49:04 +00:00
|
|
|
td { class:"col-md-1" }
|
|
|
|
td { class:"col-md-1", "{item.key}" }
|
|
|
|
td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
|
2021-12-30 08:14:47 +00:00
|
|
|
a { class: "lbl", item.labels }
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
2021-12-30 08:14:47 +00:00
|
|
|
td { class: "col-md-1",
|
2021-11-19 05:49:04 +00:00
|
|
|
a { class: "remove", onclick: move |_| { items.write().remove(id); },
|
2021-12-30 08:14:47 +00:00
|
|
|
span { class: "glyphicon glyphicon-remove remove", aria_hidden: "true" }
|
2021-11-19 05:49:04 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
td { class: "col-md-6" }
|
|
|
|
})
|
2022-01-02 23:35:38 +00:00
|
|
|
})
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
|
|
|
}
|
2021-12-30 08:14:47 +00:00
|
|
|
span { class: "preloadicon glyphicon glyphicon-remove", aria_hidden: "true" }
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
|
|
|
})
|
2022-01-02 23:35:38 +00:00
|
|
|
}
|
2021-06-22 21:20:54 +00:00
|
|
|
|
|
|
|
#[derive(Props)]
|
2021-09-24 06:37:51 +00:00
|
|
|
struct ActionButtonProps<'a> {
|
2022-01-05 22:30:12 +00:00
|
|
|
name: &'a str,
|
|
|
|
id: &'a str,
|
2022-01-07 16:53:19 +00:00
|
|
|
onclick: EventHandler<'a>,
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
2021-09-24 06:37:51 +00:00
|
|
|
|
2021-12-15 20:56:53 +00:00
|
|
|
fn ActionButton<'a>(cx: Scope<'a, ActionButtonProps<'a>>) -> Element {
|
2022-01-02 23:35:38 +00:00
|
|
|
cx.render(rsx! {
|
|
|
|
div {
|
|
|
|
class: "col-sm-6 smallpad",
|
|
|
|
button {
|
|
|
|
class:"btn btn-primary btn-block",
|
|
|
|
r#type: "button",
|
|
|
|
id: "{cx.props.id}",
|
2022-01-07 16:51:25 +00:00
|
|
|
onclick: move |_| cx.props.onclick.call(()),
|
2022-01-02 23:35:38 +00:00
|
|
|
|
|
|
|
"{cx.props.name}"
|
|
|
|
}
|
2021-06-22 21:20:54 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
static ADJECTIVES: &[&str] = &[
|
|
|
|
"pretty",
|
|
|
|
"large",
|
|
|
|
"big",
|
|
|
|
"small",
|
|
|
|
"tall",
|
|
|
|
"short",
|
|
|
|
"long",
|
|
|
|
"handsome",
|
|
|
|
"plain",
|
|
|
|
"quaint",
|
|
|
|
"clean",
|
|
|
|
"elegant",
|
|
|
|
"easy",
|
|
|
|
"angry",
|
|
|
|
"crazy",
|
|
|
|
"helpful",
|
|
|
|
"mushy",
|
|
|
|
"odd",
|
|
|
|
"unsightly",
|
|
|
|
"adorable",
|
|
|
|
"important",
|
|
|
|
"inexpensive",
|
|
|
|
"cheap",
|
|
|
|
"expensive",
|
|
|
|
"fancy",
|
|
|
|
];
|
|
|
|
|
|
|
|
static COLOURS: &[&str] = &[
|
|
|
|
"red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black",
|
|
|
|
"orange",
|
|
|
|
];
|
|
|
|
|
|
|
|
static NOUNS: &[&str] = &[
|
|
|
|
"table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
|
|
|
|
"pizza", "mouse", "keyboard",
|
|
|
|
];
|