|
|
@ -6,6 +6,7 @@ import DropDownPicker from "react-native-dropdown-picker"; |
|
|
|
import { Shadow } from "react-native-shadow-2"; |
|
|
|
import { useFormikContext } from "formik"; |
|
|
|
import { ErrorMessage } from "./forms"; |
|
|
|
import defaultStyles from "../config/styles"; |
|
|
|
|
|
|
|
function DropDown({ |
|
|
|
value, |
|
|
@ -39,6 +40,8 @@ function DropDown({ |
|
|
|
borderRadius: 6, |
|
|
|
borderColor: colors.grayBG, |
|
|
|
borderWidth: 1, |
|
|
|
...defaultStyles.shadow, |
|
|
|
height: 58, |
|
|
|
}} |
|
|
|
textStyle={{ |
|
|
|
color: colors.medium, |
|
|
@ -66,17 +69,15 @@ function SearchablePicker({ |
|
|
|
marginRight = 2, |
|
|
|
marginLeft = 16, |
|
|
|
}) { |
|
|
|
|
|
|
|
const { values, setFieldValue, errors, touched } = name ? useFormikContext() : [1,1,1,1]; |
|
|
|
|
|
|
|
const { values, setFieldValue, errors, touched } = name |
|
|
|
? useFormikContext() |
|
|
|
: [1, 1, 1, 1]; |
|
|
|
|
|
|
|
const [value, setValue] = useState(name ? values[name] : ""); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (name) |
|
|
|
setFieldValue(name, value, true); |
|
|
|
else |
|
|
|
setSelected(value) |
|
|
|
if (name) setFieldValue(name, value, true); |
|
|
|
else setSelected(value); |
|
|
|
}, [value]); |
|
|
|
|
|
|
|
return ( |
|
|
@ -85,13 +86,6 @@ function SearchablePicker({ |
|
|
|
styles.location, |
|
|
|
{ marginLeft: marginLeft, marginRight: marginRight }, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Shadow |
|
|
|
offset={[0, 3]} |
|
|
|
distance={3} |
|
|
|
radius={4} |
|
|
|
startColor="rgba(0, 0, 0, 0.15)" |
|
|
|
paintInside={true} |
|
|
|
> |
|
|
|
<DropDown |
|
|
|
value={value} |
|
|
@ -102,9 +96,8 @@ function SearchablePicker({ |
|
|
|
searchPlaceholder={searchPlaceholder} |
|
|
|
nothingToShow={nothingToShow} |
|
|
|
/> |
|
|
|
</Shadow> |
|
|
|
|
|
|
|
{name && (<ErrorMessage error={errors[name]} visible={touched[name]} />)} |
|
|
|
{name && <ErrorMessage error={errors[name]} visible={touched[name]} />} |
|
|
|
</View> |
|
|
|
); |
|
|
|
} |
|
|
|