gpui-ui-kit 0.5.10

A reusable UI component library for GPUI applications
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

//! Tooltip component
//!
//! Contextual information displayed on hover.

use crate::theme::{Theme, ThemeExt};
use gpui::prelude::*;
use gpui::*;

/// Tooltip placement
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum TooltipPlacement {
    /// Above the target
    #[default]
    Top,
    /// Below the target
    Bottom,
    /// Left of the target
    Left,
    /// Right of the target
    Right,
}

/// A tooltip component
/// Note: Actual hover behavior requires state management in the parent
pub struct Tooltip {
    content: SharedString,
    placement: TooltipPlacement,
    delay_ms: u32,
}

impl Tooltip {
    /// Create a new tooltip
    pub fn new(content: impl Into<SharedString>) -> Self {
        Self {
            content: content.into(),
            placement: TooltipPlacement::default(),
            delay_ms: 200,
        }
    }

    /// Set placement
    pub fn placement(mut self, placement: TooltipPlacement) -> Self {
        self.placement = placement;
        self
    }

    /// Set delay in milliseconds
    pub fn delay(mut self, delay_ms: u32) -> Self {
        self.delay_ms = delay_ms;
        self
    }

    /// Build the tooltip element with theme (to be positioned by parent)
    pub fn build_with_theme(self, theme: &Theme) -> Div {
        let mut tooltip = div()
            .absolute()
            .px_2()
            .py_1()
            .bg(theme.background)
            .border_1()
            .border_color(theme.border)
            .rounded(px(4.0))
            .shadow_lg()
            .text_xs()
            .text_color(theme.text_primary)
            .whitespace_nowrap();

        // Position based on placement
        match self.placement {
            TooltipPlacement::Top => {
                tooltip = tooltip.bottom_full().left_0().mb_1();
            }
            TooltipPlacement::Bottom => {
                tooltip = tooltip.top_full().left_0().mt_1();
            }
            TooltipPlacement::Left => {
                tooltip = tooltip.right_full().top_0().mr_1();
            }
            TooltipPlacement::Right => {
                tooltip = tooltip.left_full().top_0().ml_1();
            }
        }

        tooltip.child(self.content)
    }
}

impl RenderOnce for Tooltip {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let theme = cx.theme();
        self.build_with_theme(&theme)
    }
}

impl IntoElement for Tooltip {
    type Element = gpui::Component<Self>;

    fn into_element(self) -> Self::Element {
        gpui::Component::new(self)
    }
}

/// A wrapper that shows tooltip on hover
/// Note: Requires state management for hover tracking
pub struct WithTooltip {
    child: AnyElement,
    tooltip: SharedString,
    placement: TooltipPlacement,
    show_tooltip: bool,
}

impl WithTooltip {
    /// Create a new tooltip wrapper
    pub fn new(child: impl IntoElement, tooltip: impl Into<SharedString>) -> Self {
        Self {
            child: child.into_any_element(),
            tooltip: tooltip.into(),
            placement: TooltipPlacement::default(),
            show_tooltip: false,
        }
    }

    /// Set placement
    pub fn placement(mut self, placement: TooltipPlacement) -> Self {
        self.placement = placement;
        self
    }

    /// Set whether tooltip is visible (controlled mode)
    pub fn show(mut self, show: bool) -> Self {
        self.show_tooltip = show;
        self
    }

    /// Build into element with theme
    pub fn build_with_theme(self, theme: &Theme) -> Div {
        let mut container = div().relative().child(self.child);

        if self.show_tooltip {
            container = container.child(
                Tooltip::new(self.tooltip)
                    .placement(self.placement)
                    .build_with_theme(theme),
            );
        }

        container
    }
}

impl RenderOnce for WithTooltip {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let theme = cx.theme();
        self.build_with_theme(&theme)
    }
}

impl IntoElement for WithTooltip {
    type Element = gpui::Component<Self>;

    fn into_element(self) -> Self::Element {
        gpui::Component::new(self)
    }
}