masto-fe/app/javascript/flavours/glitch/components/spoilers.jsx

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>,
    ]);
  }

}