use super::*;
#[component]
pub fn euv_switch(node: VirtualNode<EuvSwitchProps>) -> VirtualNode {
let EuvSwitchProps {
id,
name,
checked,
label: label_text,
disabled,
}: EuvSwitchProps = node.try_get_props().unwrap_or_default();
let state: EuvSwitchState = use_euv_switch_state(checked);
let handler: Option<Rc<dyn Fn(Event)>> = state.on_toggle(disabled);
html! {
div {
class: c_form_switch_row()
button {
id: id
name: name
type: INPUT_TYPE_BUTTON
role: ROLE_SWITCH
aria-checked: checked
disabled: disabled
class: if { checked } {
c_form_switch_on()
} else {
c_form_switch()
}
onclick: handler
span {
class: c_form_switch_track()
span {
class: c_form_switch_thumb()
}
}
}
label {
for: id
class: c_form_switch_label()
label_text
}
}
}
}
pub fn use_euv_switch_state(checked: Signal<bool>) -> EuvSwitchState {
HookContext::use_hook(move || EuvSwitchState::new(checked))
}