From 3d378ed0b42eab98f74ba1572924029e7d6992ac Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Fri, 28 Jul 2017 22:55:13 +0200 Subject: [PATCH] fix(tabs_bar): Allow animation to end before navigating (#4429) * fix(tabs_bar): Allow animation to end before navigating * fix(tabs_bar): Do not use event.path --- .../features/ui/components/tabs_bar.js | 36 +++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js index 4d488f82d..7e6a65cdb 100644 --- a/app/javascript/mastodon/features/ui/components/tabs_bar.js +++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import NavLink from 'react-router-dom/NavLink'; import { FormattedMessage, injectIntl } from 'react-intl'; +import { debounce } from 'lodash'; export const links = [ , @@ -25,16 +26,47 @@ export function getLink (index) { @injectIntl export default class TabsBar extends React.Component { + static contextTypes = { + router: PropTypes.object.isRequired, + } + static propTypes = { intl: PropTypes.object.isRequired, } + setRef = ref => { + this.node = ref; + } + + handleClick = (e) => { + e.preventDefault(); + e.persist(); + + requestAnimationFrame(() => { + const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link')); + const currentTab = tabs.find(tab => tab.classList.contains('active')); + const nextTab = tabs.find(tab => tab.contains(e.target)); + const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)]; + + currentTab.classList.remove('active'); + + const listener = debounce(() => { + nextTab.removeEventListener('transitionend', listener); + this.context.router.history.push(to); + }, 50); + + nextTab.addEventListener('transitionend', listener); + nextTab.classList.add('active'); + }); + + } + render () { const { intl: { formatMessage } } = this.props; return ( -