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.
97 lines
2.0 KiB
97 lines
2.0 KiB
import React, { useState } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
import colors from "../config/colors";
|
|
import DropDownPicker from "react-native-dropdown-picker";
|
|
import { Shadow } from "react-native-shadow-2";
|
|
|
|
function DropDown({
|
|
value,
|
|
setValue,
|
|
items,
|
|
setItems,
|
|
formPlaceholder,
|
|
searchPlaceholder,
|
|
nothingToShow,
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<DropDownPicker
|
|
open={open}
|
|
listMode="MODAL"
|
|
value={value}
|
|
items={items}
|
|
setValue={setValue}
|
|
setItems={setItems}
|
|
setOpen={setOpen}
|
|
searchable={true}
|
|
translation={{
|
|
PLACEHOLDER: formPlaceholder,
|
|
SEARCH_PLACEHOLDER: searchPlaceholder,
|
|
SELECTED_ITEMS_COUNT_TEXT: "Item selecionado",
|
|
NOTHING_TO_SHOW: nothingToShow,
|
|
}}
|
|
style={{
|
|
backgroundColor: colors.white,
|
|
borderRadius: 6,
|
|
borderColor: colors.grayBG,
|
|
borderWidth: 1,
|
|
}}
|
|
textStyle={{
|
|
color: colors.medium,
|
|
fontSize: 18,
|
|
}}
|
|
labelStyle={{
|
|
color: colors.medium,
|
|
fontSize: 18,
|
|
}}
|
|
modalProps={{
|
|
animationType: "fade",
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SearchablePicker({
|
|
value,
|
|
setValue,
|
|
items,
|
|
setItems,
|
|
formPlaceholder,
|
|
searchPlaceholder,
|
|
nothingToShow = "Não encontramos nada com esse termo",
|
|
}) {
|
|
return (
|
|
<View style={styles.location}>
|
|
<Shadow
|
|
offset={[0, 4]}
|
|
distance={4}
|
|
radius={4}
|
|
startColor="rgba(0, 0, 0, 0.25)"
|
|
paintInside={true}
|
|
>
|
|
<DropDown
|
|
value={value}
|
|
setValue={setValue}
|
|
items={items}
|
|
setItems={setItems}
|
|
formPlaceholder={formPlaceholder}
|
|
searchPlaceholder={searchPlaceholder}
|
|
nothingToShow={nothingToShow}
|
|
/>
|
|
</Shadow>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
location: {
|
|
flex: 1,
|
|
alignSelf: "flex-start",
|
|
marginRight: 12,
|
|
marginLeft: 12,
|
|
},
|
|
});
|
|
|
|
export default SearchablePicker;
|