added context menu

AobaClient/src/components/basic/input.rs

@@ -7,7 +7,7 @@ pub struct InputProps {
 	pub label: Option<String>,
 	pub placeholder: Option<String>,
 	pub name: String,
-	pub oninput: Option<EventHandler<FormEvent>>,
+	pub oninput: Option<EventHandler<Event<FormData>>>,
 	pub required: Option<bool>,
 }
 
@@ -25,6 +25,9 @@ pub fn Input(props: InputProps) -> Element {
 					if let Some(mut s) = props.value {
 						s.set(e.value());
 					}
+					if let Some(handler) = props.oninput{
+						handler.call(e);
+					}
 				},
 				name: props.name,
 				placeholder: ph,

AobaClient/src/components/context_menu.rs

@@ -0,0 +1,20 @@
+use core::str;
+
+use dioxus::prelude::*;
+
+#[derive(PartialEq, Clone, Props)]
+pub struct ContextMenuProps {
+	pub top: f64,
+	pub left: f64,
+	pub items: Option<Vec<()>>,
+}
+
+#[component]
+pub fn ContextMenu(props: ContextMenuProps) -> Element {
+	rsx! {
+		div {
+			style: "background:#000; position: absolute; left: {props.left}px; top: {props.top}px;",
+			"Contect Menu"
+		}
+	}
+}

AobaClient/src/components/media_grid.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 use tonic::IntoRequest;
 
 use crate::{
-	components::MediaItem,
+	components::{ContextMenu, MediaItem},
 	rpc::{aoba::PageFilter, get_rpc_client},
 };
 
@@ -46,15 +46,32 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 		}
 	}));
 
+	let mut context_menu: Signal<Element> = use_signal(|| rsx! {});
+	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
+		}});
+	};
+
 	match media_result.cloned() {
 		Some(value) => match value {
 			Ok(result) => rsx! {
 				div {
 					class: "mediaGrid",
+					onclick: move |_e| {
+						context_menu.set(rsx!{});
+					},
 					{result.items.iter().map(|itm| rsx!{
-						MediaItem { item: Some(itm.clone()) }
+						MediaItem { item: Some(itm.clone()), oncontextmenu: oncontext }
 					})},
 				}
+				{context_menu.cloned()}
 			},
 			Err(msg) => rsx! {
 				div {

AobaClient/src/components/media_item.rs

@@ -5,6 +5,7 @@ use crate::{HOST, rpc::aoba::MediaModel};
 #[derive(PartialEq, Clone, Props)]
 pub struct MediaItemProps {
 	pub item: Option<MediaModel>,
+	pub oncontextmenu: Option<EventHandler<Event<MouseData>>>,
 }
 
 #[component]
@@ -15,11 +16,17 @@ pub fn MediaItem(props: MediaItemProps) -> Element {
 		let id = item.id.unwrap().value;
 		let thumb = item.thumb_url;
 		let url = item.media_url;
+
 		return rsx! {
 			a {
 				class: "mediaItem",
 				href: "{HOST}/{url}",
 				target: "_blank",
+				oncontextmenu: move |e| {
+					if let Some(handler) = props.oncontextmenu{
+						handler.call(e);
+					}
+				},
 				"data-id" : id,
 				img { src: "{HOST}{thumb}" }
 				span { class: "info",
@@ -29,7 +36,7 @@ pub fn MediaItem(props: MediaItemProps) -> Element {
 						span { "{item.view_count}" }
 					}
 				}
-			}
+			},
 		};
 	} else {
 		return rsx! {

AobaClient/src/components/mod.rs

@@ -1,10 +1,12 @@
 pub mod basic;
+mod context_menu;
 mod media_grid;
 mod media_item;
 mod metrics_token;
 mod navbar;
 mod notif;
 mod search;
+pub use context_menu::*;
 pub use media_grid::*;
 pub use media_item::*;
 pub use metrics_token::*;