From ae9a39c81f0f8fe0b09e3ff8ba38b954415703db Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Wed, 24 May 2023 23:51:09 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20menu=20selected?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/Cargo.toml            |  4 +++-
 examples/basic/src/components.rs     | 30 +++++++++++++++++++++------
 examples/basic/src/pages/menu/mod.rs | 11 ++++++----
 src/menu/menu_item.rs                |  4 ++--
 src/menu/mod.rs                      | 31 ++++++++++++++++------------
 5 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
index 2df6778..26da600 100644
--- a/examples/basic/Cargo.toml
+++ b/examples/basic/Cargo.toml
@@ -9,4 +9,6 @@ edition = "2021"
 leptos = { version = "0.3.0", features = ["stable"] }
 melt-ui = { path = "../../" }
 leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
-leptos_router = { version = "0.3.0", features = ["csr"] }
\ No newline at end of file
+leptos_router = { version = "0.3.0", features = ["csr"] }
+
+regex = "1.8.2"
\ No newline at end of file
diff --git a/examples/basic/src/components.rs b/examples/basic/src/components.rs
index ca782cb..5d7036d 100644
--- a/examples/basic/src/components.rs
+++ b/examples/basic/src/components.rs
@@ -1,21 +1,39 @@
 use leptos::*;
-use leptos_router::{Outlet, use_route, use_router};
+use leptos_router::{use_location, Outlet, use_navigate};
 use melt_ui::*;
+use regex::Regex;
 
 #[component]
 pub fn ComponentsPage(cx: Scope) -> impl IntoView {
-    let router = use_router(cx);
-    let route = use_route(cx);
+    let loaction = use_location(cx);
+    let navigate = use_navigate(cx);
     let selected = create_rw_signal(cx, String::from(""));
     create_effect(cx, move |_| {
-        let path = route.original_path();
-        let path2 = route.path();
-        log!("{:?} {}", path, path2);
+        let pathname = loaction.pathname.get();
+
+        let re = Regex::new(r"^/components/(.+)$").unwrap();
+        let Some(caps) = re.captures(&pathname) else {
+            return;
+        };
+        let Some(path) = caps.get(1) else {
+            return;
+        };
+        let path = path.as_str().to_string();
+        selected.set(path);
+    });
+
+    create_effect(cx, move |value| {
+        let selected = selected.get();
+        if value.is_some() {
+            _ = navigate(&format!("/components/{selected}"), Default::default());
+        }
+        selected
     });
     view! {cx,
         <div class="components-page-box">
             <aside>
                 <Menu selected>
+                    <MenuItem key="menu" label="menu" />
                     <MenuItem key="slider" label="slider" />
                 </Menu>
             </aside>
diff --git a/examples/basic/src/pages/menu/mod.rs b/examples/basic/src/pages/menu/mod.rs
index 9a8a7e2..2e13f97 100644
--- a/examples/basic/src/pages/menu/mod.rs
+++ b/examples/basic/src/pages/menu/mod.rs
@@ -5,9 +5,12 @@ use melt_ui::*;
 pub fn MenuPage(cx: Scope) -> impl IntoView {
     let selected = create_rw_signal(cx, String::from("o"));
     view! { cx,
-        <Menu selected>
-            <MenuItem key="a" label="and"/>
-            <MenuItem key="o" label="or"/>
-        </Menu>
+        <>
+            { move || selected.get() }
+            <Menu selected>
+                <MenuItem key="a" label="and"/>
+                <MenuItem key="o" label="or"/>
+            </Menu>
+        </>
     }
 }
diff --git a/src/menu/menu_item.rs b/src/menu/menu_item.rs
index 84735a2..1059ec1 100644
--- a/src/menu/menu_item.rs
+++ b/src/menu/menu_item.rs
@@ -13,7 +13,7 @@ pub fn MenuItem(
     let theme = use_theme(cx, Theme::light);
     let menu = use_menu(cx);
     let onclick_select = move |_| {
-        menu.set(MenuInjectionKey::from_string(cx, key.get().to_string()));
+        menu.set(MenuInjectionKey::new(key.get().to_string()));
     };
 
     let css_vars = create_memo(cx, move |_| {
@@ -28,7 +28,7 @@ pub fn MenuItem(
     });
     view! {cx, class=class_name,
         <div class="melt-menu-item">
-            <div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value() == key.get()) on:click=onclick_select style=move || css_vars.get()>
+            <div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value == key.get()) on:click=onclick_select style=move || css_vars.get()>
                 { move || label.get() }
             </div>
         </div>
diff --git a/src/menu/mod.rs b/src/menu/mod.rs
index e0f77f6..fc1608c 100644
--- a/src/menu/mod.rs
+++ b/src/menu/mod.rs
@@ -9,7 +9,22 @@ pub fn Menu(
     #[prop(into)] selected: RwSignal<String>,
     children: Children,
 ) -> impl IntoView {
-    let menu_injection_key = create_rw_signal(cx, MenuInjectionKey::new(selected));
+    let menu_injection_key = create_rw_signal(cx, MenuInjectionKey::new(selected.get()));
+    create_effect(cx, move |_| {
+        let selected_key = selected.get();
+        let key = menu_injection_key.get_untracked();
+        if selected_key != key.value {
+            menu_injection_key.set(MenuInjectionKey::new(selected_key));
+        }
+    });
+
+    create_effect(cx, move |_| {
+        let selected_key = selected.get_untracked();
+        let key = menu_injection_key.get();
+        if selected_key != key.value {
+            selected.set(key.value);
+        }
+    });
     provide_context(cx, menu_injection_key);
     view! {cx,
         <div class="melt-menu">
@@ -20,24 +35,14 @@ pub fn Menu(
 
 #[derive(Clone)]
 pub struct MenuInjectionKey {
-    value: RwSignal<String>,
+    value: String,
 }
 
 
 impl MenuInjectionKey {
-    pub fn new(value: RwSignal<String>) -> Self {
+    pub fn new(value: String) -> Self {
         Self { value }
     }
-
-    pub fn from_string(cx: Scope, value: String) -> Self {
-        Self {
-            value: create_rw_signal(cx, value),
-        }
-    }
-
-    pub fn value(&self) -> String {
-        self.value.get()
-    }
 }
 
 pub fn use_menu(cx: Scope) -> RwSignal<MenuInjectionKey> {