Skip to content

Improve the "keyed_list" example #1650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siku2 merged 10 commits into from
Nov 22, 2020
Merged

Improve the "keyed_list" example #1650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
67a66ca
Add faker data
titaneric Nov 21, 2020
076147d
Style the buttons
titaneric Nov 21, 2020
041c7cc
Style the input and person list
titaneric Nov 21, 2020
667c868
Show the rendering duration by noderef
titaneric Nov 21, 2020
ebdd346
Format the code
titaneric Nov 21, 2020
836efd8
Fix the grammar issue
titaneric Nov 21, 2020
1a33675
Add the space after formatting
titaneric Nov 22, 2020
5d4d579
Format the dependencies and remove dead code
titaneric Nov 22, 2020
758c201
Refactor the main view
titaneric Nov 22, 2020
cc1dbf5
Format the html
titaneric Nov 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/keyed_list/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ authors = ["Thomas Lacroix <toto.rigolo@free.fr>"]
edition = "2018"

[dependencies]
log = "0.4"
fake = "2.2"
instant = { version = "0.1", features = ["wasm-bindgen"] }
log = "0.4"
rand = { version = "0.7", features = ["wasm-bindgen"] }
wasm-logger = "0.2"
yew = { path = "../../yew" }
Expand Down
2 changes: 1 addition & 1 deletion examples/keyed_list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Yew • Keyed list</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link data-trunk rel="css" href="styles.css" />
</head>

Expand Down
183 changes: 126 additions & 57 deletions examples/keyed_list/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
use instant::Instant;
use person::PersonType;
use yew::prelude::*;
use yew::web_sys::HtmlElement;
use yewtil::NeqAssign;

mod person;
Expand Down Expand Up @@ -28,6 +29,7 @@ pub struct Model {
last_id: usize,
keyed: bool,
build_component_ratio: f64,
delta_ref: NodeRef,
}

impl Component for Model {
Expand All @@ -41,6 +43,7 @@ impl Component for Model {
last_id: 0,
keyed: true,
build_component_ratio: 0.5,
delta_ref: NodeRef::default(),
}
}

Expand Down Expand Up @@ -124,6 +127,11 @@ impl Component for Model {
let time_after = Instant::now();
let elapsed_max = time_after - time_before;
log::info!("Rendering started {} ms ago.", elapsed_max.as_millis());
if let Some(input) = self.delta_ref.cast::<HtmlElement>() {
let delta_text =
format!("The last rendering took {} ms", elapsed_max.as_millis());
input.set_inner_text(&delta_text);
}
false
}
}
Expand All @@ -136,6 +144,120 @@ impl Component for Model {
fn view(&self) -> Html {
self.link.send_message(Msg::Rendered(Instant::now()));

html! {
<div class="container">
<div class="row">
<p class="h2" ref=self.delta_ref.clone()/>
<hr />
</div>
{ self.action_view() }
{ self.info_view() }
</div>
}
}
}

