Skip to content

Commit 3266ac7

Browse files
authored
feat: Switch adds on_change prop (#196)
1 parent ab3ea81 commit 3266ac7

File tree

2 files changed

+24
-6
lines changed

2 files changed

+24
-6
lines changed

demo_markdown/docs/switch/mod.md

+15-5
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,24 @@
33
```rust demo
44
let value = create_rw_signal(false);
55

6+
let message = use_message();
7+
let on_change = move |value: bool| {
8+
message.create(
9+
format!("{value}"),
10+
MessageVariant::Success,
11+
Default::default(),
12+
);
13+
};
14+
615
view! {
7-
<Switch value />
16+
<Switch value on_change/>
817
}
918
```
1019

1120
### Switch Props
1221

13-
| Name | Type | Default | Description |
14-
| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
15-
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the switch element. |
16-
| value | `Model<bool>` | `false` | Switch's value. |
22+
| Name | Type | Default | Description |
23+
| --------- | ----------------------------------- | -------------------- | ------------------------------------------- |
24+
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the switch element. |
25+
| value | `Model<bool>` | `false` | Switch's value. |
26+
| on_change | `Option<Callback>` | `None` | Trigger when the checked state is changing. |

thaw/src/switch/mod.rs

+9-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ use thaw_utils::{class_list, mount_style, Model, OptionalProp};
99
#[component]
1010
pub fn Switch(
1111
#[prop(optional, into)] value: Model<bool>,
12+
#[prop(optional, into)] on_change: Option<Callback<bool>>,
1213
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
1314
) -> impl IntoView {
1415
mount_style("switch", include_str!("./switch.css"));
@@ -27,6 +28,13 @@ pub fn Switch(
2728
});
2829
css_vars
2930
});
31+
let on_click = move |_| {
32+
let new_value = !value.get_untracked();
33+
value.set(new_value);
34+
if let Some(on_change) = on_change {
35+
on_change.call(new_value);
36+
}
37+
};
3038

3139
view! {
3240
<div
@@ -36,7 +44,7 @@ pub fn Switch(
3644
]
3745

3846
style=move || css_vars.get()
39-
on:click=move |_| value.set(!value.get_untracked())
47+
on:click=on_click
4048
role="switch"
4149
aria-checked=move || if value.get() { "true" } else { "false" }
4250
>

0 commit comments

Comments
 (0)