From 90c98564697f9ab80aa91484217a820d7fbaa56a Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sat, 27 May 2023 23:55:27 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20tabbar=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/src/app.rs                    |  9 +++-
 examples/basic/src/main.rs                   |  1 -
 examples/basic/src/{ => pages}/components.rs |  1 +
 examples/basic/src/pages/mobile.rs           | 10 ++++
 examples/basic/src/pages/mod.rs              |  6 +++
 examples/basic/src/pages/tabbar/mod.rs       | 23 ++++++++
 src/lib.rs                                   |  1 +
 src/mobile/mod.rs                            |  3 ++
 src/mobile/tabbar/mod.rs                     | 55 ++++++++++++++++++++
 src/mobile/tabbar/tabbar-item.css            | 17 ++++++
 src/mobile/tabbar/tabbar.css                 | 10 ++++
 src/mobile/tabbar/tabbar_item.rs             | 42 +++++++++++++++
 12 files changed, 176 insertions(+), 2 deletions(-)
 rename examples/basic/src/{ => pages}/components.rs (95%)
 create mode 100644 examples/basic/src/pages/mobile.rs
 create mode 100644 examples/basic/src/pages/tabbar/mod.rs
 create mode 100644 src/mobile/mod.rs
 create mode 100644 src/mobile/tabbar/mod.rs
 create mode 100644 src/mobile/tabbar/tabbar-item.css
 create mode 100644 src/mobile/tabbar/tabbar.css
 create mode 100644 src/mobile/tabbar/tabbar_item.rs

diff --git a/examples/basic/src/app.rs b/examples/basic/src/app.rs
index 4c7e407..2b47708 100644
--- a/examples/basic/src/app.rs
+++ b/examples/basic/src/app.rs
@@ -1,4 +1,3 @@
-use crate::components::*;
 use crate::pages::*;
 use leptos::*;
 use leptos_router::*;
@@ -26,8 +25,16 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/slider" view=move |cx| view! {cx,
                         <SliderPage />
                     } />
+                    <Route path="/tabbar" view=move |cx| view! {cx,
+                        <MobilePage path="/mobile/tabbar" />
+                    } />
                 </Route>
             </Routes>
+            <Routes base="/mobile".to_string()>
+                <Route path="/tabbar" view=move |cx| view! {cx,
+                    <TabbarPage />
+                } />
+            </Routes>
         </Router>
     }
 }
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index fff11de..b3334f8 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -4,7 +4,6 @@ mod demo_checkbox;
 mod demo_modal;
 mod demo_slider;
 mod pages;
-mod components;
 
 use app::*;
 use leptos::*;
diff --git a/examples/basic/src/components.rs b/examples/basic/src/pages/components.rs
similarity index 95%
rename from examples/basic/src/components.rs
rename to examples/basic/src/pages/components.rs
index 5d7036d..57d856b 100644
--- a/examples/basic/src/components.rs
+++ b/examples/basic/src/pages/components.rs
@@ -35,6 +35,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                 <Menu selected>
                     <MenuItem key="menu" label="menu" />
                     <MenuItem key="slider" label="slider" />
+                    <MenuItem key="tabbar" label="tabbar" />
                 </Menu>
             </aside>
             <main>
diff --git a/examples/basic/src/pages/mobile.rs b/examples/basic/src/pages/mobile.rs
new file mode 100644
index 0000000..ba52df9
--- /dev/null
+++ b/examples/basic/src/pages/mobile.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn MobilePage(cx: Scope, path: &'static str) -> impl IntoView {
+    view! { cx,
+        <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background: #eff2f5">
+            <iframe src=path style="width: 360px; height: 640px; background-color: #fff; border: none; border-radius: 16px; border: 1px solid #e1e1e1"/>
+        </div>
+    }
+}
diff --git a/examples/basic/src/pages/mod.rs b/examples/basic/src/pages/mod.rs
index 39db5b8..8ae8d05 100644
--- a/examples/basic/src/pages/mod.rs
+++ b/examples/basic/src/pages/mod.rs
@@ -1,7 +1,13 @@
+mod components;
 mod home;
 mod menu;
+mod mobile;
 mod slider;
+mod tabbar;
 
+pub use components::*;
 pub use home::*;
 pub use menu::*;
+pub use mobile::*;
 pub use slider::*;
