From 231f46dfad78155ba082a12b57b4bf5736e8f23b Mon Sep 17 00:00:00 2001 From: Richard LASJUNIES Date: Fri, 8 May 2020 18:54:11 +0200 Subject: [PATCH 1/4] add emitevents page --- src/concepts/components/emitevents.md | 334 ++++++++++++++++++++++++++ 1 file changed, 334 insertions(+) create mode 100644 src/concepts/components/emitevents.md diff --git a/src/concepts/components/emitevents.md b/src/concepts/components/emitevents.md new file mode 100644 index 0000000..045306b --- /dev/null +++ b/src/concepts/components/emitevents.md @@ -0,0 +1,334 @@ +--- +description: Component could share update to the parent html component emit events +--- + +# Emit events + +It's possible to update the parent containers emitting **events** by the same way we received data via **properties**. + +The events are defined as part of the `Properties` struct. + +When it's needed you just need to call the `emit()` method of the event, to propagate the update to the parents containers. + +> You could name the event as you want. It's usually started by "on" + +```rust +use yew::prelude::*; + +pub struct EmitEventComponent { + link: ComponentLink, + props: Props, + name: String, + show_message: bool, +} + +pub enum Msg { + Click(), + Click4Event(), +} + +#[derive(Properties, Clone, PartialEq)] +pub struct Props{ + #[prop_or("Clark by default".to_string())] + pub name: String, + + #[prop_or_default] + pub onmyclickevent:Callback, +} + +impl Component for EmitEventComponent { + type Message = Msg; + type Properties = Props; + + fn create(props: Self::Properties, link: ComponentLink) -> Self { + Self { + link, + props: props.clone(), + name: props.name.into(), + show_message: false, + } + } + + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Click() => self.show_message = true, + Msg::Click4Event() => self.props.onmyclickevent.emit("Hello Loise".into()), + } + true + } + + fn change(&mut self, props: Self::Properties) -> ShouldRender { + if self.props != props { + self.props = props; + true + } else { + false + } + } + + fn view(&self) -> Html { + if !self.show_message { + html! { + <> + + + } + } else { + html! { + <> + {"Click on clark to raised an event for the parent container ;-)"} +

+ {format!("Hello {}",self.name)}

+ + } + } + } +} +``` + +## Define the Event + +Here we are defining a new event named `onmyclickevent` with a `String` as parameter. + +```rust +# use yew::prelude::*; +# +# pub struct EmitEventComponent { +# link: ComponentLink, +# props: Props, +# name: String, +# show_message: bool, +# } +# +# pub enum Msg { +# Click(), +# Click4Event(), +# } + +// ... +#[derive(Properties, Clone, PartialEq)] +pub struct Props{ + #[prop_or("Clark by default".to_string())] + pub name: String, + #[prop_or_default] + pub onmyclickevent:Callback, +} +// ... + +# impl Component for EmitEventComponent { +# type Message = Msg; +# type Properties = Props; +# +# fn create(props: Self::Properties, link: ComponentLink) -> Self { +# Self { +# link, +# props: props.clone(), +# name: props.name.into(), +# show_message: false, +# } +# } +# +# fn update(&mut self, msg: Self::Message) -> ShouldRender { +# match msg { +# Msg::Click() => self.show_message = true, +# Msg::Click4Event() => self.props.onmyclickevent.emit("Hello Loise".into()), +# } +# true +# } +# +# fn change(&mut self, props: Self::Properties) -> ShouldRender { +# if self.props != props { +# self.props = props; +# true +# } else { +# false +# } +# } +# +# fn view(&self) -> Html { +# if !self.show_message { +# html! { +# <> +# +# +# } +# } else { +# html! { +# <> +# {"Click on clark to raised an event for the parent container ;-)"} +#

+# {format!("Hello {}",self.name)}

