Rewrite some components to use render method
This commit is contained in:
parent
2d7ce5762a
commit
e3e55acd54
@ -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>>,
|
||||
|
@ -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]
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
""
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
],
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -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],
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user