+pub use tabbar::*;
diff --git a/examples/basic/src/pages/tabbar/mod.rs b/examples/basic/src/pages/tabbar/mod.rs
new file mode 100644
index 0000000..4c94bc4
--- /dev/null
+++ b/examples/basic/src/pages/tabbar/mod.rs
@@ -0,0 +1,23 @@
+use leptos::*;
+use melt_ui::mobile::*;
+
+#[component]
+pub fn TabbarPage(cx: Scope) -> impl IntoView {
+    let selected = create_rw_signal(cx, String::from("o"));
+    view! { cx,
+        <div style="height: 100vh; background: #f5f5f5">
+            { move || selected.get() }
+            <Tabbar selected>
+                <TabbarItem name="a">
+                    "and"
+                </TabbarItem>
+                <TabbarItem name="i">
+                    "if"
+                </TabbarItem> 
+                <TabbarItem name="o" icon=leptos_icons::AiIcon::AiCloseOutlined>
+                    "or"
+                </TabbarItem> 
+            </Tabbar>
+        </div>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 4bc7f4a..e51a366 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -4,6 +4,7 @@ mod checkbox;
 mod components;
 mod input;
 mod menu;
+pub mod mobile;
 mod modal;
 mod progress;
 mod slider;
diff --git a/src/mobile/mod.rs b/src/mobile/mod.rs
new file mode 100644
index 0000000..008e1f8
--- /dev/null
+++ b/src/mobile/mod.rs
@@ -0,0 +1,3 @@
+mod tabbar;
+
+pub use tabbar::*;
\ No newline at end of file
diff --git a/src/mobile/tabbar/mod.rs b/src/mobile/tabbar/mod.rs
new file mode 100644
index 0000000..71a2627
--- /dev/null
+++ b/src/mobile/tabbar/mod.rs
@@ -0,0 +1,55 @@
+mod tabbar_item;
+
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+pub use tabbar_item::*;
+
+#[component]
+pub fn Tabbar(
+    cx: Scope,
+    #[prop(into)] selected: RwSignal<String>,
+    children: Children,
+) -> impl IntoView {
+    let class_name = mount_style("tabbar", || {
+        style_sheet_str!("./src/mobile/tabbar/tabbar.css")
+    });
+
+    let tabbar_injection_key = create_rw_signal(cx, TabbarInjectionKey::new(selected.get()));
+    create_effect(cx, move |_| {
+        let selected_key = selected.get();
+        let key = tabbar_injection_key.get_untracked();
+        if selected_key != key.value {
+            tabbar_injection_key.set(TabbarInjectionKey::new(selected_key));
+        }
+    });
+
+    create_effect(cx, move |_| {
+        let selected_key = selected.get_untracked();
+        let key = tabbar_injection_key.get();
+        if selected_key != key.value {
+            selected.set(key.value);
+        }
+    });
+    provide_context(cx, tabbar_injection_key);
+    view! {cx, class=class_name,
+        <div class="melt-tabbar">
+            { children(cx) }
+        </div>
+    }
+}
+
+#[derive(Clone)]
+pub struct TabbarInjectionKey {
+    value: String,
+}
+
+impl TabbarInjectionKey {
+    pub fn new(value: String) -> Self {
+        Self { value }
+    }
+}
+
+pub fn use_tabbar(cx: Scope) -> RwSignal<TabbarInjectionKey> {
+    use_context::<RwSignal<TabbarInjectionKey>>(cx).expect("TabbarInjectionKey not exist")
+}
diff --git a/src/mobile/tabbar/tabbar-item.css b/src/mobile/tabbar/tabbar-item.css
new file mode 100644
index 0000000..39c7200
--- /dev/null
+++ b/src/mobile/tabbar/tabbar-item.css
@@ -0,0 +1,17 @@
+.melt-tabbar-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.melt-tabbar-item--selected {
+    color: var(--font-color-selected)
+}
+
+.melt-tabbar-item__content {
+    font-size: 14px;
+    line-height: 14px;
+}
\ No newline at end of file
diff --git a/src/mobile/tabbar/tabbar.css b/src/mobile/tabbar/tabbar.css
new file mode 100644
index 0000000..e0abe1f
--- /dev/null
+++ b/src/mobile/tabbar/tabbar.css
@@ -0,0 +1,10 @@
+.melt-tabbar {
+    background-color: #fff;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 50px;
+    display: flex;
+    justify-content: space-around;
+}
\ No newline at end of file
diff --git a/src/mobile/tabbar/tabbar_item.rs b/src/mobile/tabbar/tabbar_item.rs
new file mode 100644
index 0000000..18f9a15
--- /dev/null
+++ b/src/mobile/tabbar/tabbar_item.rs
@@ -0,0 +1,42 @@
+use super::{use_tabbar, TabbarInjectionKey};
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use leptos::*;
+use stylers::style_sheet_str;
+use crate::components::*;
+use leptos_icons::*;
+
+#[component]
+pub fn TabbarItem(
+    cx: Scope,
+    #[prop(into)] name: MaybeSignal<&'static str>,
+    #[prop(optional, into)] icon: Option<IconData>,
+    children: Children,
+) -> impl IntoView {
+    let class_name = mount_style("tabbar-item", || style_sheet_str!("./src/mobile/tabbar/tabbar-item.css"));
+    let theme = use_theme(cx, Theme::light);
+    let tabbar = use_tabbar(cx);
+    let onclick_select = move |_| {
+        tabbar.set(TabbarInjectionKey::new(name.get().to_string()));
+    };
+
+    let css_vars = create_memo(cx, move |_| {
+        let mut css_vars = String::new();
+        let theme = theme.get();
+        let font_color = theme.common.color_primary.clone();
+        css_vars.push_str(&format!("--font-color-selected: {font_color};"));
+        css_vars
+    });
+
+    view! {cx, class=class_name,
+        <div class="melt-tabbar-item" class=("melt-tabbar-item--selected", move || tabbar.get().value == name.get()) on:click=onclick_select style=move || css_vars.get()>
+            <OptionComp value=icon view=move |cx, icon| {
+                view!{cx,
+                    <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
+                }
+            }/>
+            <div class="melt-tabbar-item__content">
+                { children(cx) }
+            </div>
+        </div>
+    }
+}