Add validation styling
This commit is contained in:
parent
1c03cdb809
commit
bfa2f0a64a
4 changed files with 22 additions and 5 deletions
|
@ -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"
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 }
|
||||||
|
|
|
@ -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];
|
||||||
|
|
Loading…
Reference in a new issue