adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Combobox adds selected_options prop

Browse source
This commit is contained in:
luoxiao 2024-07-01 16:32:28 +08:00
parent f08956586e
commit 58c3905ed3
4 changed files with 83 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/src/components/switch_version.rs
View file

@ -31,9 +31,7 @@ pub fn SwitchVersion() -> impl IntoView {
<Combobox>
{
options.into_iter().map(|option| view! {
<ComboboxOption key=option.1>
{option.0}
</ComboboxOption>
<ComboboxOption value=option.1 text=option.0 />
}).collect_view()
}
</Combobox>

36
demo_markdown/docs/combobox/mod.md
View file

@ -1,16 +1,12 @@
# Combobox
```rust demo
let value = RwSignal::new(vec![]);
let selected_options = RwSignal::new(vec![]);
view! {
<Combobox value>
<ComboboxOption key="cat">
"Cat"
</ComboboxOption>
<ComboboxOption key="dog">
"Dog"
</ComboboxOption>
<Combobox selected_options>
<ComboboxOption value="cat" text="Car" />
<ComboboxOption value="dog" text="Dog" />
</Combobox>
}
```
@ -18,16 +14,12 @@ view! {
### Clearable
```rust demo
let value = RwSignal::new(vec![]);
let selected_options = RwSignal::new(vec![]);
view! {
<Combobox value multiselect=true clearable=true>
<ComboboxOption key="cat">
"Cat"
</ComboboxOption>
<ComboboxOption key="dog">
"Dog"
</ComboboxOption>
<Combobox selected_options multiselect=true clearable=true>
<ComboboxOption value="cat" text="Car" />
<ComboboxOption value="dog" text="Dog" />
</Combobox>
}
```
@ -35,16 +27,12 @@ view! {
### Multiselect
```rust demo
let value = RwSignal::new(vec![]);
let selected_options = RwSignal::new(vec![]);
view! {
<Combobox value multiselect=true>
<ComboboxOption key="cat">
"Cat"
</ComboboxOption>
<ComboboxOption key="dog">
"Dog"
</ComboboxOption>
<Combobox selected_options multiselect=true>
<ComboboxOption value="cat" text="Car" />
<ComboboxOption value="dog" text="Dog" />
</Combobox>
}
```

68
thaw/src/combobox/combobox.rs
View file

@ -5,7 +5,8 @@ use thaw_utils::{add_event_listener, mount_style, Model};
#[component]
pub fn Combobox(
#[prop(optional, into)] value: Model<Vec<String>>,
#[prop(optional, into)] value: Model<String>,
#[prop(optional, into)] selected_options: Model<Vec<String>>,
#[prop(optional)] multiselect: bool,
#[prop(optional)] clearable: bool,
children: Children,
@ -19,7 +20,7 @@ pub fn Combobox(
let clear_icon_ref = NodeRef::<html::Span>::new();
let is_show_clear_icon = Memo::new(move |_| {
if clearable {
value.with(|value| !value.is_empty())
selected_options.with(|options| !options.is_empty())
} else {
false
}
@ -28,7 +29,7 @@ pub fn Combobox(
clear_icon_ref.on_load(move |clear_icon_el| {
let handler = add_event_listener(clear_icon_el.into_any(), ev::click, move |e| {
e.stop_propagation();
value.set(vec![]);
selected_options.set(vec![]);
});
on_cleanup(move || handler.remove());
});
@ -66,6 +67,32 @@ pub fn Combobox(
on_cleanup(move || handle.remove());
}
let on_input = move |ev| {
let input_value = event_target_value(&ev);
if !multiselect {
if selected_options.with_untracked(|options| {
if let Some(option) = options.first() {
if option != &input_value {
return true;
}
}
false
}) {
selected_options.set(vec![]);
}
}
value.set(input_value);
};
let on_blur = move |_| {
if multiselect {
value.set(String::new());
} else {
if selected_options.with_untracked(|options| options.is_empty()) {
value.set(String::new());
}
}
};
view! {
<Binder target_ref=trigger_ref>
<div
@ -80,17 +107,11 @@ pub fn Combobox(
aria-expanded="true"
role="combobox"
class="thaw-combobox__input"
// #TODO
readonly=true
prop:value=move || {
value.with(|value| {
if multiselect {
String::new()
} else {
value.first().cloned().unwrap_or_default()
}
})
value.get()
}
on:input=on_input
on:blur=on_blur
/>
{
if clearable {
@ -129,7 +150,7 @@ pub fn Combobox(
placement=FollowerPlacement::BottomStart
width=FollowerWidth::MinTarget
>
<Provider value=ComboboxInjection{value, multiselect, is_show_listbox}>
<Provider value=ComboboxInjection{value, multiselect, selected_options, is_show_listbox}>
<CSSTransition
node_ref=listbox_ref
name="fade-in-scale-up-transition"
@ -155,7 +176,8 @@ pub fn Combobox(
#[derive(Clone, Copy)]
pub(crate) struct ComboboxInjection {
value: Model<Vec<String>>,
value: Model<String>,
selected_options: Model<Vec<String>>,
is_show_listbox: RwSignal<bool>,
pub multiselect: bool,
}
@ -165,20 +187,22 @@ impl ComboboxInjection {
expect_context()
}
pub fn is_selected(&self, key: &String) -> bool {
self.value.with(|value| value.contains(key))
pub fn is_selected(&self, value: &String) -> bool {
self.selected_options
.with(|options| options.contains(value))
}
pub fn on_option_select(&self, key: &String) {
self.value.update(|value| {
pub fn on_option_select(&self, value: &String, text: &String) {
self.selected_options.update(|options| {
if self.multiselect {
if let Some(index) = value.iter().position(|k| k == key) {
value.remove(index);
if let Some(index) = options.iter().position(|v| v == value) {
options.remove(index);
return;
}
value.push(key.clone());
options.push(value.clone());
} else {
*value = vec![key.clone()];
*options = vec![value.clone()];
self.value.set(text.clone());
self.is_show_listbox.set(false);
}
});

31
thaw/src/combobox/combobox_option.rs
View file

@ -1,12 +1,24 @@
use crate::ComboboxInjection;
use leptos::*;
use thaw_components::{If, Then};
use thaw_components::{Fallback, If, OptionComp, Then};
use thaw_utils::class_list;
#[component]
pub fn ComboboxOption(#[prop(into)] key: String, children: Children) -> impl IntoView {
pub fn ComboboxOption(
#[prop(optional, into)] value: Option<String>,
#[prop(into)] text: String,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
let combobox = ComboboxInjection::use_();
let key = StoredValue::new(key);
let value = StoredValue::new(value.unwrap_or_else(|| text.clone()));
let text = StoredValue::new(text);
let on_click = move |_| {
text.with_value(|text| {
value.with_value(|value| {
combobox.on_option_select(value, text);
});
});
};
view! {
<div
@ -14,17 +26,15 @@ pub fn ComboboxOption(#[prop(into)] key: String, children: Children) -> impl Int
aria-selected="true"
class=class_list![
"thaw-combobox-option",
("thaw-combobox-option--selected", move || key.with_value(|key| combobox.is_selected(&key)))
("thaw-combobox-option--selected", move || value.with_value(|value| combobox.is_selected(&value)))
]
on:click=move |_| {
key.with_value(|key| combobox.on_option_select(key));
}
on:click=on_click
>
{
if combobox.multiselect {
view! {
<span aria-hidden="true" class="thaw-combobox-option__check-icon--multiselect">
<If cond=Signal::derive(move || key.with_value(|key| combobox.is_selected(&key)))>
<If cond=Signal::derive(move || value.with_value(|value| combobox.is_selected(&value)))>
<Then slot>
<svg fill="currentColor" aria-hidden="true" width="12" height="12" viewBox="0 0 12 12">
<path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
@ -43,7 +53,12 @@ pub fn ComboboxOption(#[prop(into)] key: String, children: Children) -> impl Int
}
}
}
<OptionComp value=children let:children>
<Fallback slot>
{text.get_value()}
</Fallback>
{children()}
</OptionComp>
</div>
}
}