Convert MenuDroppoComponent component to JSX (#7531)

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

@@ -1,5 +1,4 @@
-const Component = require('react').Component
+import React, { Component } from 'react'
-const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const findDOMNode = require('react-dom').findDOMNode
 const ReactCSSTransitionGroup = require('react-transition-group/CSSTransitionGroup')
@@ -27,41 +26,44 @@ MenuDroppoComponent.prototype.render = function () {
   style.zIndex = zIndex
 
   return (
-    h('div', {
+    <div style={style} className={`menu-droppo-container ${containerClassName}`}>
-      style,
+      <style>{`
-      className: `.menu-droppo-container ${containerClassName}`,
+          .menu-droppo-enter {
-    }, [
+            transition: transform ${speed} ease-in-out;
-      h('style', `
+            transform: translateY(-200%);
-        .menu-droppo-enter {
+          }
-          transition: transform ${speed} ease-in-out;
+
-          transform: translateY(-200%);
+          .menu-droppo-enter.menu-droppo-enter-active {
-        }
+            transition: transform ${speed} ease-in-out;
-
+            transform: translateY(0%);
-        .menu-droppo-enter.menu-droppo-enter-active {
+          }
-          transition: transform ${speed} ease-in-out;
+
-          transform: translateY(0%);
+          .menu-droppo-leave {
-        }
+            transition: transform ${speed} ease-in-out;
-
+            transform: translateY(0%);
-        .menu-droppo-leave {
+          }
-          transition: transform ${speed} ease-in-out;
+
-          transform: translateY(0%);
+          .menu-droppo-leave.menu-droppo-leave-active {
-        }
+            transition: transform ${speed} ease-in-out;
-
+            transform: translateY(-200%);
-        .menu-droppo-leave.menu-droppo-leave-active {
+          }
-          transition: transform ${speed} ease-in-out;
+        `}
-          transform: translateY(-200%);
+      </style>
-        }
+      {
-      `),
+        useCssTransition
-
+          ? (
-      useCssTransition
+            <ReactCSSTransitionGroup
-        ? h(ReactCSSTransitionGroup, {
+              className="css-transition-group"
-          className: 'css-transition-group',
+              transitionName="menu-droppo"
-          transitionName: 'menu-droppo',
+              transitionEnterTimeout={parseInt(speed)}
-          transitionEnterTimeout: parseInt(speed),
+              transitionLeaveTimeout={parseInt(speed)}
-          transitionLeaveTimeout: parseInt(speed),
+            >
-        }, this.renderPrimary())
+              {this.renderPrimary()}
-        : this.renderPrimary(),
+            </ReactCSSTransitionGroup>
-    ])
+          )
+          : this.renderPrimary()
+      }
+    </div>
   )
 }
 
@@ -74,11 +76,9 @@ MenuDroppoComponent.prototype.renderPrimary = function () {
   const innerStyle = this.props.innerStyle || {}
 
   return (
-    h('.menu-droppo', {
+    <div className="menu-droppo" key="menu-droppo-drawer" style={innerStyle}>
-      key: 'menu-droppo-drawer',
+      {this.props.children}
-      style: innerStyle,
+    </div>
-    },
-    [ this.props.children ])
   )
 }