feat: AutoComplete component add prefix and suffix slot

thaw-ui · Dec 14, 2023 · d8e0dfb · d8e0dfb
1 parent be8e6df
commit d8e0dfb
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/demo/Cargo.toml b/demo/Cargo.toml
@@ -17,6 +17,7 @@ icondata = { version = "0.1.0", features = [
     "AiCheckOutlined",
     "AiGithubOutlined",
     "AiUserOutlined",
+    "AiSearchOutlined",
 ] }
 prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
 

diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
@@ -66,6 +66,17 @@ pub fn SiteHeader() -> impl IntoView {
         let navigate = use_navigate();
         navigate(&path, Default::default());
     };
+    let auto_complete_ref = create_component_ref::<AutoCompleteRef>();
+    let handle = window_event_listener(ev::keydown, move |event| {
+        let key = event.key();
+        if key == *"/" {
+            if let Some(auto_complete_ref) = auto_complete_ref.get_untracked() {
+                event.prevent_default();
+                auto_complete_ref.focus();
+            }
+        }
+    });
+    on_cleanup(move || handle.remove());
     view! {
         <LayoutHeader style>
             <Space>
@@ -84,11 +95,16 @@ pub fn SiteHeader() -> impl IntoView {
             <Space>
                 <AutoComplete
                     value=search_value
-                    placeholder="Search"
+                    placeholder="Type '/' to search"
                     options=search_options
                     clear_after_select=true
                     on_select=on_search_select
-                />
+                    comp_ref=auto_complete_ref
+                >
+                    <AutoCompletePrefix slot>
+                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiSearchOutlined) style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
+                    </AutoCompletePrefix>
+                </AutoComplete>
                 <Button
                     variant=ButtonVariant::Text
                     on_click=move |_| {

diff --git a/src/auto_complete/mod.rs b/src/auto_complete/mod.rs
@@ -5,9 +5,8 @@ use crate::{
     components::{Binder, Follower, FollowerPlacement, FollowerWidth},
     use_theme,
     utils::{mount_style, StoredMaybeSignal},
-    Input, Theme,
+    ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme,
 };
-use crate::{ComponentRef, InputRef};
 use leptos::*;
 pub use theme::AutoCompleteTheme;
 
@@ -17,6 +16,16 @@ pub struct AutoCompleteOption {
     pub value: String,
 }
 
+#[slot]
+pub struct AutoCompletePrefix {
+    children: Children,
+}
+
+#[slot]
+pub struct AutoCompleteSuffix {
+    children: Children,
+}
+
 #[component]
 pub fn AutoComplete(
     #[prop(optional, into)] value: RwSignal<String>,
@@ -27,6 +36,8 @@ pub fn AutoComplete(
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
     #[prop(optional, into)] invalid: MaybeSignal<bool>,
     #[prop(optional, into)] class: MaybeSignal<String>,
+    #[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
+    #[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
     #[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
 ) -> impl IntoView {
     mount_style("auto-complete", include_str!("./auto-complete.css"));
@@ -128,7 +139,26 @@ pub fn AutoComplete(
                     on_blur=move |_| is_show_menu.set(false)
                     allow_value
                     comp_ref=input_ref
-                />
+                >
+                    <InputPrefix if_=auto_complete_prefix.is_some() slot>
+                        {
+                            if let Some(auto_complete_prefix) = auto_complete_prefix {
+                                Some((auto_complete_prefix.children)())
+                            } else {
+                                None
+                            }
+                        }
+                    </InputPrefix>
+                    <InputSuffix if_=auto_complete_suffix.is_some() slot>
+                        {
+                            if let Some(auto_complete_suffix) = auto_complete_suffix {
+                                Some((auto_complete_suffix.children)())
+                            } else {
+                                None
+                            }
+                        }
+                    </InputSuffix>
+                </Input>
             </div>
             <Follower
                 slot

diff --git a/src/input/mod.rs b/src/input/mod.rs
@@ -25,11 +25,15 @@ impl InputVariant {
 
 #[slot]
 pub struct InputPrefix {
+    #[prop(default = true)]
+    if_: bool,
     children: Children,
 }
 
 #[slot]
 pub struct InputSuffix {
+    #[prop(default = true)]
+    if_: bool,
     children: Children,
 }
 
@@ -127,7 +131,7 @@ pub fn Input(
             class=("thaw-input--invalid", move || invalid.get())
             style=move || css_vars.get()
         >
-            {if let Some(prefix) = input_prefix {
+            {if let Some(prefix) = input_prefix.map(|prefix| prefix.if_.then(|| prefix)).flatten() {
                 view! { <div class="thaw-input__prefix">{(prefix.children)()}</div> }.into()
             } else {
                 None
@@ -149,7 +153,7 @@ pub fn Input(
                 ref=input_ref
             />
 
-            {if let Some(suffix) = input_suffix {
+            {if let Some(suffix) = input_suffix.map(|suffix| suffix.if_.then(|| suffix)).flatten() {
                 view! { <div class="thaw-input__suffix">{(suffix.children)()}</div> }.into()
             } else {
                 None