2020-05-28 18:09:25 +00:00
|
|
|
mod group;
|
2020-06-21 15:57:50 +00:00
|
|
|
mod props;
|
2020-05-28 18:09:25 +00:00
|
|
|
mod textarea;
|
|
|
|
|
2020-06-21 15:57:50 +00:00
|
|
|
use self::props::Props;
|
2020-05-28 18:09:25 +00:00
|
|
|
pub use self::{group::InputGroup, textarea::TextArea};
|
2020-06-21 15:57:50 +00:00
|
|
|
use crate::{prelude::*, render};
|
|
|
|
use std::fmt::{Display, Formatter, Result as FmtResult};
|
2021-04-11 15:29:42 +00:00
|
|
|
#[cfg(feature = "validate")]
|
|
|
|
use validator::ValidationErrors;
|
2020-05-28 18:09:25 +00:00
|
|
|
use yew::prelude::*;
|
|
|
|
|
|
|
|
#[derive(Clone, PartialEq)]
|
|
|
|
pub enum InputType {
|
|
|
|
Text,
|
2020-06-21 15:57:50 +00:00
|
|
|
Date,
|
2020-06-21 19:58:26 +00:00
|
|
|
DateTime,
|
2020-06-21 15:57:50 +00:00
|
|
|
Checkbox,
|
|
|
|
Color,
|
2020-05-28 18:09:25 +00:00
|
|
|
}
|
|
|
|
|
2020-06-21 15:57:50 +00:00
|
|
|
impl Display for InputType {
|
|
|
|
fn fmt(&self, f: &mut Formatter) -> FmtResult {
|
2020-05-28 18:09:25 +00:00
|
|
|
match self {
|
2020-06-21 15:57:50 +00:00
|
|
|
Self::Text => write!(f, "text"),
|
|
|
|
Self::Date => write!(f, "date"),
|
2020-06-21 19:58:26 +00:00
|
|
|
Self::DateTime => write!(f, "datetime-local"),
|
2020-06-21 15:57:50 +00:00
|
|
|
Self::Checkbox => write!(f, "checkbox"),
|
|
|
|
Self::Color => write!(f, "color"),
|
2020-05-28 18:09:25 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
pub struct Input {
|
|
|
|
link: ComponentLink<Self>,
|
|
|
|
state: String,
|
|
|
|
props: Props,
|
|
|
|
}
|
|
|
|
|
|
|
|
#[derive(Debug)]
|
|
|
|
pub struct InputChange(ChangeData);
|
|
|
|
|
|
|
|
impl Component for Input {
|
|
|
|
type Message = InputChange;
|
|
|
|
type Properties = Props;
|
|
|
|
|
|
|
|
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
|
|
|
|
let state = props.value.clone();
|
|
|
|
Self { props, state, link }
|
|
|
|
}
|
|
|
|
|
|
|
|
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
|
|
|
if let InputChange(ChangeData::Value(value)) = msg {
|
|
|
|
self.state = value.clone();
|
2020-06-03 19:33:25 +00:00
|
|
|
self.props.on_change.emit(value);
|
2020-05-28 18:09:25 +00:00
|
|
|
true
|
|
|
|
} else {
|
|
|
|
false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
|
|
|
if self.props.value != props.value {
|
|
|
|
self.state = props.value.clone();
|
|
|
|
}
|
2020-10-18 17:19:48 +00:00
|
|
|
render_if_ne(&mut self.props, props)
|
2020-05-28 18:09:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
fn view(&self) -> Html {
|
2021-04-11 15:29:42 +00:00
|
|
|
let input_type = self.props.input_type.as_ref().unwrap_or(&InputType::Text);
|
2020-06-21 15:57:50 +00:00
|
|
|
let mut prefix = if self.props.readonly {
|
|
|
|
vec!["form-control-plaintext"]
|
2020-05-28 18:09:25 +00:00
|
|
|
} else {
|
2020-06-21 15:57:50 +00:00
|
|
|
vec!["form-control"]
|
2020-05-28 18:09:25 +00:00
|
|
|
};
|
2020-06-21 15:57:50 +00:00
|
|
|
prefix.push(valid_as_class(&self.props.valid));
|
|
|
|
let html = html! {
|
2020-05-28 18:09:25 +00:00
|
|
|
<input
|
2020-06-21 15:57:50 +00:00
|
|
|
type=input_type
|
2020-05-28 18:09:25 +00:00
|
|
|
value=&self.state
|
|
|
|
readonly=self.props.readonly
|
|
|
|
onchange=self.link.callback(|evt| InputChange(evt))
|
|
|
|
/>
|
2020-06-21 15:57:50 +00:00
|
|
|
};
|
|
|
|
render::render_with_prefix(&self.props, prefix, html)
|
2020-06-03 19:33:25 +00:00
|
|
|
}
|
|
|
|
}
|
2021-04-11 15:29:42 +00:00
|
|
|
|
|
|
|
#[cfg(feature = "validate")]
|
|
|
|
fn render_validation_feedback<S: AsRef<str>>(field: S, errors: &Option<ValidationErrors>) -> Html {
|
|
|
|
if let Some(ref errors) = errors {
|
|
|
|
let errors = errors.field_errors();
|
|
|
|
if let Some(errors) = errors.get(field.as_ref()) {
|
|
|
|
html! {
|
|
|
|
<div class="invalid-feedback">
|
|
|
|
{ for errors.iter().filter_map(|error| error.message.as_ref()) }
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
html! {}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
html! {}
|
|
|
|
}
|
|
|
|
}
|