mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
commit
d811999090
@ -8,12 +8,11 @@ module.exports = MenuDroppoComponent
|
|||||||
|
|
||||||
|
|
||||||
inherits(MenuDroppoComponent, Component)
|
inherits(MenuDroppoComponent, Component)
|
||||||
function MenuDroppoComponent() {
|
function MenuDroppoComponent () {
|
||||||
Component.call(this)
|
Component.call(this)
|
||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.render = function() {
|
MenuDroppoComponent.prototype.render = function () {
|
||||||
|
|
||||||
const speed = this.props.speed || '300ms'
|
const speed = this.props.speed || '300ms'
|
||||||
const useCssTransition = this.props.useCssTransition
|
const useCssTransition = this.props.useCssTransition
|
||||||
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
|
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
|
||||||
@ -52,31 +51,25 @@ MenuDroppoComponent.prototype.render = function() {
|
|||||||
}
|
}
|
||||||
`),
|
`),
|
||||||
|
|
||||||
!!useCssTransition
|
useCssTransition
|
||||||
? h(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()
|
: this.renderPrimary(),
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.renderPrimary = function() {
|
MenuDroppoComponent.prototype.renderPrimary = function () {
|
||||||
const isOpen = this.props.isOpen
|
const isOpen = this.props.isOpen
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
return null
|
return null
|
||||||
return h('span', {
|
|
||||||
key: 'menu-droppo-null',
|
|
||||||
style: {
|
|
||||||
height: '0px',
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let innerStyle = this.props.innerStyle || {}
|
const innerStyle = this.props.innerStyle || {}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.menu-droppo', {
|
h('.menu-droppo', {
|
||||||
@ -87,7 +80,7 @@ MenuDroppoComponent.prototype.renderPrimary = function() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.manageListeners = function() {
|
MenuDroppoComponent.prototype.manageListeners = function () {
|
||||||
const isOpen = this.props.isOpen
|
const isOpen = this.props.isOpen
|
||||||
const onClickOutside = this.props.onClickOutside
|
const onClickOutside = this.props.onClickOutside
|
||||||
|
|
||||||
@ -98,40 +91,40 @@ MenuDroppoComponent.prototype.manageListeners = function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.componentDidMount = function() {
|
MenuDroppoComponent.prototype.componentDidMount = function () {
|
||||||
if (this && document.body) {
|
if (this && document.body) {
|
||||||
this.globalClickHandler = this.globalClickOccurred.bind(this);
|
this.globalClickHandler = this.globalClickOccurred.bind(this)
|
||||||
document.body.addEventListener('click', this.globalClickHandler)
|
document.body.addEventListener('click', this.globalClickHandler)
|
||||||
var container = findDOMNode(this)
|
var container = findDOMNode(this)
|
||||||
this.container = container
|
this.container = container
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.componentWillUnmount = function() {
|
MenuDroppoComponent.prototype.componentWillUnmount = function () {
|
||||||
if (this && document.body) {
|
if (this && document.body) {
|
||||||
document.body.removeEventListener('click', this.globalClickHandler)
|
document.body.removeEventListener('click', this.globalClickHandler)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.globalClickOccurred = function(event) {
|
MenuDroppoComponent.prototype.globalClickOccurred = function (event) {
|
||||||
const target = event.target
|
const target = event.target
|
||||||
const container = findDOMNode(this)
|
const container = findDOMNode(this)
|
||||||
const isOpen = this.props.isOpen
|
|
||||||
|
|
||||||
if (target !== container &&
|
if (target !== container &&
|
||||||
!isDescendant(this.container, event.target) &&
|
!isDescendant(this.container, event.target) &&
|
||||||
this.outsideClickHandler) {
|
this.outsideClickHandler) {
|
||||||
this.outsideClickHandler(event)
|
this.outsideClickHandler(event)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function isDescendant(parent, child) {
|
function isDescendant (parent, child) {
|
||||||
var node = child.parentNode;
|
var node = child.parentNode
|
||||||
while (node != null) {
|
while (node !== null) {
|
||||||
if (node == parent) {
|
if (node === parent) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
node = node.parentNode;
|
node = node.parentNode
|
||||||
}
|
}
|
||||||
return false;
|
|
||||||
|
return false
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user