Improve performance of modal and swipe animations (#5135)
* Improve performance of modal and swipe animations * Fix eslint issueslolsob-rspec
parent
0f0791c563
commit
c74512f7af
|
@ -84,14 +84,17 @@ export default class MediaModal extends ImmutablePureComponent {
|
||||||
return null;
|
return null;
|
||||||
}).toArray();
|
}).toArray();
|
||||||
|
|
||||||
|
const containerStyle = {
|
||||||
|
alignItems: 'center', // center vertically
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='modal-root__modal media-modal'>
|
<div className='modal-root__modal media-modal'>
|
||||||
{leftNav}
|
{leftNav}
|
||||||
|
|
||||||
<div className='media-modal__content'>
|
<div className='media-modal__content'>
|
||||||
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
|
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
|
||||||
|
<ReactSwipeableViews containerStyle={containerStyle} onChangeIndex={this.handleSwipe} index={index}>
|
||||||
<ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index} animateHeight>
|
|
||||||
{content}
|
{content}
|
||||||
</ReactSwipeableViews>
|
</ReactSwipeableViews>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 BundleContainer from '../containers/bundle_container';
|
||||||
import BundleModalError from './bundle_modal_error';
|
import BundleModalError from './bundle_modal_error';
|
||||||
import ModalLoading from './modal_loading';
|
import ModalLoading from './modal_loading';
|
||||||
|
@ -35,6 +33,10 @@ export default class ModalRoot extends React.PureComponent {
|
||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
revealed: false,
|
||||||
|
};
|
||||||
|
|
||||||
handleKeyUp = (e) => {
|
handleKeyUp = (e) => {
|
||||||
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
||||||
&& !!this.props.type) {
|
&& !!this.props.type) {
|
||||||
|
@ -51,6 +53,8 @@ export default class ModalRoot extends React.PureComponent {
|
||||||
this.activeElement = document.activeElement;
|
this.activeElement = document.activeElement;
|
||||||
|
|
||||||
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
|
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.focus();
|
||||||
this.activeElement = null;
|
this.activeElement = null;
|
||||||
}
|
}
|
||||||
|
if (this.props.type) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
this.setState({ revealed: true });
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
|
@ -74,14 +83,6 @@ export default class ModalRoot extends React.PureComponent {
|
||||||
this.node = ref;
|
this.node = ref;
|
||||||
}
|
}
|
||||||
|
|
||||||
willEnter () {
|
|
||||||
return { opacity: 0, scale: 0.98 };
|
|
||||||
}
|
|
||||||
|
|
||||||
willLeave () {
|
|
||||||
return { opacity: spring(0), scale: spring(0.98) };
|
|
||||||
}
|
|
||||||
|
|
||||||
renderLoading = modalId => () => {
|
renderLoading = modalId => () => {
|
||||||
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
|
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
|
||||||
}
|
}
|
||||||
|
@ -94,38 +95,30 @@ export default class ModalRoot extends React.PureComponent {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { type, props, onClose } = this.props;
|
const { type, props, onClose } = this.props;
|
||||||
|
const { revealed } = this.state;
|
||||||
const visible = !!type;
|
const visible = !!type;
|
||||||
const items = [];
|
|
||||||
|
|
||||||
if (visible) {
|
if (!visible) {
|
||||||
items.push({
|
return (
|
||||||
key: type,
|
<div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
|
||||||
data: { type, props },
|
);
|
||||||
style: { opacity: spring(1), scale: spring(1, { stiffness: 120, damping: 14 }) },
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TransitionMotion
|
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
|
||||||
styles={items}
|
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
|
||||||
willEnter={this.willEnter}
|
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
|
||||||
willLeave={this.willLeave}
|
<div role='dialog' className='modal-root__container'>
|
||||||
>
|
{
|
||||||
{interpolatedStyles =>
|
visible ?
|
||||||
<div className='modal-root' ref={this.setRef}>
|
(<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
|
||||||
{interpolatedStyles.map(({ key, data: { type, props }, style }) => (
|
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
|
||||||
<div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
|
</BundleContainer>) :
|
||||||
<div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
|
null
|
||||||
<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}>
|
|
||||||
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
|
|
||||||
</BundleContainer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
}
|
</div>
|
||||||
</TransitionMotion>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
.modal-root__overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 9999;
|
|
||||||
opacity: 0;
|
|
||||||
background: rgba($base-overlay-background, 0.7);
|
background: rgba($base-overlay-background, 0.7);
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
@ -3007,7 +3011,6 @@ button.icon-button.active i.fa-retweet {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: space-around;
|
align-content: space-around;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue