Convert Mascot component to an ES6 class (#7787)

feature/default_network_editable
Whymarrh Whitby 5 years ago committed by GitHub
parent 82ef9674f2
commit d802e09a8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 106
      ui/app/components/ui/mascot.js

@ -1,62 +1,70 @@
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,
}
inherits(Mascot, Component)
function Mascot ({ width = '200', height = '200' }) {
Component.call(this)
this.logo = metamaskLogo({
followMouse: true,
pxNotRatio: true,
width,
height,
})
constructor (props) {
super(props)
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
const { width = '200', height = '200' } = props
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 }}
/>
)
}
this.logo = metamaskLogo({
followMouse: true,
pxNotRatio: true,
width,
height,
})
Mascot.prototype.componentDidMount = function () {
const targetDivId = 'metamask-mascot-container'
const container = document.getElementById(targetDivId)
container.appendChild(this.logo.container)
}
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
}
Mascot.prototype.componentWillUnmount = function () {
this.animations = this.props.animationEventEmitter
this.animations.removeAllListeners()
this.logo.container.remove()
this.logo.stopAnimation()
}
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))
}
Mascot.prototype.handleAnimationEvents = function () {
// only setup listeners once
if (this.animations) {
return
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)
}
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()
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 }}
/>
)
}
}

Loading…
Cancel
Save