Add validation styling

This commit is contained in:
Thomas Gideon 2020-06-19 16:35:43 -04:00
parent 1c03cdb809
commit bfa2f0a64a
4 changed files with 22 additions and 5 deletions

View file

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

View file

@ -55,6 +55,8 @@ pub struct Props {
pub class: String, pub class: String,
#[prop_or_default] #[prop_or_default]
pub style: String, pub style: String,
#[prop_or_default]
pub valid: Option<bool>,
} }
impl Component for Input { impl Component for Input {
@ -84,11 +86,15 @@ impl Component for Input {
} }
fn view(&self) -> Html { fn view(&self) -> Html {
let class = if self.props.readonly { let prefix = if self.props.readonly {
calculate_classes("form-control-plaintext", (&self.props).into()) format!(
"form-control-plaintext{}",
valid_as_class(&self.props.valid)
)
} else { } else {
calculate_classes("form-control", (&self.props).into()) format!("form-control{}", valid_as_class(&self.props.valid))
}; };
let class = calculate_classes(prefix, (&self.props).into());
html! { html! {
<input <input
name=&self.props.name name=&self.props.name

View file

@ -35,6 +35,8 @@ pub struct Props {
pub style: String, pub style: String,
#[prop_or_default] #[prop_or_default]
pub value: String, pub value: String,
#[prop_or_default]
pub valid: Option<bool>,
} }
impl Component for TextArea { impl Component for TextArea {
@ -65,11 +67,12 @@ impl Component for TextArea {
} }
fn view(&self) -> Html { fn view(&self) -> Html {
let prefix = format!("form-control{}", valid_as_class(&self.props.valid));
html! { html! {
<textarea <textarea
name=&self.props.name name=&self.props.name
id=&self.props.id id=&self.props.id
class=calculate_classes("form-control", (&self.props).into()) class=calculate_classes(prefix, (&self.props).into())
onchange=self.link.callback(|evt| InputChange(evt)) onchange=self.link.callback(|evt| InputChange(evt))
> >
{ &self.state } { &self.state }

View file

@ -124,6 +124,14 @@ pub fn render_on_change<P: Properties + PartialEq>(
} }
} }
pub fn valid_as_class(v: &Option<bool>) -> &'static str {
match v {
None => "",
Some(true) => " is-valid",
Some(false) => " is-invalid",
}
}
pub fn collect_bs<'a, T>(t: &'a Option<T>, ts: &'a [T]) -> Vec<&'a T> { pub fn collect_bs<'a, T>(t: &'a Option<T>, ts: &'a [T]) -> Vec<&'a T> {
if let Some(t) = t.as_ref() { if let Some(t) = t.as_ref() {
let mut r = vec![t]; let mut r = vec![t];