app/javascript/mastodon/features/compose/index.js

   1 import React from 'react';
   2 import ComposeFormContainer from './containers/compose_form_container';
   3 import UploadFormContainer from './containers/upload_form_container';
   4 import NavigationContainer from './containers/navigation_container';
   5 import PropTypes from 'prop-types';
   6 import { connect } from 'react-redux';
   7 import { mountCompose, unmountCompose } from '../../actions/compose';
   8 import { Link } from 'react-router';
   9 import { injectIntl, defineMessages } from 'react-intl';
  10 import SearchContainer from './containers/search_container';
  11 import { Motion, spring } from 'react-motion';
  12 import SearchResultsContainer from './containers/search_results_container';
  13
  14 const messages = defineMessages({
  15   start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
  16   public: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
  17   community: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
  18   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
  19   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }
  20 });
  21
  22 const mapStateToProps = state => ({
  23   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden'])
  24 });
  25
  26 class Compose extends React.PureComponent {
  27
  28   static propTypes = {
  29     dispatch: PropTypes.func.isRequired,
  30     withHeader: PropTypes.bool,
  31     showSearch: PropTypes.bool,
  32     intl: PropTypes.object.isRequired
  33   };
  34
  35   componentDidMount () {
  36     this.props.dispatch(mountCompose());
  37   }
  38
  39   componentWillUnmount () {
  40     this.props.dispatch(unmountCompose());
  41   }
  42
  43   render () {
  44     const { withHeader, showSearch, intl } = this.props;
  45
  46     let header = '';
  47
  48     if (withHeader) {
  49       header = (
  50         <div className='drawer__header'>
  51           <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)}><i role="img" aria-label={intl.formatMessage(messages.start)} className='fa fa-fw fa-asterisk' /></Link>
  52           <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)}><i role="img" aria-label={intl.formatMessage(messages.community)} className='fa fa-fw fa-users' /></Link>
  53           <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)}><i role="img" aria-label={intl.formatMessage(messages.public)} className='fa fa-fw fa-globe' /></Link>
  54           <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)}><i role="img" aria-label={intl.formatMessage(messages.preferences)} className='fa fa-fw fa-cog' /></a>
  55           <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)}><i role="img" aria-label={intl.formatMessage(messages.logout)} className='fa fa-fw fa-sign-out' /></a>
  56         </div>
  57       );
  58     }
  59
  60     return (
  61       <div className='drawer'>
  62         {header}
  63
  64         <SearchContainer />
  65
  66         <div className='drawer__pager'>
  67           <div className='drawer__inner'>
  68             <NavigationContainer />
  69             <ComposeFormContainer />
  70           </div>
  71
  72           <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
  73             {({ x }) =>
  74               <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
  75                 <SearchResultsContainer />
  76               </div>
  77             }
  78           </Motion>
  79         </div>
  80       </div>
  81     );
  82   }
  83
  84 }
  85
  86 export default connect(mapStateToProps)(injectIntl(Compose));