hikari-components 0.3.10

Core UI components (buttons, inputs, tables, modals) for the Hikari design system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

// hi-components/src/feedback/tooltip.rs
// Tooltip component with Arknights + FUI styling - Portal-based rendering with animation

use hikari_palette::classes::{ClassesBuilder, TooltipClass, UtilityClass};

#[cfg(target_arch = "wasm32")]
use crate::portal::{PortalEntry, TriggerPlacement};
use crate::{
    portal::provider::{generate_portal_id, use_portal},
    prelude::*,
    styled::StyledComponent,
};

pub struct TooltipComponent;

#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum TooltipPlacement {
    #[default]
    Top,
    Bottom,
    Left,
    Right,
}

impl TooltipPlacement {
    #[cfg(target_arch = "wasm32")]
    fn to_trigger_placement(&self) -> TriggerPlacement {
        match self {
            TooltipPlacement::Top => TriggerPlacement::Top,
            TooltipPlacement::Bottom => TriggerPlacement::Bottom,
            TooltipPlacement::Left => TriggerPlacement::Left,
            TooltipPlacement::Right => TriggerPlacement::Right,
        }
    }
}

#[define_props]
pub struct TooltipProps {
    pub content: String,
    pub placement: TooltipPlacement,
    pub delay: Option<u64>,
    #[default(true)]
    pub arrow: bool,
    pub class: String,
    pub children: Element,
}

#[component]
pub fn Tooltip(props: TooltipProps) -> Element {
    let portal = use_portal();
    let tooltip_id = use_signal(generate_portal_id);
    #[allow(unused_mut)]
    let mut trigger_rect = use_signal(|| None::<(f64, f64, f64, f64)>);

    let wrapper_classes = ClassesBuilder::new()
        .add(TooltipClass::TooltipWrapper)
        .add_raw(&props.class)
        .build();

    let handle_mouse_enter = {
        let tooltip_id = tooltip_id.clone();
        let trigger_rect = trigger_rect.clone();
        let portal_add_entry = portal.add_entry.clone();
        let content = props.content.clone();
        let arrow = props.arrow;
        #[cfg(target_arch = "wasm32")]
        let placement = props.placement.to_trigger_placement();
        move |event: MouseEvent| {
            #[cfg(target_arch = "wasm32")]
            {
                // Use clientX/clientY from MouseEvent to approximate trigger position
                // For precise element bounds, a ref-based approach would be needed
                let rect_tuple = (event.client_x as f64, event.client_y as f64, 100.0, 30.0);
                trigger_rect.set(Some(rect_tuple));

                portal_add_entry(PortalEntry::Tooltip {
                    id: tooltip_id.get(),
                    trigger_rect: Some(rect_tuple),
                    placement,
                    content: content.clone(),
                    arrow,
                });
            }
            #[cfg(not(target_arch = "wasm32"))]
            {
                let _ = (&tooltip_id, &trigger_rect, &event, &content, arrow);
            }
        }
    };

    let tooltip_id_for_leave = tooltip_id.clone();
    let portal_remove_entry = portal.remove_entry.clone();
    let handle_mouse_leave = move |_| {
        portal_remove_entry(tooltip_id_for_leave.get());
    };

    rsx! {
        div { class: wrapper_classes,

            div {
                class: TooltipClass::TooltipTrigger.as_class(),
                onmouseenter: handle_mouse_enter,
                onmouseleave: handle_mouse_leave,
                {props.children}
            }
        }
    }
}

impl StyledComponent for TooltipComponent {
    fn styles() -> &'static str {
        include_str!(concat!(env!("OUT_DIR"), "/styles/tooltip.css"))
    }

    fn name() -> &'static str {
        "tooltip"
    }
}