diff --git a/apps/mobile/src/components/ListActionRow.tsx b/apps/mobile/src/components/ListActionRow.tsx new file mode 100644 index 000000000000..35da97d517c9 --- /dev/null +++ b/apps/mobile/src/components/ListActionRow.tsx @@ -0,0 +1,42 @@ +import { Platform } from "react-native"; +import { useResolveClassNames } from "uniwind"; + +import { AppActivityIndicator } from "./AppActivityIndicator"; +import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout"; +import { RowPressable } from "./RowPressable"; + +export function ListActionRow( + props: ListRowContentProps & { + readonly tone?: "default" | "danger"; + readonly loading?: boolean; + readonly onPress: () => void; + }, +) { + const rippleStyle = useResolveClassNames("bg-subtle-strong"); + const disabled = Boolean(props.disabled || props.loading); + return ( + + + ) : undefined + } + /> + + ); +} diff --git a/apps/mobile/src/components/ListRowLayout.tsx b/apps/mobile/src/components/ListRowLayout.tsx index 96138fdbb8a0..9464e9d13ec0 100644 --- a/apps/mobile/src/components/ListRowLayout.tsx +++ b/apps/mobile/src/components/ListRowLayout.tsx @@ -21,7 +21,8 @@ export function ListRowLayout({ detail, disabled, accessory, -}: ListRowContentProps & { readonly accessory?: ReactNode }) { + tone = "default", +}: ListRowContentProps & { readonly accessory?: ReactNode; readonly tone?: "default" | "danger" }) { const { fontScale } = useWindowDimensions(); // Leave the label room to wrap at accessibility text sizes. const stackDetail = fontScale >= 1.5; @@ -38,14 +39,20 @@ export function ListRowLayout({ ) : null} - {label} + + {label} + {description ? ( {description} ) : null} diff --git a/apps/mobile/src/features/settings/components/SettingsActionRow.tsx b/apps/mobile/src/features/settings/components/SettingsActionRow.tsx index efef1f014668..d524ea809ec5 100644 --- a/apps/mobile/src/features/settings/components/SettingsActionRow.tsx +++ b/apps/mobile/src/features/settings/components/SettingsActionRow.tsx @@ -1,60 +1 @@ -import type { ComponentProps } from "react"; -import { Platform, Pressable } from "react-native"; - -import { AppActivityIndicator } from "../../../components/AppActivityIndicator"; -import { SymbolView } from "../../../components/AppSymbol"; -import { AppText as Text } from "../../../components/AppText"; -import { MaterialListRow } from "../../../components/MaterialListRow"; -import { cn } from "../../../lib/cn"; - -export function SettingsActionRow(props: { - readonly icon: ComponentProps["name"]; - readonly label: string; - readonly tone?: "default" | "danger"; - readonly disabled?: boolean; - readonly loading?: boolean; - readonly onPress: () => void; -}) { - const danger = props.tone === "danger"; - const textClassName = danger ? "tabular-nums text-danger-foreground" : "text-foreground"; - const iconColorClassName = danger ? "accent-danger-foreground" : "accent-icon"; - const icon = ( - - ); - const spinner = props.loading ? ( - - ) : null; - - if (Platform.OS === "android") { - return ( - - ); - } - - return ( - - {icon} - {props.label} - {spinner} - - ); -} +export { ListActionRow as SettingsActionRow } from "../../../components/ListActionRow";