app/javascript/flavours/glitch/components/spoilers.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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>
    ]);
  }
}