material_dioxus/list/
check_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-check-list-item.js")]
8extern "C" {
9    #[derive(Debug)]
10    type CheckListItem;
11
12    #[wasm_bindgen(getter, static_method_of = CheckListItem)]
13    fn _dummy_loader() -> JsValue;
14
15    #[wasm_bindgen(method, setter)]
16    fn set_selected(this: &CheckListItem, value: bool);
17}
18
19loader_hack!(CheckListItem);
20
21/// Props for [`MatCheckListItem`]
22///
23/// MWC Documentation for [properties](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-check-list-item)
24/// and [events](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-check-list-item-1)
25#[derive(Props)]
26pub struct CheckListItemProps<'a> {
27    #[props(default)]
28    pub left: bool,
29    #[props(default = GraphicType::Control)]
30    pub graphic: GraphicType,
31    #[props(default)]
32    pub disabled: bool,
33    #[props(into)]
34    pub _on_request_selected: Option<StaticCallback<RequestSelectedDetail>>,
35    #[props(default)]
36    pub initially_selected: bool,
37    pub children: Element<'a>,
38
39    #[props(into, default)]
40    pub style: String,
41    #[props(into, default)]
42    pub class: String,
43}
44
45fn render<'a>(cx: Scope<'a, CheckListItemProps<'a>>) -> Element<'a> {
46    let id = crate::use_id(cx, "check-list-item");
47    let request_selected_listener = cx.use_hook(|| None);
48    if let Some(elem) = crate::get_elem_by_id(id) {
49        let target = elem;
50        if let Some(listener) = cx.props._on_request_selected.clone() {
51            *request_selected_listener = Some(make_request_selected_listener(&target, listener));
52        }
53    }
54
55    render! {
56        mwc-check-list-item {
57            onmounted: move |_| {
58                if let Some(elem) = crate::get_elem_by_id(id) {
59                    let item = JsValue::from(elem).dyn_into::<CheckListItem>().unwrap();
60                    item.set_selected(cx.props.initially_selected);
61                }
62            },
63
64            id: id,
65
66            left: bool_attr!(cx.props.left),
67            graphic: cx.props.graphic.as_str(),
68            disabled: bool_attr!(cx.props.disabled),
69
70            style: string_attr!(cx.props.style),
71            class: string_attr!(cx.props.class),
72
73            &cx.props.children
74        }
75    }
76}
77
78component!('a, MatCheckListItem, CheckListItemProps, render, CheckListItem, "check-list-item");