1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 14:09:49 -04:00

🦄 refactor: option_comp

This commit is contained in:
luoxiao 2023-05-16 12:54:47 +08:00
parent a6e30e38a0
commit e0c21b5f28
3 changed files with 27 additions and 48 deletions
src
button
card
components

View file

@ -82,7 +82,7 @@ pub fn Button(
<Icon icon=icon style=icon_style/> <Icon icon=icon style=icon_style/>
} }
}/> }/>
<OptionComp value=children view=move |cx, children| { <OptionComp value=children view=|cx, children| {
children(cx).into_view(cx) children(cx).into_view(cx)
}/> }/>
</button> </button>

View file

@ -1,11 +1,11 @@
use crate::utils::mount_style::mount_style; use crate::{components::*, utils::mount_style::mount_style};
use leptos::*; use leptos::*;
use stylers::style_sheet_str; use stylers::style_sheet_str;
#[component] #[component]
pub fn Card( pub fn Card(
cx: Scope, cx: Scope,
#[prop(default = None)] title: Option<String>, #[prop(optional)] title: MaybeSignal<String>,
#[prop(default = None)] header: Option<Children>, #[prop(default = None)] header: Option<Children>,
#[prop(default = None)] header_extra: Option<Children>, #[prop(default = None)] header_extra: Option<Children>,
children: Children, children: Children,
@ -16,41 +16,25 @@ pub fn Card(
cx, class=class_name, cx, class=class_name,
<div class="melt-card"> <div class="melt-card">
{ {
if header.is_some() || title.is_some() { if header.is_some() || title.get().is_empty() {
view! { view! {
cx, class=class_name, cx, class=class_name,
<div class="melt-card__header"> <div class="melt-card__header">
<div class="melt-card__header-content"> <div class="melt-card__header-content">
{ <OptionComp value=header view=|cx, header| {
if let Some(header) = header { header(cx).into_view(cx)
view! { }>
cx, { title.get() }
<> </OptionComp>
{ header(cx) }
</>
}
} else {
view! {
cx,
<>
{ title }
</>
}
}
}
</div> </div>
{ <OptionComp value=header_extra view=move |cx, header_extra| {
if let Some(header_extra) = header_extra { view! {
view! { cx, class=class_name,
cx, class=class_name, <div class="melt-card__header-extra">
<div class="melt-card__header-extra"> { header_extra(cx)}
{ header_extra(cx)} </div>
</div>
}.into()
} else {
None
} }
} }/>
</div> </div>
}.into() }.into()
} else { } else {
@ -60,18 +44,14 @@ pub fn Card(
<div class="melt-card__content"> <div class="melt-card__content">
{ children(cx) } { children(cx) }
</div> </div>
{ <OptionComp value=footer view=move |cx, footer| {
if let Some(footer) = footer { view! {
view! { cx, class=class_name,
cx, class=class_name, <div class="melt-card__footer">
<div class="melt-card__footer"> { footer(cx) }
{ footer(cx) } </div>
</div>
}.into()
} else {
None
} }
} }/>
</div> </div>
} }
} }

View file

@ -1,4 +1,3 @@
use super::Fallback;
use leptos::*; use leptos::*;
#[component] #[component]
@ -6,16 +5,16 @@ pub fn OptionComp<T, VF, IV>(
cx: Scope, cx: Scope,
value: Option<T>, value: Option<T>,
view: VF, view: VF,
#[prop(optional)] fallback: Option<Fallback>, #[prop(optional)] children: Option<Children>,
) -> impl IntoView ) -> impl IntoView
where where
VF: Fn(Scope, T) -> IV + 'static, VF: FnOnce(Scope, T) -> IV + 'static,
IV: IntoView, IV: IntoView,
{ {
if let Some(value) = value { if let Some(value) = value {
view(cx, value).into_view(cx) view(cx, value).into_view(cx)
} else if let Some(fallback) = &fallback { } else if let Some(children) = children {
(fallback.children)(cx).into_view(cx) children(cx).into_view(cx)
} else { } else {
().into_view(cx) ().into_view(cx)
} }