Add alert component.

This commit is contained in:
Thomas Gideon 2020-06-20 12:03:49 -04:00
parent bfa2f0a64a
commit 6a6391319e
4 changed files with 94 additions and 1 deletions

View File

@ -1,6 +1,6 @@
[package]
name = "bootstrap-rs"
version = "0.2.4"
version = "0.2.5"
authors = ["Thomas Gideon <cmdln@thecommandline.net>"]
edition = "2018"

17
src/alert/convert.rs Normal file
View File

@ -0,0 +1,17 @@
use super::Props;
use crate::prelude::*;
impl<'a> From<&'a Props> for BootstrapProps<'a> {
fn from(props: &Props) -> BootstrapProps {
let class = &props.class;
let borders = collect_bs(&props.border, &props.borders);
let margins = collect_bs(&props.margin, &props.margins);
let paddings = collect_bs(&props.padding, &props.paddings);
BootstrapProps {
class,
borders,
margins,
paddings,
}
}
}

74
src/alert/mod.rs Normal file
View File

@ -0,0 +1,74 @@
mod convert;
use crate::prelude::*;
use yew::{html::Children, prelude::*};
pub struct Alert {
link: ComponentLink<Self>,
props: Props,
}
#[derive(Properties, Default, Clone, PartialEq)]
pub struct Props {
pub on_close: Callback<()>,
pub color: Color,
#[prop_or_default]
pub aria_label: String,
#[prop_or_default]
pub role: String,
#[prop_or_default]
pub border: Option<Border>,
#[prop_or_default]
pub borders: Vec<Border>,
#[prop_or_default]
pub margin: Option<Margin>,
#[prop_or_default]
pub margins: Vec<Margin>,
#[prop_or_default]
pub padding: Option<Padding>,
#[prop_or_default]
pub paddings: Vec<Padding>,
#[prop_or_default]
pub class: String,
#[prop_or_default]
pub style: String,
#[prop_or_default]
pub children: Children,
}
impl Component for Alert {
type Properties = Props;
type Message = ();
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
Self { link, props }
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
self.props.on_close.emit(());
true
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
render_on_change(&mut self.props, props)
}
fn view(&self) -> Html {
let color_class = self.props.color.with_prefix("alert-");
let class = calculate_classes(format!("alert {}", color_class), (&self.props).into());
html! {
<div class=class>
{ self.props.children.render() }
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
onclick=self.link.callback(|_| ())
>
<span aria-hidden="true">{ "×" }</span>
</button>
</div>
}
}
}

View File

@ -1,3 +1,4 @@
pub mod alert;
mod breadcrumb;
mod button;
mod card;
@ -8,6 +9,7 @@ mod jumbotron;
pub mod prelude;
pub use self::{
alert::Alert,
breadcrumb::{Breadcrumb, BreadcrumbItem},
button::ButtonGroup,
card::{Card, CardBody, CardHeader, CardText},