adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: icon support event (#116)

Browse source
This commit is contained in:
luoxiaozero 2024-02-24 15:40:21 +08:00 • committed by GitHub
parent 7c01e7e56d
commit 9216e5e2d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 70 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
thaw/src/icon/mod.rs
View file

@ -21,60 +21,75 @@ pub fn Icon(
#[prop(into, optional)]
style: Option<MaybeSignal<String>>,
) -> impl IntoView {
let svg = move || {
let icon = icon.get();
let mut svg = svg::svg();
if let Some(class) = class.clone() {
svg = svg.attr("class", move || class.get())
}
let mut svg = match (style.clone(), icon.style) {
(Some(a), Some(b)) => svg.attr("style", move || format!("{b} {}", a.get())),
(Some(a), None) => svg.attr("style", move || a.get()),
(None, Some(b)) => svg.attr("style", b),
(None, None) => svg,
};
let icon_style = RwSignal::new(None);
let icon_x = RwSignal::new(None);
let icon_y = RwSignal::new(None);
let icon_width = RwSignal::new(None);
let icon_height = RwSignal::new(None);
let icon_view_box = RwSignal::new(None);
let icon_stroke_linecap = RwSignal::new(None);
let icon_stroke_linejoin = RwSignal::new(None);
let icon_stroke_width = RwSignal::new(None);
let icon_stroke = RwSignal::new(None);
let icon_fill = RwSignal::new(None);
let icon_data = RwSignal::new(None);
if let Some(x) = icon.x {
svg = svg.attr("x", x);
}
if let Some(y) = icon.y {
svg = svg.attr("x", y);
}
//// The style set by the user overrides the style set by the icon.
// We ignore the width and height attributes of the icon, even if the user hasn't specified any.
svg = svg.attr(
"width",
match (width.clone(), icon.width) {
(Some(a), _) => (move || a.get()).into_attribute(),
_ => "1em".into_attribute(),
},
);
svg = svg.attr(
"height",
match (height.clone(), icon.height) {
(Some(a), _) => (move || a.get()).into_attribute(),
_ => "1em".into_attribute(),
},
);
if let Some(view_box) = icon.view_box {
svg = svg.attr("viewBox", view_box);
}
if let Some(stroke_linecap) = icon.stroke_linecap {
svg = svg.attr("stroke-linecap", stroke_linecap);
}
if let Some(stroke_linejoin) = icon.stroke_linejoin {
svg = svg.attr("stroke-linejoin", stroke_linejoin);
}
if let Some(stroke_width) = icon.stroke_width {
svg = svg.attr("stroke-width", stroke_width);
}
if let Some(stroke) = icon.stroke {
svg = svg.attr("stroke", stroke);
}
svg = svg.attr("fill", icon.fill.unwrap_or("currentColor"));
svg = svg.attr("role", "graphics-symbol");
svg = svg.inner_html(icon.data);
svg
};
svg.into_view()
create_render_effect(move |_| {
let icon = icon.get();
let style = match (style.clone(), icon.style) {
(Some(a), Some(b)) => Some((move || format!("{b} {}", a.get())).into_attribute()),
(Some(a), None) => Some((move || a.get()).into_attribute()),
(None, Some(b)) => Some(b.into_attribute()),
(None, None) => None,
};
icon_style.set(style);
icon_x.set(icon.x.map(|x| x.into_attribute()));
icon_y.set(icon.y.map(|y| y.into_attribute()));
let width = match (width.clone(), icon.width) {
(Some(a), _) => (move || a.get()).into_attribute(),
_ => "1em".into_attribute(),
};
icon_width.set(Some(width));
let height = match (height.clone(), icon.height) {
(Some(a), _) => (move || a.get()).into_attribute(),
_ => "1em".into_attribute(),
};
icon_height.set(Some(height));
icon_view_box.set(icon.view_box.map(|view_box| view_box.into_attribute()));
icon_stroke_linecap.set(icon.stroke_linecap.map(|a| a.into_attribute()));
icon_stroke_linejoin.set(icon.stroke_linejoin.map(|a| a.into_attribute()));
icon_stroke_width.set(icon.stroke_width.map(|a| a.into_attribute()));
icon_stroke.set(icon.stroke.map(|a| a.into_attribute()));
icon_fill.set(icon.fill.map(|a| a.into_attribute()));
icon_data.set(Some(icon.data.into_attribute()));
});
view! {
<svg
class=class.map(|c| c.get())
style=move || take(icon_style)
x=move || take(icon_x)
y=move || take(icon_y)
width=move || take(icon_width)
height=move || take(icon_height)
viewBox=move || take(icon_view_box)
stroke-linecap=move || take(icon_stroke_linecap)
stroke-linejoin=move || take(icon_stroke_linejoin)
stroke-width=move || take(icon_stroke_width)
stroke=move || take(icon_stroke)
fill=move || take(icon_fill)
inner_html=move || take(icon_data)
>
</svg>
}
}
fn take(signal: RwSignal<Option<Attribute>>) -> Option<Attribute> {
signal.track();
signal.try_update_untracked(|value| value.take()).flatten()
}