1import { Toolbar } from "./Toolbar";
2
3import type { AppBarMenu, AppBarMenuItem } from "./AppBar.types";
4
5function renderMenuItems(items: ReadonlyArray<AppBarMenuItem>) {
6 return items.map((item) =>
7 "items" in item ? (
8 <Toolbar.Menu key={item.id} title={item.title} icon={item.icon} inline={item.inline}>
9 {renderMenuItems(item.items)}
10 </Toolbar.Menu>
11 ) : (
12 <Toolbar.MenuAction
13 key={item.id}
14 icon={item.icon}
15 subtitle={item.subtitle}
16 disabled={item.disabled}
17 destructive={item.destructive}
18 isOn={item.selected}
19 onPress={item.onPress}
20 >
21 {item.title}
22 </Toolbar.MenuAction>
23 ),
24 );
25}
26
27export function createNativeHeaderMenu(menu: AppBarMenu) {
28 return (
29 <Toolbar.Menu
30 key={menu.title}
31 title={menu.title}
32 accessibilityLabel={menu.title}
33 icon={typeof menu.icon === "string" ? menu.icon : menu.icon.ios}
34 separateBackground={menu.separateBackground ?? true}
35 >
36 {menu.status ? <Toolbar.Label>{menu.status}</Toolbar.Label> : null}
37 {renderMenuItems(menu.items)}
38 </Toolbar.Menu>
39 );
40}