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,44 +26,45 @@ function Mascot ({ width = '200', height = '200' }) {
     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 }}
-    />
-  )
+  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()
   }
 
-Mascot.prototype.componentDidMount = function () {
+  componentDidMount () {
     const targetDivId = 'metamask-mascot-container'
     const container = document.getElementById(targetDivId)
     container.appendChild(this.logo.container)
   }
 
-Mascot.prototype.componentWillUnmount = function () {
+  componentWillUnmount () {
     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))
+  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 }}
+      />
+    )
   }
-
-Mascot.prototype.lookAt = function (target) {
-  this.unfollowMouse()
-  this.logo.lookAt(target)
-  this.refollowMouse()
 }