From 95dcd6f992420c19823eb228adf28a5feefe976d Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 9 Oct 2023 10:28:22 +0800
Subject: [PATCH] feat: NavBar component click prop

---
 gh-pages/src/pages/nav_bar/mod.rs | 35 ++++++++++++++++++-------------
 src/mobile/nav_bar/mod.rs         | 17 +++++++--------
 src/slider/mod.rs                 |  5 ++---
 src/tabs/mod.rs                   | 10 ++++-----
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/gh-pages/src/pages/nav_bar/mod.rs b/gh-pages/src/pages/nav_bar/mod.rs
index 3eee9fb..cc1c9cf 100644
--- a/gh-pages/src/pages/nav_bar/mod.rs
+++ b/gh-pages/src/pages/nav_bar/mod.rs
@@ -18,14 +18,23 @@ pub fn NavBarPage() -> impl IntoView {
                         slot
                         html=highlight_str!(
                             r#"
-                        <NavBar 
-                            title="Home" 
-                            left_arrow=true 
-                            left_text="back" 
-                            right_text="add" 
-                            click_left=click_left 
-                            click_right=click_right
-                        />
+                            let click_text = create_rw_signal(String::from("none"));
+                            let on_click_left = move |_| click_text.set("left".to_string());
+                            let on_click_right = move |_| click_text.set("right".to_string());
+                        
+                            view! {
+                                <div style="height: 100vh; background: #f5f5f5">
+                                    <NavBar
+                                        title="Home"
+                                        left_arrow=true
+                                        left_text="back"
+                                        right_text="add"
+                                        click_left=on_click_left
+                                        click_right=on_click_right
+                                    />
+                                    <div style="padding-top: 50px">{move || click_text.get()}</div>
+                                </div>
+                            }
                     "#,
                             "rust"
                         )
@@ -45,10 +54,8 @@ pub fn NavBarPage() -> impl IntoView {
 #[component]
 pub fn NavBarDemoPage() -> impl IntoView {
     let click_text = create_rw_signal(String::from("none"));
-
-    let click_left = SignalSetter::map(move |_| click_text.set("left".to_string()));
-
-    let click_right = SignalSetter::map(move |_| click_text.set("right".to_string()));
+    let on_click_left = move |_| click_text.set("left".to_string());
+    let on_click_right = move |_| click_text.set("right".to_string());
 
     view! {
         <div style="height: 100vh; background: #f5f5f5">
@@ -57,8 +64,8 @@ pub fn NavBarDemoPage() -> impl IntoView {
                 left_arrow=true
                 left_text="back"
                 right_text="add"
-                click_left=click_left
-                click_right=click_right
+                click_left=on_click_left
+                click_right=on_click_right
             />
             <div style="padding-top: 50px">{move || click_text.get()}</div>
         </div>
diff --git a/src/mobile/nav_bar/mod.rs b/src/mobile/nav_bar/mod.rs
index 3dfbcdf..dd60b4e 100644
--- a/src/mobile/nav_bar/mod.rs
+++ b/src/mobile/nav_bar/mod.rs
@@ -1,26 +1,25 @@
 use crate::{components::*, icon::*, utils::mount_style::mount_style};
 use leptos::*;
-use web_sys::MouseEvent;
 
 #[component]
 pub fn NavBar(
     #[prop(optional, into)] title: MaybeSignal<&'static str>,
     #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
     #[prop(optional, into)] left_text: MaybeSignal<&'static str>,
-    #[prop(optional, into)] click_left: Option<SignalSetter<MouseEvent>>,
+    #[prop(optional, into)] click_left: Option<Callback<ev::MouseEvent>>,
     #[prop(optional, into)] right_text: MaybeSignal<&'static str>,
-    #[prop(optional, into)] click_right: Option<SignalSetter<MouseEvent>>,
+    #[prop(optional, into)] click_right: Option<Callback<ev::MouseEvent>>,
 ) -> impl IntoView {
     mount_style("nav-bar", include_str!("./nav-bar.css"));
 
-    let onclick_left = move |ev| {
+    let on_click_left = move |ev| {
         if let Some(click_left) = click_left {
-            click_left.set(ev);
+            click_left.call(ev);
         }
     };
-    let onclick_right = move |ev| {
+    let on_click_right = move |ev| {
         if let Some(click_right) = click_right {
-            click_right.set(ev);
+            click_right.call(ev);
         }
     };
 
@@ -28,7 +27,7 @@ pub fn NavBar(
         <div class="melt-nav-bar">
             <If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
                 <Then slot>
-                    <div class="melt-nav-bar__left" on:click=onclick_left>
+                    <div class="melt-nav-bar__left" on:click=on_click_left>
                         <If cond=left_arrow>
                             <Then slot>
                                 <Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
@@ -41,7 +40,7 @@ pub fn NavBar(
             <div class="melt-nav-bar__center">{move || title.get()}</div>
             <If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
                 <Then slot>
-                    <div class="melt-nav-bar__right" on:click=onclick_right>
+                    <div class="melt-nav-bar__right" on:click=on_click_right>
                         {right_text.get()}
                     </div>
                 </Then>
diff --git a/src/slider/mod.rs b/src/slider/mod.rs
index 89da2e4..56d14dc 100644
--- a/src/slider/mod.rs
+++ b/src/slider/mod.rs
@@ -78,9 +78,8 @@ pub fn Slider(
                 class="melt-slider-handle"
                 style=move || {
                     format!(
-                        "left: {}%; transform: translateX(-{}%)",
-                        percentage.get(),
-                        percentage.get(),
+                        "left: {}%; transform: translateX(-{}%)", percentage.get(), percentage
+                        .get(),
                     )
                 }
             >
diff --git a/src/tabs/mod.rs b/src/tabs/mod.rs
index 6a7abde..2a6af9b 100644
--- a/src/tabs/mod.rs
+++ b/src/tabs/mod.rs
@@ -42,12 +42,10 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
                     children=move |options| {
                         let label_ref = create_node_ref::<html::Span>();
                         create_effect(move |_| {
-                            let Some(label) = label_ref.get() else {
-                                return;
-                            };
-                            let Some(label_list) = label_list_ref.get() else {
-                                return;
-                            };
+                            let Some(label) = label_ref.get() else { return;
+                        };
+                            let Some(label_list) = label_list_ref.get() else { return;
+                        };
                             if options.key == active_key.get() {
                                 request_animation_frame(move || {
                                     let list_rect = label_list.get_bounding_client_rect();