2017-04-22 04:05:35 +10:00
|
|
|
import PropTypes from 'prop-types';
|
2023-10-26 22:00:10 +11:00
|
|
|
import { Children, cloneElement, useCallback } from 'react';
|
2023-05-24 01:15:17 +10:00
|
|
|
|
2017-06-04 09:39:38 +10:00
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
2023-05-24 01:15:17 +10:00
|
|
|
|
|
|
|
import { supportsPassiveEvents } from 'detect-passive-events';
|
|
|
|
|
|
|
|
import { scrollRight } from '../../../scroll';
|
2017-07-08 08:06:02 +10:00
|
|
|
import BundleContainer from '../containers/bundle_container';
|
2019-08-30 08:14:36 +10:00
|
|
|
import {
|
|
|
|
Compose,
|
|
|
|
Notifications,
|
|
|
|
HomeTimeline,
|
|
|
|
CommunityTimeline,
|
|
|
|
PublicTimeline,
|
|
|
|
HashtagTimeline,
|
|
|
|
DirectTimeline,
|
|
|
|
FavouritedStatuses,
|
2019-11-14 09:02:10 +11:00
|
|
|
BookmarkedStatuses,
|
2019-08-30 08:14:36 +10:00
|
|
|
ListTimeline,
|
|
|
|
Directory,
|
2023-05-10 20:59:29 +10:00
|
|
|
} from '../util/async-components';
|
2023-10-26 22:00:10 +11:00
|
|
|
import { useColumnsContext } from '../util/columns_context';
|
2023-05-24 01:15:17 +10:00
|
|
|
|
|
|
|
import BundleColumnError from './bundle_column_error';
|
2023-10-25 04:45:08 +11:00
|
|
|
import { ColumnLoading } from './column_loading';
|
2019-05-26 05:27:00 +10:00
|
|
|
import ComposePanel from './compose_panel';
|
2023-05-24 01:15:17 +10:00
|
|
|
import DrawerLoading from './drawer_loading';
|
2019-05-26 05:27:00 +10:00
|
|
|
import NavigationPanel from './navigation_panel';
|
2017-08-05 02:57:46 +10:00
|
|
|
|
2017-06-04 09:39:38 +10:00
|
|
|
const componentMap = {
|
|
|
|
'COMPOSE': Compose,
|
|
|
|
'HOME': HomeTimeline,
|
|
|
|
'NOTIFICATIONS': Notifications,
|
|
|
|
'PUBLIC': PublicTimeline,
|
2020-05-10 18:36:18 +10:00
|
|
|
'REMOTE': PublicTimeline,
|
2017-06-04 09:39:38 +10:00
|
|
|
'COMMUNITY': CommunityTimeline,
|
|
|
|
'HASHTAG': HashtagTimeline,
|
2018-04-18 21:09:06 +10:00
|
|
|
'DIRECT': DirectTimeline,
|
2017-07-15 08:49:34 +10:00
|
|
|
'FAVOURITES': FavouritedStatuses,
|
2019-11-14 09:02:10 +11:00
|
|
|
'BOOKMARKS': BookmarkedStatuses,
|
2017-11-25 10:35:37 +11:00
|
|
|
'LIST': ListTimeline,
|
2019-08-30 08:14:36 +10:00
|
|
|
'DIRECTORY': Directory,
|
2017-06-04 09:39:38 +10:00
|
|
|
};
|
|
|
|
|
2023-10-26 22:00:10 +11:00
|
|
|
const TabsBarPortal = () => {
|
|
|
|
const {setTabsBarElement} = useColumnsContext();
|
|
|
|
|
|
|
|
const setRef = useCallback((element) => {
|
|
|
|
if(element)
|
|
|
|
setTabsBarElement(element);
|
|
|
|
}, [setTabsBarElement]);
|
|
|
|
|
|
|
|
return <div id='tabs-bar__portal' ref={setRef} />;
|
|
|
|
};
|
|
|
|
|
2022-10-24 00:58:24 +11:00
|
|
|
export default class ColumnsArea extends ImmutablePureComponent {
|
2017-05-12 22:44:10 +10:00
|
|
|
static propTypes = {
|
2017-06-04 09:39:38 +10:00
|
|
|
columns: ImmutablePropTypes.list.isRequired,
|
2018-01-15 16:51:00 +11:00
|
|
|
isModalOpen: PropTypes.bool.isRequired,
|
2017-06-04 09:39:38 +10:00
|
|
|
singleColumn: PropTypes.bool,
|
2017-05-21 01:31:47 +10:00
|
|
|
children: PropTypes.node,
|
2017-05-12 22:44:10 +10:00
|
|
|
};
|
|
|
|
|
2022-10-05 05:13:23 +11:00
|
|
|
// Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS
|
|
|
|
mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 1174px)');
|
2021-03-24 20:19:07 +11:00
|
|
|
|
2017-07-16 01:25:04 +10:00
|
|
|
state = {
|
2021-03-24 20:19:07 +11:00
|
|
|
renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches),
|
2023-01-30 11:45:35 +11:00
|
|
|
};
|
2017-07-16 01:25:04 +10:00
|
|
|
|
|
|
|
componentDidMount() {
|
2017-08-31 01:30:25 +10:00
|
|
|
if (!this.props.singleColumn) {
|
2020-11-05 04:21:05 +11:00
|
|
|
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
|
2017-08-31 01:30:25 +10:00
|
|
|
}
|
2017-12-14 06:33:04 +11:00
|
|
|
|
2021-03-24 20:19:07 +11:00
|
|
|
if (this.mediaQuery) {
|
2021-04-01 09:00:12 +11:00
|
|
|
if (this.mediaQuery.addEventListener) {
|
|
|
|
this.mediaQuery.addEventListener('change', this.handleLayoutChange);
|
|
|
|
} else {
|
|
|
|
this.mediaQuery.addListener(this.handleLayoutChange);
|
|
|
|
}
|
2021-03-24 20:19:07 +11:00
|
|
|
this.setState({ renderComposePanel: !this.mediaQuery.matches });
|
|
|
|
}
|
|
|
|
|
2017-12-14 06:33:04 +11:00
|
|
|
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
|
2017-07-16 01:25:04 +10:00
|
|
|
}
|
|
|
|
|
2023-05-10 17:05:32 +10:00
|
|
|
UNSAFE_componentWillUpdate(nextProps) {
|
2017-08-31 01:30:25 +10:00
|
|
|
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) {
|
2020-11-05 04:21:05 +11:00
|
|
|
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
|
2017-08-31 01:30:25 +10:00
|
|
|
}
|
2017-08-29 22:16:21 +10:00
|
|
|
}
|
2017-08-05 02:57:46 +10:00
|
|
|
|
2017-08-30 01:06:19 +10:00
|
|
|
componentWillUnmount () {
|
2017-08-31 01:30:25 +10:00
|
|
|
if (!this.props.singleColumn) {
|
|
|
|
this.node.removeEventListener('wheel', this.handleWheel);
|
|
|
|
}
|
2021-03-24 20:19:07 +11:00
|
|
|
|
|
|
|
if (this.mediaQuery) {
|
2021-04-01 09:00:12 +11:00
|
|
|
if (this.mediaQuery.removeEventListener) {
|
|
|
|
this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
|
|
|
|
} else {
|
2022-12-16 02:37:17 +11:00
|
|
|
this.mediaQuery.removeListener(this.handleLayoutChange);
|
2021-04-01 09:00:12 +11:00
|
|
|
}
|
2021-03-24 20:19:07 +11:00
|
|
|
}
|
2017-08-30 01:06:19 +10:00
|
|
|
}
|
|
|
|
|
2017-08-29 22:16:21 +10:00
|
|
|
handleChildrenContentChange() {
|
2017-08-30 00:11:28 +10:00
|
|
|
if (!this.props.singleColumn) {
|
2017-12-14 06:33:04 +11:00
|
|
|
const modifier = this.isRtlLayout ? -1 : 1;
|
2017-12-14 04:28:13 +11:00
|
|
|
this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
|
2017-08-30 00:11:28 +10:00
|
|
|
}
|
2017-07-14 08:49:01 +10:00
|
|
|
}
|
|
|
|
|
2021-03-24 20:19:07 +11:00
|
|
|
handleLayoutChange = (e) => {
|
|
|
|
this.setState({ renderComposePanel: !e.matches });
|
2023-01-30 11:45:35 +11:00
|
|
|
};
|
2021-03-24 20:19:07 +11:00
|
|
|
|
2017-08-30 01:06:19 +10:00
|
|
|
handleWheel = () => {
|
|
|
|
if (typeof this._interruptScrollAnimation !== 'function') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._interruptScrollAnimation();
|
2023-01-30 11:45:35 +11:00
|
|
|
};
|
2017-08-30 01:06:19 +10:00
|
|
|
|
2017-08-05 02:57:46 +10:00
|
|
|
setRef = (node) => {
|
|
|
|
this.node = node;
|
2023-01-30 11:45:35 +11:00
|
|
|
};
|
2017-08-05 02:57:46 +10:00
|
|
|
|
2017-09-10 16:48:11 +10:00
|
|
|
renderLoading = columnId => () => {
|
2022-10-20 23:35:29 +11:00
|
|
|
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading multiColumn />;
|
2023-01-30 11:45:35 +11:00
|
|
|
};
|
2017-07-08 08:06:02 +10:00
|
|
|
|
|
|
|
renderError = (props) => {
|
2022-10-24 00:58:24 +11:00
|
|
|
return <BundleColumnError multiColumn errorType='network' {...props} />;
|
2023-01-30 11:45:35 +11:00
|
|
|
};
|
2017-07-08 08:06:02 +10:00
|
|
|
|
2016-09-01 00:15:12 +10:00
|
|
|
render () {
|
2022-10-24 00:58:24 +11:00
|
|
|
const { columns, children, singleColumn, isModalOpen } = this.props;
|
2022-10-05 05:13:23 +11:00
|
|
|
const { renderComposePanel } = this.state;
|
2017-06-04 09:39:38 +10:00
|
|
|
|
|
|
|
if (singleColumn) {
|
2019-05-24 04:01:10 +10:00
|
|
|
return (
|
|
|
|
<div className='columns-area__panels'>
|
2019-05-26 05:27:00 +10:00
|
|
|
<div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
|
|
|
|
<div className='columns-area__panels__pane__inner'>
|
2021-03-24 20:19:07 +11:00
|
|
|
{renderComposePanel && <ComposePanel />}
|
2019-05-26 05:27:00 +10:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-03-02 17:12:40 +11:00
|
|
|
|
2022-10-24 00:58:24 +11:00
|
|
|
<div className='columns-area__panels__main'>
|
2023-10-26 22:00:10 +11:00
|
|
|
<div className='tabs-bar__wrapper'><TabsBarPortal /></div>
|
2022-10-05 05:13:23 +11:00
|
|
|
<div className='columns-area columns-area--mobile'>{children}</div>
|
2019-05-24 04:01:10 +10:00
|
|
|
</div>
|
2019-05-23 09:35:22 +10:00
|
|
|
|
2019-05-26 05:27:00 +10:00
|
|
|
<div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
|
|
|
|
<div className='columns-area__panels__pane__inner'>
|
|
|
|
<NavigationPanel />
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-05-24 04:01:10 +10:00
|
|
|
</div>
|
|
|
|
);
|
2017-06-04 09:39:38 +10:00
|
|
|
}
|
|
|
|
|
2016-08-25 01:56:44 +10:00
|
|
|
return (
|
2018-01-15 16:51:00 +11:00
|
|
|
<div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
|
2017-06-04 09:39:38 +10:00
|
|
|
{columns.map(column => {
|
|
|
|
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
2018-05-22 01:49:10 +10:00
|
|
|
const other = params && params.other ? params.other : {};
|
2017-07-08 08:06:02 +10:00
|
|
|
|
|
|
|
return (
|
2017-09-10 16:48:11 +10:00
|
|
|
<BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
|
2018-05-22 01:49:10 +10:00
|
|
|
{SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn {...other} />}
|
2017-07-08 08:06:02 +10:00
|
|
|
</BundleContainer>
|
|
|
|
);
|
2017-06-04 09:39:38 +10:00
|
|
|
})}
|
|
|
|
|
2023-05-23 18:52:27 +10:00
|
|
|
{Children.map(children, child => cloneElement(child, { multiColumn: true }))}
|
2016-08-25 01:56:44 +10:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-09-01 00:15:12 +10:00
|
|
|
|
2017-04-22 04:05:35 +10:00
|
|
|
}
|