Convert Mascot component to an ES6 class (#7787)
parent
82ef9674f2
commit
d802e09a8b
@ -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…
Reference in new issue