about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorunarist <m.unarist@gmail.com>2017-07-13 03:51:44 +0900
committerEugen Rochko <eugen@zeonfederated.com>2017-07-12 20:51:44 +0200
commit5abb3d815025675d1493da4f8c6e4dda4a6672e9 (patch)
tree239fa7e5164048f3534d199e293d93219968386f /app/javascript
parentc45a75ad3419f15d639138ac34c320323367c870 (diff)
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 (limited to 'app/javascript')
-rw-r--r--app/javascript/mastodon/features/ui/components/modal_root.js10
1 files 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
index 085299038..4240871a7 100644
--- 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>
             ))}