diff options
author | Thibaut Girka <thib@sitedethib.com> | 2019-07-14 21:43:49 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2019-07-15 00:48:28 +0200 |
commit | fc8577cf2b0f852fe9b5ac2e19ec2fcce0180c49 (patch) | |
tree | 956e6a59d9a3a1b50f0f9acd8349ce6ab9e903e3 /app/javascript/flavours/glitch/components/spoilers.js | |
parent | 707b8d7d75d8f44b4a638752b6a24824c0ba4bbd (diff) |
Minor refactoring
Diffstat (limited to 'app/javascript/flavours/glitch/components/spoilers.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/spoilers.js | 50 |
1 files changed, 50 insertions, 0 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> + ]); + } +} + |