From cb37d9cfe9a60c020557572ee42ab75250c719e9 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Thu, 23 May 2024 23:06:01 +0800
Subject: [PATCH] feat: MenuItem adds icon prop (#200)

---
 demo_markdown/docs/menu/mod.md | 17 +++++++++++------
 thaw/src/menu/menu-item.css    |  2 ++
 thaw/src/menu/menu_item.rs     | 15 +++++++++++++--
 thaw/src/select/raw.rs         |  4 ++++
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/demo_markdown/docs/menu/mod.md b/demo_markdown/docs/menu/mod.md
index ea2ef07..b8e2768 100644
--- a/demo_markdown/docs/menu/mod.md
+++ b/demo_markdown/docs/menu/mod.md
@@ -5,8 +5,12 @@ let value = create_rw_signal(String::from("o"));
 
 view! {
     <Menu value>
-        <MenuItem key="a" label="and"/>
-        <MenuItem key="o" label="or"/>
+        <MenuItem key="a" label="And"/>
+        <MenuItem key="o" label="Or"/>
+        <MenuItem icon=icondata::AiAreaChartOutlined key="area" label="Area Chart"/>
+        <MenuItem icon=icondata::AiPieChartOutlined key="pie" label="Pie Chart"/>
+        <MenuItem icon=icondata::AiGithubOutlined key="github" label="Github"/>
+        <MenuItem icon=icondata::AiChromeOutlined key="chrome" label="Chrome"/>
     </Menu>
 }
 ```
@@ -29,8 +33,9 @@ view! {
 
 ### MenuItem Props
 
-| Name  | Type                                | Default              | Description                                  |
-| ----- | ----------------------------------- | -------------------- | -------------------------------------------- |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
 | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. |
-| label | `MaybeSignal<String>`               | `Default::default()` | The label of the menu item.                  |
-| key   | `MaybeSignal<String>`               | `Default::default()` | The indentifier of the menu item.            |
+| label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. |
+| key | `MaybeSignal<String>` | `Default::default()` | The indentifier of the menu item. |
+| icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the menu item. |
diff --git a/thaw/src/menu/menu-item.css b/thaw/src/menu/menu-item.css
index 7a8772a..29b9e72 100644
--- a/thaw/src/menu/menu-item.css
+++ b/thaw/src/menu/menu-item.css
@@ -1,4 +1,6 @@
 .thaw-menu-item__content {
+    display: flex;
+    align-items: center;
     margin: 0.3rem 0.4rem;
     padding: 0.5rem 0.75rem;
     color: var(--thaw-font-color);
diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs
index f72fe16..168a8ca 100644
--- a/thaw/src/menu/menu_item.rs
+++ b/thaw/src/menu/menu_item.rs
@@ -1,11 +1,13 @@
 use super::use_menu;
-use crate::{theme::use_theme, Theme};
+use crate::{theme::use_theme, Icon, Theme};
 use leptos::*;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_components::OptionComp;
+use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
 
 #[component]
 pub fn MenuItem(
     #[prop(into)] key: MaybeSignal<String>,
+    #[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
     #[prop(into)] label: MaybeSignal<String>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
 ) -> impl IntoView {
@@ -46,6 +48,15 @@ pub fn MenuItem(
                 on:click=on_click
                 style=move || css_vars.get()
             >
+                {
+                    move || {
+                        view! {
+                            <OptionComp value=icon.get() let:icon>
+                                <Icon icon=icon style="font-size: 18px;margin-right: 8px"/>
+                            </OptionComp>
+                        }
+                    }
+                }
                 {move || label.get()}
             </div>
         </div>
diff --git a/thaw/src/select/raw.rs b/thaw/src/select/raw.rs
index 7099f57..8ed87e4 100644
--- a/thaw/src/select/raw.rs
+++ b/thaw/src/select/raw.rs
@@ -50,6 +50,10 @@ where
         });
         on_cleanup(move || listener.remove());
     }
+    #[cfg(not(any(feature = "csr", feature = "hydrate")))]
+    {
+        let _ = hide_menu;
+    }
 
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {