[yew-devel] [PATCH yew-widget-toolkit 01/11] widget: implement Image widget

From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [yew-devel] [PATCH yew-widget-toolkit 01/11] widget: implement Image widget
Date: Fri, 27 Jun 2025 14:08:49 +0200	[thread overview]
Message-ID: <20250627120859.3723554-8-d.csapak@proxmox.com> (raw)
In-Reply-To: <20250627120859.3723554-1-d.csapak@proxmox.com>

It's a thin wrapper around the <img> tag, but provide convenience
properties for switching the image in dark mode, like we want to use for
our logo for example.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/image.rs | 76 +++++++++++++++++++++++++++++++++++++++++++++
 src/widget/mod.rs   |  3 ++
 2 files changed, 79 insertions(+)
 create mode 100644 src/widget/image.rs

diff --git a/src/widget/image.rs b/src/widget/image.rs
new file mode 100644
index 0000000..002e879
--- /dev/null
+++ b/src/widget/image.rs
@@ -0,0 +1,76 @@
+use yew::html::IntoPropValue;
+use yew::prelude::*;
+use yew::AttrValue;
+
+use crate::props::{EventSubscriber, WidgetBuilder};
+use crate::state::Theme;
+use crate::state::ThemeObserver;
+use crate::widget::Container;
+
+use pwt_macros::{builder, widget};
+
+/// Image
+///
+/// An image element. Has convenience options to change the image in dark mode.
+#[widget(pwt=crate, comp=PwtImage, @element)]
+#[derive(Properties, PartialEq, Clone)]
+#[builder]
+pub struct Image {
+    /// The source url for the image.
+    pub src: AttrValue,
+
+    /// An alternative source url for the image used in dark mode.
+    #[prop_or_default]
+    #[builder(IntoPropValue, into_prop_value)]
+    pub dark_mode_src: Option<AttrValue>,
+}
+
+impl Image {
+    /// Create a new [Image] with a src image url.
+    pub fn new(src: impl Into<AttrValue>) -> Self {
+        yew::props!(Self { src: src.into() })
+    }
+}
+
+pub enum Msg {
+    ThemeChanged((Theme, bool)),
+}
+
+#[doc(hidden)]
+pub struct PwtImage {
+    dark_mode: bool,
+    _theme_observer: ThemeObserver,
+}
+
+impl Component for PwtImage {
+    type Message = Msg;
+    type Properties = Image;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        let _theme_observer = ThemeObserver::new(_ctx.link().callback(Msg::ThemeChanged));
+        Self {
+            dark_mode: _theme_observer.dark_mode(),
+            _theme_observer,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::ThemeChanged((_theme, dark_mode)) => self.dark_mode = dark_mode,
+        }
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+        let src = match (self.dark_mode, &props.dark_mode_src) {
+            (true, Some(src)) => src.clone(),
+            _ => props.src.clone(),
+        };
+        Container::from_tag("img")
+            .with_std_props(&props.std_props)
+            .listeners(&props.listeners)
+            .attribute("src", src)
+            .into()
+    }
+}
diff --git a/src/widget/mod.rs b/src/widget/mod.rs
index 18c52ad..2385bb7 100644
--- a/src/widget/mod.rs
+++ b/src/widget/mod.rs
@@ -65,6 +65,9 @@ pub use field_label::FieldLabel;
 #[doc(hidden)]
 pub use field_label::PwtFieldLabel;
 
+mod image;
+pub use image::Image;
+
 mod input;
 pub use input::Input;
 
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

