mirror of
https://github.com/zaphar/kitchen.git
synced 2025-07-22 19:40:14 -04:00
75 lines
2.9 KiB
Rust
75 lines
2.9 KiB
Rust
// Copyright 2023 Jeremy Wall (Jeremy@marzhilsltudios.com)
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
use sycamore::prelude::*;
|
|
use tracing::debug;
|
|
use web_sys::{Event, HtmlInputElement};
|
|
|
|
use crate::js_lib;
|
|
|
|
#[derive(Props)]
|
|
pub struct NumberProps<'ctx, F>
|
|
where
|
|
F: Fn(Event),
|
|
{
|
|
name: String,
|
|
on_change: Option<F>,
|
|
min: i32,
|
|
counter: &'ctx Signal<String>,
|
|
}
|
|
|
|
#[component]
|
|
pub fn NumberField<'ctx, F, G: Html>(cx: Scope<'ctx>, props: NumberProps<'ctx, F>) -> View<G>
|
|
where
|
|
F: Fn(web_sys::Event) + 'ctx,
|
|
{
|
|
let NumberProps {
|
|
name,
|
|
on_change,
|
|
min,
|
|
counter,
|
|
} = props;
|
|
|
|
let id = name.clone();
|
|
let inc_target_id = id.clone();
|
|
let dec_target_id = id.clone();
|
|
let min_field = format!("{}", min);
|
|
|
|
view! {cx,
|
|
div() {
|
|
input(type="number", id=id, name=name, class="item-count-sel", min=min_field, max="99", step="1", bind:value=counter, on:input=move |evt| {
|
|
on_change.as_ref().map(|f| f(evt));
|
|
})
|
|
span(class="item-count-inc-dec", on:click=move |_| {
|
|
let i: i32 = counter.get_untracked().parse().unwrap();
|
|
let target = js_lib::get_element_by_id::<HtmlInputElement>(&inc_target_id).unwrap().expect(&format!("No such element with id {}", inc_target_id));
|
|
counter.set(format!("{}", i+1));
|
|
debug!(counter=%(counter.get_untracked()), "set counter to new value");
|
|
// We force an input event to get triggered for our target.
|
|
target.dispatch_event(&web_sys::Event::new("input").expect("Failed to create new event")).expect("Failed to dispatch event to target");
|
|
}) { "▲" }
|
|
" "
|
|
span(class="item-count-inc-dec", on:click=move |_| {
|
|
let i: i32 = counter.get_untracked().parse().unwrap();
|
|
let target = js_lib::get_element_by_id::<HtmlInputElement>(&dec_target_id).unwrap().expect(&format!("No such element with id {}", dec_target_id));
|
|
if i > min {
|
|
counter.set(format!("{}", i-1));
|
|
debug!(counter=%(counter.get_untracked()), "set counter to new value");
|
|
// We force an input event to get triggered for our target.
|
|
target.dispatch_event(&web_sys::Event::new("input").expect("Failed to create new event")).expect("Failed to dispatch event to target");
|
|
}
|
|
}) { "▼" }
|
|
}
|
|
}
|
|
}
|