45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './formPicker.styles';
|
|
import { FormPickerProps } from './formPicker.props';
|
|
|
|
export const FormPicker: React.FC<FormPickerProps> = ({
|
|
label,
|
|
value,
|
|
onValueChange,
|
|
options,
|
|
required = false,
|
|
placeholder = 'Select...',
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const selectedOption = options.find(opt => opt.value === value);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.label}>
|
|
{label}
|
|
{required && <Text style={styles.required}>*</Text>}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.pickerContainer}
|
|
onPress={() => {
|
|
// TODO: Implement modal picker or action sheet
|
|
console.log('Picker pressed');
|
|
}}>
|
|
<Text
|
|
style={[
|
|
styles.pickerText,
|
|
!selectedOption && styles.placeholder,
|
|
]}>
|
|
{selectedOption?.label || placeholder}
|
|
</Text>
|
|
<Icon name="chevron-down" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|