Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Warning keyboardShouldPersistTaps={true} #49

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Warning keyboardShouldPersistTaps={true} #49

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
321 changes: 167 additions & 154 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
'use strict';

import React,{
PropTypes
} from 'react';
import React, {PropTypes} from 'react';

import {
View,
StyleSheet,
Dimensions,
Modal,
Text,
ScrollView,
TouchableOpacity,
Platform
View,
StyleSheet,
Dimensions,
Modal,
Text,
ScrollView,
TouchableOpacity,
Platform,
} from 'react-native';

import styles from './style';
Expand All @@ -21,162 +19,177 @@ import BaseComponent from './BaseComponent';
let componentIndex = 0;

const propTypes = {
data: PropTypes.array,
onChange: PropTypes.func,
initValue: PropTypes.string,
style: View.propTypes.style,
selectStyle: View.propTypes.style,
optionStyle: View.propTypes.style,
optionTextStyle: Text.propTypes.style,
sectionStyle: View.propTypes.style,
sectionTextStyle: Text.propTypes.style,
cancelStyle: View.propTypes.style,
cancelTextStyle: Text.propTypes.style,
overlayStyle: View.propTypes.style,
cancelText: PropTypes.string
data: PropTypes.array,
onChange: PropTypes.func,
initValue: PropTypes.string,
style: View.propTypes.style,
selectStyle: View.propTypes.style,
optionStyle: View.propTypes.style,
optionTextStyle: Text.propTypes.style,
sectionStyle: View.propTypes.style,
sectionTextStyle: Text.propTypes.style,
cancelStyle: View.propTypes.style,
cancelTextStyle: Text.propTypes.style,
overlayStyle: View.propTypes.style,
cancelText: PropTypes.string,
};

const defaultProps = {
data: [],
onChange: ()=> {},
initValue: 'Select me!',
style: {},
selectStyle: {},
optionStyle: {},
optionTextStyle: {},
sectionStyle: {},
sectionTextStyle: {},
cancelStyle: {},
cancelTextStyle: {},
overlayStyle: {},
cancelText: 'cancel'
data: [],
onChange: () => {},
initValue: 'Select me!',
style: {},
selectStyle: {},
optionStyle: {},
optionTextStyle: {},
sectionStyle: {},
sectionTextStyle: {},
cancelStyle: {},
cancelTextStyle: {},
overlayStyle: {},
cancelText: 'cancel',
};

export default class ModalPicker extends BaseComponent {

constructor() {

super();

this._bind(
'onChange',
'open',
'close',
'renderChildren'
);

this.state = {
animationType: 'slide',
modalVisible: false,
transparent: false,
selected: 'please select'
};
constructor() {
super();

this._bind('onChange', 'open', 'close', 'renderChildren');

this.state = {
animationType: 'slide',
modalVisible: false,
transparent: false,
selected: 'please select',
};
}

componentDidMount() {
this.setState({selected: this.props.initValue});
this.setState({cancelText: this.props.cancelText});
}

componentWillReceiveProps(nextProps) {
if (nextProps.initValue != this.props.initValue) {
this.setState({selected: nextProps.initValue});
}

componentDidMount() {
this.setState({selected: this.props.initValue});
this.setState({cancelText: this.props.cancelText});
}

componentWillReceiveProps(nextProps) {
if (nextProps.initValue != this.props.initValue) {
this.setState({selected: nextProps.initValue});
}

onChange(item) {
this.props.onChange(item);
this.setState({selected: item.label});
this.close();
}

close() {
this.setState({
modalVisible: false,
});
}

open() {
this.setState({
modalVisible: true,
});
}

renderSection(section) {
return (
<View
key={section.key}
style={[styles.sectionStyle, this.props.sectionStyle]}
>
<Text style={[styles.sectionTextStyle, this.props.sectionTextStyle]}>
{section.label}
</Text>
</View>
);
}

renderOption(option) {
return (
<TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
<View style={[styles.optionStyle, this.props.optionStyle]}>
<Text style={[styles.optionTextStyle, this.props.optionTextStyle]}>
{option.label}
</Text>
</View>
</TouchableOpacity>
);
}

renderOptionList() {
var options = this.props.data.map(item => {
if (item.section) {
return this.renderSection(item);
} else {
return this.renderOption(item);
}
}

onChange(item) {
this.props.onChange(item);
this.setState({selected: item.label});
this.close();
}

close() {
this.setState({
modalVisible: false
});
}

open() {
this.setState({
modalVisible: true
});
}

renderSection(section) {
return (
<View key={section.key} style={[styles.sectionStyle,this.props.sectionStyle]}>
<Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{section.label}</Text>
});

return (
<View
style={[styles.overlayStyle, this.props.overlayStyle]}
key={'modalPicker' + componentIndex++}
>
<View style={styles.optionContainer}>
<ScrollView keyboardShouldPersistTaps="always">
<View style={{paddingHorizontal: 10}}>
{options}
</View>
);
}

renderOption(option) {
return (
<TouchableOpacity key={option.key} onPress={()=>this.onChange(option)}>
<View style={[styles.optionStyle, this.props.optionStyle]}>
<Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
</View>
</TouchableOpacity>)
}

renderOptionList() {
var options = this.props.data.map((item) => {
if (item.section) {
return this.renderSection(item);
} else {
return this.renderOption(item);
}
});

return (
<View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker'+(componentIndex++)}>
<View style={styles.optionContainer}>
<ScrollView keyboardShouldPersistTaps>
<View style={{paddingHorizontal:10}}>
{options}
</View>
</ScrollView>
</View>
<View style={styles.cancelContainer}>
<TouchableOpacity onPress={this.close}>
<View style={[styles.cancelStyle, this.props.cancelStyle]}>
<Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
</View>
</TouchableOpacity>
</View>

</View>);
}

renderChildren() {

if(this.props.children) {
return this.props.children;
}
return (
<View style={[styles.selectStyle, this.props.selectStyle]}>
<Text style={[styles.selectTextStyle, this.props.selectTextStyle]}>{this.state.selected}</Text>
</ScrollView>
</View>
<View style={styles.cancelContainer}>
<TouchableOpacity onPress={this.close}>
<View style={[styles.cancelStyle, this.props.cancelStyle]}>
<Text
style={[styles.cancelTextStyle, this.props.cancelTextStyle]}
>
{this.props.cancelText}
</Text>
</View>
);
}

render() {
</TouchableOpacity>
</View>

const dp = (
<Modal transparent={true} ref="modal" visible={this.state.modalVisible} onRequestClose={this.close} animationType={this.state.animationType}>
{this.renderOptionList()}
</Modal>
);
</View>
);
}

return (
<View style={this.props.style}>
{dp}
<TouchableOpacity onPress={this.open}>
{this.renderChildren()}
</TouchableOpacity>
</View>
);
renderChildren() {
if (this.props.children) {
return this.props.children;
}
return (
<View style={[styles.selectStyle, this.props.selectStyle]}>
<Text style={[styles.selectTextStyle, this.props.selectTextStyle]}>
{this.state.selected}
</Text>
</View>
);
}

render() {
const dp = (
<Modal
transparent={true}
ref="modal"
visible={this.state.modalVisible}
onRequestClose={this.close}
animationType={this.state.animationType}
>
{this.renderOptionList()}
</Modal>
);

return (
<View style={this.props.style}>
{dp}
<TouchableOpacity onPress={this.open}>
{this.renderChildren()}
</TouchableOpacity>
</View>
);
}
}

ModalPicker.propTypes = propTypes;
Expand Down