From 87cd362217c649c6e9a6c426b59ee35218e67e28 Mon Sep 17 00:00:00 2001
From: Cristobal Andrada <kandrelczyk@gmail.com>
Date: Thu, 11 Jan 2024 22:30:55 +0100
Subject: [PATCH] checkbox group reacts to change in initial vlue

---
 thaw/src/checkbox/checkbox_item.rs |  9 +++++++--
 thaw/src/checkbox/mod.rs           | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/thaw/src/checkbox/checkbox_item.rs b/thaw/src/checkbox/checkbox_item.rs
index cd49a2c3..486a38d3 100644
--- a/thaw/src/checkbox/checkbox_item.rs
+++ b/thaw/src/checkbox/checkbox_item.rs
@@ -14,9 +14,15 @@ pub fn CheckboxItem(
     let checked = checkbox_group
         .0
         .with_untracked(|checkbox_group| checkbox_group.contains(&key));
+
     let checked = create_rw_signal(checked);
+    let initial = create_rw_signal(false);
     let item_key = store_value(key);
 
+    create_effect(move |_| {
+        initial.set(checkbox_group.0.get().contains(&item_key.get_value()));
+    });
+
     _ = checked.watch(move |checked| {
         checkbox_group.0.update(move |checkbox_group| {
             if *checked {
@@ -32,9 +38,8 @@ pub fn CheckboxItem(
     } else {
         item_key.get_value()
     };
-
     view! {
-        <Checkbox class value=checked>
+        <Checkbox class value=checked initial>
             {label}
         </Checkbox>
     }
diff --git a/thaw/src/checkbox/mod.rs b/thaw/src/checkbox/mod.rs
index c19984ac..f92e7d8a 100644
--- a/thaw/src/checkbox/mod.rs
+++ b/thaw/src/checkbox/mod.rs
@@ -16,6 +16,7 @@ use leptos::*;
 #[component]
 pub fn Checkbox(
     #[prop(optional, into)] value: RwSignal<bool>,
+    #[prop(optional, into)] initial: RwSignal<bool>,
     #[prop(optional, into)] class: MaybeSignal<String>,
     children: Children,
 ) -> impl IntoView {
@@ -33,19 +34,28 @@ pub fn Checkbox(
         css_vars
     });
 
+    let is_checked = Signal::derive(move || value.get() || initial.get());
+
     view! {
         <div
             class=class_list![
-                "thaw-checkbox", ("thaw-checkbox--checked", move || value.get()), move || class
+                "thaw-checkbox", ("thaw-checkbox--checked", move || value.get() || initial.get()), move || class
                 .get()
             ]
 
             style=move || css_vars.get()
-            on:click=move |_| value.set(!value.get_untracked())
+            on:click=move |_| {
+                if initial.get() {
+                    value.set(false);
+                } else {
+                    value.set(!value.get_untracked())
+                }
+                initial.set(false); 
+            }
         >
             <input class="thaw-checkbox__input" type="checkbox"/>
             <div class="thaw-checkbox__dot">
-                <If cond=value>
+                <If cond=is_checked>
                     <Then slot>
                         <Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
                     </Then>