logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: 361a606edb8d9325fe8962d722f5703907cce4f4
parent: df92f010ad5acd72b28e6d49c028f9123e92cf06
Author: unarist <m.unarist@gmail.com>
Date:   Mon, 22 May 2017 22:01:27 +0900

Keep children of the column-collapsable until the transition is completed (#3218)


Diffstat:

Mapp/javascript/mastodon/components/column_collapsable.js13+++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js @@ -13,30 +13,35 @@ class ColumnCollapsable extends React.PureComponent { state = { collapsed: true, + animating: false, }; handleToggleCollapsed = () => { const currentState = this.state.collapsed; - this.setState({ collapsed: !currentState }); + this.setState({ collapsed: !currentState, animating: true }); if (!currentState && this.props.onCollapse) { this.props.onCollapse(); } } + handleTransitionEnd = () => { + this.setState({ animating: false }); + } + render () { const { icon, title, fullHeight, children } = this.props; - const { collapsed } = this.state; + const { collapsed, animating } = this.state; return ( - <div className={`column-collapsable ${collapsed ? 'collapsed' : ''}`}> + <div className={`column-collapsable ${collapsed ? 'collapsed' : ''}`} onTransitionEnd={this.handleTransitionEnd}> <div role='button' tabIndex='0' title={`${title}`} className='column-collapsable__button column-icon' onClick={this.handleToggleCollapsed}> <i className={`fa fa-${icon}`} /> </div> <div className='column-collapsable__content' style={{ height: `${fullHeight}px` }}> - {!collapsed && children} + {(!collapsed || animating) && children} </div> </div> );