forked from treehouse/mastodon
88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
import ReactSwipeable from 'react-swipeable';
|
|
import { getPreviousLink, getNextLink } from './tabs_bar';
|
|
|
|
import BundleContainer from '../containers/bundle_container';
|
|
import ColumnLoading from './column_loading';
|
|
import BundleColumnError from './bundle_column_error';
|
|
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline } from '../../ui/util/async-components';
|
|
|
|
const componentMap = {
|
|
'COMPOSE': Compose,
|
|
'HOME': HomeTimeline,
|
|
'NOTIFICATIONS': Notifications,
|
|
'PUBLIC': PublicTimeline,
|
|
'COMMUNITY': CommunityTimeline,
|
|
'HASHTAG': HashtagTimeline,
|
|
};
|
|
|
|
export default class ColumnsArea extends ImmutablePureComponent {
|
|
|
|
static contextTypes = {
|
|
router: PropTypes.object.isRequired,
|
|
};
|
|
|
|
static propTypes = {
|
|
columns: ImmutablePropTypes.list.isRequired,
|
|
singleColumn: PropTypes.bool,
|
|
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);
|
|
}
|
|
};
|
|
|
|
renderLoading = () => {
|
|
return <ColumnLoading />;
|
|
}
|
|
|
|
renderError = (props) => {
|
|
return <BundleColumnError {...props} />;
|
|
}
|
|
|
|
render () {
|
|
const { columns, children, singleColumn } = this.props;
|
|
|
|
if (singleColumn) {
|
|
return (
|
|
<ReactSwipeable onSwipedLeft={this.handleLeftSwipe} onSwipedRight={this.handleRightSwipe} delta={30} className='columns-area'>
|
|
{children}
|
|
</ReactSwipeable>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='columns-area'>
|
|
{columns.map(column => {
|
|
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
|
|
|
return (
|
|
<BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading} error={this.renderError}>
|
|
{SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn />}
|
|
</BundleContainer>
|
|
);
|
|
})}
|
|
|
|
{React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|