Rewrite some components to use render method

This commit is contained in:
eraden 2021-04-18 23:24:20 +02:00
parent 2d7ce5762a
commit e3e55acd54
10 changed files with 351 additions and 346 deletions

View File

@ -81,7 +81,7 @@ impl<'l> ChildBuilder<'l> {
}
}
#[derive(Debug, Default)]
#[derive(Debug)]
pub struct StyledCheckbox<'l, Options>
where
Options: Iterator<Item = ChildBuilder<'l>>,
@ -90,6 +90,18 @@ where
pub class_list: &'l str,
}
impl<'l, Options> Default for StyledCheckbox<'l, Options>
where
Options: Iterator<Item = ChildBuilder<'l>>,
{
fn default() -> Self {
Self {
options: None,
class_list: "",
}
}
}
impl<'l, Options> StyledCheckbox<'l, Options>
where
Options: Iterator<Item = ChildBuilder<'l>>,

View File

@ -49,15 +49,9 @@ impl<'l> Default for StyledEditor<'l> {
}
}
impl<'l> ToNode for StyledEditor<'l> {
impl<'l> StyledEditor<'l> {
#[inline]
fn into_node(self) -> Node<Msg> {
render(self)
}
}
#[inline]
pub fn render(values: StyledEditor) -> Node<Msg> {
pub fn render(self) -> Node<Msg> {
let StyledEditor {
id,
initial_text,
@ -65,7 +59,7 @@ pub fn render(values: StyledEditor) -> Node<Msg> {
html,
mode,
update_event,
} = values;
} = self;
let id = id.expect("Styled Editor requires ID");
let on_editor_clicked = click_handler(id.clone(), Mode::Editor);
@ -87,51 +81,49 @@ pub fn render(values: StyledEditor) -> Node<Msg> {
}
.into_node();
let (editor_radio_node, view_radio_node) = (
div![
C!["styledEditor"],
label![
C![
"navbar viewTab activeTab",
IF![mode == Mode::View => "activeTab"]
],
attrs![At::For => view_id.as_str()],
"View",
on_view_clicked
],
label![
C!["navbar editorTab", IF![mode == Mode::Editor => "activeTab"]],
attrs![At::For => editor_id.as_str()],
"Editor",
on_editor_clicked
],
seed::input![
id![editor_id.as_str()],
C!["editorRadio"],
attrs![At::Type => "radio"; At::Name => name.as_str(); At::Checked => true],
],
text_area,
seed::input![
id![view_id.as_str()],
C!["viewRadio"],
attrs![ At::Type => "radio"; At::Name => name.as_str();],
IF![mode == Mode::View => attrs![At::Checked => true]]
],
);
div![
C!["styledEditor"],
label![
if mode == Mode::View {
C!["navbar viewTab activeTab"]
} else {
C!["navbar viewTab"]
},
attrs![At::For => view_id.as_str()],
"View",
on_view_clicked
],
label![
if mode == Mode::Editor {
C!["navbar editorTab activeTab"]
} else {
C!["navbar editorTab"]
},
attrs![At::For => editor_id.as_str()],
"Editor",
on_editor_clicked
],
editor_radio_node,
text_area,
view_radio_node,
div![
C!["view"],
IF![mode == Mode::Editor => empty![]],
IF![mode == Mode::View => raw![html]],
],
]
}
}
impl<'l> ToNode for StyledEditor<'l> {
#[inline]
fn into_node(self) -> Node<Msg> {
self.render()
}
}
#[inline]

View File

@ -23,20 +23,15 @@ impl<'l> Default for StyledField<'l> {
}
}
impl<'l> ToNode for StyledField<'l> {
fn into_node(self) -> Node<Msg> {
render(self)
}
}
pub fn render(values: StyledField) -> Node<Msg> {
impl<'l> StyledField<'l> {
pub fn render(self) -> Node<Msg> {
let StyledField {
label,
tip,
input,
class_list,
} = values;
let tip_node = tip.map(|s| div![C!["styledTip"], s]).unwrap_or(empty![]);
} = self;
let tip_node = tip.map_or_else(|| empty![], |s| div![C!["styledTip"], s]);
div![
C!["styledField", class_list],
@ -44,4 +39,11 @@ pub fn render(values: StyledField) -> Node<Msg> {
input,
tip_node,
]
}
}
impl<'l> ToNode for StyledField<'l> {
fn into_node(self) -> Node<Msg> {
self.render()
}
}

View File

@ -11,20 +11,14 @@ pub struct StyledForm<'l> {
pub on_submit: Option<EventHandler<Msg>>,
}
impl<'l> ToNode for StyledForm<'l> {
impl<'l> StyledForm<'l> {
#[inline]
fn into_node(self) -> Node<Msg> {
render(self)
}
}
#[inline]
pub fn render(values: StyledForm) -> Node<Msg> {
pub fn render(self) -> Node<Msg> {
let StyledForm {
heading,
fields,
on_submit,
} = values;
} = self;
let handlers = match on_submit {
Some(handler) => vec![handler],
_ => vec![],
@ -34,4 +28,12 @@ pub fn render(values: StyledForm) -> Node<Msg> {
C!["styledForm"],
div![C!["formElement"], div![C!["formHeading"], heading], fields],
]
}
}
impl<'l> ToNode for StyledForm<'l> {
#[inline]
fn into_node(self) -> Node<Msg> {
self.render()
}
}

View File

@ -271,11 +271,12 @@ impl<'l> Default for StyledIcon<'l> {
impl<'l> ToNode for StyledIcon<'l> {
fn into_node(self) -> Node<Msg> {
render(self)
self.render()
}
}
pub fn render(values: StyledIcon) -> Node<Msg> {
impl<'l> StyledIcon<'l> {
pub fn render(self) -> Node<Msg> {
let StyledIcon {
icon,
size,
@ -283,7 +284,7 @@ pub fn render(values: StyledIcon) -> Node<Msg> {
class_list,
style_list,
on_click,
} = values;
} = self;
let styles: Vec<Attrs> = vec![
size.map(|s| {
@ -320,4 +321,5 @@ pub fn render(values: StyledIcon) -> Node<Msg> {
on_click,
""
]
}
}

View File

@ -39,16 +39,17 @@ pub struct StyledImageInput<'l> {
impl<'l> ToNode for StyledImageInput<'l> {
fn into_node(self) -> Node<Msg> {
render(self)
self.render()
}
}
fn render(values: StyledImageInput) -> Node<Msg> {
impl<'l> StyledImageInput<'l> {
pub fn render(self) -> Node<Msg> {
let StyledImageInput {
id,
class_list,
url,
} = values;
} = self;
let field_id = id.clone();
let on_change = ev(Ev::Change, move |ev| {
@ -81,4 +82,5 @@ fn render(values: StyledImageInput) -> Node<Msg> {
on_change
]
]
}
}

View File

@ -163,11 +163,12 @@ impl<'l, 'm: 'l> StyledInput<'l, 'm> {
impl<'l, 'm: 'l> ToNode for StyledInput<'l, 'm> {
#[inline]
fn into_node(self) -> Node<Msg> {
render(self)
self.render()
}
}
pub fn render(values: StyledInput) -> Node<Msg> {
impl<'l, 'm: 'l> StyledInput<'l, 'm> {
pub fn render(self) -> Node<Msg> {
let StyledInput {
id,
icon,
@ -179,11 +180,11 @@ pub fn render(values: StyledInput) -> Node<Msg> {
variant,
auto_focus,
input_handlers,
} = values;
} = self;
let id = id.expect("Input id is required");
let icon_node = icon
.map(|icon| StyledIcon::from(icon).into_node())
.map(|icon| StyledIcon::from(icon).render())
.unwrap_or(Node::Empty);
let on_change = {
@ -221,4 +222,5 @@ pub fn render(values: StyledInput) -> Node<Msg> {
input_handlers,
],
]
}
}

View File

@ -14,16 +14,17 @@ pub struct StyledLink<'l> {
impl<'l> ToNode for StyledLink<'l> {
fn into_node(self) -> Node<Msg> {
render(self)
self.render()
}
}
pub fn render(values: StyledLink) -> Node<Msg> {
impl<'l> StyledLink<'l> {
pub fn render(self) -> Node<Msg> {
let StyledLink {
children,
class_list,
href,
} = values;
} = self;
let on_click = {
let href = href.to_string();
@ -46,4 +47,5 @@ pub fn render(values: StyledLink) -> Node<Msg> {
on_click,
children,
]
}
}

View File

@ -63,30 +63,20 @@ impl<'l> StyledModal<'l> {
impl<'l> ToNode for StyledModal<'l> {
fn into_node(self) -> Node<Msg> {
render(self)
self.render()
}
}
#[inline]
pub fn render(values: StyledModal) -> Node<Msg> {
impl<'l> StyledModal<'l> {
#[inline]
pub fn render(self) -> Node<Msg> {
let StyledModal {
variant,
width,
with_icon,
children,
class_list,
} = values;
let icon = if with_icon {
StyledIcon {
icon: Icon::Close,
class_list: variant.to_icon_class_name(),
..Default::default()
}
.into_node()
} else {
empty![]
};
} = self;
let close_handler = mouse_ev(Ev::Click, |ev| {
ev.stop_propagation();
@ -99,7 +89,6 @@ pub fn render(values: StyledModal) -> Node<Msg> {
None as Option<Msg>
});
let clickable_class = format!("clickableOverlay {}", variant.to_class_name());
let styled_modal_style = match width {
Some(0) => "".to_string(),
Some(n) => format!("max-width: {width}px", width = n),
@ -108,15 +97,21 @@ pub fn render(values: StyledModal) -> Node<Msg> {
div![
C!["modal"],
div![
C![clickable_class],
C!["clickableOverlay", variant.to_class_name()],
close_handler,
div![
C![class_list, "styledModal", variant.to_class_name()],
attrs![At::Style => styled_modal_style],
body_handler,
icon,
IF![with_icon => StyledIcon {
icon: Icon::Close,
class_list: variant.to_icon_class_name(),
..Default::default()
}
.render()],
children
]
]
]
}
}

View File

@ -246,30 +246,6 @@ where
vec![]
};
let option_list = match (opened, children.is_empty()) {
(false, _) => empty![],
(_, true) => seed::div![C!["noOptions"], "No results"],
_ => seed::div![C!["options"], children],
};
let value: Vec<Node<Msg>> = if is_multi {
let add_icon = StyledIcon::from(Icon::Plus).into_node();
let mut children: Vec<Node<Msg>> = selected
.into_iter()
.map(|m| into_multi_value(m, id.clone()))
.collect();
if !children.is_empty() {
children.push(div![C!["addMore"], add_icon, "Add more"]);
} else {
children.push(div![C!["placeholder"], "Select"]);
}
vec![div![C!["valueMulti"], children]]
} else {
selected.into_iter().map(|m| m.render_value()).collect()
};
seed::div![
C!["styledSelect", variant.to_str(), IF![!valid => "invalid"]],
attrs![At::Style => dropdown_style.as_str()],
@ -280,7 +256,21 @@ where
div![
C!["valueContainer", variant.to_str()],
on_handler,
value,
match is_multi {
true => vec![div![
C!["valueMulti"],
selected
.into_iter()
.map(|m| into_multi_value(m, id.clone()))
.collect::<Vec<Node<Msg>>>(),
IF![children.is_empty() => div![C!["placeholder"], "Select"]],
IF![!children.is_empty() => div![C!["addMore"], StyledIcon::from(Icon::Plus).render(), "Add more"]],
]],
false => selected
.into_iter()
.map(|m| m.render_value())
.collect::<Vec<Node<Msg>>>(),
},
action_icon,
],
div![
@ -296,7 +286,11 @@ where
],
on_text,
]],
option_list
match (opened, children.is_empty()) {
(false, _) => empty![],
(_, true) => seed::div![C!["noOptions"], "No results"],
_ => seed::div![C!["options"], children],
}
]
]
}