+# +# } +# } +# } +# } + +``` + +## Emit the Event + +The event are usually emitted in the `update()` method as effect of message + +```rust +# use yew::prelude::*; +# +# pub struct EmitEventComponent { +# link: ComponentLink, +# props: Props, +# name: String, +# show_message: bool, +# } +# +# pub enum Msg { +# Click(), +# Click4Event(), +# } +# +# #[derive(Properties, Clone, PartialEq)] +# pub struct Props{ +# #[prop_or("Clark by default".to_string())] +# pub name: String, +# +# #[prop_or_default] +# pub onmyclickevent:Callback, +# } +# +# impl Component for EmitEventComponent { +# type Message = Msg; +# type Properties = Props; +# +# fn create(props: Self::Properties, link: ComponentLink) -> Self { +# Self { +# link, +# props: props.clone(), +# name: props.name.into(), +# show_message: false, +# } +# } +// ... + fn update(&mut self, msg: Self::Message) -> ShouldRender { + match msg { + Msg::Click() => self.show_message = true, + Msg::Click4Event() => self.props.onmyclickevent.emit("Hello Loise".into()), + } + true + } +// ... +# fn change(&mut self, props: Self::Properties) -> ShouldRender { +# if self.props != props { +# self.props = props; +# true +# } else { +# false +# } +# } +# +# fn view(&self) -> Html { +# if !self.show_message { +# html! { +# <> +# +# +# } +# } else { +# html! { +# <> +# {"Click on clark to raised an event for the parent container ;-)"} +#

+# {format!("Hello {}",self.name)}

+# +# } +# } +# } +# } +``` + +## Mandatory or optionally binded events + +Like for properties you can define the events to be be mandatory or optionaly binded in the parent component. + +This is defined providing or not attributes to the event definition. + +```rust +# use yew::prelude::*; +# +# pub struct EmitEventComponent { +# link: ComponentLink, +# props: Props, +# name: String, +# show_message: bool, +# } +# +# pub enum Msg { +# Click(), +# Click4Event(), +# } +// ... +#[derive(Properties, Clone, PartialEq)] +pub struct Props{ + #[prop_or("Clark by default".to_string())] + pub name: String, + + pub on_i_am_mandatory_event:Callback<()>, + + #[prop_or_default] + pub on_i_am_optional_event:Callback<()>, +} +// ... +# impl Component for EmitEventComponent { +# type Message = Msg; +# type Properties = Props; +# +# fn create(props: Self::Properties, link: ComponentLink) -> Self { +# Self { +# link, +# props: props.clone(), +# name: props.name.into(), +# show_message: false, +# } +# } +# +# fn update(&mut self, msg: Self::Message) -> ShouldRender { +# match msg { +# Msg::Click() => self.show_message = true, +# Msg::Click4Event() => self.props.on_i_am_mandatory_event.emit(()), +# } +# true +# } +# +# fn change(&mut self, props: Self::Properties) -> ShouldRender { +# if self.props != props { +# self.props = props; +# true +# } else { +# false +# } +# } +# +# fn view(&self) -> Html { +# if !self.show_message { +# html! { +# <> +# +# +# } +# } else { +# html! { +# <> +# {"Click on clark to raised an event for the parent container ;-)"} +#

+# {format!("Hello {}",self.name)}

+# +# } +# } +# } +# } + +``` + +Like for the properties a compilatioin error will be raised in case you omitted to bind a mandatory event. The message could be something like: + +> no method named `build` found for struct `components::comp4::PropsBuilder<...PropsBuilderStep_missing_required_prop_name>` in the current scope +> method not found in `...::PropsBuilder<...PropsBuilderStep_missing_required_prop_name>`rustc(E0599) +comp4.rs(14, 10): method `build` not found for this` From a94d9415ab6bf46ad0920b139e4f08de0e6d8e30 Mon Sep 17 00:00:00 2001 From: Richard LASJUNIES Date: Sat, 9 May 2020 18:37:27 +0200 Subject: [PATCH 2/4] updates following Teymour feedbacks --- src/concepts/components/emitevents.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/concepts/components/emitevents.md b/src/concepts/components/emitevents.md index 045306b..07123f8 100644 --- a/src/concepts/components/emitevents.md +++ b/src/concepts/components/emitevents.md @@ -4,13 +4,13 @@ description: Component could share update to the parent html component emit even # Emit events -It's possible to update the parent containers emitting **events** by the same way we received data via **properties**. +It's possible to update the parent containers emitting **events** in the same way we received data via **properties**. The events are defined as part of the `Properties` struct. When it's needed you just need to call the `emit()` method of the event, to propagate the update to the parents containers. -> You could name the event as you want. It's usually started by "on" +> You can name the event as you want. It's usually started by "on" ```rust use yew::prelude::*; @@ -155,7 +155,7 @@ pub struct Props{ # } else { # html! { # <> -# {"Click on clark to raised an event for the parent container ;-)"} +# {"Click on clark to raise an event for the parent container ;-)"} #

