Popup edit comment like facebook’s modal
Full code of facebook’s comment editing popup. code explanation here
import React, { Component } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import PropTypes from 'prop-types'; import { Modal, View, Text, StyleSheet, TouchableOpacity, InteractionManager, TouchableWithoutFeedback, Dimensions, Alert, } from 'react-native'; import I18n from '../app/i18n'; import { removeComment, focusCommentBox } from './feedActions'; import { RALEWAY_REGULAR } from '../commons/fonts'; const { width, height } = Dimensions.get('window'); class CommentActionModal extends Component { constructor(props) { super(props); this.state = { isLoadingScreen: true, customStyle: { top: 0, left: 0, }, }; } componentDidMount() { // this.showModalAnimation(); InteractionManager.runAfterInteractions(() => { this.setState({ isLoadingScreen: false, }); }); } componentWillReceiveProps({ actionModalVisible, commentPosition }) { if (actionModalVisible && commentPosition) { let py = commentPosition.y; if (py + 130 > height) { py -= 100; } this.setState({ customStyle: { top: py, left: width / 2 - 50, }, }); } } onPressAction(action) { switch (action.id) { case 1: // edit this.props.onPressEditComment(); this.props.onCloseActionModal(); break; case 2: // delete Alert.alert( '', I18n.t('delete_comment_confirm_message'), [ { text: I18n.t('cancel').toUpperCase(), onPress: () => this.props.onCloseActionModal(), }, { text: I18n.t('delete').toUpperCase(), onPress: () => { this.props.onCloseActionModal(); this.props.removeComment(this.props.activeComment.id); this.props.focusCommentBox(false); }, }, ], { cancelable: true } ); break; case 3: // cancel this.props.onCloseActionModal(); break; default: break; } } renderBody() { let feedActions = [ { id: 1, name: I18n.t('edit'), }, { id: 2, name: I18n.t('delete'), }, { id: 3, name: I18n.t('cancel'), }, ]; const currentUser = this.props.currentUser; const comment = this.props.activeComment; if (comment) { if (comment.user.id !== currentUser.user.id) { feedActions.splice(0, 1); } } return ( <TouchableWithoutFeedback> <View style={[styles.body, this.state.customStyle]}> {feedActions.map(action => ( <TouchableOpacity key={action.id} onPress={() => this.onPressAction(action)}> <Text style={[styles.actionItemText]}>{action.name}</Text> </TouchableOpacity> ))} </View> </TouchableWithoutFeedback> ); } render() { return ( <Modal animationType="none" transparent visible={this.props.actionModalVisible} onRequestClose={() => { this.props.onCloseActionModal(); }} > <View style={{ flex: 1 }}> <View style={styles.background} /> <TouchableWithoutFeedback onPress={() => this.props.onCloseActionModal()}> <View style={styles.content}>{this.renderBody()}</View> </TouchableWithoutFeedback> </View> </Modal> ); } } const styles = StyleSheet.create({ background: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: '#000', opacity: 0.3, }, content: { backgroundColor: 'transparent', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, flex: 1, }, body: { backgroundColor: '#fff', position: 'absolute', borderRadius: 3, borderWidth: 1, borderColor: '#fff', }, actionItemText: { padding: 13, paddingLeft: 20, paddingRight: 20, color: '#000', fontFamily: RALEWAY_REGULAR, }, cancel: { color: 'red', }, }); CommentActionModal.propTypes = { onPressEditComment: PropTypes.func.isRequired, onCloseActionModal: PropTypes.func.isRequired, activeComment: PropTypes.shape({ id: PropTypes.number, }), currentUser: PropTypes.shape({ user: PropTypes.shape({ id: PropTypes.number, }), }), actionModalVisible: PropTypes.bool, removeComment: PropTypes.func, focusCommentBox: PropTypes.func, commentPosition: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, }).isRequired, }; CommentActionModal.defaultProps = { activeComment: null, currentUser: null, actionModalVisible: false, removeComment: null, focusCommentBox: null, }; function mapDispatchToProps(dispatch) { return bindActionCreators({ removeComment, focusCommentBox }, dispatch); } function mapStateToProps(state) { return { appTheme: state.appTheme, activeComment: state.activeComment, currentUser: state.currentUser, }; } export default connect( mapStateToProps, mapDispatchToProps )(CommentActionModal);