diff options
| -rw-r--r-- | app/javascript/flavours/glitch/components/spoilers.js | 50 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/containers/status_container.js | 49 |
2 files changed, 55 insertions, 44 deletions
diff --git a/app/javascript/flavours/glitch/components/spoilers.js b/app/javascript/flavours/glitch/components/spoilers.js new file mode 100644 index 000000000..8527403c1 --- /dev/null +++ b/app/javascript/flavours/glitch/components/spoilers.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +export default +class Spoilers extends React.PureComponent { + static propTypes = { + spoilerText: PropTypes.string, + children: PropTypes.node, + }; + + state = { + hidden: true, + } + + handleSpoilerClick = () => { + this.setState({ hidden: !this.state.hidden }); + } + + render () { + const { spoilerText, children } = this.props; + const { hidden } = this.state; + + const toggleText = hidden ? + <FormattedMessage + id='status.show_more' + defaultMessage='Show more' + key='0' + /> : + <FormattedMessage + id='status.show_less' + defaultMessage='Show less' + key='0' + />; + + return ([ + <p className='spoiler__text'> + {spoilerText} + {' '} + <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> + {toggleText} + </button> + </p>, + <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}> + {children} + </div> + ]); + } +} + diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index ba12ad38d..41fcc2010 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -28,6 +28,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state'; import { showAlertForError } from '../actions/alerts'; import AccountContainer from 'flavours/glitch/containers/account_container'; +import Spoilers from '../components/spoilers'; const messages = defineMessages({ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -41,46 +42,6 @@ const messages = defineMessages({ unfilterConfirm: { id: 'confirmations.unfilter.confirm', defaultMessage: 'Show' }, }); -class SpoilerMachin extends React.PureComponent { - state = { - hidden: true, - } - - handleSpoilerClick = () => { - this.setState({ hidden: !this.state.hidden }); - } - - render () { - const { spoilerText, children } = this.props; - const { hidden } = this.state; - - const toggleText = hidden ? - <FormattedMessage - id='status.show_more' - defaultMessage='Show more' - key='0' - /> : - <FormattedMessage - id='status.show_less' - defaultMessage='Show less' - key='0' - />; - - return ([ - <p className='spoiler__text'> - {spoilerText} - {' '} - <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> - {toggleText} - </button> - </p>, - <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}> - {children} - </div> - ]); - } -} - const makeMapStateToProps = () => { const getStatus = makeGetStatus(); @@ -243,14 +204,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ message: [ <FormattedMessage id='confirmations.unfilter' defaultMessage='Information about this filtered toot' />, <div className='filtered-status-info'> - <SpoilerMachin spoilerText='Author'> + <Spoilers spoilerText='Author'> <AccountContainer id={status.getIn(['account', 'id'])} /> - </SpoilerMachin> - <SpoilerMachin spoilerText='Matching filters'> + </Spoilers> + <Spoilers spoilerText='Matching filters'> <ul> {matchingFilters.map(filter => <li>{filter.get('phrase')}</li>)} </ul> - </SpoilerMachin> + </Spoilers> </div> ], confirm: intl.formatMessage(messages.unfilterConfirm), |