1import { Pressable, View } from "react-native";
2import { AppActivityIndicator } from "./AppActivityIndicator";
3import { AppText } from "./AppText";
4import { SymbolView } from "./AppSymbol";
5import { Menu } from "./Menu";
6import type { SplitButtonProps } from "./SplitButton.types";
7
8export function SplitButton(props: SplitButtonProps) {
9 const active = !props.disabled;
10 const menuEnabled = props.actions.some((action) => !action.attributes?.disabled);
11 return (
12 <View
13 className={`flex-row overflow-hidden rounded-xl border-continuous ${active ? "bg-prominent-action" : "bg-subtle-strong"}`}
14 >
15 <Pressable
16 accessibilityRole="button"
17 accessibilityLabel={props.accessibilityLabel ?? props.label}
18 accessibilityState={{ disabled: Boolean(props.disabled), busy: Boolean(props.loading) }}
19 disabled={props.disabled}
20 onPress={props.onPress}
21 className="min-h-11 min-w-0 flex-1 flex-row items-center justify-center gap-2 px-3 py-2 active:opacity-70"
22 >
23 {props.loading ? (
24 <AppActivityIndicator size="small" colorClassName="accent-icon-muted" />
25 ) : props.icon ? (
26 <SymbolView
27 name={props.icon}
28 size={16}
29 tintColorClassName={active ? "accent-prominent-action-foreground" : "accent-icon-muted"}
30 />
31 ) : null}
32 <AppText
33 className={`shrink text-center text-sm font-t3-semibold ${active ? "text-prominent-action-foreground" : "text-foreground-muted"}`}
34 >
35 {props.label}
36 </AppText>
37 </Pressable>
38 {props.actions.length > 0 ? (
39 <View pointerEvents={menuEnabled ? "auto" : "none"}>
40 <Menu
41 title={props.menuTitle}
42 actions={props.actions}
43 onPressAction={({ nativeEvent }) => props.onPressAction(nativeEvent.event)}
44 >
45 <Pressable
46 accessibilityRole="button"
47 accessibilityLabel={props.menuTitle}
48 accessibilityState={{ disabled: !menuEnabled }}
49 disabled={!menuEnabled}
50 className="min-h-11 w-11 items-center justify-center border-l border-border-subtle"
51 >
52 <SymbolView
53 name="chevron.down"
54 size={13}
55 tintColorClassName={
56 active ? "accent-prominent-action-foreground" : "accent-icon-muted"
57 }
58 />
59 </Pressable>
60 </Menu>
61 </View>
62 ) : null}
63 </View>
64 );
65}