shadow-design 0.1.0

Modular, high-performance UI component library for Dioxus 0.7 applications
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 crate::icon::{Icon, IconKind};
use dioxus::prelude::*;

#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum DropdownPlacement {
    #[default]
    BottomRight,
    BottomLeft,
    TopRight,
    TopLeft,
}

impl DropdownPlacement {
    pub fn scss_class(&self) -> &'static str {
        match self {
            DropdownPlacement::BottomRight => "sd-dropdown-menu--bottom-right",
            DropdownPlacement::BottomLeft => "sd-dropdown-menu--bottom-left",
            DropdownPlacement::TopRight => "sd-dropdown-menu--top-right",
            DropdownPlacement::TopLeft => "sd-dropdown-menu--top-left",
        }
    }
}

#[component]
pub fn Dropdown(
    is_open: Signal<bool>,
    trigger: Element,
    #[props(default)] placement: DropdownPlacement,
    #[props(default)] glow: Option<bool>,
    #[props(default)] class: String,
    children: Element,
) -> Element {
    let open = *is_open.read();

    #[cfg(feature = "theme")]
    let theme = crate::theme::use_theme();
    #[cfg(feature = "theme")]
    let glow_class = match glow {
        Some(true) => "sd-dropdown-menu--glow",
        Some(false) => "",
        None => {
            if theme().glow_mode != crate::theme::GlowMode::Off {
                "sd-dropdown-menu--glow"
            } else {
                ""
            }
        }
    };

    #[cfg(not(feature = "theme"))]
    let glow_class = if glow == Some(true) {
        "sd-dropdown-menu--glow"
    } else {
        ""
    };

    let open_container_class = if open { "sd-dropdown-container--open" } else { "" };
    let placement_class = placement.scss_class();

    #[cfg(feature = "animation")]
    let anim_class = crate::animation::Animations::DROPDOWN_ENTER;
    #[cfg(not(feature = "animation"))]
    let anim_class = "animate-dropdown-enter";

    rsx! {
        div { class: "sd-dropdown-container {open_container_class} {class}",
            div {
                onclick: move |_| {
                    let next = !*is_open.read();
                    *is_open.write() = next;
                },
                {trigger}
            }
            if open {
                div {
                    class: "sd-dropdown-backdrop",
                    onclick: move |e| {
                        e.stop_propagation();
                        *is_open.write() = false;
                    },
                }
                div {
                    class: "sd-dropdown-menu {placement_class} {glow_class} {anim_class}",
                    onclick: move |e| e.stop_propagation(),
                    {children}
                }
            }
        }
    }
}

#[component]
pub fn DropdownItem(
    #[props(default)] icon: Option<IconKind>,
    #[props(default)] danger: bool,
    #[props(default)] class: String,
    onclick: Option<EventHandler<MouseEvent>>,
    children: Element,
) -> Element {
    let danger_class = if danger { "sd-dropdown-item--danger" } else { "" };

    rsx! {
        button {
            r#type: "button",
            class: "sd-dropdown-item {danger_class} {class}",
            onclick: move |e| {
                if let Some(h) = onclick.as_ref() {
                    h.call(e);
                }
            },
            if let Some(i) = icon {
                Icon { kind: i, size: 14 }
            }
            {children}
        }
    }
}

#[component]
pub fn DropdownDivider() -> Element {
    rsx! {
        div { class: "sd-dropdown-divider" }
    }
}