Added number textfield

This commit is contained in:
Franklin 2023-04-25 19:14:02 -04:00
parent b6754102c6
commit 145c062734
3 changed files with 55 additions and 3 deletions

View File

@ -14,4 +14,5 @@ pub mod nav_bar;
pub mod new_widget; pub mod new_widget;
pub mod project_card; pub mod project_card;
pub mod textfield; pub mod textfield;
pub mod single_media_picker; pub mod single_media_picker;
pub mod number_textfield;

View File

@ -0,0 +1,49 @@
use wasm_bindgen::{JsCast, UnwrapThrowExt};
use web_sys::{HtmlInputElement};
use yew::prelude::*;
use std::{str::FromStr, num::ParseFloatError};
#[derive(Properties, PartialEq, Clone)]
pub struct NumberTextFieldProps {
pub label: String,
pub value: UseStateHandle<f64>,
#[prop_or_default]
pub required: bool,
pub onchange: Option<Callback<f64>>,
}
#[function_component(NumberTextField)]
pub fn number_textfield(props: &NumberTextFieldProps) -> Html {
let on_input_changed = {
let handle = props.value.clone();
let onchange = props.onchange.clone();
Callback::from(move |e: InputEvent| {
let value = match get_number_value_from_input_event(e) {
Ok(float) => float,
Err(error) => {
log::error!("Error ocurred attempting to parse float on input type number. This only happens in firefox browsers. {error}");
0.0
}};
match onchange.clone() {
Some(onchange) => onchange.emit(value),
None => {}
};
handle.set(value);
})
};
html! {
<div class={"textfield-container"}>
<div class={if props.required {"textfield-label-required"} else {"textfield-label"}}>{props.label.clone()}</div>
<input class={"textfield"} type={"number"} step={"any"} oninput={on_input_changed} value={(*props.value).clone().to_string()} pattern={r"\d*"}/>
</div>
}
}
pub fn get_number_value_from_input_event(e: InputEvent) -> Result<f64, ParseFloatError> {
let event: Event = e.dyn_into().unwrap_throw();
let event_target = event.target().unwrap_throw();
let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
f64::from_str(&target.value())
}

View File

@ -3,7 +3,7 @@ use uuid::Uuid;
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::use_navigator; use yew_router::prelude::use_navigator;
use crate::pages::admin::edit::EditType; use crate::{pages::admin::edit::EditType, components::number_textfield::NumberTextField};
#[derive(Properties, PartialEq, Clone)] #[derive(Properties, PartialEq, Clone)]
pub struct UnitFieldsProps { pub struct UnitFieldsProps {
@ -17,7 +17,9 @@ pub fn unit_fields(props: &UnitFieldsProps) -> Html {
let navigator = use_navigator().unwrap(); let navigator = use_navigator().unwrap();
let user_typed = use_state(|| false); let user_typed = use_state(|| false);
// Fields
let price_usd = use_state(|| 0.0);
html! { html! {
<NumberTextField label={String::from("Precio en USD")} required={true} value={price_usd.clone()}/>
} }
} }