WIP ContextMenu Renderer

AobaClient/src/components/context_menu.rs

@@ -2,15 +2,58 @@ use core::str;
 
 use dioxus::prelude::*;
 
-#[derive(PartialEq, Clone, Props)]
-pub struct ContextMenuProps {
-	pub top: f64,
-	pub left: f64,
-	pub items: Option<Vec<Element>>,
+pub mod props {
+	use dioxus::prelude::*;
+
+	#[derive(PartialEq, Clone, Props)]
+	pub struct ContextMenu {
+		pub top: f64,
+		pub left: f64,
+		pub items: Option<Vec<ContextMenuItem>>,
+	}
+
+	#[derive(PartialEq, Clone, Props, Default)]
+	pub struct ContextMenuItem {
+		pub name: String,
+		pub sub_items: Option<Vec<ContextMenuItem>>,
+	}
+}
+
+#[derive(Clone, Copy, Default)]
+pub struct ContextMenuRenderer {
+	pub menu: Signal<Option<props::ContextMenu>>,
+}
+
+impl ContextMenuRenderer {
+	pub fn close(&mut self) {
+		self.menu.set(None);
+	}
+
+	pub fn render(&self) -> Element {
+		if let Some(menu) = self.menu.cloned() {
+			rsx! {
+				ContextMenu{
+					items: menu.items,
+					left: menu.left,
+					top: menu.top
+				}
+			}
+		} else {
+			rsx! {}
+		}
+	}
 }
 
 #[component]
-pub fn ContextMenu(props: ContextMenuProps) -> Element {
+pub fn ContextMenuRoot() -> Element {
+	let renderer = use_context::<ContextMenuRenderer>();
+	rsx! {
+		{renderer.render()}
+	}
+}
+
+#[component]
+fn ContextMenu(props: props::ContextMenu) -> Element {
 	let menu_items = if let Some(items) = props.items {
 		rsx! {
 			ItemList { items }
@@ -29,23 +72,22 @@ pub fn ContextMenu(props: ContextMenuProps) -> Element {
 }
 
 #[component]
-fn ItemList(items: Vec<Element>) -> Element {
+fn ItemList(items: Vec<props::ContextMenuItem>) -> Element {
 	rsx! {
 		div{
 			class: "itemList",
-			{items.iter().map(|e| rsx!{{e}}) }
+			{items.iter().map(|e| rsx!{
+				ContextMenuItem{
+					name: e.name.clone(),
+					sub_items: e.sub_items.clone()
+				}
+			})}
 		}
 	}
 }
 
-#[derive(PartialEq, Clone, Props)]
-pub struct ContextMenuItemProps {
-	pub name: String,
-	pub sub_items: Option<Vec<Element>>,
-}
-
 #[component]
-pub fn ContextMenuItem(props: ContextMenuItemProps) -> Element {
+fn ContextMenuItem(props: props::ContextMenuItem) -> Element {
 	rsx! {
 		div{
 			class: "contextItem",

AobaClient/src/components/media_grid.rs

@@ -2,7 +2,10 @@ use dioxus::prelude::*;
 use tonic::IntoRequest;
 
 use crate::{
-	components::{ContextMenu, ContextMenuItem, MediaItem},
+	components::{
+		ContextMenuRenderer, MediaItem,
+		props::{ContextMenu, ContextMenuItem},
+	},
 	rpc::{aoba::PageFilter, get_rpc_client},
 };
 
@@ -46,36 +49,32 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 		}
 	}));
 
-	let mut context_menu: Signal<Element> = use_signal(|| rsx! {});
+	let mut ct_renderer = use_context::<ContextMenuRenderer>();
+
 	let oncontext = move |event: Event<MouseData>| {
 		event.prevent_default();
 		let data = event.data();
 		let pos = data.coordinates().client();
 		let left = pos.x;
 		let top = pos.y;
-		context_menu.set(rsx! {
-			ContextMenu{
-				left: left,
-				top: top,
-				items: vec![
-					rsx!{
-						ContextMenuItem{
-							name: "Details"
-						}
-					},
-					rsx!{
-						ContextMenuItem{
-							name: "Download"
-						}
-					},
-					rsx!{
-						ContextMenuItem{
-							name: "Delete"
-						}
-					},
-				]
-			}
-		});
+		ct_renderer.menu.set(Some(ContextMenu {
+			left: left,
+			top: top,
+			items: Some(vec![
+				ContextMenuItem {
+					name: "Details".to_string(),
+					..Default::default()
+				},
+				ContextMenuItem {
+					name: "Download".to_string(),
+					..Default::default()
+				},
+				ContextMenuItem {
+					name: "Delete".to_string(),
+					..Default::default()
+				},
+			]),
+		}));
 	};
 
 	match media_result.cloned() {
@@ -83,14 +82,10 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 			Ok(result) => rsx! {
 				div {
 					class: "mediaGrid",
-					onclick: move |_e| {
-						context_menu.set(rsx!{});
-					},
 					{result.items.iter().map(|itm| rsx!{
 						MediaItem { item: Some(itm.clone()), oncontextmenu: oncontext }
 					})},
 				}
-				{context_menu.cloned()}
 			},
 			Err(msg) => rsx! {
 				div {