Convert MenuDroppoComponent component to an ES6 class (#7781)

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

ui/app/components/app/menu-droppo.js

@@ -1,33 +1,91 @@
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { inherits } from 'util'
 import { findDOMNode } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
 
-export default MenuDroppoComponent
+export default class MenuDroppoComponent extends Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    innerStyle: PropTypes.object,
+    children: PropTypes.node.isRequired,
+    onClickOutside: PropTypes.func.isRequired,
+    containerClassName: PropTypes.string,
+    zIndex: PropTypes.number,
+    style: PropTypes.object.isRequired,
+    useCssTransition: PropTypes.bool,
+    speed: PropTypes.string,
+  }
 
+  renderPrimary () {
+    const isOpen = this.props.isOpen
+    if (!isOpen) {
+      return null
+    }
 
-inherits(MenuDroppoComponent, Component)
-function MenuDroppoComponent () {
-  Component.call(this)
-}
+    const innerStyle = this.props.innerStyle || {}
 
-MenuDroppoComponent.prototype.render = function () {
-  const { containerClassName = '', style } = this.props
-  const speed = this.props.speed || '300ms'
-  const useCssTransition = this.props.useCssTransition
-  const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+    return (
+      <div className="menu-droppo" key="menu-droppo-drawer" style={innerStyle}>
+        {this.props.children}
+      </div>
+    )
+  }
 
-  this.manageListeners()
+  manageListeners () {
+    const isOpen = this.props.isOpen
+    const onClickOutside = this.props.onClickOutside
 
-  const baseStyle = Object.assign(
-    { position: 'fixed' },
-    style,
-    { zIndex },
-  )
+    if (isOpen) {
+      this.outsideClickHandler = onClickOutside
+    } else if (isOpen) {
+      this.outsideClickHandler = null
+    }
+  }
 
-  return (
-    <div style={baseStyle} className={`menu-droppo-container ${containerClassName}`}>
-      <style>{`
+  globalClickOccurred = (event) => {
+    const target = event.target
+    // eslint-disable-next-line react/no-find-dom-node
+    const container = findDOMNode(this)
+
+    if (target !== container &&
+      !isDescendant(this.container, event.target) &&
+      this.outsideClickHandler) {
+      this.outsideClickHandler(event)
+    }
+  }
+
+  componentDidMount () {
+    if (this && document.body) {
+      document.body.addEventListener('click', this.globalClickHandler)
+      // eslint-disable-next-line react/no-find-dom-node
+      const container = findDOMNode(this)
+      this.container = container
+    }
+  }
+
+  componentWillUnmount () {
+    if (this && document.body) {
+      document.body.removeEventListener('click', this.globalClickHandler)
+    }
+  }
+
+  render () {
+    const { containerClassName = '', style } = this.props
+    const speed = this.props.speed || '300ms'
+    const useCssTransition = this.props.useCssTransition
+    const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+
+    this.manageListeners()
+
+    const baseStyle = Object.assign(
+      { position: 'fixed' },
+      style,
+      { zIndex },
+    )
+
+    return (
+      <div style={baseStyle} className={`menu-droppo-container ${containerClassName}`}>
+        <style>{`
           .menu-droppo-enter {
             transition: transform ${speed} ease-in-out;
             transform: translateY(-200%);
@@ -48,76 +106,23 @@ MenuDroppoComponent.prototype.render = function () {
             transform: translateY(-200%);
           }
         `}
-      </style>
-      {
-        useCssTransition
-          ? (
-            <ReactCSSTransitionGroup
-              className="css-transition-group"
-              transitionName="menu-droppo"
-              transitionEnterTimeout={parseInt(speed)}
-              transitionLeaveTimeout={parseInt(speed)}
-            >
-              {this.renderPrimary()}
-            </ReactCSSTransitionGroup>
-          )
-          : this.renderPrimary()
-      }
-    </div>
-  )
-}
-
-MenuDroppoComponent.prototype.renderPrimary = function () {
-  const isOpen = this.props.isOpen
-  if (!isOpen) {
-    return null
-  }
-
-  const innerStyle = this.props.innerStyle || {}
-
-  return (
-    <div className="menu-droppo" key="menu-droppo-drawer" style={innerStyle}>
-      {this.props.children}
-    </div>
-  )
-}
-
-MenuDroppoComponent.prototype.manageListeners = function () {
-  const isOpen = this.props.isOpen
-  const onClickOutside = this.props.onClickOutside
-
-  if (isOpen) {
-    this.outsideClickHandler = onClickOutside
-  } else if (isOpen) {
-    this.outsideClickHandler = null
-  }
-}
-
-MenuDroppoComponent.prototype.componentDidMount = function () {
-  if (this && document.body) {
-    this.globalClickHandler = this.globalClickOccurred.bind(this)
-    document.body.addEventListener('click', this.globalClickHandler)
-    // eslint-disable-next-line react/no-find-dom-node
-    const container = findDOMNode(this)
-    this.container = container
-  }
-}
-
-MenuDroppoComponent.prototype.componentWillUnmount = function () {
-  if (this && document.body) {
-    document.body.removeEventListener('click', this.globalClickHandler)
-  }
-}
-
-MenuDroppoComponent.prototype.globalClickOccurred = function (event) {
-  const target = event.target
-  // eslint-disable-next-line react/no-find-dom-node
-  const container = findDOMNode(this)
-
-  if (target !== container &&
-    !isDescendant(this.container, event.target) &&
-    this.outsideClickHandler) {
-    this.outsideClickHandler(event)
+        </style>
+        {
+          useCssTransition
+            ? (
+              <ReactCSSTransitionGroup
+                className="css-transition-group"
+                transitionName="menu-droppo"
+                transitionEnterTimeout={parseInt(speed)}
+                transitionLeaveTimeout={parseInt(speed)}
+              >
+                {this.renderPrimary()}
+              </ReactCSSTransitionGroup>
+            )
+            : this.renderPrimary()
+        }
+      </div>
+    )
   }
 }