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


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
51
52

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

}