Make GutterComponent a plain JS object instead of a React component

src/gutter-component.coffee

@@ -1,42 +1,29 @@
 _ = require 'underscore-plus'
-React = require 'react-atom-fork'
-{div} = require 'reactionary-atom-fork'
-{isEqual, isEqualForProperties, multiplyString, toArray} = _
-Decoration = require './decoration'
-SubscriberMixin = require './subscriber-mixin'
 
 WrapperDiv = document.createElement('div')
 
 module.exports =
-GutterComponent = React.createClass
-  displayName: 'GutterComponent'
-  mixins: [SubscriberMixin]
-
+class GutterComponent
   dummyLineNumberNode: null
-  measuredWidth: null
 
-  render: ->
-    div className: 'gutter',
-      div className: 'line-numbers', ref: 'lineNumbers'
-
-  componentWillMount: ->
+  constructor: ({@presenter, @onMouseDown, @editor}) ->
     @lineNumberNodesById = {}
 
-  componentDidMount: ->
-    @updateSync()
+    @domNode = document.createElement('div')
+    @domNode.classList.add('gutter')
+    @lineNumbersNode = document.createElement('div')
+    @lineNumbersNode.classList.add('line-numbers')
+    @domNode.appendChild(@lineNumbersNode)
 
-    node = @getDOMNode()
-    node.addEventListener 'click', @onClick
-    node.addEventListener 'mousedown', @onMouseDown
+    @domNode.addEventListener 'click', @onClick
+    @domNode.addEventListener 'mousedown', @onMouseDown
 
-  componentDidUpdate: ->
     @updateSync()
 
   updateSync: ->
-    @newState = @props.presenter.state.gutter
+    @newState = @presenter.state.gutter
     @oldState ?= {lineNumbers: {}}
 
-    @lineNumbersNode ?= @refs.lineNumbers.getDOMNode()
     @appendDummyLineNumber() unless @dummyLineNumberNode?
 
     if @newState.scrollHeight isnt @oldState.scrollHeight
@@ -64,7 +51,7 @@ GutterComponent = React.createClass
   appendDummyLineNumber: ->
     WrapperDiv.innerHTML = @buildLineNumberHTML({bufferRow: -1})
     @dummyLineNumberNode = WrapperDiv.children[0]
-    @refs.lineNumbers.getDOMNode().appendChild(@dummyLineNumberNode)
+    @lineNumbersNode.appendChild(@dummyLineNumberNode)
 
   updateDummyLineNumber: ->
     @dummyLineNumberNode.innerHTML = @buildLineNumberInnerHTML(0, false)
@@ -85,9 +72,9 @@ GutterComponent = React.createClass
 
     if newLineNumberIds?
       WrapperDiv.innerHTML = newLineNumbersHTML
-      newLineNumberNodes = toArray(WrapperDiv.children)
+      newLineNumberNodes = _.toArray(WrapperDiv.children)
 
-      node = @refs.lineNumbers.getDOMNode()
+      node = @lineNumbersNode
       for id, i in newLineNumberIds
         lineNumberNode = newLineNumberNodes[i]
         @lineNumberNodesById[id] = lineNumberNode
@@ -118,7 +105,7 @@ GutterComponent = React.createClass
     else
       lineNumber = (bufferRow + 1).toString()
 
-    padding = multiplyString(' ', maxLineNumberDigits - lineNumber.length)
+    padding = _.multiplyString(' ', maxLineNumberDigits - lineNumber.length)
     iconHTML = '<div class="icon-right"></div>'
     padding + lineNumber + iconHTML
 
@@ -149,21 +136,20 @@ GutterComponent = React.createClass
         return @lineNumberNodesById[id]
     null
 
-  onMouseDown: (event) ->
+  onMouseDown: (event) =>
     {target} = event
     lineNumber = target.parentNode
 
     unless target.classList.contains('icon-right') and lineNumber.classList.contains('foldable')
-      @props.onMouseDown(event)
+      @onMouseDown(event)
 
-  onClick: (event) ->
-    {editor} = @props
+  onClick: (event) =>
     {target} = event
     lineNumber = target.parentNode
 
     if target.classList.contains('icon-right') and lineNumber.classList.contains('foldable')
       bufferRow = parseInt(lineNumber.getAttribute('data-buffer-row'))
       if lineNumber.classList.contains('folded')
-        editor.unfoldBufferRow(bufferRow)
+        @editor.unfoldBufferRow(bufferRow)
       else
-        editor.foldBufferRow(bufferRow)
+        @editor.foldBufferRow(bufferRow)