Last active
May 25, 2017 07:26
-
-
Save ezha86/384083e89e5f119fe3ce93d359057298 to your computer and use it in GitHub Desktop.
changing modal content style
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, { Component } from 'react'; | |
import PropTypes from 'prop-types'; | |
import { DatePickerIOS, Text, TouchableOpacity, View } from 'react-native'; | |
import ReactNativeModal from 'react-native-modal'; | |
import styles from './index.style'; | |
export default class CustomDatePickerIOS extends Component { | |
static propTypes = { | |
cancelTextIOS: PropTypes.string, | |
confirmTextIOS: PropTypes.string, | |
customCancelButtonIOS: PropTypes.node, | |
customConfirmButtonIOS: PropTypes.node, | |
customConfirmButtonWhileInteractingIOS: PropTypes.node, | |
customTitleContainerIOS: PropTypes.node, | |
------===== contentContainerStyleIOS: PropTypes.any, =======------------------- added this | |
datePickerContainerStyleIOS: PropTypes.any, | |
date: PropTypes.instanceOf(Date), | |
mode: PropTypes.oneOf(['date', 'time', 'datetime']), | |
onConfirm: PropTypes.func.isRequired, | |
onCancel: PropTypes.func.isRequired, | |
titleIOS: PropTypes.string, | |
isVisible: PropTypes.bool, | |
}; | |
static defaultProps = { | |
cancelTextIOS: 'Cancel', | |
confirmTextIOS: 'Confirm', | |
date: new Date(), | |
mode: 'date', | |
titleIOS: 'Pick a date', | |
isVisible: false, | |
}; | |
state = { | |
date: this.props.date, | |
userIsInteractingWithPicker: false, | |
}; | |
componentWillReceiveProps(nextProps) { | |
if (this.props.date !== nextProps.date) { | |
this.setState({ | |
date: nextProps.date, | |
}); | |
} | |
} | |
_handleConfirm = () => this.props.onConfirm(this.state.date); | |
_handleDateChange = date => { | |
this.setState({ | |
date, | |
userIsInteractingWithPicker: false, | |
}); | |
}; | |
_handleUserTouchInit = () => { | |
this.setState({ | |
userIsInteractingWithPicker: true, | |
}); | |
return false; | |
}; | |
render() { | |
const { | |
onCancel, | |
isVisible, | |
mode, | |
titleIOS, | |
confirmTextIOS, | |
cancelTextIOS, | |
customCancelButtonIOS, | |
customConfirmButtonIOS, | |
customConfirmButtonWhileInteractingIOS, | |
customTitleContainerIOS, | |
datePickerContainerStyleIOS, | |
--------========== contentContainerStyleIOS, =======------------------- and this | |
date, | |
...otherProps | |
} = this.props; | |
const titleContainer = ( | |
<View style={styles.titleContainer}> | |
<Text style={styles.title}>{titleIOS}</Text> | |
</View> | |
); | |
let confirmButton; | |
// Interested PR: https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/40 | |
// Issue on React-Native: https://github.com/facebook/react-native/issues/8169 | |
// Up until now when the user interacted with the picker, if he tapped on the confirm button, | |
// the state was not yet changed and thus the picked value would be old and miss-leading. | |
// DatePickerIOS does not update on the fly, and before it even manages to dispatch an update, | |
// our component is unmounted and thus the state is lost. | |
// We no longer allow our user to tap the confirm button unless the picker is still. | |
// They can always tap the cancel button anyway. | |
if (customConfirmButtonIOS) { | |
if (customConfirmButtonWhileInteractingIOS && this.state.userIsInteractingWithPicker) { | |
confirmButton = customConfirmButtonWhileInteractingIOS; | |
} else { | |
confirmButton = customConfirmButtonIOS; | |
} | |
} else { | |
confirmButton = <Text style={styles.confirmText}>{confirmTextIOS}</Text>; | |
} | |
const cancelButton = <Text style={styles.cancelText}>{cancelTextIOS}</Text>; | |
return ( | |
-----===== <ReactNativeModal isVisible={isVisible} | |
style={[styles.contentContainer, contentContainerStyleIOS]}> =======------------------- and this | |
<View style={[styles.datepickerContainer, datePickerContainerStyleIOS]}> | |
{customTitleContainerIOS || titleContainer} | |
<View onStartShouldSetResponderCapture={this._handleUserTouchInit}> | |
<DatePickerIOS | |
date={this.state.date} | |
mode={mode} | |
onDateChange={this._handleDateChange} | |
{...otherProps} | |
/> | |
</View> | |
<View style={styles.confirmButton}> | |
<TouchableOpacity | |
onPress={this._handleConfirm} | |
disabled={this.state.userIsInteractingWithPicker} | |
> | |
{confirmButton} | |
</TouchableOpacity> | |
</View> | |
</View> | |
<View style={styles.cancelButton}> | |
<TouchableOpacity onPress={onCancel}> | |
{customCancelButtonIOS || cancelButton} | |
</TouchableOpacity> | |
</View> | |
</ReactNativeModal> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment