50 lines
1.5 KiB
Rust
50 lines
1.5 KiB
Rust
mod button;
|
|
mod table;
|
|
|
|
pub use button::Button;
|
|
pub use table::Table;
|
|
use yew::{function_component, html, Children, Html, Properties};
|
|
|
|
use wasm_bindgen::{JsCast, UnwrapThrowExt};
|
|
use web_sys::{Event, HtmlInputElement, InputEvent};
|
|
use yew::prelude::*;
|
|
|
|
#[derive(Clone, PartialEq, Properties)]
|
|
pub struct InputProps {
|
|
pub value: String,
|
|
pub on_change: Callback<String>,
|
|
}
|
|
|
|
fn get_value_from_input_event(e: InputEvent) -> String {
|
|
let event: Event = e.dyn_into().unwrap_throw();
|
|
let event_target = event.target().unwrap_throw();
|
|
let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
|
|
web_sys::console::log_1(&target.value().into());
|
|
target.value()
|
|
}
|
|
|
|
/// Controlled Text Input Component
|
|
#[function_component(TextInput)]
|
|
pub fn text_input(props: &InputProps) -> Html {
|
|
let InputProps { value, on_change } = props.clone();
|
|
|
|
let oninput = Callback::from(move |input_event: InputEvent| {
|
|
on_change.emit(get_value_from_input_event(input_event));
|
|
});
|
|
|
|
html! {
|
|
<input type="text" class="mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-10 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500" {value} {oninput} />
|
|
}
|
|
}
|
|
|
|
#[derive(Properties, PartialEq, Default)]
|
|
pub struct PageProps {
|
|
#[prop_or_default]
|
|
pub children: Children,
|
|
}
|
|
|
|
#[function_component(Page)]
|
|
pub fn page(props: &PageProps) -> Html {
|
|
html! { <div class="max-w-7xl mx-auto">{ for props.children.iter() }</div> }
|
|
}
|