Interoperability between Fields and Signals

[sebastian]

Hi!

I am fairly new to Leptos, so appologies in advance for my ignorance!

I am building a small demo app that uses the reactive store functionality to manage some global state. Additionally I have component local state here and there that are regular signals.

I have written a component that should be able to take a signal as a property and operate on it. I would like it to be able to both work on signals derived from the store I have setup as well as regular signals I might create in other components.

My problem is that data coming out of the store seems to be of type Field<A> whereas my signals are RwSignal<A> and the two appear incompatible. Is there a way to convert between the two, or alternatively some other parent type I can use, that would allow my component to accept either?

For reference: the component in question (which currently works with my store signals but not my component local ones) looks like this:

#[component]
pub fn LabeledInput(
    #[prop(into)] title: String,
    #[prop(into)] postfix: String,
    #[prop(into)] value: Field<i32>,
) -> impl IntoView {
    let error = RwSignal::new(None);

    view! {
        <label class="mt-2 block">
            {title.clone()}
            <div class="rounded-md border flex flex-row justify-between overflow-hidden items-stretch">
                <input
                    type="text"
                    class="px-2 text-lg grow text-right focus:outline-none"
                    prop:value=move || value.get()
                    on:input:target=move |ev| {
                        match ev.target().value().parse::<i32>() {
                            Ok(v) => {
                                *value.write() = v;
                                error.set(None);
                            }
                            Err(_) => {
                                error.set(Some("Couldn't parse"));
                            }
                        }
                    }
                />

                <div class="bg-gray-100 px-2 text-gray-400 text-lg h-full shrink-0 py-2">
                    {postfix}
                </div>
            </div>
        </label>
        <Show when=move || {
            error.get().is_some()
        }>
            {error}" "<span class="font-semibold">{title.clone()}</span>". It should be a number."
        </Show>
    }
}

Thank you!