From 3266ac7068fbe7f078013c5ed3df5527ee5147a6 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Mon, 20 May 2024 14:19:48 +0800
Subject: [PATCH] feat: Switch adds on_change prop (#196)

---
 demo_markdown/docs/switch/mod.md | 20 +++++++++++++++-----
 thaw/src/switch/mod.rs           | 10 +++++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/demo_markdown/docs/switch/mod.md b/demo_markdown/docs/switch/mod.md
index 399d681..b7e0307 100644
--- a/demo_markdown/docs/switch/mod.md
+++ b/demo_markdown/docs/switch/mod.md
@@ -3,14 +3,24 @@
 ```rust demo
 let value = create_rw_signal(false);
 
+let message = use_message();
+let on_change = move |value: bool| {
+    message.create(
+        format!("{value}"),
+        MessageVariant::Success,
+        Default::default(),
+    );
+};
+
 view! {
-    <Switch value />
+    <Switch value on_change/>
 }
 ```
 
 ### Switch Props
 
-| Name  | Type                                | Default              | Description                               |
-| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the switch element. |
-| value | `Model<bool>`                       | `false`              | Switch's value.                           |
+| Name      | Type                                | Default              | Description                                 |
+| --------- | ----------------------------------- | -------------------- | ------------------------------------------- |
+| class     | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the switch element.   |
+| value     | `Model<bool>`                       | `false`              | Switch's value.                             |
+| on_change | `Option<Callback>`                  | `None`               | Trigger when the checked state is changing. |
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index cee6148..7e51e6d 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -9,6 +9,7 @@ use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 #[component]
 pub fn Switch(
     #[prop(optional, into)] value: Model<bool>,
+    #[prop(optional, into)] on_change: Option<Callback<bool>>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
 ) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
@@ -27,6 +28,13 @@ pub fn Switch(
         });
         css_vars
     });
+    let on_click = move |_| {
+        let new_value = !value.get_untracked();
+        value.set(new_value);
+        if let Some(on_change) = on_change {
+            on_change.call(new_value);
+        }
+    };
 
     view! {
         <div
@@ -36,7 +44,7 @@ pub fn Switch(
             ]
 
             style=move || css_vars.get()
-            on:click=move |_| value.set(!value.get_untracked())
+            on:click=on_click
             role="switch"
             aria-checked=move || if value.get() { "true" } else { "false" }
         >