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

refactor: remove Select

Browse source
This commit is contained in:
luoxiao 2024-06-27 20:28:55 +08:00
parent f6d534220e
commit b992a3eda7
9 changed files with 7 additions and 593 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/app.rs
View file

@ -76,7 +76,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/progress" view=ProgressMdPage/>
<Route path="/radio" view=RadioMdPage/>
<Route path="/scrollbar" view=ScrollbarMdPage/>
<Route path="/select" view=SelectMdPage/>
// <Route path="/select" view=SelectMdPage/>
<Route path="/skeleton" view=SkeletonMdPage/>
<Route path="/slider" view=SliderMdPage/>
<Route path="/space" view=SpaceMdPage/>

8
demo/src/pages/components.rs
View file

@ -255,10 +255,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/scrollbar".into(),
label: "Scrollbar".into(),
},
MenuItemOption {
value: "/components/select".into(),
label: "Select".into(),
},
// MenuItemOption {
// value: "/components/select".into(),
// label: "Select".into(),
// },
MenuItemOption {
value: "/components/skeleton".into(),
label: "Skeleton".into(),

2
demo_markdown/src/lib.rs
View file

@ -58,7 +58,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"ProgressMdPage" => "../docs/progress/mod.md",
"RadioMdPage" => "../docs/radio/mod.md",
"ScrollbarMdPage" => "../docs/scrollbar/mod.md",
"SelectMdPage" => "../docs/select/mod.md",
// "SelectMdPage" => "../docs/select/mod.md",
"SkeletonMdPage" => "../docs/skeleton/mod.md",
"SliderMdPage" => "../docs/slider/mod.md",
"SpaceMdPage" => "../docs/space/mod.md",

95
thaw/src/select/mod.rs
View file

@ -1,95 +0,0 @@
mod multi;
mod raw;
mod theme;
pub use multi::*;
pub use theme::SelectTheme;
use leptos::*;
use std::{hash::Hash, rc::Rc};
use thaw_utils::{Model, OptionalProp};
use crate::{
select::raw::{RawSelect, SelectIcon},
Icon,
};
#[slot]
pub struct SelectLabel {
children: Children,
}
#[derive(Clone, Default, PartialEq, Eq, Hash)]
pub struct SelectOption<T> {
pub label: String,
pub value: T,
}
impl<T> SelectOption<T> {
pub fn new(label: impl Into<String>, value: T) -> SelectOption<T> {
SelectOption {
label: label.into(),
value,
}
}
}
#[component]
pub fn Select<T>(
#[prop(optional, into)] value: Model<Option<T>>,
#[prop(optional, into)] options: MaybeSignal<Vec<SelectOption<T>>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional)] select_label: Option<SelectLabel>,
) -> impl IntoView
where
T: Eq + Hash + Clone + 'static,
{
let is_menu_visible = create_rw_signal(false);
let show_menu = move |_| is_menu_visible.set(true);
let hide_menu = move |_| is_menu_visible.set(false);
let is_selected = move |v: &T| with!(|value| value.as_ref() == Some(v));
let on_select: Callback<(ev::MouseEvent, SelectOption<T>)> =
Callback::new(move |(_, option): (ev::MouseEvent, SelectOption<T>)| {
let item_value = option.value;
value.set(Some(item_value));
hide_menu(());
});
let select_label = select_label.unwrap_or_else(|| {
let options = options.clone();
let value_label = Signal::derive(move || {
with!(|value, options| {
match value {
Some(value) => options
.iter()
.find(|opt| &opt.value == value)
.map_or(String::new(), |v| v.label.clone()),
None => String::new(),
}
})
});
SelectLabel {
children: Box::new(move || Fragment::new(vec![value_label.into_view()])),
}
});
let select_icon = SelectIcon {
children: Rc::new(move || {
Fragment::new(vec![
view! { <Icon class="thaw-select-dropdown-icon" icon=icondata_ai::AiDownOutlined/> }.into_view()
])
}),
};
view! {
<RawSelect
options
class
select_label
select_icon
is_menu_visible
on_select=on_select
show_menu
hide_menu
is_selected=is_selected
/>
}
}

199
thaw/src/select/multi.rs
View file

@ -1,199 +0,0 @@
use leptos::*;
use std::{hash::Hash, rc::Rc, time::Duration};
use thaw_utils::{Model, OptionalProp};
use crate::{
select::raw::{RawSelect, SelectIcon},
Icon, SelectLabel, SelectOption, Tag, TagVariant,
};
#[derive(Clone, Default, PartialEq, Eq, Hash)]
pub struct MultiSelectOption<T> {
pub label: String,
pub value: T,
pub variant: TagVariant,
}
impl<T> MultiSelectOption<T> {
pub fn new(label: impl Into<String>, value: T) -> MultiSelectOption<T> {
MultiSelectOption {
label: label.into(),
value,
variant: TagVariant::Default,
}
}
pub fn with_variant(mut self, variant: TagVariant) -> MultiSelectOption<T> {
self.variant = variant;
self
}
}
impl<T> From<MultiSelectOption<T>> for SelectOption<T> {
fn from(opt: MultiSelectOption<T>) -> Self {
SelectOption {
label: opt.label,
value: opt.value,
}
}
}
#[component]
pub fn MultiSelect<T>(
#[prop(optional, into)] value: Model<Vec<T>>,
#[prop(optional, into)] options: MaybeSignal<Vec<MultiSelectOption<T>>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] clearable: MaybeSignal<bool>,
#[prop(optional)] select_label: Option<SelectLabel>,
) -> impl IntoView
where
T: Eq + Hash + Clone + 'static,
{
let select_options: Signal<Vec<_>> = Signal::derive({
let options = options.clone();
move || options.get().into_iter().map(SelectOption::from).collect()
});
let class: OptionalProp<_> = match class.into_option() {
Some(MaybeSignal::Dynamic(class)) => {
Some(MaybeSignal::Dynamic(Signal::derive(move || {
with!(|class| format!("thaw-select--multiple {class}"))
})))
.into()
}
Some(MaybeSignal::Static(class)) => Some(MaybeSignal::Static(format!(
"thaw-select--multiple {class}"
)))
.into(),
None => Some(MaybeSignal::Static("thaw-select--multiple".to_string())).into(),
};
let is_menu_visible = create_rw_signal(false);
let show_menu = move |_| is_menu_visible.set(true);
let hide_menu = move |_| is_menu_visible.set(false);
let is_selected = move |v: &T| with!(|value| value.contains(v));
let on_select: Callback<(ev::MouseEvent, SelectOption<T>)> =
Callback::new(move |(_, option): (ev::MouseEvent, SelectOption<T>)| {
let item_value = option.value;
update!(|value| {
let index = value
.iter()
.enumerate()
.find_map(|(i, v)| (v == &item_value).then_some(i));
match index {
Some(i) => {
value.remove(i);
}
None => {
value.push(item_value);
}
}
});
});
let select_label = select_label.unwrap_or_else(|| {
let options = options.clone();
let signal_value = value;
let value_label = Signal::derive(move || {
with!(|value, options| {
value
.iter()
.map(|value| {
let (label, variant) = options
.iter()
.find(move |v| &v.value == value)
.map_or((String::new(), TagVariant::Default), |v| {
(v.label.clone(), v.variant)
});
let value = value.clone();
let on_close = Callback::new(move |ev: ev::MouseEvent| {
ev.stop_propagation();
let value = value.clone();
// We remove the item on the next tick to ensure the menu on click handler works correctly
set_timeout(
move || {
update!(|signal_value| {
let index = signal_value
.iter()
.enumerate()
.find_map(|(i, v)| (v == &value).then_some(i));
if let Some(i) = index {
signal_value.remove(i);
}
});
},
Duration::ZERO,
)
});
view! {
<Tag
variant
closable=true
on_close
>
{label}
</Tag>
}
})
.collect_view()
})
});
SelectLabel {
children: Box::new(move || Fragment::new(vec![value_label.into_view()])),
}
});
let is_hovered = RwSignal::new(false);
let show_clear_icon = Signal::derive(move || {
clearable.get()
&& ((is_hovered.get() || is_menu_visible.get()) && with!(|value| !value.is_empty()))
});
let on_hover_enter = Callback::new(move |_| is_hovered.set(true));
let on_hover_exit = Callback::new(move |_| is_hovered.set(false));
let select_icon = SelectIcon {
children: Rc::new(move || {
Fragment::new(vec![view! {
{move || if show_clear_icon.get() {
view! {
<Icon
class="thaw-select-dropdown-icon thaw-select-dropdown-icon--clear"
icon=icondata_ai::AiCloseCircleFilled
on_click=Callback::new(move |_| {
set_timeout(
move || value.set(vec![]),
Duration::ZERO,
)
})
/>
}
} else {
view! {
<Icon class="thaw-select-dropdown-icon" icon=icondata_ai::AiDownOutlined/>
}
}}
}
.into_view()])
}),
};
// Trigger the following menu to resync when the value is updated
let _ = watch(
move || value.track(),
move |_, _, _| {
is_menu_visible.update(|_| {});
},
false,
);
view! {
<RawSelect
options=select_options
class
select_label
select_icon
is_menu_visible
on_select=on_select
show_menu
hide_menu
on_hover_enter
on_hover_exit
is_selected=is_selected
/>
}
}

158
thaw/src/select/raw.rs
View file

@ -1,158 +0,0 @@
use std::{hash::Hash, time::Duration};
use leptos::*;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth};
use thaw_utils::{class_list, mount_style, OptionalProp};
use crate::{theme::use_theme, SelectLabel, SelectOption, Theme};
#[slot]
pub(crate) struct SelectIcon {
children: ChildrenFn,
}
#[component]
pub(super) fn RawSelect<T, F>(
#[prop(optional, into)] options: MaybeSignal<Vec<SelectOption<T>>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
select_label: SelectLabel,
select_icon: SelectIcon,
#[prop(optional, into)] is_menu_visible: Signal<bool>,
#[prop(into)] on_select: Callback<(ev::MouseEvent, SelectOption<T>)>,
#[prop(into)] show_menu: Callback<()>,
#[prop(into)] hide_menu: Callback<()>,
#[prop(optional, into)] on_hover_enter: Option<Callback<()>>,
#[prop(optional, into)] on_hover_exit: Option<Callback<()>>,
is_selected: F,
) -> impl IntoView
where
T: Eq + Hash + Clone + 'static,
F: Fn(&T) -> bool + Copy + 'static,
{
mount_style("select", include_str!("./select.css"));
let trigger_ref = create_node_ref::<html::Div>();
let menu_ref = create_node_ref::<html::Div>();
#[cfg(any(feature = "csr", feature = "hydrate"))]
{
use leptos::wasm_bindgen::__rt::IntoJsResult;
let listener = window_event_listener(ev::click, move |ev| {
let el = ev.target();
let el: Option<web_sys::Node> = el.into_js_result().map_or(None, |el| Some(el.into()));
let is_descendent_of_select = trigger_ref.get().unwrap().contains(el.as_ref());
let is_descendent_of_menu = menu_ref.get().unwrap().contains(el.as_ref());
if (!is_descendent_of_select && !is_descendent_of_menu)
|| (is_menu_visible.get() && el.unwrap() == ****trigger_ref.get().unwrap())
{
hide_menu.call(());
}
});
on_cleanup(move || listener.remove());
}
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
let border_color_hover = theme.common.color_primary.clone();
css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
css_vars.push_str(&format!(
"--thaw-background-color: {};",
theme.select.background_color
));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.select.font_color));
css_vars.push_str(&format!(
"--thaw-border-color: {};",
theme.select.border_color
));
});
css_vars
});
let menu_css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--thaw-background-color: {};",
theme.select.menu_background_color
));
css_vars.push_str(&format!(
"--thaw-background-color-hover: {};",
theme.select.menu_background_color_hover
));
css_vars.push_str(&format!("--thaw-font-color: {};", theme.select.font_color));
css_vars.push_str(&format!(
"--thaw-font-color-selected: {};",
theme.common.color_primary
));
});
css_vars
});
view! {
<Binder target_ref=trigger_ref>
<div
class=class_list!["thaw-select", class.map(|c| move || c.get())]
ref=trigger_ref
on:click=move |_| {
if !is_menu_visible.get_untracked() {
set_timeout(move || show_menu.call(()), Duration::ZERO);
}
}
on:mouseenter=move |_| if let Some(cb) = on_hover_enter { cb.call(()) }
on:mouseleave=move |_| if let Some(cb) = on_hover_exit { cb.call(()) }
style=move || css_vars.get()
>
{(select_label.children)()}
{select_icon.children}
</div>
<Follower
slot
show=is_menu_visible
placement=FollowerPlacement::BottomStart
width=FollowerWidth::MinTarget
>
<CSSTransition
node_ref=menu_ref
name="fade-in-scale-up-transition"
appear=is_menu_visible.get_untracked()
show=is_menu_visible
let:display
>
<div
class="thaw-select-menu"
style=move || {
display
.get()
.map(|d| d.to_string())
.unwrap_or_else(|| menu_css_vars.get())
}
ref=menu_ref
>
<For
each=move || options.get()
key=move |item| item.value.clone()
children=move |item| {
let item = store_value(item);
view! {
<div
class="thaw-select-menu__item"
class=(
"thaw-select-menu__item-selected",
move || item.with_value(|item_value| is_selected(&item_value.value)),
)
on:click=move |ev| on_select.call((ev, item.get_value()))
>
{item.get_value().label}
</div>
}
}
/>
</div>
</CSSTransition>
</Follower>
</Binder>
}
}

