orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
Documentation 
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
119
120
121
122
123
124

use leptos::{children::ToChildren, ev, html, prelude::*};

use super::config::AnchoredOverlayConfig;
use crate::overlay::{
    appearance::OverlayAppearance,
    arrow::build_anchor_arrow,
    panel_surface::OverlayPanelInjection,
    placement::Placement,
    positioning::{AnchoredPanel, AnchoredPositioner},
    trigger::{render_overlay_trigger, OverlayTrigger, OverlayTriggerType},
    visibility::{OverlayHoverDelays, OverlayLifecycle, UseOverlayVisibility},
};

#[derive(Clone, Copy)]
pub struct OverlayDismiss {
    pub close: Callback<()>,
}

#[component]
pub fn AnchoredOverlay<TTrigger>(
    config: AnchoredOverlayConfig,
    #[prop(optional)] overlay_trigger: Option<OverlayTrigger<TTrigger>>,
    #[prop(optional)] trigger: Option<TypedChildren<TTrigger>>,
    #[prop(default = OverlayLifecycle::default())] lifecycle: OverlayLifecycle,
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(optional)] panel_ref: Option<NodeRef<html::Div>>,
    #[prop(default = None)] mount: Option<NodeRef<html::Div>>,
    children: Children,
) -> impl IntoView
where
    TTrigger: AddAnyAttr + IntoView + Send + 'static,
{
    let panel_ref = panel_ref.unwrap_or_default();
    let visibility = UseOverlayVisibility::new(
        config.trigger_type,
        panel_ref,
        Some(lifecycle),
        OverlayHoverDelays {
            show_delay_ms: config.show_delay_ms,
            hide_delay_ms: config.hide_delay_ms,
        },
    );
    provide_context(OverlayDismiss {
        close: Callback::new(move |_| visibility.is_show.set(false)),
    });

    let on_mouse_enter = {
        let vis = visibility;
        Callback::new(move |e: ev::MouseEvent| vis.on_mouse_enter(e))
    };
    let on_mouse_leave = {
        let vis = visibility;
        Callback::new(move |e: ev::MouseEvent| vis.on_mouse_leave(e))
    };
    provide_context(OverlayPanelInjection {
        panel_ref,
        on_mouse_enter,
        on_mouse_leave,
    });

    let arrow_ref = NodeRef::<html::Div>::new();
    let arrow = config
        .arrow
        .enabled()
        .then(|| build_anchor_arrow(arrow_ref));

    let trigger_view = if let Some(overlay_trigger) = overlay_trigger {
        render_overlay_trigger(
            overlay_trigger,
            &visibility,
            config.trigger_type,
            "orbital-overlay-trigger--open",
        )
        .into_any()
    } else if let Some(trigger) = trigger {
        visibility
            .attach_trigger(trigger.into_inner()().into_inner(), config.trigger_type)
            .into_any()
    } else {
        ().into_any()
    };

    let panel_children = children;
    let extra_class = class;

    view! {
        <AnchoredPositioner
            mount=mount
            panel_ref=panel_ref
            dismiss_on_anchor_hidden=config.trigger_type.uses_click()
            panel=AnchoredPanel {
            show: visibility.is_show.read_only().into(),
            width: None,
            placement: config.placement,
            auto_height: config.auto_height,
            arrow,
            motion: config.motion,
            children: ToChildren::to_children(move || {
                let _ = extra_class.get();
                panel_children()
            }),
        }>
            {trigger_view}
        </AnchoredPositioner>
    }
}

pub fn merge_config(
    base: AnchoredOverlayConfig,
    trigger_type: Option<OverlayTriggerType>,
    placement: Option<Placement>,
    appearance: Option<OverlayAppearance>,
    show_delay_ms: Option<u64>,
    hide_delay_ms: Option<u64>,
) -> AnchoredOverlayConfig {
    AnchoredOverlayConfig {
        trigger_type: trigger_type.unwrap_or(base.trigger_type),
        placement: placement.unwrap_or(base.placement),
        appearance: appearance.unwrap_or(base.appearance),
        show_delay_ms: show_delay_ms.unwrap_or(base.show_delay_ms),
        hide_delay_ms: hide_delay_ms.unwrap_or(base.hide_delay_ms),
        ..base
    }
}