diff options
author | Eugen <eugen@zeonfederated.com> | 2017-04-23 04:39:50 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-04-23 04:39:50 +0200 |
commit | 59b1de0bcf39473106e5380c129d7436be1ad89a (patch) | |
tree | 348ac6a815dafa69baea150c2e69be3274fbdc3f /app/assets/javascripts/components/features/ui | |
parent | df46864b39b0ba26aedb65d2984b9be08ff5e35a (diff) |
Add a confirmation modal: (#2279)
- Deleting a toot - Muting, blocking someone - Clearing notifications Remove source map generation from development environment, as it is a huge performance sink hole with little gains
Diffstat (limited to 'app/assets/javascripts/components/features/ui')
-rw-r--r-- | app/assets/javascripts/components/features/ui/components/confirmation_modal.jsx | 50 | ||||
-rw-r--r-- | app/assets/javascripts/components/features/ui/components/modal_root.jsx | 4 |
2 files changed, 53 insertions, 1 deletions
diff --git a/app/assets/javascripts/components/features/ui/components/confirmation_modal.jsx b/app/assets/javascripts/components/features/ui/components/confirmation_modal.jsx new file mode 100644 index 000000000..914c12f82 --- /dev/null +++ b/app/assets/javascripts/components/features/ui/components/confirmation_modal.jsx @@ -0,0 +1,50 @@ +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import Button from '../../../components/button'; + +class ConfirmationModal extends React.PureComponent { + + constructor (props, context) { + super(props, context); + this.handleClick = this.handleClick.bind(this); + this.handleCancel = this.handleCancel.bind(this); + } + + handleClick () { + this.props.onClose(); + this.props.onConfirm(); + } + + handleCancel (e) { + e.preventDefault(); + this.props.onClose(); + } + + render () { + const { intl, message, confirm, onConfirm, onClose } = this.props; + + return ( + <div className='modal-root__modal confirmation-modal'> + <div className='confirmation-modal__container'> + {message} + </div> + + <div className='confirmation-modal__action-bar'> + <div><a href='#' onClick={this.handleCancel}><FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /></a></div> + <Button text={confirm} onClick={this.handleClick} /> + </div> + </div> + ); + } + +} + +ConfirmationModal.propTypes = { + message: PropTypes.node.isRequired, + confirm: PropTypes.string.isRequired, + onClose: PropTypes.func.isRequired, + onConfirm: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired +}; + +export default injectIntl(ConfirmationModal); diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx index f9e173222..cfaa8a598 100644 --- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx +++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx @@ -3,13 +3,15 @@ import MediaModal from './media_modal'; import OnboardingModal from './onboarding_modal'; import VideoModal from './video_modal'; import BoostModal from './boost_modal'; +import ConfirmationModal from './confirmation_modal'; import { TransitionMotion, spring } from 'react-motion'; const MODAL_COMPONENTS = { 'MEDIA': MediaModal, 'ONBOARDING': OnboardingModal, 'VIDEO': VideoModal, - 'BOOST': BoostModal + 'BOOST': BoostModal, + 'CONFIRM': ConfirmationModal }; class ModalRoot extends React.PureComponent { |