diff --git a/examples/experimentals/src/app.rs b/examples/experimentals/src/app.rs index 6a599e98..7a2af1a1 100644 --- a/examples/experimentals/src/app.rs +++ b/examples/experimentals/src/app.rs @@ -1,6 +1,6 @@ //#![deny(warnings)] use crate::button::{self, Button}; -use crate::date_time::{self, date, time, DateTimeWidget}; +use crate::datebox::{date, datebox, time}; use js_sys::Date; use sauron::dom::component; use sauron::dom::stateful_component; @@ -47,7 +47,7 @@ impl Application for App { type MSG = Msg; fn init(&mut self) -> Cmd { - Cmd::from(Time::every(5_000, || Msg::Clock)) + Time::every(5_000, || Msg::Clock) } fn update(&mut self, msg: Msg) -> Cmd { @@ -168,7 +168,7 @@ impl Application for App { {stateful_component(Button::default(), [], [text!("External child of btn stateful_component: {}", self.click_count)])}
- {stateful_component(DateTimeWidget::default(), [date("2022-07-07"), time("07:07")],[text("External child of date widget")])} + {datebox([date("2022-07-07"), time("07:07")],[text("External child of date widget")])}
} diff --git a/examples/experimentals/src/button.rs b/examples/experimentals/src/button.rs index 0bbbd428..7c65e9d0 100644 --- a/examples/experimentals/src/button.rs +++ b/examples/experimentals/src/button.rs @@ -1,10 +1,8 @@ -use crate::dom::DomAttr; use crate::dom::DomAttrValue; use sauron::dom::Component; use sauron::dom::DomNode; use sauron::dom::StatefulComponent; use sauron::prelude::*; -use sauron::vdom::AttributeName; #[derive(Default)] pub enum Msg { @@ -62,7 +60,9 @@ impl Component for Button { } impl StatefulComponent for Button { - fn attribute_changed(&mut self, attr_name: &str, new_value: Vec) {} + fn attribute_changed(&mut self, attr_name: &str, new_value: Vec) { + log::info!("attribute changed: {attr_name}: {new_value:?}"); + } /// append a child into this component fn append_children(&mut self, children: Vec) { diff --git a/examples/experimentals/src/date_time.rs b/examples/experimentals/src/datebox.rs similarity index 56% rename from examples/experimentals/src/date_time.rs rename to examples/experimentals/src/datebox.rs index c22ba798..37f1a66c 100644 --- a/examples/experimentals/src/date_time.rs +++ b/examples/experimentals/src/datebox.rs @@ -1,14 +1,6 @@ -use sauron::dom::DomAttr; -use sauron::dom::DomAttrValue; use sauron::dom::DomNode; -use sauron::dom::MountProcedure; -use sauron::dom::StatefulComponent; -use sauron::vdom::AttributeName; -use sauron::wasm_bindgen::JsCast; -use sauron::{ - html::attributes::*, html::events::*, html::*, jss, vdom::Callback, wasm_bindgen, web_sys, - Attribute, Effects, JsValue, Node, *, -}; +use sauron::vdom::Callback; +use sauron::*; use std::fmt::Debug; #[derive(Debug, Clone)] @@ -16,48 +8,38 @@ pub enum Msg { DateChange(String), TimeChange(String), TimeOrDateModified(String), - IntervalChange(f64), Mounted(MountEvent), - ExternContMounted(DomNode), - BtnClick, - NoOp, } #[derive(Debug, Clone)] -pub struct DateTimeWidget { +pub struct DateBox { /// the host element the web editor is mounted to, when mounted as a custom web component host_element: Option, date: String, time: String, - cnt: i32, time_change_listener: Vec>, - children: Vec, - external_children_node: Option, } -impl Default for DateTimeWidget { +impl Default for DateBox { fn default() -> Self { Self { host_element: None, date: String::new(), time: String::new(), - cnt: 0, time_change_listener: vec![], - children: vec![], - external_children_node: None, } } } -impl DateTimeWidget +impl DateBox where XMSG: 'static, { + #[allow(unused)] pub fn new(date: &str, time: &str) -> Self { - DateTimeWidget { + DateBox { date: date.to_string(), time: time.to_string(), - cnt: 0, ..Default::default() } } @@ -66,6 +48,7 @@ where format!("{} {}", self.date, self.time) } + #[allow(unused)] pub fn on_date_time_change(mut self, f: F) -> Self where F: Fn(String) -> XMSG + 'static, @@ -75,7 +58,7 @@ where } } -impl sauron::Component for DateTimeWidget +impl sauron::Component for DateBox where XMSG: 'static, { @@ -102,14 +85,14 @@ where parent_msg.push(pmsg); } if let Some(host_element) = self.host_element.as_ref() { - /* host_element + .as_element() .set_attribute("date_time", &date_time) .expect("change attribute"); host_element + .as_element() .dispatch_event(&InputEvent::create_web_event_composed()) .expect("must dispatch event"); - */ } else { log::debug!("There is no host_element"); } @@ -121,50 +104,9 @@ where self.host_element = Some(mount_element); Effects::none() } - Msg::ExternContMounted(target_node) => { - log::warn!("-->>> Container for children is now mounted..!"); - target_node.append_children(self.children.drain(..).collect()); - self.external_children_node = Some(target_node); - Effects::none() - } - Msg::BtnClick => { - log::trace!("btn is clicked.."); - self.cnt += 1; - Effects::none() - } - Msg::IntervalChange(interval) => { - log::trace!("There is an interval: {}", interval); - Effects::none() - } - Msg::NoOp => Effects::none(), } } - fn stylesheet() -> Vec { - vec![jss! { - ".datetimebox":{ - border: "1px solid green", - }, - "button": { - background: "#1E88E5", - color: "white", - padding: "10px 10px", - margin: "10px 10px", - border: 0, - font_size: "1.5rem", - border_radius: "5px", - } - }] - } - - fn style(&self) -> Vec { - vec![".just{some:dynamc_style}".to_string()] - } - - fn observed_attributes() -> Vec { - vec!["date", "time", "interval"] - } - view! {
- - -
Here is something!
} } -impl StatefulComponent for DateTimeWidget<()> { +impl StatefulComponent for DateBox<()> { /// this is called when the attributes in the mount is changed fn attribute_changed(&mut self, attr_name: &str, new_value: Vec) { - match &*attr_name { + match attr_name { "time" => { if let Some(new_value) = new_value[0].as_string() { Component::update(self, Msg::TimeChange(new_value)); @@ -198,29 +137,12 @@ impl StatefulComponent for DateTimeWidget<()> { Component::update(self, Msg::DateChange(new_value)); } } - "interval" => { - if let Some(new_value) = new_value[0].as_string() { - let new_value: f64 = str::parse(&new_value).expect("must parse to f64"); - Component::update(self, Msg::IntervalChange(new_value)); - } - } _ => log::warn!("unknown attr_name: {attr_name:?}"), } } - fn append_children(&mut self, children: Vec) { - if let Some(external_children_node) = self.external_children_node.as_ref() { - log::info!("DateTime: ok appending.."); - external_children_node.append_children(children); - } else { - log::debug!( - "DateTime: Just pushing to children since the external holder is not yet mounted" - ); - self.children.extend(children); - } - } fn child_container(&self) -> Option { - todo!() + None } } @@ -232,9 +154,9 @@ pub fn time>(v: V) -> Attribute { attr("time", v) } -pub fn date_time( +pub fn datebox( attrs: impl IntoIterator>, children: impl IntoIterator>, ) -> Node { - stateful_component(DateTimeWidget::default(), attrs, children) + stateful_component(DateBox::default(), attrs, children) } diff --git a/examples/experimentals/src/lib.rs b/examples/experimentals/src/lib.rs index 2aba9f12..4898799e 100644 --- a/examples/experimentals/src/lib.rs +++ b/examples/experimentals/src/lib.rs @@ -1,5 +1,5 @@ -//#![deny(warnings)] -//#![deny(clippy::all)] +#![deny(warnings)] +#![deny(clippy::all)] use app::App; use sauron::*; @@ -8,7 +8,7 @@ extern crate log; mod app; mod button; -mod date_time; +mod datebox; #[wasm_bindgen(start)] pub fn start() {