patternfly_dioxus/
chip.rs

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

patternfly_dioxus/
chip.rs
