logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

index.js (5319B)


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