parent
707b8d7d75
commit
fc8577cf2b
@ -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> |
||||
]); |
||||
} |
||||
} |
||||
|
Loading…
Reference in new issue