import React, { useState } from 'react' import { TouchableWithoutFeedback, Animated, View, Dimensions } from 'react-native' import { FlatList, PanGestureHandler, State } from 'react-native-gesture-handler' import { Container, Label, Body, BottomContainer, Point } from './styles' import Icon from 'react-native-vector-icons/Ionicons' import { ItemProps, SelectProps, FlatProps } from './types' const Select: React.FC = ({ label, itens, onSelected, maxHeight, minHeight }) => { const [size, setSize] = useState(300) const translate = new Animated.Value(0) const opacity = new Animated.Value(1) const [selected, setSelected] = useState(null) const [visible, setVisible] = useState(false) const placeholder = !selected ? label || 'Selecione' : selected.label const gestureEvent = Animated.event( [{ nativeEvent: { translationY: translate } }], { useNativeDriver: true } ) const hide = (callback?: any) => { Animated.sequence([ Animated.timing( translate, { toValue: size, duration: 150, useNativeDriver: true } ), Animated.timing( opacity, { toValue: 0, duration: 100, useNativeDriver: true } ) ]).start(() => { setVisible(false) if (!!callback) { callback() } }) } function renderItem({ item }: FlatProps) { return ( { hide(() => { setSelected(item) onSelected(item) }) }} > {item.label} ) } return ( <> setVisible(true)} > {placeholder} {visible ? ( hide()} > { if (nativeEvent.oldState === State.ACTIVE) { const { translationY } = nativeEvent if (translationY >= 100) { hide() } else { Animated.timing( translate, { toValue: 0, duration: 100, useNativeDriver: true } ).start() } } }} > { const { nativeEvent: { layout: { height } } } = props setSize(height) }} > `item${index}`} renderItem={renderItem} showsVerticalScrollIndicator={false} style={{ marginVertical: 20 }} /> ) : null } ) } export default Select