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

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

@ -1,13 +1,20 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { inherits } from 'util'
import metamaskLogo from 'metamask-logo'
import debounce from 'debounce'
export default Mascot
export default class Mascot extends Component {
static propTypes = {
animationEventEmitter: PropTypes.object.isRequired,
width: PropTypes.string,
height: PropTypes.string,
}
constructor (props) {
super(props)
const { width = '200', height = '200' } = props
inherits(Mascot, Component)
function Mascot ({ width = '200', height = '200' }) {
Component.call(this)
this.logo = metamaskLogo({
followMouse: true,
pxNotRatio: true,
@ -19,7 +26,36 @@ function Mascot ({ width = '200', height = '200' }) {
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
Mascot.prototype.render = function Mascot () {
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
@ -31,32 +67,4 @@ Mascot.prototype.render = function Mascot () {
/>
)
}
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) {
this.unfollowMouse()
this.logo.lookAt(target)
this.refollowMouse()
}