import React from 'react'; import PropTypes from 'prop-types'; import { View, FlatList, StyleSheet, Text } from 'react-native'; import I18n from '../i18n'; import { withTheme } from '../theme'; import { themes } from '../constants/colors'; import debounce from '../utils/debounce'; import sharedStyles from './Styles'; import ListItem from '../containers/ListItem'; import Check from '../containers/Check'; import Separator from '../containers/Separator'; import SearchBox from '../containers/SearchBox'; const styles = StyleSheet.create({ check: { marginHorizontal: 0 }, search: { width: '100%', height: 56 }, noResult: { fontSize: 16, paddingVertical: 56, ...sharedStyles.textAlignCenter, ...sharedStyles.textSemibold }, withoutBorder: { borderBottomWidth: 0, borderTopWidth: 0 } }); const Item = React.memo(({ item, selected, onItemPress, theme }) => ( )} onPress={onItemPress} theme={theme} /> )); Item.propTypes = { item: PropTypes.object, selected: PropTypes.bool, onItemPress: PropTypes.func, theme: PropTypes.string }; class PickerView extends React.PureComponent { static navigationOptions = ({ route }) => ({ title: route.params?.title ?? I18n.t('Select_an_option') }) static propTypes = { navigation: PropTypes.object, route: PropTypes.object, theme: PropTypes.string } constructor(props) { super(props); const data = props.route.params?.data ?? []; const value = props.route.params?.value; this.state = { data, value }; this.onSearch = props.route.params?.onChangeText; } onChangeValue = (value) => { const { navigation, route } = this.props; const goBack = route.params?.goBack ?? true; const onChange = route.params?.onChangeValue ?? (() => {}); onChange(value); if (goBack) { navigation.goBack(); } } onChangeText = debounce(async(text) => { if (this.onSearch) { const data = await this.onSearch(text); this.setState({ data }); } }, 300, true) renderSearch() { if (!this.onSearch) { return null; } return ( ); } render() { const { data, value } = this.state; const { theme } = this.props; return ( <> {this.renderSearch()} item.value} renderItem={({ item }) => ( this.onChangeValue(item.value)} /> )} ItemSeparatorComponent={() => } ListEmptyComponent={() => {I18n.t('No_results_found')}} contentContainerStyle={[ sharedStyles.listContentContainer, { backgroundColor: themes[theme].auxiliaryBackground, borderColor: themes[theme].separatorColor }, !data.length && styles.withoutBorder ]} style={{ backgroundColor: themes[theme].auxiliaryBackground }} /> ); } } export default withTheme(PickerView);