- Add CalendarContextMenu component for right-click on calendar days - Add CreateEventModal component with comprehensive event creation form - Integrate context menu detection to avoid conflicts between event/calendar menus - Add form validation and date/time selection with all-day toggle - Connect modal through component hierarchy from app to calendar 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
47 lines
1.2 KiB
Rust
47 lines
1.2 KiB
Rust
use yew::prelude::*;
|
|
use web_sys::MouseEvent;
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct CalendarContextMenuProps {
|
|
pub is_open: bool,
|
|
pub x: i32,
|
|
pub y: i32,
|
|
pub on_close: Callback<()>,
|
|
pub on_create_event: Callback<MouseEvent>,
|
|
}
|
|
|
|
#[function_component(CalendarContextMenu)]
|
|
pub fn calendar_context_menu(props: &CalendarContextMenuProps) -> Html {
|
|
let menu_ref = use_node_ref();
|
|
|
|
if !props.is_open {
|
|
return html! {};
|
|
}
|
|
|
|
let style = format!(
|
|
"position: fixed; left: {}px; top: {}px; z-index: 1001;",
|
|
props.x, props.y
|
|
);
|
|
|
|
let on_create_event_click = {
|
|
let on_create_event = props.on_create_event.clone();
|
|
let on_close = props.on_close.clone();
|
|
Callback::from(move |e: MouseEvent| {
|
|
on_create_event.emit(e);
|
|
on_close.emit(());
|
|
})
|
|
};
|
|
|
|
html! {
|
|
<div
|
|
ref={menu_ref}
|
|
class="context-menu"
|
|
style={style}
|
|
>
|
|
<div class="context-menu-item context-menu-create" onclick={on_create_event_click}>
|
|
<span class="context-menu-icon">{"+"}</span>
|
|
{"Create Event"}
|
|
</div>
|
|
</div>
|
|
}
|
|
} |