1import { NativeHeaderToolbar } from "../native/StackHeader";
2import type { ScreenHeaderMenu, ScreenHeaderMenuItem } from "./ScreenHeader.types";
3
4function renderMenuItems(items: ReadonlyArray<ScreenHeaderMenuItem>) {
5 return items.map((item) =>
6 "items" in item ? (
7 <NativeHeaderToolbar.Menu
8 key={item.id}
9 title={item.title}
10 icon={item.icon}
11 inline={item.inline}
12 >
13 {renderMenuItems(item.items)}
14 </NativeHeaderToolbar.Menu>
15 ) : (
16 <NativeHeaderToolbar.MenuAction
17 key={item.id}
18 icon={item.icon}
19 subtitle={item.subtitle}
20 disabled={item.disabled}
21 isOn={item.selected}
22 onPress={item.onPress}
23 >
24 {item.title}
25 </NativeHeaderToolbar.MenuAction>
26 ),
27 );
28}
29
30/** Returns direct native items for toolbar serialization, including nested menu data. */
31export function createNativeHeaderMenu(menu: ScreenHeaderMenu) {
32 return (
33 <NativeHeaderToolbar.Menu
34 key={menu.title}
35 title={menu.title}
36 accessibilityLabel={menu.title}
37 icon={typeof menu.icon === "string" ? menu.icon : menu.icon.ios}
38 separateBackground={menu.separateBackground ?? true}
39 >
40 {menu.status ? <NativeHeaderToolbar.Label>{menu.status}</NativeHeaderToolbar.Label> : null}
41 {renderMenuItems(menu.items)}
42 </NativeHeaderToolbar.Menu>
43 );
44}