99
thaw/src/select/select.css
View file

@ -1,99 +0,0 @@
.thaw-select {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 30px 0 10px;
min-height: 34px;
background-color: var(--thaw-background-color);
font-size: 14px;
color: var(--thaw-font-color);
border: 1px solid var(--thaw-border-color);
border-radius: 3px;
transition: all 0.3s;
cursor: pointer;
box-sizing: border-box;
}
.thaw-select.thaw-select--multiple {
padding: 3px 30px 0 3px;
}
.thaw-select-dropdown-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
opacity: 40%;
pointer-events: none;
}
.thaw-select-dropdown-icon--clear {
pointer-events: auto;
}
.thaw-select.thaw-select--multiple .thaw-tag {
height: 24px;
margin: 0 3px 3px 0;
}
.thaw-select:hover {
border-color: var(--thaw-border-color-hover);
}
.thaw-select-menu {
font-size: 14px;
color: var(--thaw-font-color);
background-color: var(--thaw-background-color);
box-sizing: border-box;
padding: 5px;
width: 100%;
max-height: 200px;
border-radius: 3px;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
overflow: auto;
}
.thaw-select-menu__item {
padding: 6px 5px;
border-radius: 2px;
cursor: pointer;
}
.thaw-select-menu__item:hover {
background-color: var(--thaw-background-color-hover);
}
.thaw-select-menu__item-selected {
color: var(--thaw-font-color-selected);
}
.thaw-select-menu.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-select-menu.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-select-menu.fade-in-scale-up-transition-enter-from,
.thaw-select-menu.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(0.9);
}
.thaw-select-menu.fade-in-scale-up-transition-leave-from,
.thaw-select-menu.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}

