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.
90 lines
2.3 KiB
90 lines
2.3 KiB
2 years ago
|
import React from "react";
|
||
|
|
import { connect } from "react-redux";
|
||
|
|
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,
|
||
|
|
width,
|
||
|
|
defaultValue,
|
||
|
|
theme,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<SelectDropdown
|
||
|
|
data={options}
|
||
|
|
buttonStyle={{
|
||
|
|
width: width,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: Colors.theme1.gray2077 + "66",
|
||
|
|
borderRadius: 2,
|
||
|
|
height: 48,
|
||
|
|
backgroundColor:
|
||
|
|
theme === "light" ? Colors.theme1.white : Colors.theme1.gray2077,
|
||
|
|
fontFamily: "Regular",
|
||
|
|
}}
|
||
|
|
rowTextStyle={{
|
||
|
|
fontSize: fontSize.sm,
|
||
|
|
fontFamily: "Regular",
|
||
|
|
color: theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
|
||
|
|
}}
|
||
|
|
defaultButtonText={defaultValue}
|
||
|
|
statusBarTranslucent={true}
|
||
|
|
buttonTextStyle={{
|
||
|
|
textAlign: "center",
|
||
|
|
justifyContent: "flex-end",
|
||
|
|
flex: 0,
|
||
|
|
fontSize: fontSize.tiny,
|
||
|
|
color: theme === "light" ? Colors.theme1.gray2077 : Colors.theme1.white,
|
||
|
|
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={
|
||
|
|
theme === "light"
|
||
|
|
? Colors.theme1.gray2077 + "66"
|
||
|
|
: Colors.theme1.white
|
||
|
|
}
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
/>
|
||
|
|
</Svg>
|
||
|
|
)}
|
||
|
|
dropdownStyle={{
|
||
|
|
backgroundColor:
|
||
|
|
theme === "light" ? Colors.theme1.white : Colors.theme1.gray2077,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = (state) => ({
|
||
|
|
theme: state.publicApi.theme,
|
||
|
|
});
|
||
|
|
|
||
|
|
export default connect(mapStateToProps)(Select);
|
||
|
|
|
||
|
|
Select.defaultProps = {
|
||
|
|
options: ["1", "2", "3"],
|
||
|
|
iconPosition: "left",
|
||
|
|
};
|