| 1 | import type { ComponentProps } from "react"; |
| 2 | import { Pressable } from "react-native"; |
| 3 | import type { MaterialFloatingActionButton as AndroidMaterialFloatingActionButton } from "./MaterialFloatingActionButton.android"; |
| 4 | import { AppText } from "./AppText"; |
| 5 | import { SymbolView } from "./AppSymbol"; |
| 6 | import { cn } from "../lib/cn"; |
| 7 | |
| 8 | export function MaterialFloatingActionButton( |
| 9 | props: ComponentProps<typeof AndroidMaterialFloatingActionButton>, |
| 10 | ) { |
| 11 | return ( |
| 12 | <Pressable |
| 13 | accessibilityRole="button" |
| 14 | accessibilityLabel={props.label} |
| 15 | onPress={props.onPress} |
| 16 | className={cn( |
| 17 | "min-h-14 min-w-14 flex-row items-center justify-center gap-2 rounded-2xl px-4", |
| 18 | props.tone === "primary" ? "bg-primary" : "bg-secondary", |
| 19 | props.className, |
| 20 | )} |
| 21 | style={props.style} |
| 22 | > |
| 23 | <SymbolView |
| 24 | name={props.icon} |
| 25 | size={24} |
| 26 | tintColorClassName={ |
| 27 | props.tone === "primary" ? "accent-primary-foreground" : "accent-secondary-foreground" |
| 28 | } |
| 29 | /> |
| 30 | {props.variant === "extended" && props.expanded !== false ? ( |
| 31 | <AppText |
| 32 | className={cn( |
| 33 | "text-sm", |
| 34 | props.tone === "primary" ? "text-primary-foreground" : "text-secondary-foreground", |
| 35 | )} |
| 36 | > |
| 37 | {props.label} |
| 38 | </AppText> |
| 39 | ) : null} |
| 40 | </Pressable> |
| 41 | ); |
| 42 | } |