1import type { ReactNode } from "react";
2import { Platform, View, type LayoutChangeEvent } from "react-native";
3
4import { useAdaptiveWorkspaceLayout } from "../../features/layout/adaptive-workspace-context";
5
6const SURFACE_CLASS_NAMES = {
7 sheet: "bg-sheet-solid",
8 screen: "bg-screen",
9 canvas: "bg-thread-canvas",
10 drawer: "bg-drawer",
11} as const;
12
13/**
14 * The body below a screen's AppBar. On Android it is the rounded card every pane and sheet
15 * draws under its bar; a screen picks only the card's surface.
16 */
17export function ScreenContent({
18 children,
19 surface = "sheet",
20 insetHorizontal,
21 fitToContents = false,
22 onLayout,
23}: {
24 readonly children: ReactNode;
25 readonly surface?: keyof typeof SURFACE_CLASS_NAMES;
26 /** Keeps the card off the window edge. Defaults to on wherever the workspace is split. */
27 readonly insetHorizontal?: boolean;
28 readonly fitToContents?: boolean;
29 readonly onLayout?: (event: LayoutChangeEvent) => void;
30}) {
31 const { layout } = useAdaptiveWorkspaceLayout();
32 if (Platform.OS !== "android") {
33 return onLayout ? (
34 <View className="flex-1" onLayout={onLayout}>
35 {children}
36 </View>
37 ) : (
38 children
39 );
40 }
41
42 return (
43 <View className={fitToContents ? "shrink bg-header" : "flex-1 bg-header"}>
44 <View
45 className={`overflow-hidden rounded-t-[28px] ${SURFACE_CLASS_NAMES[surface]}`}
46 collapsable={false}
47 onLayout={onLayout}
48 style={{
49 flexShrink: 1,
50 flexGrow: fitToContents ? 0 : 1,
51 flexBasis: fitToContents ? "auto" : 0,
52 marginHorizontal: (insetHorizontal ?? layout.usesSplitView) ? 4 : 0,
53 }}
54 >
55 {children}
56 </View>
57 </View>
58 );
59}