import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import IconButton from '../../../components/icon_button'; import { changeComposeSensitivity } from '../../../actions/compose'; import Motion from 'react-motion/lib/Motion'; import spring from 'react-motion/lib/spring'; import { injectIntl, defineMessages } from 'react-intl'; const messages = defineMessages({ title: { id: 'compose_form.sensitive', defaultMessage: 'Mark media as sensitive' }, }); const mapStateToProps = state => ({ visible: state.getIn(['compose', 'media_attachments']).size > 0, active: state.getIn(['compose', 'sensitive']), }); const mapDispatchToProps = dispatch => ({ onClick () { dispatch(changeComposeSensitivity()); }, }); class SensitiveButton extends React.PureComponent { static propTypes = { visible: PropTypes.bool, active: PropTypes.bool, onClick: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; render () { const { visible, active, onClick, intl } = this.props; return ( <Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}> {({ scale }) => { const icon = active ? 'eye-slash' : 'eye'; const className = classNames('compose-form__sensitive-button', { 'compose-form__sensitive-button--visible': visible, }); return ( <div className={className} style={{ transform: `translateZ(0) scale(${scale})` }}> <IconButton className='compose-form__sensitive-button__icon' title={intl.formatMessage(messages.title)} icon={icon} onClick={onClick} size={18} active={active} style={{ lineHeight: null, height: null }} inverted /> </div> ); }} </Motion> ); } } export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));