mirror of
https://github.com/whippyshou/mastodon
synced 2024-12-12 05:38:57 +09:00
17ba5e1e61
* New translations en.yml (Portuguese) * New translations en.yml (Lithuanian) * New translations en.yml (Serbian (Cyrillic)) * New translations en.yml (Turkish) * New translations en.yml (Ukrainian) * New translations en.yml (Chinese Traditional) * New translations en.yml (Urdu (Pakistan)) * New translations en.yml (Icelandic) * New translations en.yml (Portuguese, Brazilian) * New translations en.yml (Indonesian) * New translations en.yml (Tamil) * New translations en.yml (Macedonian) * New translations en.yml (Korean) * New translations en.yml (Georgian) * New translations en.yml (Slovak) * New translations en.yml (Chinese Simplified) * New translations en.yml (Swedish) * New translations en.yml (Hebrew) * New translations en.yml (Italian) * New translations en.yml (Japanese) * New translations en.yml (Russian) * New translations en.yml (Slovenian) * New translations en.yml (Armenian) * New translations en.yml (Vietnamese) * New translations en.yml (Scottish Gaelic) * New translations en.yml (Occitan) * New translations en.yml (Persian) * New translations en.yml (Galician) * New translations en.yml (Hungarian) * New translations en.yml (Spanish, Argentina) * New translations en.yml (Irish) * New translations en.json (Arabic) * New translations en.json (Irish) * New translations en.json (German) * New translations en.yml (Spanish, Mexico) * New translations en.json (Turkish) * New translations en.yml (Kabyle) * New translations en.yml (Ido) * New translations en.yml (Taigi) * New translations en.yml (Silesian) * New translations en.yml (Standard Moroccan Tamazight) * New translations en.json (Japanese) * New translations en.json (Korean) * New translations en.json (Vietnamese) * New translations en.json (Chinese Simplified) * New translations en.yml (Sardinian) * New translations en.json (Portuguese, Brazilian) * New translations en.json (Asturian) * New translations en.json (Scottish Gaelic) * New translations en.json (Welsh) * New translations en.json (Galician) * New translations en.json (Slovak) * New translations en.json (Icelandic) * New translations en.yml (Sanskrit) * New translations en.yml (Corsican) * New translations en.yml (Bengali) * New translations en.yml (Esperanto) * New translations en.yml (Marathi) * New translations en.yml (Croatian) * New translations en.yml (Norwegian Nynorsk) * New translations en.yml (Kazakh) * New translations en.yml (Estonian) * New translations en.yml (Latvian) * New translations en.yml (Hindi) * New translations en.yml (Malay) * New translations en.yml (Telugu) * New translations en.yml (Welsh) * New translations en.yml (Uyghur) * New translations en.yml (Sorani (Kurdish)) * New translations en.yml (Chinese Traditional, Hong Kong) * New translations en.yml (Tatar) * New translations en.yml (Malayalam) * New translations en.yml (Breton) * New translations en.yml (Sinhala) * New translations en.yml (Cornish) * New translations en.yml (Kannada) * New translations en.yml (Asturian) * New translations en.yml (Serbian (Latin)) * New translations en.yml (Kurmanji (Kurdish)) * New translations en.json (Sorani (Kurdish)) * New translations en.json (Greek) * New translations en.json (Romanian) * New translations en.json (French) * New translations en.json (Spanish) * New translations en.json (Afrikaans) * New translations en.json (Bulgarian) * New translations en.json (Czech) * New translations en.json (Danish) * New translations en.json (Basque) * New translations en.json (Finnish) * New translations en.json (Hebrew) * New translations en.json (Spanish, Mexico) * New translations en.json (Marathi) * New translations en.json (Bengali) * New translations en.json (English, United Kingdom) * New translations en.json (Spanish, Argentina) * New translations en.json (Tamil) * New translations en.json (Croatian) * New translations en.json (Persian) * New translations en.json (Thai) * New translations en.json (Malay) * New translations en.json (Norwegian Nynorsk) * New translations en.json (Kazakh) * New translations en.json (Estonian) * New translations en.json (Latvian) * New translations en.json (Hindi) * New translations en.json (Urdu (Pakistan)) * New translations en.json (Telugu) * New translations en.json (Esperanto) * New translations en.json (Indonesian) * New translations en.json (Slovenian) * New translations en.json (Chinese Traditional) * New translations en.json (Dutch) * New translations en.json (Norwegian) * New translations en.json (Hungarian) * New translations en.json (Armenian) * New translations en.json (Italian) * New translations en.json (Georgian) * New translations en.json (Lithuanian) * New translations en.json (Macedonian) * New translations en.json (Punjabi) * New translations en.json (Ukrainian) * New translations en.json (Polish) * New translations en.json (Portuguese) * New translations en.json (Russian) * New translations en.yml (English, United Kingdom) * New translations en.json (Albanian) * New translations en.json (Serbian (Cyrillic)) * New translations en.json (Swedish) * New translations en.json (Uyghur) * New translations en.json (Chinese Traditional, Hong Kong) * New translations en.json (Corsican) * New translations en.json (Silesian) * New translations en.json (Taigi) * New translations en.json (Ido) * New translations en.json (Kabyle) * New translations en.json (Sanskrit) * New translations en.json (Sardinian) * New translations en.json (Kurmanji (Kurdish)) * New translations en.json (Tatar) * New translations en.json (Serbian (Latin)) * New translations en.json (Occitan) * New translations en.json (Kannada) * New translations en.json (Cornish) * New translations en.json (Sinhala) * New translations en.json (Breton) * New translations en.json (Malayalam) * New translations en.json (Standard Moroccan Tamazight) * New translations en.json (Spanish, Argentina) * New translations en.json (Galician) * New translations en.json (Chinese Traditional) * New translations en.json (Greek) * New translations en.json (Swedish) * New translations en.json (Russian) * New translations en.json (Chinese Simplified) * New translations en.json (Catalan) * New translations en.json (Polish) * New translations en.json (Latvian) * New translations en.yml (Turkish) * New translations en.json (Turkish) * New translations en.json (Czech) * New translations en.json (Slovenian) * New translations en.json (Icelandic) * New translations en.json (Hungarian) * New translations en.json (Italian) * New translations en.json (Vietnamese) * New translations en.yml (Russian) * New translations doorkeeper.en.yml (Russian) * New translations en.yml (Japanese) * New translations en.json (Japanese) * New translations en.json (Danish) * New translations en.json (Dutch) * New translations en.json (Portuguese) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations simple_form.en.yml (Frisian) * New translations activerecord.en.yml (Frisian) * New translations devise.en.yml (Frisian) * New translations doorkeeper.en.yml (Frisian) * New translations en.json (Frisian) * New translations en.yml (Breton) * New translations en.json (Breton) * New translations en.yml (Polish) * New translations en.yml (Russian) * New translations en.yml (Catalan) * New translations en.yml (Korean) * New translations en.yml (Spanish, Argentina) * New translations en.json (Korean) * New translations en.yml (Greek) * New translations en.yml (Kurmanji (Kurdish)) * New translations en.yml (Ukrainian) * New translations en.yml (Czech) * New translations en.json (Ukrainian) * New translations en.yml (Icelandic) * New translations en.yml (Portuguese) * New translations en.yml (Latvian) * New translations en.yml (Hungarian) * New translations en.json (Irish) * New translations en.json (Irish) * New translations en.json (Irish) * New translations en.yml (Czech) * New translations en.yml (Danish) * New translations en.yml (Chinese Traditional) * New translations en.yml (Galician) * New translations en.yml (Galician) * New translations simple_form.en.yml (Galician) * New translations en.json (Frisian) * New translations en.json (Frisian) * New translations en.json (Frisian) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations activerecord.en.yml (Frisian) * New translations activerecord.en.yml (Frisian) * New translations en.json (Frisian) * New translations devise.en.yml (Frisian) * New translations doorkeeper.en.yml (Frisian) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations en.yml (Slovenian) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations doorkeeper.en.yml (Frisian) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations simple_form.en.yml (Frisian) * New translations en.json (Frisian) * New translations en.yml (Frisian) * New translations en.json (Frisian) * New translations en.json (Frisian) * New translations en.json (Frisian) * New translations en.json (Frisian) * New translations en.yml (Indonesian) * New translations en.json (Indonesian) * New translations en.json (Spanish) * New translations en.yml (Spanish) * New translations en.yml (Italian) * New translations en.yml (Ido) * New translations en.json (Ido) * New translations en.json (French) * New translations en.yml (Korean) * New translations simple_form.en.yml (Korean) * New translations simple_form.en.yml (Korean) * New translations en.yml (Russian) * New translations en.yml (Russian) * Run `yarn manage:translations` * Run `bundle exec i18n-tasks normalize` * Fix default message Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
272 lines
9.2 KiB
JavaScript
272 lines
9.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
import ReactSwipeableViews from 'react-swipeable-views';
|
|
import TabsBar, { links, getIndex, getLink } from './tabs_bar';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { disableSwiping } from 'mastodon/initial_state';
|
|
|
|
import BundleContainer from '../containers/bundle_container';
|
|
import ColumnLoading from './column_loading';
|
|
import DrawerLoading from './drawer_loading';
|
|
import BundleColumnError from './bundle_column_error';
|
|
import {
|
|
Compose,
|
|
Notifications,
|
|
HomeTimeline,
|
|
CommunityTimeline,
|
|
PublicTimeline,
|
|
HashtagTimeline,
|
|
DirectTimeline,
|
|
FavouritedStatuses,
|
|
BookmarkedStatuses,
|
|
ListTimeline,
|
|
Directory,
|
|
} from '../../ui/util/async-components';
|
|
import Icon from 'mastodon/components/icon';
|
|
import ComposePanel from './compose_panel';
|
|
import NavigationPanel from './navigation_panel';
|
|
|
|
import { supportsPassiveEvents } from 'detect-passive-events';
|
|
import { scrollRight } from '../../../scroll';
|
|
|
|
const componentMap = {
|
|
'COMPOSE': Compose,
|
|
'HOME': HomeTimeline,
|
|
'NOTIFICATIONS': Notifications,
|
|
'PUBLIC': PublicTimeline,
|
|
'REMOTE': PublicTimeline,
|
|
'COMMUNITY': CommunityTimeline,
|
|
'HASHTAG': HashtagTimeline,
|
|
'DIRECT': DirectTimeline,
|
|
'FAVOURITES': FavouritedStatuses,
|
|
'BOOKMARKS': BookmarkedStatuses,
|
|
'LIST': ListTimeline,
|
|
'DIRECTORY': Directory,
|
|
};
|
|
|
|
const messages = defineMessages({
|
|
publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
|
|
});
|
|
|
|
const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/);
|
|
|
|
export default @(component => injectIntl(component, { withRef: true }))
|
|
class ColumnsArea extends ImmutablePureComponent {
|
|
|
|
static contextTypes = {
|
|
router: PropTypes.object.isRequired,
|
|
};
|
|
|
|
static propTypes = {
|
|
intl: PropTypes.object.isRequired,
|
|
columns: ImmutablePropTypes.list.isRequired,
|
|
isModalOpen: PropTypes.bool.isRequired,
|
|
singleColumn: PropTypes.bool,
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
// Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
|
|
mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)');
|
|
|
|
state = {
|
|
shouldAnimate: false,
|
|
renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches),
|
|
}
|
|
|
|
componentWillReceiveProps() {
|
|
if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getIndex(this.context.router.history.location.pathname)) {
|
|
this.setState({ shouldAnimate: false });
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (!this.props.singleColumn) {
|
|
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
|
|
}
|
|
|
|
if (this.mediaQuery) {
|
|
if (this.mediaQuery.addEventListener) {
|
|
this.mediaQuery.addEventListener('change', this.handleLayoutChange);
|
|
} else {
|
|
this.mediaQuery.addListener(this.handleLayoutChange);
|
|
}
|
|
this.setState({ renderComposePanel: !this.mediaQuery.matches });
|
|
}
|
|
|
|
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
|
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
|
|
|
|
this.setState({ shouldAnimate: true });
|
|
}
|
|
|
|
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) {
|
|
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
|
|
}
|
|
|
|
const newIndex = getIndex(this.context.router.history.location.pathname);
|
|
|
|
if (this.lastIndex !== newIndex) {
|
|
this.lastIndex = newIndex;
|
|
this.setState({ shouldAnimate: true });
|
|
}
|
|
}
|
|
|
|
componentWillUnmount () {
|
|
if (!this.props.singleColumn) {
|
|
this.node.removeEventListener('wheel', this.handleWheel);
|
|
}
|
|
|
|
if (this.mediaQuery) {
|
|
if (this.mediaQuery.removeEventListener) {
|
|
this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
|
|
} else {
|
|
this.mediaQuery.removeListener(this.handleLayouteChange);
|
|
}
|
|
}
|
|
}
|
|
|
|
handleChildrenContentChange() {
|
|
if (!this.props.singleColumn) {
|
|
const modifier = this.isRtlLayout ? -1 : 1;
|
|
this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
|
|
}
|
|
}
|
|
|
|
handleLayoutChange = (e) => {
|
|
this.setState({ renderComposePanel: !e.matches });
|
|
}
|
|
|
|
handleSwipe = (index) => {
|
|
this.pendingIndex = index;
|
|
|
|
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');
|
|
|
|
if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') {
|
|
this.context.router.history.push(getLink(this.pendingIndex));
|
|
this.pendingIndex = null;
|
|
}
|
|
}
|
|
|
|
handleAnimationEnd = () => {
|
|
if (typeof this.pendingIndex === 'number') {
|
|
this.context.router.history.push(getLink(this.pendingIndex));
|
|
this.pendingIndex = null;
|
|
}
|
|
}
|
|
|
|
handleWheel = () => {
|
|
if (typeof this._interruptScrollAnimation !== 'function') {
|
|
return;
|
|
}
|
|
|
|
this._interruptScrollAnimation();
|
|
}
|
|
|
|
setRef = (node) => {
|
|
this.node = node;
|
|
}
|
|
|
|
renderView = (link, index) => {
|
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
|
const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] });
|
|
const icon = link.props['data-preview-icon'];
|
|
|
|
const view = (index === columnIndex) ?
|
|
React.cloneElement(this.props.children) :
|
|
<ColumnLoading title={title} icon={icon} />;
|
|
|
|
return (
|
|
<div className='columns-area columns-area--mobile' key={index}>
|
|
{view}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderLoading = columnId => () => {
|
|
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
|
|
}
|
|
|
|
renderError = (props) => {
|
|
return <BundleColumnError {...props} />;
|
|
}
|
|
|
|
render () {
|
|
const { columns, children, singleColumn, isModalOpen, intl } = this.props;
|
|
const { shouldAnimate, renderComposePanel } = this.state;
|
|
|
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
|
|
|
if (singleColumn) {
|
|
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
|
|
|
|
const content = columnIndex !== -1 ? (
|
|
<ReactSwipeableViews key='content' hysteresis={0.2} threshold={15} index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }} disabled={disableSwiping}>
|
|
{links.map(this.renderView)}
|
|
</ReactSwipeableViews>
|
|
) : (
|
|
<div key='content' className='columns-area columns-area--mobile'>{children}</div>
|
|
);
|
|
|
|
return (
|
|
<div className='columns-area__panels'>
|
|
<div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
|
|
<div className='columns-area__panels__pane__inner'>
|
|
{renderComposePanel && <ComposePanel />}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`columns-area__panels__main ${floatingActionButton && 'with-fab'}`}>
|
|
<TabsBar key='tabs' />
|
|
{content}
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{floatingActionButton}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
|
|
{columns.map(column => {
|
|
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
|
const other = params && params.other ? params.other : {};
|
|
|
|
return (
|
|
<BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
|
|
{SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn {...other} />}
|
|
</BundleContainer>
|
|
);
|
|
})}
|
|
|
|
{React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|