diff --git a/packages/web/examples/basic.rs b/packages/web/examples/basic.rs index 2badc320a..c41b34d7d 100644 --- a/packages/web/examples/basic.rs +++ b/packages/web/examples/basic.rs @@ -26,39 +26,48 @@ static APP: FC<()> = |cx, props| { let mut count = use_state(cx, || 3); cx.render(rsx! { - button { - // onclick: move |_| count += 1, - onmouseover: move |_| count += 5, - onmouseout: move |_| count -= 5, - "Click to add." - "Current count: {count}" + div { + button { + onclick: move |_| count += 1, + "Click to add." + "Current count: {count}" + } + select { + name:"cars" + id:"cars" + oninput: move |ev| { + match ev.value().as_str() { + "h1" => count.set(0), + "h2" => count.set(5), + "h3" => count.set(10), + s => { + log::debug!("real value is {}", s); + } + } + }, + option { value: "h1", "h1" } + option { value: "h2", "h2" } + option { value: "h3", "h3" } + } + + ul { + {(0..*count).map(|f| rsx!{ + li { "a - {f}" } + li { "b - {f}" } + li { "c - {f}" } + })} + } + Child {} } - // div { - // button { - // onclick: move |_| count += 1, - // "Click to add." - // "Current count: {count}" - // } - // ul { - // {(0..*count).map(|f| rsx!{ - // li { "a - {f}" } - // li { "b - {f}" } - // li { "c - {f}" } - // })} - // } - // Child {} - // } }) }; -// static Child: FC<()> = |cx, props| { -// cx.render(rsx! { -// div { -// div { -// div { -// "hello child" -// } -// } -// } -// }) -// }; +static Child: FC<()> = |cx, props| { + cx.render(rsx! { + div { + div { + "hello child" + } + } + }) +}; diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 80c87f967..56326b58d 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -445,7 +445,7 @@ fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent { SyntheticEvent::ClipboardEvent(ClipboardEvent(Rc::new(WebsysClipboardEvent(event)))) } "compositionend" | "compositionstart" | "compositionupdate" => { - let evt: web_sys::CompositionEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::CompositionEvent = event.dyn_into().unwrap(); SyntheticEvent::CompositionEvent(CompositionEvent(Rc::new(WebsysCompositionEvent(evt)))) } "keydown" | "keypress" | "keyup" => { @@ -461,57 +461,57 @@ fn virtual_event_from_websys_event(event: web_sys::Event) -> SyntheticEvent { SyntheticEvent::GenericEvent(GenericEvent(Rc::new(WebsysGenericUiEvent(evt)))) } "input" | "invalid" | "reset" | "submit" => { - let evt: web_sys::InputEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::Event = event.dyn_into().unwrap(); SyntheticEvent::FormEvent(FormEvent(Rc::new(WebsysFormEvent(evt)))) } "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => { - let evt: web_sys::MouseEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::MouseEvent = event.dyn_into().unwrap(); SyntheticEvent::MouseEvent(MouseEvent(Rc::new(WebsysMouseEvent(evt)))) } "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture" | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => { - let evt: web_sys::PointerEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::PointerEvent = event.dyn_into().unwrap(); SyntheticEvent::PointerEvent(PointerEvent(Rc::new(WebsysPointerEvent(evt)))) } "select" => { - let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::UiEvent = event.dyn_into().unwrap(); SyntheticEvent::SelectionEvent(SelectionEvent(Rc::new(WebsysGenericUiEvent(evt)))) } "touchcancel" | "touchend" | "touchmove" | "touchstart" => { - let evt: web_sys::TouchEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::TouchEvent = event.dyn_into().unwrap(); SyntheticEvent::TouchEvent(TouchEvent(Rc::new(WebsysTouchEvent(evt)))) } "scroll" => { - let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::UiEvent = event.dyn_into().unwrap(); SyntheticEvent::GenericEvent(GenericEvent(Rc::new(WebsysGenericUiEvent(evt)))) } "wheel" => { - let evt: web_sys::WheelEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::WheelEvent = event.dyn_into().unwrap(); SyntheticEvent::WheelEvent(WheelEvent(Rc::new(WebsysWheelEvent(evt)))) } "animationstart" | "animationend" | "animationiteration" => { - let evt: web_sys::AnimationEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::AnimationEvent = event.dyn_into().unwrap(); SyntheticEvent::AnimationEvent(AnimationEvent(Rc::new(WebsysAnimationEvent(evt)))) } "transitionend" => { - let evt: web_sys::TransitionEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::TransitionEvent = event.dyn_into().unwrap(); SyntheticEvent::TransitionEvent(TransitionEvent(Rc::new(WebsysTransitionEvent(evt)))) } "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted" | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate" | "volumechange" | "waiting" => { - let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::UiEvent = event.dyn_into().unwrap(); SyntheticEvent::MediaEvent(MediaEvent(Rc::new(WebsysMediaEvent(evt)))) } "toggle" => { - let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::UiEvent = event.dyn_into().unwrap(); SyntheticEvent::ToggleEvent(ToggleEvent(Rc::new(WebsysToggleEvent(evt)))) } _ => { - let evt: web_sys::UiEvent = event.clone().dyn_into().unwrap(); + let evt: web_sys::UiEvent = event.dyn_into().unwrap(); SyntheticEvent::GenericEvent(GenericEvent(Rc::new(WebsysGenericUiEvent(evt)))) } } diff --git a/packages/web/src/events.rs b/packages/web/src/events.rs index ff4ced474..7257fad2a 100644 --- a/packages/web/src/events.rs +++ b/packages/web/src/events.rs @@ -241,7 +241,7 @@ impl SelectionEventInner for WebsysGenericUiEvent {} pub struct WebsysFocusEvent(pub web_sys::FocusEvent); impl FocusEventInner for WebsysFocusEvent {} -pub struct WebsysFormEvent(pub web_sys::InputEvent); +pub struct WebsysFormEvent(pub web_sys::Event); impl FormEventInner for WebsysFormEvent { // technically a controlled component, so we need to manually grab out the target data fn value(&self) -> String { @@ -254,6 +254,12 @@ impl FormEventInner for WebsysFormEvent { .dyn_ref() .map(|input: &web_sys::HtmlTextAreaElement| input.value()) }) + // select elements are NOT input events - because - why woudn't they be?? + .or_else(|| { + this + .dyn_ref() + .map(|input: &web_sys::HtmlSelectElement| input.value()) + }) .or_else(|| { this .dyn_ref::()