Convert Mascot component to an ES6 class (#7787)

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
-
-inherits(Mascot, Component)
-function Mascot ({ width = '200', height = '200' }) {
-  Component.call(this)
-  this.logo = metamaskLogo({
-    followMouse: true,
-    pxNotRatio: true,
-    width,
-    height,
-  })
-
-  this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
-  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 }}
-    />
-  )
-}
-
-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
+export default class Mascot extends Component {
+  static propTypes = {
+    animationEventEmitter: PropTypes.object.isRequired,
+    width: PropTypes.string,
+    height: PropTypes.string,
   }
-  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()
+  constructor (props) {
+    super(props)
+
+    const { width = '200', height = '200' } = props
+
+    this.logo = metamaskLogo({
+      followMouse: true,
+      pxNotRatio: true,
+      width,
+      height,
+    })
+
+    this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
+    this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
+  }
+
+  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
+    this.handleAnimationEvents()
+    return (
+      <div
+        id="metamask-mascot-container"
+        style={{ zIndex: 0 }}
+      />
+    )
+  }
 }