app/javascript/mastodon/features/compose/components/privacy_dropdown.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import { injectIntl, defineMessages } from 'react-intl';
   4 import IconButton from '../../../components/icon_button';
   5
   6 const messages = defineMessages({
   7   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
   8   public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' },
   9   unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
  10   unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' },
  11   private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
  12   private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' },
  13   direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
  14   direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' },
  15   change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' }
  16 });
  17
  18 const iconStyle = {
  19   height: null,
  20   lineHeight: '27px'
  21 }
  22
  23 class PrivacyDropdown extends React.PureComponent {
  24
  25   constructor (props, context) {
  26     super(props, context);
  27     this.state = {
  28       open: false
  29     };
  30     this.handleToggle = this.handleToggle.bind(this);
  31     this.handleClick = this.handleClick.bind(this);
  32     this.onGlobalClick = this.onGlobalClick.bind(this);
  33     this.setRef = this.setRef.bind(this);
  34   }
  35
  36   handleToggle () {
  37     this.setState({ open: !this.state.open });
  38   }
  39
  40   handleClick (value, e) {
  41     e.preventDefault();
  42     this.setState({ open: false });
  43     this.props.onChange(value);
  44   }
  45
  46   onGlobalClick (e) {
  47     if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
  48       this.setState({ open: false });
  49     }
  50   }
  51
  52   componentDidMount () {
  53     window.addEventListener('click', this.onGlobalClick);
  54     window.addEventListener('touchstart', this.onGlobalClick);
  55   }
  56
  57   componentWillUnmount () {
  58     window.removeEventListener('click', this.onGlobalClick);
  59     window.removeEventListener('touchstart', this.onGlobalClick);
  60   }
  61
  62   setRef (c) {
  63     this.node = c;
  64   }
  65
  66   render () {
  67     const { value, onChange, intl } = this.props;
  68     const { open } = this.state;
  69
  70     const options = [
  71       { icon: 'globe', value: 'public', shortText: intl.formatMessage(messages.public_short), longText: intl.formatMessage(messages.public_long) },
  72       { icon: 'unlock-alt', value: 'unlisted', shortText: intl.formatMessage(messages.unlisted_short), longText: intl.formatMessage(messages.unlisted_long) },
  73       { icon: 'lock', value: 'private', shortText: intl.formatMessage(messages.private_short), longText: intl.formatMessage(messages.private_long) },
  74       { icon: 'envelope', value: 'direct', shortText: intl.formatMessage(messages.direct_short), longText: intl.formatMessage(messages.direct_long) }
  75     ];
  76
  77     const valueOption = options.find(item => item.value === value);
  78
  79     return (
  80       <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
  81         <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle}/></div>
  82         <div className='privacy-dropdown__dropdown'>
  83           {options.map(item =>
  84             <div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>
  85               <div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div>
  86               <div className='privacy-dropdown__option__content'>
  87                 <strong>{item.shortText}</strong>
  88                 {item.longText}
  89               </div>
  90             </div>
  91           )}
  92         </div>
  93       </div>
  94     );
  95   }
  96
  97 }
  98
  99 PrivacyDropdown.propTypes = {
 100   value: PropTypes.string.isRequired,
 101   onChange: PropTypes.func.isRequired,
 102   intl: PropTypes.object.isRequired
 103 };
 104
 105 export default injectIntl(PrivacyDropdown);