mastofe

commit: 5abb3d815025675d1493da4f8c6e4dda4a6672e9
parent: c45a75ad3419f15d639138ac34c320323367c870
Author: unarist <m.unarist@gmail.com>
Date:   Thu, 13 Jul 2017 03:51:44 +0900

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.
Diffstat:
M
app/javascript/mastodon/features/ui/components/modal_root.js
10
+++-------

1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -54,12 +54,6 @@ export default class ModalRoot extends React.PureComponent {
     return { opacity: spring(0), scale: spring(0.98) };
   }
 
-  renderModal = (SpecificComponent) => {
-    const { props, onClose } = this.props;
-
-    return <SpecificComponent {...props} onClose={onClose} />;
-  }
-
   renderLoading = () => {
     return <ModalLoading />;
   }
@@ -95,7 +89,9 @@ export default class ModalRoot extends React.PureComponent {
               <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
                 <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})` }}>
-                  <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>
             ))}