98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { View, Text, Modal, TouchableOpacity, FlatList } from 'react-native';
|
||
|
|
import { Ionicons } from '@expo/vector-icons'; // Optional for adding icons
|
||
|
|
|
||
|
|
const CustomPicker = ({ options, selectedValue, onValueChange }) => {
|
||
|
|
const [isVisible, setIsVisible] = useState(false);
|
||
|
|
|
||
|
|
const handleSelect = (item:any) => {
|
||
|
|
onValueChange(item.value);
|
||
|
|
setIsVisible(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
let optionSet = options.map((s:any, i:any)=>{
|
||
|
|
s.key = i;
|
||
|
|
return s;
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={{width:"100%"}}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={{
|
||
|
|
height: 35,
|
||
|
|
width: '100%',
|
||
|
|
flexDirection:'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
borderBottomWidth:0.5,
|
||
|
|
borderBottomColor:'white',
|
||
|
|
borderStyle:'dashed'
|
||
|
|
}}
|
||
|
|
onPress={() => setIsVisible(true)}
|
||
|
|
>
|
||
|
|
<View style={{flex:1}}>
|
||
|
|
<Text style={{ color: 'white', fontSize: 20, fontWeight:'600' }}>
|
||
|
|
{(optionSet.find(option => option.value === selectedValue)?.label || 'PILIH CUSTOMER').toUpperCase()}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
<Ionicons
|
||
|
|
name="chevron-down-outline"
|
||
|
|
size={24}
|
||
|
|
color={"white"}
|
||
|
|
style={{ marginRight: 15 }}
|
||
|
|
/>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<Modal
|
||
|
|
visible={isVisible}
|
||
|
|
transparent={true}
|
||
|
|
animationType="slide"
|
||
|
|
>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||
|
|
onPress={() => setIsVisible(false)}
|
||
|
|
>
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
margin: 20,
|
||
|
|
borderRadius: 10,
|
||
|
|
padding: 10,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<FlatList
|
||
|
|
data={optionSet}
|
||
|
|
keyExtractor={(item) => item.key}
|
||
|
|
renderItem={({ item }) => (
|
||
|
|
<TouchableOpacity
|
||
|
|
style={{
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
paddingVertical: 10,
|
||
|
|
paddingHorizontal: 20,
|
||
|
|
borderBottomWidth: 1, // Add bottom border to each item
|
||
|
|
borderBottomColor: '#ccc', // Set border color
|
||
|
|
}}
|
||
|
|
onPress={() => handleSelect(item)}
|
||
|
|
>
|
||
|
|
<Ionicons
|
||
|
|
name="checkmark-circle"
|
||
|
|
size={24}
|
||
|
|
color={item.value === selectedValue ? "#333" : "#ccc"}
|
||
|
|
style={{ marginRight: 15 }}
|
||
|
|
/>
|
||
|
|
<Text style={{ color: '#333', fontSize: 16, fontWeight: '900' }}>
|
||
|
|
{item.label}
|
||
|
|
</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</Modal>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CustomPicker;
|