m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert MenuDroppoComponent component to JSX (#7531)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-23 12:49:36 -03:30 committed by GitHub
parent 4281407723
commit 4fe147f82f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
ui/app/components/app/menu-droppo.js
View File

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