Open History to see the last commit
1import { selectedNavigationTab, visibleNavigationTabs } from "./navigation-tab-order";
2import { requireNativeView } from "expo";
3import type { NativeSyntheticEvent, ViewProps } from "react-native";
4import { useControlTheme } from "../../../components/ui/useControlTheme";
5import { useNavigationTabOrder, useHiddenNavigationTabs } from "./navigation-tabs";
6import { useWorkspaceTabs } from "./WorkspaceTabsContext";
7import { useSelectWorkspaceTab } from "./useSelectWorkspaceTab";
8
9const NativeSidebarTabBar = requireNativeView<
10 ViewProps & {
11 tabs: readonly string[];
12 selectedTab: string;
13 selectedColor: string;
14 appearance: string;
15 showsCompose: boolean;
16 compact?: boolean;
17 onSelectionChange: (event: NativeSyntheticEvent<{ tab: string }>) => void;
18 onCompose: () => void;
19 }
20>("T3NativeControls", "SidebarTabBar");
21
22export function WorkspaceSidebarTabs(props: {
23 readonly onNewTask?: () => void;
24 readonly compact?: boolean;
25 readonly reserveComposeSpace?: boolean;
26}) {
27 const workspace = useWorkspaceTabs()!;
28 const order = useNavigationTabOrder();
29 const hidden = useHiddenNavigationTabs();
30 const tabs = [...visibleNavigationTabs(order, hidden), "settings" as const];
31 const selectTab = useSelectWorkspaceTab();
32 const { colors, colorScheme } = useControlTheme();
33 // UIKit loses accessible names when updating nil-titled items in place.
34 const tabBarKey = tabs.join(":");
35 return (
36 <NativeSidebarTabBar
37 key={tabBarKey}
38 tabs={tabs}
39 selectedTab={selectedNavigationTab(
40 order,
41 workspace.state.selectedTab,
42 workspace.settingsOpen,
43 hidden,
44 )}
45 selectedColor={colors["--color-primary"]}
46 appearance={colorScheme}
47 showsCompose={Boolean(props.onNewTask)}
48 compact={props.compact}
49 onCompose={() => props.onNewTask?.()}
50 onSelectionChange={({ nativeEvent }) => {
51 const tab = tabs.find((candidate) => candidate === nativeEvent.tab);
52 if (tab === "settings") selectTab("settings");
53 else if (tab) selectTab(tab);
54 }}
55 // Keep the host stable while UIKit updates the bars' intrinsic size and safe area together.
56 style={{
57 position: "absolute",
58 bottom: 0,
59 left: props.compact ? 8 : 0,
60 // Keep the tab icons in place when Compose disappears on other destinations.
61 right:
62 (props.compact ? 12 : 0) +
63 ((props.reserveComposeSpace ?? props.compact) && !props.onNewTask
64 ? props.compact
65 ? 64
66 : 76
67 : 0),
68 height: 128,
69 }}
70 />
71 );
72}