picker.js

import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity
} from 'react-native'
import _ from 'lodash'
import { withApollo, compose, graphql } from 'react-apollo'
import { connect } from 'react-redux'
import SearchInput, { createFilter } from 'react-native-search-filter'
import Picker from 'react-native-wheel-picker'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { Header, Loading, Separator } from '../common'
import * as actions from '../actions'

import GET_STUDIO_MASTERS_QUERY from '../graphql/queries/master/getStudioMasters'

const PickerItem = Picker.Item

class ExploreScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    header: 
      <Header 
        title='Мастера'
        leftButton
        leftIcon='md-add'
        colorLeft='#fff'
        rightButton
        rightIcon='md-add'
        colorRight='#D70086'
        navigation={navigation} 
        screen='Add'
      />
  })

  constructor(props) {
    super(props)
    this.state = {
      searchTerm: '',
      keyToFilters: ['name', 'profession'],
      selectedItem: 1,
      selectedValue: this.props.selectedValue
    }
  }

  onPikcerSelect(value, index) {
    this.setState({ 
      searchTerm: value,
      selectedItem: index
    })
  }

  searchUpdated(term) {
    this.setState({ searchTerm: term })
  } 

  render() {
    const { data: { getStudioMasters, loading } } = this.props
    const { searchTerm, keyToFilters } = this.state
    const filteredEmails = getStudioMasters ? getStudioMasters.filter(createFilter(searchTerm, keyToFilters)) : []

    const { container, searchInput, subContainer, thumbImg, titleContainer, titleContainer2, h1, h2, chevron } = styles

    if (loading) { return <Loading /> }

    return (
      <View style={container}>
        <ScrollView>
          <Picker
            style={[styles.picker, this.props.style]}
            itemStyle={_.assign({}, styles.picker__item, this.props.itemStyle)}
            selectedValue={this.state.selectedValue}
            onValueChange={(value, index) => { this.onPikcerSelect(value, index) } }
          >
            {getStudioMasters.map((data) => (
              <PickerItem 
                key={data._id} 
                value={data.profession} 
                label={data.profession} 
              />
            )
            )}
          </Picker>
          {filteredEmails.map(item => {
            return (
              <TouchableOpacity onPress={ () => this.props.navigation.navigate('Profile', (item)) } key={item._id} >
                <View style={subContainer}>
                  <View style={titleContainer}>
                    <Image style={thumbImg} source={{ uri: item.img }} />
                    <View style={titleContainer2}>
                      <Text style={h1} numberOfLines={1} ellipsizeMode='tail'>{item.name}</Text>
                      <Text style={h2} numberOfLines={1} ellipsizeMode='tail'>{item.profession}</Text>
                    </View>
                  </View>
                  <Icon style={chevron} name="chevron-right" size={50} color="#DBD7D2" />
                </View>
                <Separator />
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center'
  },
  subContainer: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 5
  },
  titleContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    flexDirection: 'row'
  },
  thumbImg: {
    width: 100,
    height: 100
  },
  titleContainer2: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'flex-start'
  },
  h1: {
    backgroundColor: 'transparent',
    flex: -1,
    alignSelf: 'flex-start',
    justifyContent: 'flex-start',
    fontFamily: 'AppleSDGothicNeo-Light',
    paddingLeft: 10,
    fontWeight: '300',
    color: '#3E3E3D',
    fontSize: 17
  },
  h2: {
    backgroundColor: 'transparent',
    flex: -1,
    alignSelf: 'flex-start',
    fontFamily: 'AppleSDGothicNeo-Light',
    fontWeight: '300',
    paddingLeft: 10,
    color: '#8C8C8C',
    fontSize: 17
  },
  chevron: {
    backgroundColor: 'transparent',
    justifyContent: 'flex-end',
    alignSelf: 'center'
  },
  searchInput: {
    padding: 10,
    borderColor: '#CCC',
    borderWidth: 1
  },
  picker: {
    backgroundColor: '#fff',
    height: 190
  },
  picker__item: {
    color: '#333333',
    fontSize: 26
  }
}

export default withApollo(compose(
  connect(state => ({ info: state.master.info }), actions),
  graphql(GET_STUDIO_MASTERS_QUERY)
)(ExploreScreen))