Improve performance of modal and swipe animations (#5135)

* Improve performance of modal and swipe animations

* Fix eslint issues
pull/165/head
Nolan Lawson 2017-09-28 11:43:18 -07:00 committed by Eugen Rochko
parent 3406e30526
commit 6e0659c838
3 changed files with 40 additions and 41 deletions

View File

@ -84,14 +84,17 @@ export default class MediaModal extends ImmutablePureComponent {
return null;
}).toArray();
const containerStyle = {
alignItems: 'center', // center vertically
};
return (
<div className='modal-root__modal media-modal'>
{leftNav}
<div className='media-modal__content'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index} animateHeight>
<ReactSwipeableViews containerStyle={containerStyle} onChangeIndex={this.handleSwipe} index={index}>
{content}
</ReactSwipeableViews>
</div>

View File

@ -1,7 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import spring from 'react-motion/lib/spring';
import BundleContainer from '../containers/bundle_container';
import BundleModalError from './bundle_modal_error';
import ModalLoading from './modal_loading';
@ -35,6 +33,10 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired,
};
state = {
revealed: false,
};
handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.type) {
@ -51,6 +53,8 @@ export default class ModalRoot extends React.PureComponent {
this.activeElement = document.activeElement;
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
} else if (!nextProps.type) {
this.setState({ revealed: false });
}
}
@ -60,6 +64,11 @@ export default class ModalRoot extends React.PureComponent {
this.activeElement.focus();
this.activeElement = null;
}
if (this.props.type) {
requestAnimationFrame(() => {
this.setState({ revealed: true });
});
}
}
componentWillUnmount () {
@ -74,14 +83,6 @@ export default class ModalRoot extends React.PureComponent {
this.node = ref;
}
willEnter () {
return { opacity: 0, scale: 0.98 };
}
willLeave () {
return { opacity: spring(0), scale: spring(0.98) };
}
renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
}
@ -94,38 +95,30 @@ export default class ModalRoot extends React.PureComponent {
render () {
const { type, props, onClose } = this.props;
const { revealed } = this.state;
const visible = !!type;
const items = [];
if (visible) {
items.push({
key: type,
data: { type, props },
style: { opacity: spring(1), scale: spring(1, { stiffness: 120, damping: 14 }) },
});
if (!visible) {
return (
<div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
);
}
return (
<TransitionMotion
styles={items}
willEnter={this.willEnter}
willLeave={this.willLeave}
>
{interpolatedStyles =>
<div className='modal-root' ref={this.setRef}>
{interpolatedStyles.map(({ key, data: { type, props }, style }) => (
<div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
<div role='dialog' className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
<div role='dialog' className='modal-root__container'>
{
visible ?
(<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
</BundleContainer>
</div>
</div>
))}
</div>
</BundleContainer>) :
null
}
</TransitionMotion>
</div>
</div>
</div>
);
}

View File

@ -2983,14 +2983,18 @@ button.icon-button.active i.fa-retweet {
}
}
.modal-root {
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}
.modal-root__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
opacity: 0;
background: rgba($base-overlay-background, 0.7);
transform: translateZ(0);
}
@ -3007,7 +3011,6 @@ button.icon-button.active i.fa-retweet {
justify-content: center;
align-content: space-around;
z-index: 9999;
opacity: 0;
pointer-events: none;
user-select: none;
}