Convert Mascot component to an ES6 class (#7787)

ui/app/components/ui/mascot.js

@@ -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()
 }