Last active
January 18, 2019 15:07
-
-
Save ThaJay/80ee8647940e0cb753a9da67f55b14df to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {PureComponent} from 'react' | |
import {View, ScrollView, Dimensions, | |
Modal, TouchableOpacity} from 'react-native' | |
import {constants} from '../../core/constants' | |
import getTheme from '../../core/helpers/theme' | |
import strings from '../../platformhelpers/localization' | |
import Icon, {iconNames} from '../../platformhelpers/icon' | |
import ListItem from './list-item' | |
import CustomText from './text' | |
import Touchable from './touchable-opacity' | |
const modalStyle = { | |
flex : 1, | |
alignItems : 'center', | |
justifyContent : 'center', | |
backgroundColor: constants.TRANS_BLACK | |
} | |
const getModalChildStyle = (props) => { | |
return { | |
backgroundColor: getTheme().background, | |
width : 250, | |
padding : 20, | |
justifyContent : 'center', | |
alignItems : 'center', | |
overflow : 'visible', | |
shadowOffset : {width:20, height:20}, | |
shadowColor : constants.BLACK, | |
shadowRadius : 50, | |
shadowOpacity : 1, | |
elevation : 10, | |
...props.style | |
} | |
} | |
const titleStyle = { | |
fontWeight : '400', | |
fontSize : 20, | |
marginBottom: 20 | |
} | |
export default function CustomModal (props) { | |
return ( | |
<Modal | |
transparent | |
animationType='fade' | |
visible={props.visible} | |
onRequestClose={props.close} | |
> | |
<TouchableOpacity | |
onPress={props.close} | |
style={modalStyle} | |
> | |
<View style={getModalChildStyle(props)}> | |
<CustomText style={titleStyle}>{props.title}</CustomText> | |
{props.children} | |
</View> | |
</TouchableOpacity> | |
</Modal> | |
) | |
} | |
const pickerItemStyle = {width:250} | |
function PickerItem ({id, onPress, label}) { | |
return ( | |
<ListItem | |
valid | |
onPress={onPress} | |
style={pickerItemStyle} | |
> | |
<CustomText> | |
{label} | |
</CustomText> | |
</ListItem> | |
) | |
} | |
function getStyle () { | |
return {backgroundColor:getTheme().background} | |
} | |
function getModalStyle () { | |
return { | |
padding : 0, | |
paddingTop: 20, | |
maxHeight : Dimensions.get('window').height * (2 / 3) | |
} | |
} | |
function getModalContentStyle () { | |
return {borderTopWidth:1, borderTopColor:getTheme().main} | |
} | |
const pickerStyle = { | |
flexDirection : constants.ROW, | |
justifyContent: constants.SPACEBETWEEN, | |
alignItems : constants.CENTER | |
} | |
const selectedNameStyle = {flex:9, margin:4} | |
const pickerArrowStyle = {flex:1, margin:4, paddingRight:4} | |
export default class Picker extends PureComponent { | |
state = {visible:false} | |
hideModal = () => { | |
this.setState({visible:false}) | |
} | |
showModal = () => { | |
this.setState({visible:true}) | |
} | |
onValueChange = eventId => { | |
this.props.onValueChange(eventId) | |
this.hideModal() | |
} | |
makeItemNodes = function * (items) { | |
for (let [id, item] of Object.entries(items)) { | |
if (item.name) { | |
yield ( | |
<PickerItem | |
key={id} | |
onPress={() => this.onValueChange(id)} | |
label={item.name} | |
/> | |
) | |
} else { | |
throw new Error(`can not make picker node without item name:\n${JSON.stringify(item)}`) | |
} | |
} | |
} | |
getSelectedName () { | |
if ( | |
this.props.items && | |
this.props.selectedValue && | |
this.props.items[this.props.selectedValue] | |
) { | |
return this.props.items[this.props.selectedValue].name | |
} else { | |
return strings.chooseEvent | |
} | |
} | |
render () { | |
return ( | |
<View style={getStyle()}> | |
<CustomModal | |
title={strings.chooseEvent} | |
visible={this.state.visible} | |
close={this.hideModal} | |
style={getModalStyle()} | |
> | |
<ScrollView style={getModalContentStyle()}> | |
{[...this.makeItemNodes(this.props.items)]} | |
</ScrollView> | |
</CustomModal> | |
<Touchable onPress={this.showModal}> | |
<View style={pickerStyle}> | |
<CustomText style={selectedNameStyle}> | |
{this.getSelectedName()} | |
</CustomText> | |
<Icon name={iconNames.PICKER} size={constants.ICON_SIZE} style={pickerArrowStyle} /> | |
</View> | |
</Touchable> | |
</View> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment