feat: Swipeable columns
parent
3d403a013d
commit
a6d8d1036a
|
@ -2,12 +2,14 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import ReactSwipeable from 'react-swipeable';
|
||||||
import HomeTimeline from '../../home_timeline';
|
import HomeTimeline from '../../home_timeline';
|
||||||
import Notifications from '../../notifications';
|
import Notifications from '../../notifications';
|
||||||
import PublicTimeline from '../../public_timeline';
|
import PublicTimeline from '../../public_timeline';
|
||||||
import CommunityTimeline from '../../community_timeline';
|
import CommunityTimeline from '../../community_timeline';
|
||||||
import HashtagTimeline from '../../hashtag_timeline';
|
import HashtagTimeline from '../../hashtag_timeline';
|
||||||
import Compose from '../../compose';
|
import Compose from '../../compose';
|
||||||
|
import { getPreviousLink, getNextLink } from './tabs_bar';
|
||||||
|
|
||||||
const componentMap = {
|
const componentMap = {
|
||||||
'COMPOSE': Compose,
|
'COMPOSE': Compose,
|
||||||
|
@ -20,20 +22,40 @@ const componentMap = {
|
||||||
|
|
||||||
class ColumnsArea extends ImmutablePureComponent {
|
class ColumnsArea extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
router: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
columns: ImmutablePropTypes.list.isRequired,
|
columns: ImmutablePropTypes.list.isRequired,
|
||||||
singleColumn: PropTypes.bool,
|
singleColumn: PropTypes.bool,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleRightSwipe = () => {
|
||||||
|
const previousLink = getPreviousLink(this.context.router.history.location.pathname);
|
||||||
|
|
||||||
|
if (previousLink) {
|
||||||
|
this.context.router.history.push(previousLink);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLeftSwipe = () => {
|
||||||
|
const previousLink = getNextLink(this.context.router.history.location.pathname);
|
||||||
|
|
||||||
|
if (previousLink) {
|
||||||
|
this.context.router.history.push(previousLink);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { columns, children, singleColumn } = this.props;
|
const { columns, children, singleColumn } = this.props;
|
||||||
|
|
||||||
if (singleColumn) {
|
if (singleColumn) {
|
||||||
return (
|
return (
|
||||||
<div className='columns-area'>
|
<ReactSwipeable onSwipedLeft={this.handleLeftSwipe} onSwipedRight={this.handleRightSwipe} className='columns-area'>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</ReactSwipeable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,19 +2,43 @@ import React from 'react';
|
||||||
import NavLink from 'react-router-dom/NavLink';
|
import NavLink from 'react-router-dom/NavLink';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></NavLink>,
|
||||||
|
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
|
||||||
|
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
|
||||||
|
|
||||||
|
<NavLink className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public/local'><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>,
|
||||||
|
<NavLink className='tabs-bar__link secondary' activeClassName='active' exact to='/timelines/public'><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>,
|
||||||
|
|
||||||
|
<NavLink className='tabs-bar__link primary' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-asterisk' /></NavLink>,
|
||||||
|
];
|
||||||
|
|
||||||
|
export function getPreviousLink (path) {
|
||||||
|
const index = links.findIndex(link => link.props.to === path);
|
||||||
|
|
||||||
|
if (index > 0) {
|
||||||
|
return links[index - 1].props.to;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getNextLink (path) {
|
||||||
|
const index = links.findIndex(link => link.props.to === path);
|
||||||
|
|
||||||
|
if (index !== -1 && index < links.length - 1) {
|
||||||
|
return links[index + 1].props.to;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
class TabsBar extends React.Component {
|
class TabsBar extends React.Component {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className='tabs-bar'>
|
<div className='tabs-bar'>
|
||||||
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/statuses/new'><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></NavLink>
|
{React.Children.toArray(links)}
|
||||||
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/timelines/home'><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
|
|
||||||
<NavLink className='tabs-bar__link primary' activeClassName='active' to='/notifications'><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
|
|
||||||
|
|
||||||
<NavLink className='tabs-bar__link secondary' activeClassName='active' to='/timelines/public/local'><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
|
|
||||||
<NavLink className='tabs-bar__link secondary' activeClassName='active' exact to='/timelines/public'><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
|
|
||||||
|
|
||||||
<NavLink className='tabs-bar__link primary' activeClassName='active' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started'><i className='fa fa-fw fa-asterisk' /></NavLink>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue