101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
|
|
import { useFormContext } from 'react-hook-form';
|
|
import { useRouter } from 'expo-router';
|
|
import { useSettings } from '@/theme';
|
|
|
|
interface FormButtonsProps {
|
|
onSubmit: (data: any) => void;
|
|
submitLabel?: string;
|
|
}
|
|
|
|
export function FormButtons({ onSubmit, submitLabel = 'Submit' }: FormButtonsProps) {
|
|
const router = useRouter();
|
|
const { theme } = useSettings();
|
|
const { handleSubmit, formState: { isSubmitting } } = useFormContext();
|
|
|
|
const cancel = () => {
|
|
if (router.canGoBack()) {
|
|
router.back();
|
|
} else {
|
|
router.replace('/');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.background, borderTopColor: theme.border }]}>
|
|
<TouchableOpacity
|
|
style={[styles.cancelButton, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
|
|
onPress={cancel}
|
|
disabled={isSubmitting}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[styles.cancelButtonText, { color: theme.textSecondary }]}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.submitButton, isSubmitting && styles.buttonDisabled]}
|
|
onPress={handleSubmit(onSubmit)}
|
|
disabled={isSubmitting}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={styles.submitButtonText}>
|
|
{isSubmitting ? 'Saving...' : submitLabel}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 16,
|
|
borderTopWidth: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
gap: 12,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 8,
|
|
elevation: 4,
|
|
},
|
|
cancelButton: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
cancelButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
submitButton: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
backgroundColor: '#E53935',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
shadowColor: '#E53935',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 8,
|
|
elevation: 3,
|
|
},
|
|
submitButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#FFFFFF',
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
});
|