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 Mascot component to an ES6 class (#7787)

Browse Source
This commit is contained in:
Whymarrh Whitby 2020-01-13 10:42:58 -03:30 committed by GitHub
parent 82ef9674f2
commit d802e09a8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
ui/app/components/ui/mascot.js
View File

@ -1,62 +1,70 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import { inherits } from 'util'
import metamaskLogo from 'metamask-logo' import metamaskLogo from 'metamask-logo'
import debounce from 'debounce' import debounce from 'debounce'
export default Mascot export default class Mascot extends Component {
static propTypes = {
inherits(Mascot, Component) animationEventEmitter: PropTypes.object.isRequired,
function Mascot ({ width = '200', height = '200' }) { width: PropTypes.string,
Component.call(this) height: PropTypes.string,
this.logo = metamaskLogo({
followMouse: true,
pxNotRatio: true,
width,
height,
})
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
Mascot.prototype.render = function Mascot () {
// this is a bit hacky
// the event emitter is on `this.props`
// and we dont get that until render
this.handleAnimationEvents()
return (
<div
id="metamask-mascot-container"
style={{ zIndex: 0 }}
/>
)
}
Mascot.prototype.componentDidMount = function () {
const targetDivId = 'metamask-mascot-container'
const container = document.getElementById(targetDivId)
container.appendChild(this.logo.container)
}
Mascot.prototype.componentWillUnmount = function () {
this.animations = this.props.animationEventEmitter
this.animations.removeAllListeners()
this.logo.container.remove()
this.logo.stopAnimation()
}
Mascot.prototype.handleAnimationEvents = function () {
// only setup listeners once
if (this.animations) {
return
} }
this.animations = this.props.animationEventEmitter
this.animations.on('point', this.lookAt.bind(this))
this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo))
}
Mascot.prototype.lookAt = function (target) { constructor (props) {
this.unfollowMouse() super(props)
this.logo.lookAt(target)
this.refollowMouse() const { width = '200', height = '200' } = props
this.logo = metamaskLogo({
followMouse: true,
pxNotRatio: true,
width,
height,
})
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
handleAnimationEvents () {
// only setup listeners once
if (this.animations) {
return
}
this.animations = this.props.animationEventEmitter
this.animations.on('point', this.lookAt.bind(this))
this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo))
}
lookAt (target) {
this.unfollowMouse()
this.logo.lookAt(target)
this.refollowMouse()
}
componentDidMount () {
const targetDivId = 'metamask-mascot-container'
const container = document.getElementById(targetDivId)
container.appendChild(this.logo.container)
}
componentWillUnmount () {
this.animations = this.props.animationEventEmitter
this.animations.removeAllListeners()
this.logo.container.remove()
this.logo.stopAnimation()
}
render () {
// this is a bit hacky
// the event emitter is on `this.props`
// and we dont get that until render
this.handleAnimationEvents()
return (
<div
id="metamask-mascot-container"
style={{ zIndex: 0 }}
/>
)
}
} }