gpui_component/tab/
tab_bar.rs

1use std::sync::Arc;
2
3use crate::button::{Button, ButtonVariants as _};
4use crate::popup_menu::PopupMenuExt as _;
5use crate::{h_flex, ActiveTheme, IconName, Selectable, Sizable, Size, StyledExt};
6use gpui::prelude::FluentBuilder as _;
7use gpui::{
8    div, Action, AnyElement, App, Corner, Div, Edges, ElementId, IntoElement, ParentElement,
9    Pixels, RenderOnce, ScrollHandle, Stateful, StatefulInteractiveElement as _, StyleRefinement,
10    Styled, Window,
11};
12use gpui::{px, InteractiveElement};
13use smallvec::SmallVec;
14
15use super::{Tab, TabVariant};
16
17#[derive(Action, Debug, Clone, Copy, PartialEq, Eq)]
18#[action(namespace = tab_bar, no_json)]
19pub struct SelectTab(usize);
20
21#[derive(IntoElement)]
22pub struct TabBar {
23    base: Stateful<Div>,
24    style: StyleRefinement,
25    scroll_handle: Option<ScrollHandle>,
26    prefix: Option<AnyElement>,
27    suffix: Option<AnyElement>,
28    children: SmallVec<[Tab; 2]>,
29    last_empty_space: AnyElement,
30    selected_index: Option<usize>,
31    variant: TabVariant,
32    size: Size,
33    menu: bool,
34    on_click: Option<Arc<dyn Fn(&usize, &mut Window, &mut App) + 'static>>,
35    /// Special for internal TabPanel to remove the top border.
36    tab_item_top_offset: Pixels,
37}
38
39impl TabBar {
40    /// Create a new TabBar.
41    pub fn new(id: impl Into<ElementId>) -> Self {
42        Self {
43            base: div().id(id).px(px(-1.)),
44            style: StyleRefinement::default(),
45            children: SmallVec::new(),
46            scroll_handle: None,
47            prefix: None,
48            suffix: None,
49            variant: TabVariant::default(),
50            size: Size::default(),
51            last_empty_space: div().w_3().into_any_element(),
52            selected_index: None,
53            on_click: None,
54            menu: false,
55            tab_item_top_offset: px(0.),
56        }
57    }
58
59    /// Set the Tab variant, all children will inherit the variant.
60    pub fn with_variant(mut self, variant: TabVariant) -> Self {
61        self.variant = variant;
62        self
63    }
64
65    /// Set the Tab variant to Pill, all children will inherit the variant.
66    pub fn pill(mut self) -> Self {
67        self.variant = TabVariant::Pill;
68        self
69    }
70
71    /// Set the Tab variant to Outline, all children will inherit the variant.
72    pub fn outline(mut self) -> Self {
73        self.variant = TabVariant::Outline;
74        self
75    }
76
77    /// Set the Tab variant to Segmented, all children will inherit the variant.
78    pub fn segmented(mut self) -> Self {
79        self.variant = TabVariant::Segmented;
80        self
81    }
82
83    /// Set the Tab variant to Underline, all children will inherit the variant.
84    pub fn underline(mut self) -> Self {
85        self.variant = TabVariant::Underline;
86        self
87    }
88
89    /// Enable or disable the popup menu for the TabBar
90    pub fn with_menu(mut self, menu: bool) -> Self {
91        self.menu = menu;
92        self
93    }
94
95    /// Track the scroll of the TabBar
96    pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
97        self.scroll_handle = Some(scroll_handle.clone());
98        self
99    }
100
101    /// Set the prefix element of the TabBar
102    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
103        self.prefix = Some(prefix.into_any_element());
104        self
105    }
106
107    /// Set the suffix element of the TabBar
108    pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
109        self.suffix = Some(suffix.into_any_element());
110        self
111    }
112
113    /// Add children of the TabBar, all children will inherit the variant.
114    ///
115    pub fn children(mut self, children: impl IntoIterator<Item = impl Into<Tab>>) -> Self {
116        self.children.extend(children.into_iter().map(Into::into));
117        self
118    }
119
120    /// Add child of the TabBar, tab will inherit the variant.
121    pub fn child(mut self, child: impl Into<Tab>) -> Self {
122        self.children.push(child.into());
123        self
124    }
125
126    /// Set the selected index of the TabBar.
127    pub fn selected_index(mut self, index: usize) -> Self {
128        self.selected_index = Some(index);
129        self
130    }
131
132    /// Set the last empty space element of the TabBar
133    pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self {
134        self.last_empty_space = last_empty_space.into_any_element();
135        self
136    }
137
138    /// Set the on_click callback of the TabBar, the first parameter is the index of the clicked tab.
139    ///
140    /// When this is set, the children's on_click will be ignored.
141    pub fn on_click(mut self, on_click: impl Fn(&usize, &mut Window, &mut App) + 'static) -> Self {
142        self.on_click = Some(Arc::new(on_click));
143        self
144    }
145
146    pub(crate) fn tab_item_top_offset(mut self, offset: impl Into<Pixels>) -> Self {
147        self.tab_item_top_offset = offset.into();
148        self
149    }
150}
151
152impl Styled for TabBar {
153    fn style(&mut self) -> &mut StyleRefinement {
154        &mut self.style
155    }
156}
157
158impl Sizable for TabBar {
159    fn with_size(mut self, size: impl Into<Size>) -> Self {
160        self.size = size.into();
161        self
162    }
163}
164
165impl RenderOnce for TabBar {
166    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
167        let default_gap = match self.size {
168            Size::Small | Size::XSmall => px(8.),
169            Size::Large => px(16.),
170            _ => px(12.),
171        };
172        let (bg, paddings, gap) = match self.variant {
173            TabVariant::Tab => {
174                let padding = Edges::all(px(0.));
175                (cx.theme().tab_bar, padding, px(0.))
176            }
177            TabVariant::Outline => {
178                let padding = Edges::all(px(0.));
179                (cx.theme().transparent, padding, default_gap)
180            }
181            TabVariant::Pill => {
182                let padding = Edges::all(px(0.));
183                (cx.theme().transparent, padding, px(4.))
184            }
185            TabVariant::Segmented => {
186                let padding_x = match self.size {
187                    Size::XSmall => px(2.),
188                    Size::Small => px(2.),
189                    Size::Large => px(6.),
190                    _ => px(5.),
191                };
192                let padding = Edges {
193                    left: padding_x,
194                    right: padding_x,
195                    ..Default::default()
196                };
197
198                (cx.theme().tab_bar_segmented, padding, px(2.))
199            }
200            TabVariant::Underline => {
201                // This gap is same as the tab inner_paddings
202                let gap = match self.size {
203                    Size::XSmall => px(10.),
204                    Size::Small => px(12.),
205                    Size::Large => px(20.),
206                    _ => px(16.),
207                };
208
209                (cx.theme().transparent, Edges::all(px(0.)), gap)
210            }
211        };
212
213        let mut item_labels = Vec::new();
214        let selected_index = self.selected_index;
215
216        self.base
217            .group("tab-bar")
218            .on_action({
219                let on_click = self.on_click.clone();
220                move |action: &SelectTab, window: &mut Window, cx: &mut App| {
221                    if let Some(on_click) = on_click.clone() {
222                        on_click(&action.0, window, cx);
223                    }
224                }
225            })
226            .relative()
227            .flex()
228            .items_center()
229            .bg(bg)
230            .text_color(cx.theme().tab_foreground)
231            .when(
232                self.variant == TabVariant::Underline || self.variant == TabVariant::Tab,
233                |this| {
234                    this.child(
235                        div()
236                            .id("border-b")
237                            .absolute()
238                            .left_0()
239                            .bottom_0()
240                            .size_full()
241                            .border_b_1()
242                            .border_color(cx.theme().border),
243                    )
244                },
245            )
246            .when(
247                self.variant == TabVariant::Pill || self.variant == TabVariant::Segmented,
248                |this| this.rounded(cx.theme().radius),
249            )
250            .paddings(paddings)
251            .refine_style(&self.style)
252            .when_some(self.prefix, |this, prefix| this.child(prefix))
253            .child(
254                h_flex()
255                    .id("tabs")
256                    .flex_1()
257                    .overflow_x_scroll()
258                    .when_some(self.scroll_handle, |this, scroll_handle| {
259                        this.track_scroll(&scroll_handle)
260                    })
261                    .gap(gap)
262                    .children(self.children.into_iter().enumerate().map(|(ix, child)| {
263                        item_labels.push((child.label.clone(), child.disabled));
264                        child
265                            .id(ix)
266                            .mt(self.tab_item_top_offset)
267                            .with_variant(self.variant)
268                            .with_size(self.size)
269                            .when_some(self.selected_index, |this, selected_ix| {
270                                this.selected(selected_ix == ix)
271                            })
272                            .when_some(self.on_click.clone(), move |this, on_click| {
273                                this.on_click(move |_, window, cx| on_click(&ix, window, cx))
274                            })
275                    }))
276                    .when(self.suffix.is_some() || self.menu, |this| {
277                        this.child(self.last_empty_space)
278                    }),
279            )
280            .when(self.menu, |this| {
281                this.child(
282                    Button::new("more")
283                        .xsmall()
284                        .ghost()
285                        .icon(IconName::ChevronDown)
286                        .popup_menu(move |mut this, _, _| {
287                            this = this.scrollable();
288                            for (ix, (label, disabled)) in item_labels.iter().enumerate() {
289                                this = this.menu_with_check_and_disabled(
290                                    label.clone().unwrap_or_default(),
291                                    selected_index == Some(ix),
292                                    Box::new(SelectTab(ix)),
293                                    *disabled,
294                                );
295                            }
296
297                            this
298                        })
299                        .anchor(Corner::TopRight),
300                )
301            })
302            .when_some(self.suffix, |this, suffix| this.child(suffix))
303    }
304}
gpui_component/tab/tab_bar.rs

gpui_component/tab/
tab_bar.rs
