material_dioxus/list/
list_item.rs

1use crate::{list::request_selected::make_request_selected_listener, StaticCallback};
2use dioxus::prelude::*;
3use wasm_bindgen::prelude::*;
4
5use super::{GraphicType, RequestSelectedDetail};
6
7#[wasm_bindgen(module = "/build/mwc-list-item.js")]
8extern "C" {
9    #[derive(Debug)]
10    type ListItem;
11
12    #[wasm_bindgen(getter, static_method_of = ListItem)]
13    fn _dummy_loader() -> JsValue;
14
15    #[wasm_bindgen(method, setter)]
16    fn set_activated(this: &ListItem, value: bool);
17
18    #[wasm_bindgen(method, setter)]
19    fn set_selected(this: &ListItem, value: bool);
20}
21
22loader_hack!(ListItem);
23
24/// Props for [`MatListItem`]
25///
26/// MWC Documentation [properties](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-list-item-1)
27/// and [events](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-list-item-2)
28#[derive(Props)]
29pub struct ListItemProps<'a> {
30    #[props(into)]
31    pub value: Option<String>,
32    #[props(default)]
33    pub group: bool,
34    #[props(default = -1)]
35    pub tabindex: i32,
36    #[props(default)]
37    pub disabled: bool,
38    #[props(default)]
39    pub twoline: bool,
40    #[props(default)]
41    pub initially_activated: bool,
42    #[props(default = GraphicType::Null)]
43    pub graphic: GraphicType,
44    #[props(default)]
45    pub multiple_graphics: bool,
46    #[props(default)]
47    pub has_meta: bool,
48    #[props(default)]
49    pub noninteractive: bool,
50    #[props(default)]
51    pub initially_selected: bool,
52    /// Binds to `request-selected` event on `mwc-list-item`.
53    #[props(into)]
54    pub _on_request_selected: Option<StaticCallback<RequestSelectedDetail>>,
55    pub children: Element<'a>,
56
57    #[props(into, default)]
58    pub style: String,
59    #[props(into, default)]
60    pub class: String,
61}
62
63fn render<'a>(cx: Scope<'a, ListItemProps<'a>>) -> Element<'a> {
64    let id = crate::use_id(cx, "list-item");
65    let request_selected_listener = cx.use_hook(|| None);
66    if let Some(elem) = crate::get_elem_by_id(id) {
67        let target = elem;
68        if let Some(listener) = cx.props._on_request_selected.clone() {
69            *request_selected_listener = Some(make_request_selected_listener(&target, listener));
70        }
71    }
72
73    render! {
74        mwc-list-item {
75            onmounted: move |_| {
76                if let Some(elem) = crate::get_elem_by_id(id) {
77                    let item = JsValue::from(elem).dyn_into::<ListItem>().unwrap();
78                    item.set_activated(cx.props.initially_activated);
79                    item.set_selected(cx.props.initially_selected);
80                }
81            },
82
83            id: id,
84
85            value: optional_string_attr!(cx.props.value),
86            group: bool_attr!(cx.props.group),
87            tabindex: cx.props.tabindex as i64,
88            disabled: bool_attr!(cx.props.disabled),
89            twoline: bool_attr!(cx.props.twoline),
90            graphic: cx.props.graphic.as_str(),
91            multipleGraphics: bool_attr!(cx.props.multiple_graphics),
92            hasMeta: bool_attr!(cx.props.has_meta),
93            noninteractive: bool_attr!(cx.props.noninteractive),
94
95            style: string_attr!(cx.props.style),
96            class: string_attr!(cx.props.class),
97
98            &cx.props.children
99        }
100    }
101}
102
103component!('a, MatListItem, ListItemProps, render, ListItem, "list-item");
material_dioxus/list/list_item.rs

material_dioxus/list/
list_item.rs