impl Model {
fn action_view(&self) -> Html {
html! {
<>
{ self.button_view() }
<div class="row">
<div class="col">
<p class="h5">
{ "Person type ratio (0=only tags <= ratio <= 1=only components): " }
{ self.build_component_ratio }
</p>
<input name="ratio" type="range" class="form-control-range" min="0.0" max="1.0" step="any"
value=self.build_component_ratio
oninput=self.link.callback(|e: InputData| Msg::ChangeRatio(e.value))
/>
</div>
</div>
</>
}
}
fn button_view(&self) -> Html {
html! {
<>
<div class="row">
<div class="col">
<button class="btn_size alert alert-danger" onclick=self.link.callback(|_| Msg::DeleteEverybody)>
{ "Delete everybody" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick=self.link.callback(|_| Msg::CreatePersons(1))>
{ "Create 1" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick=self.link.callback(|_| Msg::CreatePersons(5))>
{ "Create 5" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick=self.link.callback(|_| Msg::CreatePersons(100))>
{ "Create 100" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick=self.link.callback(|_| Msg::CreatePersons(500))>
{ "Create 500" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick=self.link.callback(|_| Msg::CreatePersonsPrepend(1))>
{ "Prepend 1" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-success" onclick=self.link.callback(|_| Msg::CreatePersonsPrepend(5))>
{ "Prepend 5" }
</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn_size alert alert-warning" onclick=self.link.callback(|_| Msg::ToggleKeyed)>
{ if self.keyed { "Disable keys" } else { "Enable keys" } }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick=self.link.callback(|_| Msg::SwapRandom)>
{ "Swap random" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick=self.link.callback(|_| Msg::ReverseList)>
{ "Reverse list" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick=self.link.callback(|_| Msg::SortById)>
{ "Sort by id" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick=self.link.callback(|_| Msg::SortByName)>
{ "Sort by name" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick=self.link.callback(|_| Msg::SortByAge)>
{ "Sort by age" }
</button>
</div>
<div class="col">
<button class="btn_size alert alert-info" onclick=self.link.callback(|_| Msg::SortByAddress)>
{ "Sort by address" }
</button>
</div>
</div>
</>
}
}
fn info_view(&self) -> Html {
let ids = if self.persons.len() < 20 {
self.persons
.iter()
Expand All @@ -145,68 +267,15 @@ impl Component for Model {
} else {
String::from("<too many>")
};

html! {
<>
<div class="buttons">
<button onclick=self.link.callback(|_| Msg::DeleteEverybody)>
{ "Delete everybody" }
</button>
<button onclick=self.link.callback(|_| Msg::CreatePersons(1))>
{ "Create 1" }
</button>
<button onclick=self.link.callback(|_| Msg::CreatePersons(5))>
{ "Create 5" }
</button>
<button onclick=self.link.callback(|_| Msg::CreatePersons(100))>
{ "Create 100" }
</button>
<button onclick=self.link.callback(|_| Msg::CreatePersons(500))>
{ "Create 500" }
</button>
<button onclick=self.link.callback(|_| Msg::CreatePersonsPrepend(1))>
{ "Prepend 1" }
</button>
<button onclick=self.link.callback(|_| Msg::CreatePersonsPrepend(5))>
{ "Prepend 5" }
</button>
<button onclick=self.link.callback(|_| Msg::SwapRandom)>
{ "Swap random" }
</button>
<button onclick=self.link.callback(|_| Msg::ReverseList)>
{ "Reverse list" }
</button>
<button onclick=self.link.callback(|_| Msg::SortById)>
{ "Sort by id" }
</button>
<button onclick=self.link.callback(|_| Msg::SortByName)>
{ "Sort by name" }
</button>
<button onclick=self.link.callback(|_| Msg::SortByAge)>
{ "Sort by age" }
</button>
<button onclick=self.link.callback(|_| Msg::SortByAddress)>
{ "Sort by address" }
</button>
<button onclick=self.link.callback(|_| Msg::ToggleKeyed)>
{ if self.keyed { "Disable keys" } else { "Enable keys" } }
</button>
</div>
<div class="ratio">
<label for="ratio">{ "Person type ratio (0=only tags <= ratio <= 1=only components): " }</label>
<input
class="input" type="text" id="ratio"
value=self.build_component_ratio
oninput=self.link.callback(|e: InputData| Msg::ChangeRatio(e.value))
/>
</div>
<p>{ "Number of persons: " }{ self.persons.len() }</p>
<p>{ "Ids: " }{ ids }</p>
<div>
<p class="h5">{ "Number of persons: " }{ self.persons.len() }</p>
Copy link
Contributor

@teymour-aldridge teymour-aldridge Nov 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this depends on which version of English you use.

Suggested change
<p class="h5">{ "Number of persons: " }{ self.persons.len() }</p>
<p class="h5">{ "Number of people: " }{ self.persons.len() }</p>

Copy link
Contributor Author

@titaneric titaneric Nov 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure here, I leave it unchanged temporarily.

<p class="h5">{ "Ids: " }{ ids }</p>
<hr />
<div class="persons">
{ for self.persons.iter().map(|p| p.render(self.keyed)) }
</div>
</>
</div>
}
}
}
Expand Down
31 changes: 21 additions & 10 deletions examples/keyed_list/src/person.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ use std::rc::Rc;
use yew::{html, Component, ComponentLink, Html, Properties, ShouldRender};
use yewtil::NeqAssign;

use fake::faker::address::raw::*;
use fake::faker::name::raw::*;
use fake::locales::*;
use fake::Fake;

#[derive(Clone, Debug, Eq, PartialEq)]
pub struct PersonInfo {
pub id: usize,
Expand All @@ -13,24 +18,30 @@ pub struct PersonInfo {
impl PersonInfo {
pub fn new_random(id: usize) -> Self {
let address = {
let count = random::range_exclusive(3, 6);
Rc::from(random::words(count, 5, 12).join(" ").as_str())
let no = random::range_exclusive(1, 300);
let state = StateAbbr(EN).fake::<String>();
let city = CityName(EN).fake::<String>();
let street = StreetName(EN).fake::<String>();

Rc::from(format!("{} {} St., {}, {}", no, street, city, state).as_str())
};

Self {
id,
name: Rc::from(random::words(2, 4, 15).join(" ").as_str()),
name: Rc::from(Name(EN).fake::<String>().as_str()),
age: random::range_exclusive(7, 77),
address,
}
}

fn render(&self) -> Html {
html! {
<div class="person">
<h1>{ &self.id }{ " - " }{ &self.name }</h1>
<p>{ "Age: " }{ &self.age }</p>
<p>{ "Address: " }{ &self.address }</p>
<div class="card w-50 card_style">
<div class="card-body">
<h5 class="card-title">{ format!("{} - {}", &self.id, &self.name) }</h5>
<p class="card-text">{ format!("Age: {}", &self.age) }</p>
<p class="card-text">{ format!("Address: {}", &self.address) }</p>
</div>
</div>
}
}
Expand Down Expand Up @@ -58,7 +69,7 @@ impl Component for PersonComponent {

fn view(&self) -> Html {
html! {
<div class="component-person" id=self.info.id.to_string()>
<div class="text-info" id=self.info.id.to_string()>
{ self.info.render() }
</div>
}
Expand Down Expand Up @@ -91,13 +102,13 @@ impl PersonType {
Self::Inline(info) => {
if keyed {
html! {
<div key=info.id.to_string() class="basic-person" id=info.id.to_string()>
<div key=info.id.to_string() class="text-danger" id=info.id.to_string()>
{ info.render() }
</div>
}
} else {
html! {
<div class="basic-person" id=info.id.to_string()>
<div class="text-danger" id=info.id.to_string()>
{ info.render() }
</div>
}
Expand Down
13 changes: 1 addition & 12 deletions examples/keyed_list/src/random.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
use rand::distributions::{Alphanumeric, Bernoulli};
use rand::distributions::Bernoulli;
use rand::Rng;

/// `0 <= p <= 1`
Expand Down Expand Up @@ -47,14 +47,3 @@ pub fn choose_two_distinct_mut<T>(items: &mut [T]) -> Option<(&mut T, &mut T)> {
let (a, b) = items.split_at_mut(hi);
Some((&mut a[lo], &mut b[0]))
}

fn word(len: usize) -> String {
let mut rng = rand::thread_rng();
(0..len).map(|_| rng.sample(Alphanumeric)).collect()
}

pub fn words(count: usize, min_len: usize, max_len: usize) -> Vec<String> {
(0..count)
.map(|_| word(range_exclusive(min_len, max_len)))
.collect()
}
9 changes: 9 additions & 0 deletions examples/keyed_list/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,12 @@
.basic-person {
color: red;
}

.btn_size {
width: 100%;
height: 75px;
}

.card_style {
margin:5px;
}