1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
use dioxus::prelude::*;
#[allow(non_snake_case,dead_code)]
#[inline_props]
pub fn PfChip<'a>(cx: Scope<'a>, use_close_button: Option<bool>, children: Element<'a>) -> Element {
let use_close_button = use_close_button.unwrap_or(true);
let is_close = use_state(&cx, || false);
if *is_close.get() {
None
} else {
cx.render(rsx! {
span { class: "pf-c-chip",
span { class: "pf-c-chip__text", children },
use_close_button.then(|| rsx!{
button {
onclick: |_| { is_close.set(true); },
class: "pf-c-button pf-m-plain",
r#type: "button",
aria_labelledby: "remove_chip_one chip_one",
aria_label: "Remove",
i {
class: "fas fa-times",
aria_hidden: "true",
}
}
})
}
})
}
}
#[allow(non_snake_case,dead_code)]
#[inline_props]
pub fn PfChipGroup<'a>(cx: Scope<'a>, chips: &'a UseState<Vec<String>>) -> Element {
let chips = chips.clone();
cx.render(rsx! {
div {
class: "pf-c-chip-group",
div {
class: "pf-c-chip-group__main",
ul {
class: "pf-c-chip-group__list",
role: "list",
aria_label: "Chip group list",
chips.get().iter().map(|chip| rsx!{
li {
class: "pf-c-chip-group__list-item",
span{
PfChip { use_close_button: false, "{chip}"
button {
onclick: move |_| {
let chips = chips.clone();
let chip_list: Vec<String> = chips.get().iter().filter(|x| *x != chip).map(|x| x.clone()).collect();
chips.set(chip_list);
},
class: "pf-c-button pf-m-plain",
r#type: "button",
aria_labelledby: "remove_chip_one chip_one",
aria_label: "Remove",
i {
class: "fas fa-times",
aria_hidden: "true",
}
}
}
}
}
})
}
}
}
})
}