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