gpui-component 0.7.0

GPUI Component: the styled component library of GPUI Kit, with 60+ desktop UI components for GPUI.
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

use super::InlineTokenContext;
use crate::{ActiveTheme as _, Icon, StyledExt as _};
use gpui::{
    App, InteractiveElement as _, IntoElement, ParentElement as _, RenderOnce, StyleRefinement,
    Styled, Window, div, prelude::FluentBuilder as _,
};

/// The element an [`InlineToken`](super::InlineToken) renders as by default. Editing
/// and activation belong to the input.
#[derive(IntoElement)]
pub struct InputToken {
    context: InlineTokenContext,
    icon: Option<Icon>,
    style: StyleRefinement,
}
impl InputToken {
    pub fn new(context: &InlineTokenContext) -> Self {
        Self {
            context: context.clone(),
            icon: None,
            style: Default::default(),
        }
    }
    pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
        self.icon = Some(icon.into());
        self
    }
}
impl Styled for InputToken {
    fn style(&mut self) -> &mut StyleRefinement {
        &mut self.style
    }
}
impl RenderOnce for InputToken {
    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
        div()
            .id("input-token")
            .flex()
            .items_center()
            .gap_1()
            .px_1()
            .h(self.context.line_height())
            .max_w(self.context.available_width())
            .rounded(cx.theme().radius)
            .border_1()
            .map(|this| {
                // The selection color is translucent as a fill; its opaque form
                // is the matching border.
                if self.context.is_selected() {
                    this.bg(cx.theme().selection)
                        .border_color(cx.theme().selection.alpha(1.))
                } else {
                    this.bg(cx.theme().muted).border_color(cx.theme().border)
                }
            })
            .text_color(cx.theme().foreground)
            .when(self.context.is_disabled(), |this| this.opacity(0.5))
            .when_some(self.icon, |this, icon| {
                this.child(icon.size_3().flex_shrink_0())
            })
            .child(
                div()
                    .min_w_0()
                    .text_ellipsis()
                    .child(self.context.token().label().clone()),
            )
            .refine_style(&self.style)
    }
}