32
thaw/src/select/theme.rs
View file

@ -1,32 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct SelectTheme {
pub font_color: String,
pub border_color: String,
pub background_color: String,
pub menu_background_color: String,
pub menu_background_color_hover: String,
}
impl ThemeMethod for SelectTheme {
fn light() -> Self {
Self {
font_color: "#333639".into(),
border_color: "#e0e0e6".into(),
background_color: "#fff".into(),
menu_background_color: "#fff".into(),
menu_background_color_hover: "#f3f5f6".into(),
}
}
fn dark() -> Self {
Self {
font_color: "#ffffffd1".into(),
border_color: "#0000".into(),
background_color: "#ffffff1a".into(),
menu_background_color: "#48484e".into(),
menu_background_color_hover: "#ffffff17".into(),
}
}
}

5
thaw/src/theme/mod.rs
View file

@ -2,7 +2,7 @@ mod color;
mod common;
use self::common::CommonTheme;
use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, SelectTheme};
use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme};
pub use color::ColorTheme;
use leptos::*;
@ -18,7 +18,6 @@ pub struct Theme {
pub color: ColorTheme,
pub alert: AlertTheme,
pub message: MessageTheme,
pub select: SelectTheme,
pub progress: ProgressTheme,
pub anchor: AnchorTheme,
}
@ -31,7 +30,6 @@ impl Theme {
color: ColorTheme::light(),
alert: AlertTheme::light(),
message: MessageTheme::light(),
select: SelectTheme::light(),
progress: ProgressTheme::light(),
anchor: AnchorTheme::light(),
}
@ -43,7 +41,6 @@ impl Theme {
color: ColorTheme::dark(),
alert: AlertTheme::dark(),
message: MessageTheme::dark(),
select: SelectTheme::dark(),
progress: ProgressTheme::dark(),
anchor: AnchorTheme::dark(),
}