From 5fa0929cbf8075b35c084c18c4af110a2c279b6f Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Tue, 12 Dec 2023 20:44:37 +0800
Subject: [PATCH] fix: class overwrites class when updating signal values 
 (#46)

* fix: class overwrites class when updating signal values

* fix:  class rendering of ssr mode
---
 src/alert/mod.rs         | 15 ++++++++++++---
 src/auto_complete/mod.rs |  6 +++---
 src/avatar/mod.rs        | 12 ++++++++++--
 src/button/mod.rs        | 10 +++++++---
 src/time_picker/mod.rs   |  1 +
 src/utils/dyn_classes.rs | 37 +++++++++++++++++++++++++++++++++++++
 src/utils/mod.rs         |  2 ++
 7 files changed, 72 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/dyn_classes.rs

diff --git a/src/alert/mod.rs b/src/alert/mod.rs
index 04f02b6..4052d0c 100644
--- a/src/alert/mod.rs
+++ b/src/alert/mod.rs
@@ -1,6 +1,12 @@
 mod theme;
 
-use crate::{theme::use_theme, utils::mount_style, Icon, Theme};
+#[cfg(not(feature = "ssr"))]
+use crate::utils::dyn_classes;
+use crate::{
+    theme::use_theme,
+    utils::{mount_style, ssr_class},
+    Icon, Theme,
+};
 use icondata::AiIcon;
 use leptos::*;
 pub use theme::AlertTheme;
@@ -79,9 +85,12 @@ pub fn Alert(
         }
         .into()
     });
+
+    let ssr_class = ssr_class(&class);
     view! {
-        <div 
-            class=move || class.get()
+        <div
+            class=ssr_class
+            use:dyn_classes=class
             class:thaw-alert=true
             style=move || css_vars.get()>
             <Icon icon class="thaw-alert__icon"/>
diff --git a/src/auto_complete/mod.rs b/src/auto_complete/mod.rs
index ce0c075..3faf235 100644
--- a/src/auto_complete/mod.rs
+++ b/src/auto_complete/mod.rs
@@ -1,5 +1,6 @@
 mod theme;
 
+use crate::utils::{dyn_classes, ssr_class};
 use crate::{
     components::{Binder, Follower, FollowerPlacement, FollowerWidth},
     use_theme,
@@ -108,9 +109,10 @@ pub fn AutoComplete(
         }
     };
 
+    let ssr_class = ssr_class(&class);
     view! {
         <Binder target_ref=auto_complete_ref>
-            <div class=move || class.get() class:thaw-auto-complete=true ref=auto_complete_ref on:keydown=on_keydown>
+            <div class=ssr_class use:dyn_classes=class class:thaw-auto-complete=true ref=auto_complete_ref on:keydown=on_keydown>
                 <Input
                     value
                     placeholder
@@ -194,5 +196,3 @@ pub fn AutoComplete(
         </Binder>
     }
 }
-
-
diff --git a/src/avatar/mod.rs b/src/avatar/mod.rs
index e507b3b..aa18973 100644
--- a/src/avatar/mod.rs
+++ b/src/avatar/mod.rs
@@ -1,6 +1,12 @@
 mod theme;
 
-use crate::{use_theme, utils::mount_style, Theme};
+#[cfg(not(feature = "ssr"))]
+use crate::utils::dyn_classes;
+use crate::{
+    use_theme,
+    utils::{mount_style, ssr_class},
+    Theme,
+};
 use leptos::*;
 pub use theme::AvatarTheme;
 
@@ -28,8 +34,10 @@ pub fn Avatar(
         css_vars
     });
     mount_style("avatar", include_str!("./avatar.css"));
+
+    let ssr_class = ssr_class(&class);
     view! {
-        <span class=move || class.get() class:thaw-avatar=true style=move || css_vars.get()>
+        <span class=ssr_class use:dyn_classes=class class:thaw-avatar=true style=move || css_vars.get()>
             {move || {
                 let src = src.get();
                 (!src.is_empty()).then(|| view! { <img src=src/> })
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 846329c..c1c763b 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -1,11 +1,13 @@
 mod button_group;
 mod theme;
 
+#[cfg(not(feature = "ssr"))]
+use crate::utils::dyn_classes;
 use crate::{
     components::{OptionComp, Wave, WaveRef},
     icon::*,
     theme::*,
-    utils::{mount_style, ComponentRef},
+    utils::{mount_style, ssr_class, ComponentRef},
 };
 pub use button_group::ButtonGroup;
 use leptos::*;
@@ -219,10 +221,12 @@ pub fn Button(
         };
         callback.call(event);
     };
-
+    
+    let ssr_class = ssr_class(&class);
     view! {
         <button
-            class=move || class.get()
+            class=ssr_class
+            use:dyn_classes=class
             class:thaw-button=true
             class=("thaw-button--solid", move || variant.get() == ButtonVariant::Solid)
             class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)
diff --git a/src/time_picker/mod.rs b/src/time_picker/mod.rs
index d72ac3e..5468560 100644
--- a/src/time_picker/mod.rs
+++ b/src/time_picker/mod.rs
@@ -158,6 +158,7 @@ fn Panel(
     #[cfg(not(any(feature = "csr", feature = "hydrate")))]
     {
         _ = time_picker_ref;
+        _ = panel_ref;
     }
 
     let hour_ref = create_node_ref::<html::Div>();
diff --git a/src/utils/dyn_classes.rs b/src/utils/dyn_classes.rs
new file mode 100644
index 0000000..c76b7a7
--- /dev/null
+++ b/src/utils/dyn_classes.rs
@@ -0,0 +1,37 @@
+use cfg_if::cfg_if;
+use leptos::{html::AnyElement, HtmlElement, MaybeSignal};
+
+pub fn dyn_classes(el: HtmlElement<AnyElement>, classes_signal: MaybeSignal<String>) {
+    cfg_if! {
+        if #[cfg(feature = "ssr")] {
+            let _ = el;
+            let _ = classes_signal;
+        } else {
+            use leptos::SignalGet;
+            let _ = el.dyn_classes(move || {
+                let classes = classes_signal.get();
+                if classes.is_empty() {
+                    return vec![];
+                }
+                classes
+                    .split_ascii_whitespace()
+                    .map(|class| class.to_string())
+                    .collect::<Vec<String>>()
+            });
+        }
+    };
+}
+
+pub fn ssr_class(class: &MaybeSignal<String>) -> String {
+    let ssr_class;
+    cfg_if! {
+        if #[cfg(feature = "ssr")] {
+            use leptos::SignalGetUntracked;
+            ssr_class = class.get_untracked();
+        } else {
+            let _ = class;
+            ssr_class = String::new();
+        }
+    };
+    ssr_class
+}
diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index ed5b257..c01e152 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -1,5 +1,6 @@
 // mod callback;
 mod component_ref;
+mod dyn_classes;
 mod event_listener;
 mod mount_style;
 mod signal;
@@ -7,6 +8,7 @@ mod stored_maybe_signal;
 
 // pub use callback::AsyncCallback;
 pub(crate) use component_ref::ComponentRef;
+pub(crate) use dyn_classes::*;
 pub(crate) use event_listener::*;
 pub(crate) use mount_style::mount_style;
 pub use signal::SignalWatch;