1import { View } from "react-native";
2
3import { RenderErrorBoundary, RenderFailureView } from "../../components/RenderErrorBoundary";
4import { PaneContext } from "../../components/ui/Pane";
5import { WorkspaceSlotOptionsContext } from "../../native/v5-workspace-context";
6import { InspectorCloseContext, useInspectorBarSlot } from "./inspector-bar-store";
7import {
8 useMountedInspectorPanes,
9 type InspectorContent,
10 type InspectorPane,
11} from "./inspector-panes";
12
13// AppBar draws the bar inline on Android; the slot keeps a pane's options off the thread's route.
14function PaneContent(props: {
15 readonly pane: InspectorPane;
16 readonly resetKeys: ReadonlyArray<unknown> | undefined;
17}) {
18 const { slot } = useInspectorBarSlot();
19 return (
20 <WorkspaceSlotOptionsContext value={slot}>
21 <RenderErrorBoundary
22 resetKeys={props.resetKeys}
23 renderFallback={(fallback) => (
24 <RenderFailureView {...fallback} title="The inspector couldn't be displayed" />
25 )}
26 >
27 {props.pane.render()}
28 </RenderErrorBoundary>
29 </WorkspaceSlotOptionsContext>
30 );
31}
32
33/** The inspector's panes, stacked in place: Android draws no native chrome a hidden pane could leave. */
34export function InspectorPanes(props: {
35 readonly content: InspectorContent | undefined;
36 readonly onClose: () => void;
37}) {
38 const panes = useMountedInspectorPanes(props.content);
39 return (
40 <InspectorCloseContext value={props.onClose}>
41 <PaneContext value="inspector">
42 <View className="flex-1">
43 {panes.map((pane) => {
44 const visible = pane.key === props.content?.active;
45 return (
46 <View
47 key={pane.key}
48 accessibilityElementsHidden={!visible}
49 focusable={visible}
50 importantForAccessibility={visible ? "auto" : "no-hide-descendants"}
51 pointerEvents={visible ? "auto" : "none"}
52 style={{
53 position: "absolute",
54 inset: 0,
55 opacity: visible ? 1 : 0,
56 // A lower zIndex puts the visible pane first in native order, where Material finds its scroll view.
57 zIndex: visible ? 0 : 1,
58 }}
59 >
60 <PaneContent pane={pane} resetKeys={props.content?.resetKeys} />
61 </View>
62 );
63 })}
64 </View>
65 </PaneContext>
66 </InspectorCloseContext>
67 );
68}