# {format!("Hello {}",self.name)}

# @@ -327,7 +327,7 @@ pub struct Props{ ``` -Like for the properties a compilatioin error will be raised in case you omitted to bind a mandatory event. The message could be something like: +Like for the properties a compilation error will be raised in case you omitted to bind a mandatory event. The message could be something like: > no method named `build` found for struct `components::comp4::PropsBuilder<...PropsBuilderStep_missing_required_prop_name>` in the current scope > method not found in `...::PropsBuilder<...PropsBuilderStep_missing_required_prop_name>`rustc(E0599) From 4a08431f6492456cb76d1667c4c148dd07596957 Mon Sep 17 00:00:00 2001 From: Richard LASJUNIES Date: Sat, 9 May 2020 18:41:59 +0200 Subject: [PATCH 3/4] Updates based on Teymour feedbacks --- src/concepts/components/emitevents.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/concepts/components/emitevents.md b/src/concepts/components/emitevents.md index 07123f8..51a2edc 100644 --- a/src/concepts/components/emitevents.md +++ b/src/concepts/components/emitevents.md @@ -1,16 +1,16 @@ --- -description: Component could share update to the parent html component emit events +description: Component could share update to the parent html component emitting events --- # Emit events -It's possible to update the parent containers emitting **events** in the same way we received data via **properties**. +It's possible to update the parent html component emitting **events** in the same way we received data via **properties**. The events are defined as part of the `Properties` struct. When it's needed you just need to call the `emit()` method of the event, to propagate the update to the parents containers. -> You can name the event as you want. It's usually started by "on" +> You can name the event however you want to. It's usually started by "on" ```rust use yew::prelude::*; From 2824e4d937785d3af420b93bb3457d89781ab9f8 Mon Sep 17 00:00:00 2001 From: Richard LASJUNIES Date: Sun, 10 May 2020 18:27:39 +0200 Subject: [PATCH 4/4] fix from other pages and del tests for readibilty --- src/concepts/components/emitevents.md | 206 +------------------------- 1 file changed, 8 insertions(+), 198 deletions(-) diff --git a/src/concepts/components/emitevents.md b/src/concepts/components/emitevents.md index 51a2edc..1101537 100644 --- a/src/concepts/components/emitevents.md +++ b/src/concepts/components/emitevents.md @@ -23,8 +23,8 @@ pub struct EmitEventComponent { } pub enum Msg { - Click(), - Click4Event(), + Click, + Click4Event, } #[derive(Properties, Clone, PartialEq)] @@ -51,8 +51,8 @@ impl Component for EmitEventComponent { fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { - Msg::Click() => self.show_message = true, - Msg::Click4Event() => self.props.onmyclickevent.emit("Hello Loise".into()), + Msg::Click => self.show_message = true, + Msg::Click4Event => self.props.onmyclickevent.emit("Hello Loise".into()), } true } @@ -69,15 +69,13 @@ impl Component for EmitEventComponent { fn view(&self) -> Html { if !self.show_message { html! { - <> - - + } } else { html! { <> {"Click on clark to raised an event for the parent container ;-)"} -

+

