Manage the menu button using messages + prevent re-mounting on resize (…

…#651) Changes: - Send displayMenuButton (Boolean) to the current app. - Deprecate `menuPanel` in favor of `requestMenu: true` to display the menu panel from an app. - Prevent re-mounting the children of Wrapper on resize.
aragon · Mar 19, 2019 · 694a70b · 694a70b
1 parent bb02b8b
commit 694a70b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -62,10 +62,6 @@ class Wrapper extends React.PureComponent {
     walletWeb3: null,
   }
 
-  componentDidUpdate(prevProps) {
-    this.updateAutoClosingPanel(prevProps)
-  }
-
   state = {
     appInstance: {},
     menuPanelOpened: !this.props.autoClosingPanel,
@@ -74,10 +70,26 @@ class Wrapper extends React.PureComponent {
     queuedNotifications: [],
   }
 
+  componentDidUpdate(prevProps) {
+    this.updateAutoClosingPanel(prevProps)
+  }
+
   updateAutoClosingPanel(prevProps) {
     const { autoClosingPanel } = this.props
     if (autoClosingPanel !== prevProps.autoClosingPanel) {
       this.setState({ menuPanelOpened: !autoClosingPanel })
+      this.sendDisplayMenuButtonStatus()
+    }
+  }
+
+  sendDisplayMenuButtonStatus() {
+    const { autoClosingPanel } = this.props
+    if (this.appIFrame) {
+      this.appIFrame.sendMessage({
+        from: 'wrapper',
+        name: 'displayMenuButton',
+        value: autoClosingPanel,
+      })
     }
   }
 
@@ -89,9 +101,11 @@ class Wrapper extends React.PureComponent {
     const { historyPush, locator } = this.props
     historyPush(getAppPath({ dao: locator.dao, instanceId, params }))
   }
+
   handleAppIFrameRef = appIFrame => {
     this.appIFrame = appIFrame
   }
+
   handleAppIFrameLoad = async event => {
     const {
       apps,
@@ -107,15 +121,23 @@ class Wrapper extends React.PureComponent {
     }
 
     await wrapper.connectAppIFrame(event.target, instanceId)
+
     this.appIFrame.sendMessage({
       from: 'wrapper',
       name: 'ready',
       value: true,
     })
+    this.sendDisplayMenuButtonStatus()
   }
   handleAppMessage = ({ data: { name, value } }) => {
-    if (name === 'menuPanel') {
-      this.setState({ menuPanelOpened: Boolean(value) })
+    if (
+      // “menuPanel: Boolean” is deprecated but still supported for a while if
+      // value is `true`.
+      name === 'menuPanel' ||
+      // “requestMenu: true” should now be used.
+      name === 'requestMenu'
+    ) {
+      this.setState({ menuPanelOpened: value === true })
     }
   }
   handleMenuPanelOpen = () => {

diff --git a/src/components/MenuPanel/SwipeContainer.js b/src/components/MenuPanel/SwipeContainer.js
@@ -29,14 +29,11 @@ class SwipeContainer extends React.Component {
       onMenuPanelOpen,
       width,
     } = this.props
-    const oneThirdWindowWidth = width / 3
 
-    if (!enabled) {
-      return <Container>{children(Number(menuPanelOpened))}</Container>
-    }
+    const oneThirdWindowWidth = width / 3
 
     return (
-      <Gesture passive={{ passive: false }} mouse={false}>
+      <Gesture passive={{ passive: false }} mouse={false} touch={enabled}>
         {({
           delta: [xDelta, yDelta],
           direction: [xDir, yDir],
@@ -45,6 +42,10 @@ class SwipeContainer extends React.Component {
           initial: [xInitial],
           xy: [x],
         }) => {
+          if (!enabled) {
+            return <Container>{children(Number(menuPanelOpened))}</Container>
+          }
+
           if (
             !down &&
             this._previousProgress > 0 &&