96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import { Ionicons } from "@expo/vector-icons";
|
|
import { ReactNode, useRef } from "react";
|
|
import { Pressable, StyleSheet, Text, View } from "react-native";
|
|
import Swipeable, {
|
|
type SwipeableMethods,
|
|
} from "react-native-gesture-handler/ReanimatedSwipeable";
|
|
|
|
import { fonts, radii, spacing } from "@/constants/theme";
|
|
import { useAppTheme } from "@/contexts/ThemeContext";
|
|
import type { ThemeColors } from "@/lib/theme-palette";
|
|
import { useThemedStyles } from "@/lib/use-themed-styles";
|
|
|
|
export type SwipeAction = {
|
|
key: string;
|
|
label: string;
|
|
icon: keyof typeof Ionicons.glyphMap;
|
|
color: string;
|
|
backgroundColor: string;
|
|
onPress: () => void;
|
|
};
|
|
|
|
type SwipeableRowProps = {
|
|
children: ReactNode;
|
|
actions: SwipeAction[];
|
|
enabled?: boolean;
|
|
backgroundColor?: string;
|
|
};
|
|
|
|
export function SwipeableRow({
|
|
children,
|
|
actions,
|
|
enabled = true,
|
|
backgroundColor,
|
|
}: SwipeableRowProps) {
|
|
const { colors } = useAppTheme();
|
|
const styles = useThemedStyles(createSwipeableRowStyles);
|
|
const rowBackground = backgroundColor ?? colors.background;
|
|
const swipeRef = useRef<SwipeableMethods>(null);
|
|
|
|
function renderRightActions() {
|
|
return (
|
|
<View style={styles.actions}>
|
|
{actions.map((action) => (
|
|
<Pressable
|
|
key={action.key}
|
|
style={[styles.actionButton, { backgroundColor: action.backgroundColor }]}
|
|
onPress={() => {
|
|
swipeRef.current?.close();
|
|
action.onPress();
|
|
}}
|
|
>
|
|
<Ionicons name={action.icon} size={20} color={action.color} />
|
|
<Text style={[styles.actionLabel, { color: action.color }]}>{action.label}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!enabled || actions.length === 0) {
|
|
return <View style={[styles.row, { backgroundColor: rowBackground }]}>{children}</View>;
|
|
}
|
|
|
|
return (
|
|
<Swipeable ref={swipeRef} renderRightActions={renderRightActions} overshootRight={false}>
|
|
<View style={[styles.row, { backgroundColor: rowBackground }]}>{children}</View>
|
|
</Swipeable>
|
|
);
|
|
}
|
|
|
|
const createSwipeableRowStyles = (colors: ThemeColors) =>
|
|
StyleSheet.create({
|
|
row: {
|
|
backgroundColor: colors.background,
|
|
borderRadius: radii.lg,
|
|
overflow: "hidden",
|
|
marginBottom: spacing.xs,
|
|
},
|
|
actions: {
|
|
flexDirection: "row",
|
|
alignItems: "stretch",
|
|
},
|
|
actionButton: {
|
|
width: 80,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: spacing.xs,
|
|
borderRadius: radii.md,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
actionLabel: {
|
|
fontFamily: fonts.bodyMedium,
|
|
fontSize: 11,
|
|
},
|
|
});
|