From 9d824b267632ee392d971946abd69087637ac667 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 5 Oct 2023 11:06:43 +0800
Subject: [PATCH] feat: add button component loading prop

---
 Cargo.toml                       |  3 ++-
 gh-pages/src/pages/button/mod.rs | 30 ++++++++++++++++++++++++++++++
 src/button/button.css            |  6 ++++++
 src/button/mod.rs                | 21 +++++++++++++++++----
 4 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 8b27b9f..d7ea510 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -13,7 +13,7 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.0",  features = ["csr"] }
+leptos = { version = "0.5.0", features = ["csr"] }
 stylers = "0.3.2"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 leptos_dom = { version = "0.5.0" }
@@ -22,6 +22,7 @@ icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
     "AiLeftOutlined",
+    "AiLoadingOutlined",
 ] }
 
 [workspace]
diff --git a/gh-pages/src/pages/button/mod.rs b/gh-pages/src/pages/button/mod.rs
index aed47be..1a6bdac 100644
--- a/gh-pages/src/pages/button/mod.rs
+++ b/gh-pages/src/pages/button/mod.rs
@@ -92,6 +92,7 @@ pub fn ButtonPage() -> impl IntoView {
                     ""
                 </DemoCode>
             </Demo>
+            <LoadingButton />
             <h3>"style"</h3>
             <Demo>
                 <Space>
@@ -108,3 +109,32 @@ pub fn ButtonPage() -> impl IntoView {
         </div>
     }
 }
+
+#[component]
+pub fn LoadingButton() -> impl IntoView {
+    let loading = create_rw_signal(false);
+    view! {
+        <h3>"loading"</h3>
+        <Demo>
+            <Space>
+                <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined on:click=move |_| loading.set(true)>
+                    "ERROR Color Icon"
+                </Button>
+                <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                </Button>
+            </Space>
+            <DemoCode slot html=highlight_str!(r#"
+                let loading = create_rw_signal(false);
+                view! {
+                    <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
+                        "ERROR Color Icon"
+                    </Button>
+                    <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                    </Button>
+                }
+            "#, "rust")>
+                ""
+            </DemoCode>
+        </Demo>
+    }
+}
diff --git a/src/button/button.css b/src/button/button.css
index eeec107..f0691b3 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -43,3 +43,9 @@
     padding: 0 10px;
     border-radius: 50%;
 }
+
+@keyframes meltLoadingCircle {
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 52acc24..c6f976e 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -57,6 +57,7 @@ pub fn Button(
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(optional, into)] icon: Option<Icon>,
+    #[prop(optional, into)] loading: MaybeSignal<bool>,
     #[prop(optional)] children: Option<ChildrenFn>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -89,7 +90,7 @@ pub fn Button(
         ""
     };
 
-    view! { class=class_name,
+    view! {class=class_name,
         <button
             class:melt-button=true
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
@@ -97,9 +98,21 @@ pub fn Button(
             class=("melt-button--round", move || round.get())
             style=move || format!("{}{}", css_vars.get(), style.get())
             >
-                <OptionComp value=icon let:icon>
-                    <Icon icon=icon style=icon_style/>
-                </OptionComp>
+                {
+                    move || {
+                        if loading.get() {
+                            view! {
+                                <Icon icon=Icon::from(AiIcon::AiLoadingOutlined) style=format!("animation: meltLoadingCircle 1s infinite linear;{icon_style}")/>
+                            }.into()
+                        } else if let Some(icon) = icon {
+                            view! {
+                                <Icon icon=icon style=icon_style/>
+                            }.into()
+                        } else {
+                            None
+                        }
+                    }
+                }
                 <OptionComp value=children let:children>
                     { children() }
                 </OptionComp>