add methods and propTypes validation

src/common/components/Selector.js

 import React, {
- Component
+ Component,
 } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, FlatList } from 'react-native';
 import { Text, Icon } from 'react-native-elements';
 import Modal from 'react-native-modal';
 import { CommonStyle } from '../../styles/Common';
+import Touchable from './Touchable';
+import PropTypes from 'prop-types';
 
 export default class Selector extends Component {
 
@@ -15,7 +17,10 @@ export default class Selector extends Component {
  constructor(props) {
  super(props);
 
- this.state = {show: false};
+ this.state = {
+ show: false,
+ selected: '',
+ };
  }
 
  show = () => {
@@ -26,35 +31,73 @@ export default class Selector extends Component {
  this.setState({show: false});
  }
 
+ renderItem = ({item}) => {
+ return (
+ <Touchable onPress={() => this.itemSelect(item)}>
+ <Text style={[{color:'white'}]}>{this.valueExtractor(item)}</Text>
+ </Touchable>
+ );
+ };
+
+ itemSelect = (item) => {
+ this.props.onItemSelect(item);
+ this.close();
+ }
+
+ setSelected = (item) => {
+ this.setState({selected: this.valueExtractor(item)});
+ }
+
+ valueExtractor = (item) => {
+ return this.props.valueExtractor(item);
+ }
+
+ keyExtractor = (item) => {
+ return this.props.keyExtractor(item);
+ }
+
  render() {
- const show = this.state.show;
  return(
- <Modal isVisible={show}>
- <View style={[styles.container]}>
- <Text style={[{color:'white'}, CommonStyle.fontXL]}> Selector Title </Text>
- <View style={{height:570}}>
- <Text style={{color:'white'}}> List </Text>
+ <View>
+ <Modal isVisible={this.state.show}>
+ <View style={[styles.container]}>
+ <Text style={[{color:'white'}, CommonStyle.fontXL]}> {this.props.title} </Text>
+ <View style={[ CommonStyle.flexContainer ]}>
+ <FlatList
+ data={this.props.data}
+ renderItem={this.renderItem}
+ keyExtractor={this.props.keyExtractor}
+ />
+ </View>
+ <Icon 
+ raised
+ name="md-close"
+ type='ionicon'
+ color='black'
+ size={24}
+ containerStyle={ styles.iconContainer }
+ onPress={this.close}
+ />
  </View>
- <Icon 
- raised
- name="md-close"
- type='ionicon'
- color='black'
- size={24}
- containerStyle={ styles.iconContainer }
- onPress={this.close}
- />
- </View>
- </Modal>
+ </Modal>
+ </View>
  )
  }
 }
 
+Selector.propTypes = {
+ data: PropTypes.array.isRequired,
+ valueExtractor: PropTypes.func.isRequired,
+ keyExtractor: PropTypes.func.isRequired,
+ title: PropTypes.string,
+ onItemSelect: PropTypes.func.isRequired,
+}
+
 const styles = StyleSheet.create({
  container: {
  backgroundColor: 'transparent',
  width: 200,
- height: 650,
+ height: 450,
  alignItems: 'center',
  justifyContent: 'center',
  position: 'absolute',