{format!("Hello {}",self.name)}

} @@ -91,20 +89,6 @@ impl Component for EmitEventComponent { Here we are defining a new event named `onmyclickevent` with a `String` as parameter. ```rust -# use yew::prelude::*; -# -# pub struct EmitEventComponent { -# link: ComponentLink, -# props: Props, -# name: String, -# show_message: bool, -# } -# -# pub enum Msg { -# Click(), -# Click4Event(), -# } - // ... #[derive(Properties, Clone, PartialEq)] pub struct Props{ @@ -114,56 +98,6 @@ pub struct Props{ pub onmyclickevent:Callback, } // ... - -# impl Component for EmitEventComponent { -# type Message = Msg; -# type Properties = Props; -# -# fn create(props: Self::Properties, link: ComponentLink) -> Self { -# Self { -# link, -# props: props.clone(), -# name: props.name.into(), -# show_message: false, -# } -# } -# -# fn update(&mut self, msg: Self::Message) -> ShouldRender { -# match msg { -# Msg::Click() => self.show_message = true, -# Msg::Click4Event() => self.props.onmyclickevent.emit("Hello Loise".into()), -# } -# true -# } -# -# fn change(&mut self, props: Self::Properties) -> ShouldRender { -# if self.props != props { -# self.props = props; -# true -# } else { -# false -# } -# } -# -# fn view(&self) -> Html { -# if !self.show_message { -# html! { -# <> -# -# -# } -# } else { -# html! { -# <> -# {"Click on clark to raise an event for the parent container ;-)"} -#

-# {format!("Hello {}",self.name)}

-# -# } -# } -# } -# } - ``` ## Emit the Event @@ -171,77 +105,15 @@ pub struct Props{ The event are usually emitted in the `update()` method as effect of message ```rust -# use yew::prelude::*; -# -# pub struct EmitEventComponent { -# link: ComponentLink, -# props: Props, -# name: String, -# show_message: bool, -# } -# -# pub enum Msg { -# Click(), -# Click4Event(), -# } -# -# #[derive(Properties, Clone, PartialEq)] -# pub struct Props{ -# #[prop_or("Clark by default".to_string())] -# pub name: String, -# -# #[prop_or_default] -# pub onmyclickevent:Callback, -# } -# -# impl Component for EmitEventComponent { -# type Message = Msg; -# type Properties = Props; -# -# fn create(props: Self::Properties, link: ComponentLink) -> Self { -# Self { -# link, -# props: props.clone(), -# name: props.name.into(), -# show_message: false, -# } -# } // ... fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { - Msg::Click() => self.show_message = true, - Msg::Click4Event() => self.props.onmyclickevent.emit("Hello Loise".into()), + Msg::Click => self.show_message = true, + Msg::Click4Event => self.props.onmyclickevent.emit("Hello Loise".into()), } true } // ... -# fn change(&mut self, props: Self::Properties) -> ShouldRender { -# if self.props != props { -# self.props = props; -# true -# } else { -# false -# } -# } -# -# fn view(&self) -> Html { -# if !self.show_message { -# html! { -# <> -# -# -# } -# } else { -# html! { -# <> -# {"Click on clark to raised an event for the parent container ;-)"} -#

-# {format!("Hello {}",self.name)}

-# -# } -# } -# } -# } ``` ## Mandatory or optionally binded events @@ -251,19 +123,6 @@ Like for properties you can define the events to be be mandatory or optionaly bi This is defined providing or not attributes to the event definition. ```rust -# use yew::prelude::*; -# -# pub struct EmitEventComponent { -# link: ComponentLink, -# props: Props, -# name: String, -# show_message: bool, -# } -# -# pub enum Msg { -# Click(), -# Click4Event(), -# } // ... #[derive(Properties, Clone, PartialEq)] pub struct Props{ @@ -276,55 +135,6 @@ pub struct Props{ pub on_i_am_optional_event:Callback<()>, } // ... -# impl Component for EmitEventComponent { -# type Message = Msg; -# type Properties = Props; -# -# fn create(props: Self::Properties, link: ComponentLink) -> Self { -# Self { -# link, -# props: props.clone(), -# name: props.name.into(), -# show_message: false, -# } -# } -# -# fn update(&mut self, msg: Self::Message) -> ShouldRender { -# match msg { -# Msg::Click() => self.show_message = true, -# Msg::Click4Event() => self.props.on_i_am_mandatory_event.emit(()), -# } -# true -# } -# -# fn change(&mut self, props: Self::Properties) -> ShouldRender { -# if self.props != props { -# self.props = props; -# true -# } else { -# false -# } -# } -# -# fn view(&self) -> Html { -# if !self.show_message { -# html! { -# <> -# -# -# } -# } else { -# html! { -# <> -# {"Click on clark to raised an event for the parent container ;-)"} -#

-# {format!("Hello {}",self.name)}

-# -# } -# } -# } -# } - ``` Like for the properties a compilation error will be raised in case you omitted to bind a mandatory event. The message could be something like: