How to make optional callback?

[Umenokin]

I am following the example, I am trying to pass an optional callback to the button:

#[component]
pub fn Button<F>(
    #[prop(default = ButtonType::Button)] type_: ButtonType,
    #[prop(default = ButtonVariant::Primary)] variant: ButtonVariant,
    #[prop(optional)] on_click: Option<Box<dyn Fn(MouseEvent) + 'static>>,
    children: Children,
) -> impl IntoView {
    let cls = format!("btn {}", variant.to_str());
    view! {
        <button class={cls} type={type_.to_str()} on:click=on_click>{children()}</button>
    }
}

I think expectedly it does not work. It seems I found a solution in leptos_dom sources, but is it the right way to do it?

#[component]
pub fn Button(

    #[prop(default = ButtonType::Button)] type_: ButtonType,
    #[prop(default = ButtonVariant::Primary)] variant: ButtonVariant,
    #[prop(optional)] on_click: Option<Box<dyn Fn(MouseEvent) + 'static>>,
    children: Children,
) -> impl IntoView {
    let cls = format!("btn {}", variant.to_str());

    view! {
        <button class={cls} type={type_.to_str()}>{children()}</button>
    }.optional_event(ev::click, on_click)
}

[gbj]

Your second option looks to me like it should work. Does it?

[Umenokin]

Yes, it does. Found this solution very last minute. So this is the recommended way to do it?

[gbj]

Yep looks good to me!

[Umenokin]

@gbj got it, thanks!

[liquidnya]

For optional callback properties I like to use into:
#[prop(optional, into)]:

pub struct MouseEventFn(Box<dyn Fn(MouseEvent) + 'static>);

impl<T> From<T> for MouseEventFn where T: Fn(MouseEvent) + 'static {
    fn from(value: T) -> Self {
        Self(Box::new(value))
    }
}

impl MouseEventFn {
    pub fn into_inner(self) -> Box<dyn Fn(MouseEvent) + 'static> {
        self.0
    }
}

#[component]
pub fn Button(
    #[prop(default = ButtonType::Button)] type_: ButtonType,
    #[prop(default = ButtonVariant::Primary)] variant: ButtonVariant,
    #[prop(optional, into)] on_click: Option<MouseEventFn>,
    children: Children,
) -> impl IntoView {
    let cls = format!("btn {}", variant.to_str());

    view! {
        <button class={cls} type={type_.to_str()}>{children()}</button>
    }.optional_event(ev::click, on_click.map(MouseEventFn::into_inner))
}

This does introduce another type and also using the callback now requires on_click.map(MouseEventFn::into_inner) instead of just using on_click, however it enables the following for the user of the component:

view! {
  <Button on_click=|e| leptos::log!("Click Event: {e:?}")>
      "Button with callback"
  </Button>
  <Button>
      "Button without a callback"
  </Button>
}

This is because .into() will be called on the closure |e| leptos::log!("Click Event: {e:?}") and it will be converted to a MouseEventFn which boxes the closure automatically.

Note that calling .into() on a closure to turn it into a Box<dyn Fn(...) -> ...> will not work and you would get an error like this one:

the trait `From<[closure@frontend/src/lib.rs:132:26: 132:29]>` is not implemented for `Box<(dyn std::ops::Fn(MouseEvent) + 'static)>`

This is why I am introducing the type MouseEventFn which converts directly from anything implementing the Fn trait and boxing the value there.

[Umenokin]

@liquidnya thank you, this one is really nice!

[rambip]

Did you know that I pushed a recent Callback proposal ?

You can look at https://github.com/leptos-rs/leptos/blob/main/leptos_dom/src/callback.rs

I don't know what you can't see it in the alpha documentation though ...

[Umenokin]

Thank you, @rambip . Any progress on your proposal? I cannot see the page you referenced

[rambip]

Oh it's very complete now !
Just look for "callback" in the docs of leptos 0.5.1

[rambip]

The will be a chapter on it in the docs soon