material_yew/list/
list_item.rs

1use crate::list::request_selected::request_selected_listener;
2use crate::list::{GraphicType, RequestSelectedDetail};
3use crate::{bool_to_option, to_option_string};
4use gloo::events::EventListener;
5use wasm_bindgen::prelude::*;
6use yew::prelude::*;
7use yew::virtual_dom::AttrValue;
8
9#[wasm_bindgen(module = "/build/mwc-list-item.js")]
10extern "C" {
11    #[derive(Debug)]
12    type ListItem;
13
14    #[wasm_bindgen(getter, static_method_of = ListItem)]
15    fn _dummy_loader() -> JsValue;
16}
17
18loader_hack!(ListItem);
19
20/// The `mwc-list-item` Component
21///
22/// [MWC Documentation](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-list-item)
23pub struct MatListItem {
24    node_ref: NodeRef,
25    request_selected_listener: Option<EventListener>,
26}
27
28/// Props for [`MatListItem`]
29///
30/// MWC Documentation [properties](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-list-item-1)
31/// and [events](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/list#mwc-list-item-2)
32#[derive(Debug, Properties, PartialEq, Clone)]
33pub struct ListItemProps {
34    #[prop_or_default]
35    pub value: Option<AttrValue>,
36    #[prop_or_default]
37    pub group: bool,
38    #[prop_or(- 1)]
39    pub tabindex: i32,
40    #[prop_or_default]
41    pub disabled: bool,
42    #[prop_or_default]
43    pub twoline: bool,
44    #[prop_or_default]
45    pub activated: bool,
46    #[prop_or(GraphicType::Null)]
47    pub graphic: GraphicType,
48    #[prop_or_default]
49    pub multiple_graphics: bool,
50    #[prop_or_default]
51    pub has_meta: bool,
52    #[prop_or_default]
53    pub noninteractive: bool,
54    #[prop_or_default]
55    pub selected: bool,
56    /// Binds to `request-selected` event on `mwc-list-item`.
57    #[prop_or_default]
58    pub on_request_selected: Callback<RequestSelectedDetail>,
59    pub children: Children,
60}
61
62impl Component for MatListItem {
63    type Message = ();
64    type Properties = ListItemProps;
65
66    fn create(_: &Context<Self>) -> Self {
67        ListItem::ensure_loaded();
68        Self {
69            node_ref: NodeRef::default(),
70            request_selected_listener: None,
71        }
72    }
73
74    fn view(&self, ctx: &Context<Self>) -> Html {
75        let props = ctx.props();
76        html! {
77             <mwc-list-item
78                 value={props.value.clone()}
79                 group={bool_to_option(props.group)}
80                 tabindex={to_option_string(props.tabindex)}
81                 disabled={props.disabled}
82                 twoline={bool_to_option(props.twoline)}
83                 activated={bool_to_option(props.activated)}
84                 graphic={to_option_string(props.graphic.to_string())}
85                 multipleGraphics={bool_to_option(props.multiple_graphics)}
86                 hasMeta={bool_to_option(props.has_meta)}
87                 noninteractive={bool_to_option(props.noninteractive)}
88                 selected={props.selected}
89                 ref={self.node_ref.clone()}
90             >{props.children.clone()}</mwc-list-item>
91        }
92    }
93
94    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
95        let props = ctx.props();
96        if self.request_selected_listener.is_none() {
97            self.request_selected_listener = Some(request_selected_listener(
98                &self.node_ref,
99                props.on_request_selected.clone(),
100            ));
101        }
102    }
103}
material_yew/list/list_item.rs

material_yew/list/
list_item.rs
