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: modal component ameliorate

Browse source
This commit is contained in:
luoxiao 2023-04-10 14:03:55 +08:00
parent ee50e57e57
commit d588d51473
3 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/basic/src/demo_modal.rs Normal file
View file

@ -0,0 +1,16 @@
use leptos::*;
use melt_ui::*;
#[component]
pub fn DemoModal(cx: Scope) -> impl IntoView {
let (open, set_open) = create_signal(cx, false);
let on_cancel = SignalSetter::map(cx, move |_| {
set_open.set(false);
});
view! {cx,
<Button on:click=move |_| set_open.update(move |value| *value = !*value)>"open modal"</Button>
<Modal title="" open=open on_cancel=on_cancel>
"sd"
</Modal>
}
}

7
examples/basic/src/main.rs
View file

@ -1,5 +1,7 @@
use leptos::*; use leptos::*;
use melt_ui::*; use melt_ui::*;
mod demo_modal;
pub use demo_modal::*;
fn main() { fn main() {
mount_to_body(|cx| view! { cx, <App /> }) mount_to_body(|cx| view! { cx, <App /> })
@ -10,7 +12,6 @@ pub fn App(cx: Scope) -> impl IntoView {
let (theme, set_theme) = create_signal(cx, Theme::light()); let (theme, set_theme) = create_signal(cx, Theme::light());
provide_context(cx, theme); provide_context(cx, theme);
let (count, set_count) = create_signal(cx, 0.0); let (count, set_count) = create_signal(cx, 0.0);
let (open, set_open) = create_signal(cx, true);
let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT); let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
let count_string = create_memo(cx, move |_| { let count_string = create_memo(cx, move |_| {
@ -27,9 +28,7 @@ pub fn App(cx: Scope) -> impl IntoView {
<Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button> <Button on:click=move |_| set_button_type.update(move |value| *value = ButtonType::PRIMARY)>"click"</Button>
<Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button> <Button on:click=move |_| set_count.update(move |value| *value += 1.0) type_=button_type>"click"</Button>
{move || count.get()} {move || count.get()}
<Modal title=Some("".to_string()) open=open on_cancel=Some(Box::new(move || { set_open.set(false) }))> <DemoModal />
"sd" {move || count.get()}
</Modal>
<Progress percentage=count/> <Progress percentage=count/>
</Space> </Space>
} }

13
src/modal/mod.rs
View file

@ -7,11 +7,11 @@ use stylers::style_sheet_str;
#[component] #[component]
pub fn Modal( pub fn Modal(
cx: Scope, cx: Scope,
#[prop(default = None)] title: Option<String>, #[prop(optional, into)] title: Option<MaybeSignal<String>>,
children: Children, children: Children,
#[prop(default = None)] footer: Option<Children>, #[prop(optional)] footer: Option<Children>,
open: ReadSignal<bool>, #[prop(optional, into)] open: MaybeSignal<bool>,
#[prop(default = None)] on_cancel: Option<Box<dyn Fn() + 'static>>, #[prop(optional)] on_cancel: Option<SignalSetter<()>>,
) -> impl IntoView { ) -> impl IntoView {
let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css")); let class_name = mount_style("modal", || style_sheet_str!("./src/modal/modal.css"));
let header = move |cx| { let header = move |cx| {
@ -24,11 +24,12 @@ pub fn Modal(
</> </>
} }
}; };
let header_extra = |cx| {
let header_extra = move |cx| {
view! { view! {
cx, cx,
<> <>
<span style="cursor: pointer;" on:click=move |_| if let Some(on_cancel) = &on_cancel { on_cancel()}> <span style="cursor: pointer;" on:click=move |_| if let Some(on_cancel) = &on_cancel { on_cancel.set(())}>
{ "x" } { "x" }
</span> </span>
</> </>