tab_bar.rs

  1use gpui::{AnyElement, Role, ScrollHandle};
  2use smallvec::SmallVec;
  3
  4use crate::Tab;
  5use crate::prelude::*;
  6
  7#[derive(IntoElement, RegisterComponent)]
  8pub struct TabBar {
  9    id: ElementId,
 10    start_children: SmallVec<[AnyElement; 2]>,
 11    children: SmallVec<[AnyElement; 2]>,
 12    end_children: SmallVec<[AnyElement; 2]>,
 13    scroll_handle: Option<ScrollHandle>,
 14}
 15
 16impl TabBar {
 17    pub fn new(id: impl Into<ElementId>) -> Self {
 18        Self {
 19            id: id.into(),
 20            start_children: SmallVec::new(),
 21            children: SmallVec::new(),
 22            end_children: SmallVec::new(),
 23            scroll_handle: None,
 24        }
 25    }
 26
 27    pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
 28        self.scroll_handle = Some(scroll_handle.clone());
 29        self
 30    }
 31
 32    pub fn start_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
 33        &mut self.start_children
 34    }
 35
 36    pub fn start_child(mut self, start_child: impl IntoElement) -> Self
 37    where
 38        Self: Sized,
 39    {
 40        self.start_children_mut()
 41            .push(start_child.into_element().into_any());
 42        self
 43    }
 44
 45    pub fn start_children(
 46        mut self,
 47        start_children: impl IntoIterator<Item = impl IntoElement>,
 48    ) -> Self
 49    where
 50        Self: Sized,
 51    {
 52        self.start_children_mut().extend(
 53            start_children
 54                .into_iter()
 55                .map(|child| child.into_any_element()),
 56        );
 57        self
 58    }
 59
 60    pub fn end_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
 61        &mut self.end_children
 62    }
 63
 64    pub fn end_child(mut self, end_child: impl IntoElement) -> Self
 65    where
 66        Self: Sized,
 67    {
 68        self.end_children_mut()
 69            .push(end_child.into_element().into_any());
 70        self
 71    }
 72
 73    pub fn end_children(mut self, end_children: impl IntoIterator<Item = impl IntoElement>) -> Self
 74    where
 75        Self: Sized,
 76    {
 77        self.end_children_mut().extend(
 78            end_children
 79                .into_iter()
 80                .map(|child| child.into_any_element()),
 81        );
 82        self
 83    }
 84}
 85
 86impl ParentElement for TabBar {
 87    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
 88        self.children.extend(elements)
 89    }
 90}
 91
 92impl RenderOnce for TabBar {
 93    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
 94        div()
 95            .id(self.id)
 96            .role(Role::TabList)
 97            .group("tab_bar")
 98            .flex()
 99            .flex_none()
100            .w_full()
101            .h(Tab::container_height(cx))
102            .bg(cx.theme().colors().tab_bar_background)
103            .when(!self.start_children.is_empty(), |this| {
104                this.child(
105                    h_flex()
106                        .flex_none()
107                        .gap(DynamicSpacing::Base04.rems(cx))
108                        .px(DynamicSpacing::Base06.rems(cx))
109                        .border_b_1()
110                        .border_r_1()
111                        .border_color(cx.theme().colors().border)
112                        .children(self.start_children),
113                )
114            })
115            .child(
116                div()
117                    .relative()
118                    .flex_1()
119                    .h_full()
120                    .overflow_x_hidden()
121                    .child(
122                        div()
123                            .absolute()
124                            .top_0()
125                            .left_0()
126                            .size_full()
127                            .border_b_1()
128                            .border_color(cx.theme().colors().border),
129                    )
130                    .child(
131                        h_flex()
132                            .id("tabs")
133                            .flex_grow()
134                            .overflow_x_scroll()
135                            .when_some(self.scroll_handle, |cx, scroll_handle| {
136                                cx.track_scroll(&scroll_handle)
137                            })
138                            .children(self.children),
139                    ),
140            )
141            .when(!self.end_children.is_empty(), |this| {
142                this.child(
143                    h_flex()
144                        .flex_none()
145                        .gap(DynamicSpacing::Base04.rems(cx))
146                        .px(DynamicSpacing::Base06.rems(cx))
147                        .border_color(cx.theme().colors().border)
148                        .border_b_1()
149                        .border_l_1()
150                        .children(self.end_children),
151                )
152            })
153    }
154}
155
156impl Component for TabBar {
157    fn scope() -> ComponentScope {
158        ComponentScope::Navigation
159    }
160
161    fn name() -> &'static str {
162        "TabBar"
163    }
164
165    fn description() -> Option<&'static str> {
166        Some("A horizontal bar containing tabs for navigation between different views or sections.")
167    }
168
169    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
170        Some(
171            v_flex()
172                .gap_6()
173                .children(vec![
174                    example_group_with_title(
175                        "Basic Usage",
176                        vec![
177                            single_example(
178                                "Empty TabBar",
179                                TabBar::new("empty_tab_bar").into_any_element(),
180                            ),
181                            single_example(
182                                "With Tabs",
183                                TabBar::new("tab_bar_with_tabs")
184                                    .child(Tab::new("tab1"))
185                                    .child(Tab::new("tab2"))
186                                    .child(Tab::new("tab3"))
187                                    .into_any_element(),
188                            ),
189                        ],
190                    ),
191                    example_group_with_title(
192                        "With Start and End Children",
193                        vec![single_example(
194                            "Full TabBar",
195                            TabBar::new("full_tab_bar")
196                                .start_child(Button::new("start_button", "Start"))
197                                .child(Tab::new("tab1"))
198                                .child(Tab::new("tab2"))
199                                .child(Tab::new("tab3"))
200                                .end_child(Button::new("end_button", "End"))
201                                .into_any_element(),
202                        )],
203                    ),
204                ])
205                .into_any_element(),
206        )
207    }
208}