Rerender modal on property changes (#4175)

Render function for BundleContainer must not be methods.
React doesn't know dependency of the method, so they won't rerender on property updates.

In this case, when you close modal and open another modal immediately,
old modal will be open instead of new one.
This commit is contained in:
unarist 2017-07-13 03:51:44 +09:00 committed by Eugen Rochko
parent c45a75ad34
commit 5abb3d8150

View file

@ -54,12 +54,6 @@ export default class ModalRoot extends React.PureComponent {
return { opacity: spring(0), scale: spring(0.98) }; return { opacity: spring(0), scale: spring(0.98) };
} }
renderModal = (SpecificComponent) => {
const { props, onClose } = this.props;
return <SpecificComponent {...props} onClose={onClose} />;
}
renderLoading = () => { renderLoading = () => {
return <ModalLoading />; return <ModalLoading />;
} }
@ -95,7 +89,9 @@ export default class ModalRoot extends React.PureComponent {
<div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}> <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} /> <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
<div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}> <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>{this.renderModal}</BundleContainer> <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
</BundleContainer>
</div> </div>
</div> </div>
))} ))}