Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@ jobs:
- uses: actions-rs/cargo@v1
with:
command: build
- uses: actions-rs/cargo@v1
with:
command: test
117 changes: 114 additions & 3 deletions src/components/modal.rs
Original file line number Diff line number Diff line change
Expand Up @@ -235,32 +235,143 @@ pub struct ModalCloseMsg(pub String);
/// use yew::agent::Dispatcher;
/// use yew::prelude::*;
/// // .. snip ..
/// # use ybc::{Button, ModalCloser, ModalCloseMsg, ModalCard};
/// #
/// # #[derive(Properties, Clone, PartialEq)]
/// # struct MyComponentProps {}
/// #
/// # struct MyComponent {
/// # link: ComponentLink<Self>,
/// # props: MyComponentProps,
/// # bridge: Dispatcher<ModalCloser>,
/// # }
/// #
/// # impl Component for MyComponent {
/// # type Properties = MyComponentProps;
/// # type Message = ModalCloseMsg;
/// #
/// fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
/// let bridge = ModalCloser::dispatcher();
/// Self{link, props, bridge}
/// Self { link, props, bridge }
/// }
/// #
/// # fn update(&mut self, msg: Self::Message) -> ShouldRender {
/// # self.bridge.send(msg);
/// # true
/// # }
/// #
/// # fn change(&mut self, props: Self::Properties) -> ShouldRender { false }
/// #
/// # fn view(&self) -> Html {
/// # let closer = self.link.callback(|_| ModalCloseMsg("modal-0".into()));
/// # html! {
/// # <ModalCard
/// # id="modal-0"
/// # title="modal-title"
/// # // ... snip ...
/// # footer=html! {
/// # <Button onclick=closer>{ "Close" }</Button>
/// # }
/// # />
/// # }
/// # }
/// # }
/// ```
///
/// Next, in your component's `view` method, setup a callback to handle your component's close event.
/// ```rust
/// # use yew::agent::Dispatcher;
/// # use yew::prelude::*;
/// # use ybc::{Button, ModalCloser, ModalCloseMsg, ModalCard};
/// #
/// # #[derive(Properties, Clone, PartialEq)]
/// # struct MyComponentProps {}
/// #
/// # struct MyComponent {
/// # link: ComponentLink<Self>,
/// # props: MyComponentProps,
/// # bridge: Dispatcher<ModalCloser>,
/// # }
/// #
/// # impl Component for MyComponent {
/// # type Properties = MyComponentProps;
/// # type Message = ModalCloseMsg;
/// #
/// # fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
/// # let bridge = ModalCloser::dispatcher();
/// # Self { link, props, bridge }
/// # }
/// #
/// # fn update(&mut self, msg: Self::Message) -> ShouldRender {
/// # self.bridge.send(msg);
/// # true
/// # }
/// #
/// # fn change(&mut self, props: Self::Properties) -> ShouldRender { false }
/// #
/// # fn view(&self) -> Html {
/// let closer = self.link.callback(|_| ModalCloseMsg("modal-0".into()));
/// // ... snip ...
/// # html! {
/// <ModalCard
/// id="modal-0"
/// title="modal-title"
/// // ... snip ...
/// footer=html!{
/// <Button onclick=Some(closer)>{"Close"}</Button>
/// footer=html! {
/// <Button onclick=closer>{ "Close" }</Button>
/// }
/// />
/// # }
/// # }
/// # }
/// ```
///
/// Finally, in your component's `update` method, send the `ModalCloseMsg` over to the agent which
/// will forward the message to the modal to cause it to close.
/// ```rust
/// # use yew::agent::Dispatcher;
/// # use yew::prelude::*;
/// # use ybc::{Button, ModalCloser, ModalCloseMsg, ModalCard};
/// #
/// # #[derive(Properties, Clone, PartialEq)]
/// # struct MyComponentProps {}
/// #
/// # struct MyComponent {
/// # link: ComponentLink<Self>,
/// # props: MyComponentProps,
/// # bridge: Dispatcher<ModalCloser>,
/// # }
/// #
/// # impl Component for MyComponent {
/// # type Properties = MyComponentProps;
/// # type Message = ModalCloseMsg;
/// #
/// # fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
/// # let bridge = ModalCloser::dispatcher();
/// # Self { link, props, bridge }
/// # }
/// #
/// fn update(&mut self, msg: Self::Message) -> ShouldRender {
/// self.bridge.send(msg);
/// true
/// }
/// #
/// # fn change(&mut self, props: Self::Properties) -> ShouldRender { false }
/// #
/// # fn view(&self) -> Html {
/// # let closer = self.link.callback(|_| ModalCloseMsg("modal-0".into()));
/// # html! {
/// # <ModalCard
/// # id="modal-0"
/// # title="modal-title"
/// # // ... snip ...
/// # footer=html! {
/// # <Button onclick=closer>{ "Close" }</Button>
/// # }
/// # />
/// # }
/// # }
/// # }
/// ```
///
/// This pattern allows you to communicate with a modal by its given ID, allowing
Expand Down