Merge pull request #23 from thaw-ui/docs/theme

fix: provide context

demo/src/app.rs

@@ -6,42 +6,33 @@ use thaw::*;
 
 #[component]
 pub fn App() -> impl IntoView {
-    fn use_query_value(key: &str) -> Option<String> {
+    let is_routing = create_rw_signal(false);
-        let href = window().location().href().ok()?;
+    let set_is_routing = SignalSetter::map(move |is_routing_data| {
-        let url = Url::try_from(href.as_str()).ok()?;
+        is_routing.set(is_routing_data);
-        url.search_params.get(key).cloned()
-    }
-    let theme = use_query_value("theme").map_or_else(Theme::light, |name| {
-        if name == "light" {
-            Theme::light()
-        } else if name == "dark" {
-            Theme::dark()
-        } else {
-            Theme::light()
-        }
     });
-    let theme = create_rw_signal(theme);
-
     provide_meta_context();
+
     view! {
-        <Provider theme>
+        <Router base="/thaw" set_is_routing>
-            <TheRouter />
+            <TheProvider>
-        </Provider>
+                <TheRouter is_routing/>
+            </TheProvider>
+        </Router>
     }
 }
 
 #[component]
-fn TheRouter() -> impl IntoView {
+fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
     let loading_bar = use_loading_bar();
-    let set_is_routing = SignalSetter::map(move |is_routing| {
+    _ = is_routing.watch(move |is_routing| {
-        if is_routing {
+        if *is_routing {
             loading_bar.start();
         } else {
             loading_bar.finish();
         }
     });
+
     view! {
-        <Router base="/thaw" set_is_routing>
         <Routes base="/thaw".to_string()>
             <Route path="/" view=Home/>
             <Route path="/guide" view=GuidePage>
@@ -89,19 +80,32 @@ fn TheRouter() -> impl IntoView {
             <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
             <Route path="/mobile/toast" view=ToastDemoPage/>
         </Routes>
-        </Router>
     }
 }
 
 #[component]
-fn Provider(theme: RwSignal<Theme>, children: Children) -> impl IntoView {
+fn TheProvider(children: Children) -> impl IntoView {
+    fn use_query_value(key: &str) -> Option<String> {
+        let href = window().location().href().ok()?;
+        let url = Url::try_from(href.as_str()).ok()?;
+        url.search_params.get(key).cloned()
+    }
+    let theme = use_query_value("theme").map_or_else(Theme::light, |name| {
+        if name == "light" {
+            Theme::light()
+        } else if name == "dark" {
+            Theme::dark()
+        } else {
+            Theme::light()
+        }
+    });
+    let theme = create_rw_signal(theme);
+
     view! {
         <ThemeProvider theme>
-            <GlobalStyle />
+            <GlobalStyle/>
             <MessageProvider>
-                <LoadingBarProvider>
+                <LoadingBarProvider>{children()}</LoadingBarProvider>
-                    {children()}
-                </LoadingBarProvider>
             </MessageProvider>
         </ThemeProvider>
     }

demo/src/pages/theme/mod.rs

@@ -5,6 +5,7 @@ use thaw::*;
 
 #[component]
 pub fn ThemePage() -> impl IntoView {
+    let theme = create_rw_signal(Theme::light());
     let customize_theme = create_rw_signal(Theme::light());
     let on_customize_theme = move |_| {
         customize_theme.update(|theme| {
@@ -16,7 +17,40 @@ pub fn ThemePage() -> impl IntoView {
     view! {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Theme"</h1>
-            <ThemeProviderPage/>
+            <h3>"ThemeProvider"</h3>
+            <Demo>
+                <ThemeProvider theme>
+                    <Card>
+                        <Space>
+                            <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
+                            <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
+                        </Space>
+                    </Card>
+                </ThemeProvider>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    let theme = create_rw_signal(Theme::light());
+
+                    view! {
+                        <ThemeProvider theme>
+                            <Card>
+                                <Space>
+                                    <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
+                                    <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
+                                </Space>
+                            </Card>
+                        </ThemeProvider>
+                    }
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
             <h3>"GlobalStyle"</h3>
             <p>"You can use GlobalStyle to sync common global style to the body element."</p>
             <Demo>
@@ -106,36 +140,3 @@ pub fn ThemePage() -> impl IntoView {
         </div>
     }
 }
-
-#[component]
-fn ThemeProviderPage() -> impl IntoView {
-    view! {
-        <h3>"ThemeProvider"</h3>
-        <Demo>
-            ""
-            <DemoCode
-                slot
-                html=highlight_str!(
-                    r#"
-                        let theme = create_rw_signal(Theme::light());
-
-                        view! {
-                            <ThemeProvider theme>
-                                <Card>
-                                    <Space>
-                                        <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
-                                        <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
-                                    </Space>
-                                </Card>
-                            </ThemeProvider>
-                        }
-                    "#,
-                    "rust"
-                )
-            >
-
-                ""
-            </DemoCode>
-        </Demo>
-    }
-}

src/auto_complete/mod.rs

@@ -61,11 +61,13 @@ pub fn AutoComplete(
                     allow_value
                 />
             </div>
-            <Follower slot show=is_show_menu placement=FollowerPlacement::BottomStart width=FollowerWidth::Target>
+            <Follower
-                <div
+                slot
-                    class="thaw-auto-complete__menu"
+                show=is_show_menu
-                    style=move || menu_css_vars.get()
+                placement=FollowerPlacement::BottomStart
+                width=FollowerWidth::Target
             >
+                <div class="thaw-auto-complete__menu" style=move || menu_css_vars.get()>
 
                     {move || {
                         options

src/breadcrumb/mod.rs

@@ -1,7 +1,11 @@
 mod breadcrumb_item;
 mod theme;
 
-use crate::{use_theme, utils::mount_style, Theme};
+use crate::{
+    use_theme,
+    utils::{mount_style, Provider},
+    Theme,
+};
 pub use breadcrumb_item::BreadcrumbItem;
 use leptos::*;
 pub use theme::BreadcrumbTheme;
@@ -31,11 +35,12 @@ pub fn Breadcrumb(
         });
         css_vars
     });
-    provide_context(BreadcrumbSeparatorInjection(separator));
     view! {
+        <Provider value=BreadcrumbSeparatorInjection(separator)>
             <nav class="thaw-breadcrumb" style=move || css_vars.get()>
                 <ul>{children()}</ul>
             </nav>
+        </Provider>
     }
 }
 

src/checkbox/checkbox_group.rs

@@ -1,3 +1,4 @@
+use crate::utils::Provider;
 use leptos::*;
 use std::collections::HashSet;
 
@@ -6,9 +7,7 @@ pub fn CheckboxGroup(
     #[prop(optional, into)] value: RwSignal<HashSet<String>>,
     children: Children,
 ) -> impl IntoView {
-    provide_context(CheckboxGroupInjection(value));
+    view! { <Provider value=CheckboxGroupInjection(value) children/> }
-
-    children()
 }
 
 #[derive(Clone)]

src/components/binder/mod.rs

@@ -204,9 +204,7 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
                 .attr("style", move || content_style.get())
                 .child(children()),
         );
-    view! {
+    view! { <Teleport element=children/> }
-        <Teleport element=children />
-    }
 }
 
 fn get_scroll_parent(element: Option<HtmlElement<AnyElement>>) -> Option<HtmlElement<AnyElement>> {

src/components/wave/mod.rs

@@ -50,6 +50,7 @@ pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView
                 "thaw-wave--active",
                 move || animation_timeout_handle.with(|handle| handle.is_some()),
             )
+
             ref=wave_ref
         ></div>
     }

src/grid/mod.rs

@@ -1,5 +1,6 @@
 mod grid_item;
 
+use crate::utils::Provider;
 pub use grid_item::*;
 use leptos::*;
 
@@ -10,9 +11,6 @@ pub fn Grid(
     #[prop(optional, into)] y_gap: MaybeSignal<u16>,
     children: Children,
 ) -> impl IntoView {
-    let grid_injection_key = GridInjection::new(x_gap);
-    provide_context(grid_injection_key);
-
     let style = create_memo(move |_| {
         let mut style = String::from("display: grid;");
         style.push_str(&format!(
@@ -24,9 +22,11 @@ pub fn Grid(
     });
 
     view! {
+        <Provider value=GridInjection::new(x_gap)>
             <div class="thaw-grid" style=move || style.get()>
                 {children()}
             </div>
+        </Provider>
     }
 }
 

src/input/mod.rs

@@ -97,12 +97,17 @@ pub fn Input(
         css_vars
     });
     view! {
-        <div class="thaw-input" class=("thaw-input--focus", move || is_focus.get()) style=move || css_vars.get()>
+        <div
+            class="thaw-input"
+            class=("thaw-input--focus", move || is_focus.get())
+            style=move || css_vars.get()
+        >
             {if let Some(prefix) = input_prefix {
                 view! { <div class="thaw-input__prefix">{(prefix.children)()}</div> }.into()
             } else {
                 None
             }}
+
             <input
                 type=move || variant.get().as_str()
                 prop:value=move || {

src/loading_bar/loading_bar_provider.rs

@@ -1,17 +1,22 @@
 use super::{LoadingBar, LoadingBarRef};
-use crate::{components::Teleport, utils::ComponentRef};
+use crate::{
+    components::Teleport,
+    utils::{ComponentRef, Provider},
+};
 use leptos::*;
 
 #[component]
 pub fn LoadingBarProvider(children: Children) -> impl IntoView {
     let loading_bar_ref = ComponentRef::<LoadingBarRef>::default();
-    provide_context(LoadingBarInjection { loading_bar_ref });
 
     view! {
-        {children()}
+        <Provider value=LoadingBarInjection {
-        <Teleport>
+            loading_bar_ref,
+        }>
+            {children()} <Teleport>
                 <LoadingBar comp_ref=loading_bar_ref/>
             </Teleport>
+        </Provider>
     }
 }
 

src/menu/mod.rs

@@ -2,6 +2,7 @@ mod menu_group;
 mod menu_item;
 mod theme;
 
+use crate::utils::Provider;
 use leptos::*;
 pub use menu_group::MenuGroup;
 pub use menu_item::*;
@@ -9,8 +10,11 @@ pub use theme::MenuTheme;
 
 #[component]
 pub fn Menu(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
-    provide_context(MenuInjection(value));
+    view! {
-    view! { <div class="thaw-menu">{children()}</div> }
+        <Provider value=MenuInjection(value)>
+            <div class="thaw-menu">{children()}</div>
+        </Provider>
+    }
 }
 
 #[derive(Clone)]

src/message/message_provider.rs

@@ -1,7 +1,10 @@
 use std::time::Duration;
 
 use super::{message_environment::MessageEnvironment, MessageVariant};
-use crate::{components::Teleport, utils::mount_style};
+use crate::{
+    components::Teleport,
+    utils::{mount_style, Provider},
+};
 use leptos::*;
 use uuid::Uuid;
 
@@ -10,7 +13,6 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
     mount_style("message", include_str!("./message.css"));
 
     let message_list = create_rw_signal::<Vec<MessageType>>(vec![]);
-    provide_context(MessageInjection::new(message_list));
 
     let handle_after_leave = move |id| {
         message_list.update(move |message_list| {
@@ -22,6 +24,9 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
     };
 
     view! {
+        <Provider value=MessageInjection::new(
+            message_list,
+        )>
             {children()}
             <Teleport>
                 <div class="thaw-message-container">
@@ -30,13 +35,17 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
                         key=|message| message.0
                         children=move |message| {
                             view! {
-                            <MessageEnvironment message on_internal_after_leave=handle_after_leave/>
+                                <MessageEnvironment
+                                    message
+                                    on_internal_after_leave=handle_after_leave
+                                />
                             }
                         }
                     />
 
                 </div>
             </Teleport>
+        </Provider>
     }
 }
 

src/mobile/tabbar/mod.rs

@@ -1,7 +1,11 @@
 mod tabbar_item;
 mod theme;
 
-use crate::{use_theme, utils::mount_style, Theme};
+use crate::{
+    use_theme,
+    utils::{mount_style, Provider},
+    Theme,
+};
 use leptos::*;
 pub use tabbar_item::*;
 pub use theme::TabbarTheme;
@@ -21,11 +25,13 @@ pub fn Tabbar(
             )
         })
     });
-    provide_context(TabbarInjection(value));
+
     view! {
+        <Provider value=TabbarInjection(value)>
             <div class="thaw-tabbar" style=move || css_vars.get()>
                 {children()}
             </div>
+        </Provider>
     }
 }
 

src/progress/mod.rs

@@ -89,27 +89,29 @@ pub fn Progress(
     };
 
     view! {
-        <div class="thaw-progress" style=move || css_vars.get() >
+        <div class="thaw-progress" style=move || css_vars.get()>
             <div class=class>
                 <div class="thaw-progress__progress-inner" style=style>
-                    <Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Inside>
+                    <Show when=move || {
+                        show_indicator.get()
+                            && indicator_placement.get() == ProgressIndicatorPlacement::Inside
+                    }>
                         <div class="thaw-progress__indicator--inside">
-                            {
+
-                                move || {
+                            {move || { format!("{}%", percentage.get()) }}
-                                    format!("{}%", percentage.get())
+
-                                }
-                            }
                         </div>
                     </Show>
                 </div>
             </div>
-            <Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Outside>
+            <Show when=move || {
+                show_indicator.get()
+                    && indicator_placement.get() == ProgressIndicatorPlacement::Outside
+            }>
                 <div class="thaw-progress__indicator--outside">
-                    {
+
-                        move || {
+                    {move || { format!("{}%", percentage.get()) }}
-                            format!("{}%", percentage.get())
+
-                        }
-                    }
                 </div>
             </Show>
         </div>

src/select/mod.rs

@@ -104,17 +104,23 @@ where
     });
     view! {
         <Binder target_ref=trigger_ref>
-            <div class="thaw-select" ref=trigger_ref on:click=show_menu style=move || css_vars.get()>
+            <div
+                class="thaw-select"
+                ref=trigger_ref
+                on:click=show_menu
+                style=move || css_vars.get()
+            >
 
                 {move || select_option_label.get()}
 
             </div>
-            <Follower slot show=is_show_menu placement=FollowerPlacement::BottomStart width=FollowerWidth::Target>
+            <Follower
-                <div
+                slot
-                    class="thaw-select-menu"
+                show=is_show_menu
-                    style=move || menu_css_vars.get()
+                placement=FollowerPlacement::BottomStart
-                    ref=menu_ref
+                width=FollowerWidth::Target
             >
+                <div class="thaw-select-menu" style=move || menu_css_vars.get() ref=menu_ref>
                     <For
                         each=move || options.get()
                         key=move |item| item.value.clone()

src/tabs/mod.rs

@@ -1,6 +1,10 @@
 mod tab;
 
-use crate::{theme::use_theme, utils::mount_style, Theme};
+use crate::{
+    theme::use_theme,
+    utils::{mount_style, Provider},
+    Theme,
+};
 use leptos::*;
 
 pub use tab::*;
@@ -9,10 +13,6 @@ pub use tab::*;
 pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
     mount_style("tabs", include_str!("./tabs.css"));
     let tab_options_vec = create_rw_signal(vec![]);
-    provide_context(TabsInjection {
-        active_key: value,
-        tab_options_vec,
-    });
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
         let mut css_vars = String::new();
@@ -36,6 +36,10 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
     let label_list_ref = create_node_ref::<html::Div>();
 
     view! {
+        <Provider value=TabsInjection {
+            active_key: value,
+            tab_options_vec,
+        }>
             <div class="thaw-tabs" style=move || css_vars.get()>
                 <div class="thaw-tabs__label-list" ref=label_list_ref>
                     <For
@@ -96,6 +100,7 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
                 </div>
                 <div>{children()}</div>
             </div>
+        </Provider>
     }
 }
 

src/theme/mod.rs

@@ -3,6 +3,7 @@ mod common;
 use self::common::CommonTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
+    utils::Provider,
     AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
     InputTheme, MenuTheme, MessageTheme, ProgressTheme, SelectTheme, SkeletionTheme, SliderTheme,
     SwitchTheme, TableTheme, TagTheme, UploadTheme,
@@ -111,8 +112,8 @@ pub fn ThemeProvider(
     } else {
         create_rw_signal(Theme::light())
     };
-    provide_context(theme);
+
-    children()
+    view! { <Provider value=theme children/> }
 }
 
 pub fn use_theme(default: impl Fn() -> Theme) -> ReadSignal<Theme> {

src/utils/mod.rs

@@ -2,6 +2,7 @@
 mod component_ref;
 mod event_listener;
 mod mount_style;
+mod provider;
 mod signal;
 mod stored_maybe_signal;
 
@@ -9,5 +10,6 @@ mod stored_maybe_signal;
 pub(crate) use component_ref::ComponentRef;
 pub(crate) use event_listener::*;
 pub(crate) use mount_style::mount_style;
+pub(crate) use provider::Provider;
 pub use signal::SignalWatch;
 pub(crate) use stored_maybe_signal::*;

src/utils/provider.rs

@@ -0,0 +1,13 @@
+/// https://github.com/leptos-rs/leptos/issues/2038
+use leptos::*;
+
+#[component]
+pub fn Provider<T>(value: T, children: Children) -> impl IntoView
+where
+    T: Clone + 'static,
+{
+    run_as_child(move || {
+        provide_context(value);
+        children()
+    })
+}