You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.9 KiB
77 lines
1.9 KiB
import React from "react"; |
|
import { Appearance } from "react-native"; |
|
import Svg, { Path } from "react-native-svg"; |
|
import SelectDropdown from "react-native-select-dropdown"; |
|
|
|
//styles |
|
import fontSize from "../constants/fontSize"; |
|
import Colors from "../constants/Colors"; |
|
function Select({ |
|
iconPosition, |
|
options, |
|
onChange, |
|
name, |
|
value, |
|
width, |
|
defaultValue, |
|
}) { |
|
const colorScheme = Appearance.getColorScheme(); |
|
|
|
return ( |
|
<SelectDropdown |
|
data={options} |
|
buttonStyle={{ |
|
width: width, |
|
borderWidth: 1, |
|
borderColor: Colors.theme1[colorScheme].gray2077 + "66", |
|
borderRadius: 6, |
|
height: 36, |
|
backgroundColor: Colors.theme1[colorScheme].grayF9, |
|
fontFamily: "regular", |
|
}} |
|
rowTextStyle={{ |
|
fontSize: fontSize.sm, |
|
fontFamily: "regular", |
|
}} |
|
defaultButtonText={defaultValue} |
|
statusBarTranslucent={true} |
|
buttonTextStyle={{ |
|
textAlign: "center", |
|
justifyContent: "flex-end", |
|
flex: 0, |
|
fontSize: fontSize.sm, |
|
color: Colors.theme1[colorScheme].gray2077, |
|
fontFamily: "regular", |
|
// display: 'inline' |
|
}} |
|
dropdownIconPosition={iconPosition} |
|
onSelect={(selectedItem) => { |
|
onChange(name, selectedItem); |
|
}} |
|
renderDropdownIcon={() => ( |
|
<Svg |
|
data-name="vuesax/linear/arrow-down" |
|
xmlns="http://www.w3.org/2000/svg" |
|
width={16.081} |
|
height={16.081} |
|
> |
|
<Path |
|
d="m13.347 5.997-4.368 4.369a1.331 1.331 0 0 1-1.876 0L2.734 5.997" |
|
fill="none" |
|
stroke={Colors.theme1[colorScheme].gray2077 + "66"} |
|
strokeLinecap="round" |
|
strokeLinejoin="round" |
|
strokeWidth={1.5} |
|
/> |
|
</Svg> |
|
)} |
|
/> |
|
); |
|
} |
|
|
|
export default Select; |
|
|
|
Select.defaultProps = { |
|
options: ["1", "2", "3"], |
|
iconPosition: "left", |
|
};
|
|
|