2017-05-02 19:04:16 -05:00
|
|
|
import React from 'react';
|
2017-04-21 13:05:35 -05:00
|
|
|
import PropTypes from 'prop-types';
|
2017-07-23 07:03:35 -05:00
|
|
|
import { injectIntl } from 'react-intl';
|
2017-06-03 18:39:38 -05:00
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
2017-07-07 17:06:02 -05:00
|
|
|
|
2017-07-09 08:02:26 -05:00
|
|
|
import ReactSwipeableViews from 'react-swipeable-views';
|
|
|
|
import { links, getIndex, getLink } from './tabs_bar';
|
2016-08-24 10:56:44 -05:00
|
|
|
|
2017-07-07 17:06:02 -05:00
|
|
|
import BundleContainer from '../containers/bundle_container';
|
|
|
|
import ColumnLoading from './column_loading';
|
2017-09-10 01:48:11 -05:00
|
|
|
import DrawerLoading from './drawer_loading';
|
2017-07-07 17:06:02 -05:00
|
|
|
import BundleColumnError from './bundle_column_error';
|
2017-11-24 17:35:37 -06:00
|
|
|
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses, ListTimeline } from '../../ui/util/async-components';
|
2017-07-07 17:06:02 -05:00
|
|
|
|
2017-08-29 10:06:19 -05:00
|
|
|
import detectPassiveEvents from 'detect-passive-events';
|
2017-08-04 11:57:46 -05:00
|
|
|
import { scrollRight } from '../../../scroll';
|
|
|
|
|
2017-06-03 18:39:38 -05:00
|
|
|
const componentMap = {
|
|
|
|
'COMPOSE': Compose,
|
|
|
|
'HOME': HomeTimeline,
|
|
|
|
'NOTIFICATIONS': Notifications,
|
|
|
|
'PUBLIC': PublicTimeline,
|
|
|
|
'COMMUNITY': CommunityTimeline,
|
|
|
|
'HASHTAG': HashtagTimeline,
|
2017-07-14 17:49:34 -05:00
|
|
|
'FAVOURITES': FavouritedStatuses,
|
2017-11-24 17:35:37 -06:00
|
|
|
'LIST': ListTimeline,
|
2017-06-03 18:39:38 -05:00
|
|
|
};
|
|
|
|
|
2017-08-29 07:16:21 -05:00
|
|
|
@component => injectIntl(component, { withRef: true })
|
2017-06-23 12:36:54 -05:00
|
|
|
export default class ColumnsArea extends ImmutablePureComponent {
|
2016-08-31 09:15:12 -05:00
|
|
|
|
2017-06-08 10:41:32 -05:00
|
|
|
static contextTypes = {
|
|
|
|
router: PropTypes.object.isRequired,
|
|
|
|
};
|
|
|
|
|
2017-05-12 07:44:10 -05:00
|
|
|
static propTypes = {
|
2017-07-23 07:03:35 -05:00
|
|
|
intl: PropTypes.object.isRequired,
|
2017-06-03 18:39:38 -05:00
|
|
|
columns: ImmutablePropTypes.list.isRequired,
|
|
|
|
singleColumn: PropTypes.bool,
|
2017-05-20 10:31:47 -05:00
|
|
|
children: PropTypes.node,
|
2017-05-12 07:44:10 -05:00
|
|
|
};
|
|
|
|
|
2017-07-15 10:25:04 -05:00
|
|
|
state = {
|
|
|
|
shouldAnimate: false,
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps() {
|
|
|
|
this.setState({ shouldAnimate: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2017-08-30 10:30:25 -05:00
|
|
|
if (!this.props.singleColumn) {
|
2017-08-31 04:20:54 -05:00
|
|
|
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
|
2017-08-30 10:30:25 -05:00
|
|
|
}
|
2017-12-13 13:33:04 -06:00
|
|
|
|
|
|
|
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
|
|
|
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
|
|
|
|
|
2017-07-15 10:25:04 -05:00
|
|
|
this.setState({ shouldAnimate: true });
|
|
|
|
}
|
|
|
|
|
2017-08-30 10:30:25 -05:00
|
|
|
componentWillUpdate(nextProps) {
|
|
|
|
if (this.props.singleColumn !== nextProps.singleColumn && nextProps.singleColumn) {
|
|
|
|
this.node.removeEventListener('wheel', this.handleWheel);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) {
|
2017-08-31 04:20:54 -05:00
|
|
|
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
|
2017-08-30 10:30:25 -05:00
|
|
|
}
|
2017-07-13 17:49:01 -05:00
|
|
|
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
2017-07-15 10:25:04 -05:00
|
|
|
this.setState({ shouldAnimate: true });
|
2017-08-29 07:16:21 -05:00
|
|
|
}
|
2017-08-04 11:57:46 -05:00
|
|
|
|
2017-08-29 10:06:19 -05:00
|
|
|
componentWillUnmount () {
|
2017-08-30 10:30:25 -05:00
|
|
|
if (!this.props.singleColumn) {
|
|
|
|
this.node.removeEventListener('wheel', this.handleWheel);
|
|
|
|
}
|
2017-08-29 10:06:19 -05:00
|
|
|
}
|
|
|
|
|
2017-08-29 07:16:21 -05:00
|
|
|
handleChildrenContentChange() {
|
2017-08-29 09:11:28 -05:00
|
|
|
if (!this.props.singleColumn) {
|
2017-12-13 13:33:04 -06:00
|
|
|
const modifier = this.isRtlLayout ? -1 : 1;
|
2017-12-13 11:28:13 -06:00
|
|
|
this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
|
2017-08-29 09:11:28 -05:00
|
|
|
}
|
2017-07-13 17:49:01 -05:00
|
|
|
}
|
|
|
|
|
2017-07-09 08:02:26 -05:00
|
|
|
handleSwipe = (index) => {
|
2017-07-13 17:49:01 -05:00
|
|
|
this.pendingIndex = index;
|
2017-07-26 12:03:56 -05:00
|
|
|
|
|
|
|
const nextLinkTranslationId = links[index].props['data-preview-title-id'];
|
|
|
|
const currentLinkSelector = '.tabs-bar__link.active';
|
|
|
|
const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`;
|
|
|
|
|
|
|
|
// HACK: Remove the active class from the current link and set it to the next one
|
|
|
|
// React-router does this for us, but too late, feeling laggy.
|
|
|
|
document.querySelector(currentLinkSelector).classList.remove('active');
|
|
|
|
document.querySelector(nextLinkSelector).classList.add('active');
|
2017-07-13 17:49:01 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
handleAnimationEnd = () => {
|
|
|
|
if (typeof this.pendingIndex === 'number') {
|
|
|
|
this.context.router.history.push(getLink(this.pendingIndex));
|
|
|
|
this.pendingIndex = null;
|
|
|
|
}
|
2017-06-08 10:41:32 -05:00
|
|
|
}
|
|
|
|
|
2017-08-29 10:06:19 -05:00
|
|
|
handleWheel = () => {
|
|
|
|
if (typeof this._interruptScrollAnimation !== 'function') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._interruptScrollAnimation();
|
|
|
|
}
|
|
|
|
|
2017-08-04 11:57:46 -05:00
|
|
|
setRef = (node) => {
|
|
|
|
this.node = node;
|
|
|
|
}
|
|
|
|
|
2017-07-09 08:02:26 -05:00
|
|
|
renderView = (link, index) => {
|
|
|
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
2017-07-23 07:03:35 -05:00
|
|
|
const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] });
|
|
|
|
const icon = link.props['data-preview-icon'];
|
2017-06-08 10:41:32 -05:00
|
|
|
|
2017-07-09 08:02:26 -05:00
|
|
|
const view = (index === columnIndex) ?
|
|
|
|
React.cloneElement(this.props.children) :
|
|
|
|
<ColumnLoading title={title} icon={icon} />;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className='columns-area' key={index}>
|
|
|
|
{view}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-06-08 10:41:32 -05:00
|
|
|
|
2017-09-10 01:48:11 -05:00
|
|
|
renderLoading = columnId => () => {
|
|
|
|
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
|
2017-07-07 17:06:02 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
renderError = (props) => {
|
|
|
|
return <BundleColumnError {...props} />;
|
|
|
|
}
|
|
|
|
|
2016-08-31 09:15:12 -05:00
|
|
|
render () {
|
2017-06-03 18:39:38 -05:00
|
|
|
const { columns, children, singleColumn } = this.props;
|
2017-07-15 10:25:04 -05:00
|
|
|
const { shouldAnimate } = this.state;
|
2017-06-03 18:39:38 -05:00
|
|
|
|
2017-07-09 08:02:26 -05:00
|
|
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
2017-07-15 10:25:04 -05:00
|
|
|
this.pendingIndex = null;
|
2017-07-09 08:02:26 -05:00
|
|
|
|
2017-06-03 18:39:38 -05:00
|
|
|
if (singleColumn) {
|
2017-07-09 08:02:26 -05:00
|
|
|
return columnIndex !== -1 ? (
|
2017-07-13 17:49:01 -05:00
|
|
|
<ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
|
2017-07-09 08:02:26 -05:00
|
|
|
{links.map(this.renderView)}
|
|
|
|
</ReactSwipeableViews>
|
2017-07-09 21:37:10 -05:00
|
|
|
) : <div className='columns-area'>{children}</div>;
|
2017-06-03 18:39:38 -05:00
|
|
|
}
|
|
|
|
|
2016-08-24 10:56:44 -05:00
|
|
|
return (
|
2017-08-04 11:57:46 -05:00
|
|
|
<div className='columns-area' ref={this.setRef}>
|
2017-06-03 18:39:38 -05:00
|
|
|
{columns.map(column => {
|
|
|
|
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
2017-07-07 17:06:02 -05:00
|
|
|
|
|
|
|
return (
|
2017-09-10 01:48:11 -05:00
|
|
|
<BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
|
2017-07-07 17:06:02 -05:00
|
|
|
{SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn />}
|
|
|
|
</BundleContainer>
|
|
|
|
);
|
2017-06-03 18:39:38 -05:00
|
|
|
})}
|
|
|
|
|
|
|
|
{React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
|
2016-08-24 10:56:44 -05:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-08-31 09:15:12 -05:00
|
|
|
|
2017-04-21 13:05:35 -05:00
|
|
|
}
|