Extract TabBar component (#3613)

This PR extracts a new `TabBar` component from the tab bar implementation in the workspace. Release Notes: - N/A
2023-12-12 15:50:05 -05:00 · 2023-12-12 15:50:05 -05:00 · d2feaa41a5
commit d2feaa41a5
parent 31a4892a55
6 changed files with 286 additions and 126 deletions
--- a/crates/ui2/src/components/tab_bar.rs
+++ b/crates/ui2/src/components/tab_bar.rs
@ -0,0 +1,141 @@
+use gpui::{AnyElement, FocusHandle, Focusable, Stateful};
+use smallvec::SmallVec;
+
+use crate::prelude::*;
+
+#[derive(IntoElement)]
+pub struct TabBar {
+    id: ElementId,
+    focus_handle: FocusHandle,
+    start_children: SmallVec<[AnyElement; 2]>,
+    children: SmallVec<[AnyElement; 2]>,
+    end_children: SmallVec<[AnyElement; 2]>,
+}
+
+impl TabBar {
+    pub fn new(id: impl Into<ElementId>, focus_handle: FocusHandle) -> Self {
+        Self {
+            id: id.into(),
+            focus_handle,
+            start_children: SmallVec::new(),
+            children: SmallVec::new(),
+            end_children: SmallVec::new(),
+        }
+    }
+
+    pub fn start_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.start_children
+    }
+
+    pub fn start_child(mut self, start_child: impl IntoElement) -> Self
+    where
+        Self: Sized,
+    {
+        self.start_children_mut()
+            .push(start_child.into_element().into_any());
+        self
+    }
+
+    pub fn start_children(
+        mut self,
+        start_children: impl IntoIterator<Item = impl IntoElement>,
+    ) -> Self
+    where
+        Self: Sized,
+    {
+        self.start_children_mut().extend(
+            start_children
+                .into_iter()
+                .map(|child| child.into_any_element()),
+        );
+        self
+    }
+
+    pub fn end_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.end_children
+    }
+
+    pub fn end_child(mut self, end_child: impl IntoElement) -> Self
+    where
+        Self: Sized,
+    {
+        self.end_children_mut()
+            .push(end_child.into_element().into_any());
+        self
+    }
+
+    pub fn end_children(mut self, end_children: impl IntoIterator<Item = impl IntoElement>) -> Self
+    where
+        Self: Sized,
+    {
+        self.end_children_mut().extend(
+            end_children
+                .into_iter()
+                .map(|child| child.into_any_element()),
+        );
+        self
+    }
+}
+
+impl ParentElement for TabBar {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.children
+    }
+}
+
+impl RenderOnce for TabBar {
+    type Rendered = Focusable<Stateful<Div>>;
+
+    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+        const HEIGHT_IN_REMS: f32 = 30. / 16.;
+
+        div()
+            .id(self.id)
+            .group("tab_bar")
+            .track_focus(&self.focus_handle)
+            .w_full()
+            .h(rems(HEIGHT_IN_REMS))
+            .overflow_hidden()
+            .flex()
+            .flex_none()
+            .bg(cx.theme().colors().tab_bar_background)
+            .child(
+                h_stack()
+                    .flex_none()
+                    .gap_1()
+                    .px_1()
+                    .border_b()
+                    .border_r()
+                    .border_color(cx.theme().colors().border)
+                    .children(self.start_children),
+            )
+            .child(
+                div()
+                    .relative()
+                    .flex_1()
+                    .h_full()
+                    .overflow_hidden_x()
+                    .child(
+                        div()
+                            .absolute()
+                            .top_0()
+                            .left_0()
+                            .z_index(1)
+                            .size_full()
+                            .border_b()
+                            .border_color(cx.theme().colors().border),
+                    )
+                    .child(h_stack().id("tabs").z_index(2).children(self.children)),
+            )
+            .child(
+                h_stack()
+                    .flex_none()
+                    .gap_1()
+                    .px_1()
+                    .border_b()
+                    .border_l()
+                    .border_color(cx.theme().colors().border)
+                    .children(self.end_children),
+            )
+    }
+}