material_yew/
switch.rs

1use gloo::events::EventListener;
2use wasm_bindgen::prelude::*;
3use web_sys::Node;
4use yew::prelude::*;
5
6#[wasm_bindgen(module = "/build/mwc-switch.js")]
7extern "C" {
8    #[derive(Debug)]
9    #[wasm_bindgen(extends = Node)]
10    type Switch;
11
12    #[wasm_bindgen(getter, static_method_of = Switch)]
13    fn _dummy_loader() -> JsValue;
14
15    #[wasm_bindgen(method, getter)]
16    fn checked(this: &Switch) -> bool;
17
18    #[wasm_bindgen(method, setter)]
19    fn set_checked(this: &Switch, value: bool);
20}
21
22loader_hack!(Switch);
23
24/// The `mwc-switch` component
25///
26/// [MWC Documentation](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/switch)
27pub struct MatSwitch {
28    node_ref: NodeRef,
29    change_listener: Option<EventListener>,
30}
31
32/// Props for [`MatSwitch`]
33///
34/// MWC Documentation:
35///
36/// - [Properties](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/switch#propertiesattributes)
37/// - [Events](https://github.com/material-components/material-components-web-components/tree/v0.27.0/packages/switch#events)
38#[derive(Debug, Properties, PartialEq, Clone)]
39pub struct SwitchProps {
40    #[prop_or_default]
41    pub checked: bool,
42    #[prop_or_default]
43    pub disabled: bool,
44    /// Binds to `change` event on `mwc-switch`
45    ///
46    /// See events docs to learn more.
47    #[prop_or_default]
48    pub onchange: Callback<bool>,
49}
50
51impl Component for MatSwitch {
52    type Message = ();
53    type Properties = SwitchProps;
54
55    fn create(_: &Context<Self>) -> Self {
56        Switch::ensure_loaded();
57        Self {
58            node_ref: NodeRef::default(),
59            change_listener: None,
60        }
61    }
62
63    fn view(&self, ctx: &Context<Self>) -> Html {
64        let props = ctx.props();
65        html! {
66               <mwc-switch
67                   disabled={props.disabled}
68                   ref={self.node_ref.clone()}
69               ></mwc-switch>
70        }
71    }
72
73    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
74        let props = ctx.props();
75        let element = self.node_ref.cast::<Switch>().unwrap();
76        element.set_checked(props.checked);
77
78        if self.change_listener.is_none() {
79            let callback = props.onchange.clone();
80            self.change_listener =
81                Some(EventListener::new(&element.clone(), "change", move |_| {
82                    callback.emit(element.checked());
83                }));
84        }
85    }
86}
material_yew/switch.rs

material_yew/
switch.rs
