Commit b61596b1 authored by mgabdev's avatar mgabdev

Added confirmation to compose modal on close if has text

Added to modal_root if modal type is compose
Added to compose_modal
Fixes: #51
parent efd441d0
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import { openModal } from '../actions/modal';
import { cancelReplyCompose } from '../actions/compose';
const messages = defineMessages({
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
});
const mapStateToProps = state => ({
composeText: state.getIn(['compose', 'text']),
});
const mapDispatchToProps = (dispatch) => ({
onOpenModal(type, opts) {
dispatch(openModal(type, opts));
},
onCancelReplyCompose() {
dispatch(cancelReplyCompose());
}
});
export default class ModalRoot extends React.PureComponent {
class ModalRoot extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
onOpenModal: PropTypes.func.isRequired,
onCancelReplyCompose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
composeText: PropTypes.string,
type: PropTypes.string,
};
state = {
......@@ -17,10 +43,26 @@ export default class ModalRoot extends React.PureComponent {
handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.children) {
this.props.onClose();
this.handleOnClose();
}
}
handleOnClose = () => {
const { onOpenModal, composeText, onClose, intl, type, onCancelReplyCompose } = this.props;
if (composeText && type == 'COMPOSE') {
onOpenModal('CONFIRM', {
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
confirm: intl.formatMessage(messages.confirm),
onConfirm: () => onCancelReplyCompose(),
onCancel: () => onOpenModal('COMPOSE'),
});
}
else {
this.props.onClose();
}
};
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
}
......@@ -63,7 +105,7 @@ export default class ModalRoot extends React.PureComponent {
}
render () {
const { children, onClose } = this.props;
const { children } = this.props;
const { revealed } = this.state;
const visible = !!children;
......@@ -76,11 +118,12 @@ export default class ModalRoot extends React.PureComponent {
return (
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
<div role='presentation' className='modal-root__overlay' onClick={() => this.handleOnClose()} />
<div role='dialog' className='modal-root__container'>{children}</div>
</div>
</div>
);
}
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ModalRoot));
......@@ -8,14 +8,18 @@ import Avatar from '../../../components/avatar';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ComposeFormContainer from '../../compose/containers/compose_form_container';
import IconButton from 'gabsocial/components/icon_button';
import { openModal } from '../../../actions/modal';
import { cancelReplyCompose } from '../../../actions/compose';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
});
const mapStateToProps = state => {
return {
account: state.getIn(['accounts', me]),
composeText: state.getIn(['compose', 'text']),
};
};
......@@ -25,14 +29,28 @@ class ComposeModal extends ImmutablePureComponent {
account: ImmutablePropTypes.map,
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
composeText: PropTypes.string,
dispatch: PropTypes.func.isRequired,
};
onClickClose = () => {
this.props.onClose('COMPOSE');
const {composeText, dispatch, onClose, intl} = this.props;
if (composeText) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
confirm: intl.formatMessage(messages.confirm),
onConfirm: () => dispatch(cancelReplyCompose()),
onCancel: () => dispatch(openModal('COMPOSE')),
}));
}
else {
onClose('COMPOSE');
}
};
render () {
const { intl, onClose, account } = this.props;
const { intl, account } = this.props;
return (
<div className='modal-root__modal compose-modal'>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment