From 54039e9d3b004ee8d044142ef7ac652d523b67a3 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Wed, 2 Jul 2014 16:53:56 -0700
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20use=20state.=20Modify=20the=20d?=
 =?UTF-8?q?om=20directly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/highlight-component.coffee | 40 ++++++++++++++--------------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/highlight-component.coffee b/src/highlight-component.coffee
index 781d44b30..a8eb10e27 100644
--- a/src/highlight-component.coffee
+++ b/src/highlight-component.coffee
@@ -8,41 +8,33 @@ HighlightComponent = React.createClass
 
   render: ->
     {startPixelPosition, endPixelPosition, decoration} = @props
-    {flash} = @state
 
     className = 'highlight'
     className += " #{decoration.class}" if decoration.class?
 
-    if flash?
-      className += " #{flash.class}"
-      @flashTimeout = setTimeout(@turnOffFlash, flash.duration ? 500)
-
     div {className},
       if endPixelPosition.top is startPixelPosition.top
         @renderSingleLineRegions()
       else
         @renderMultiLineRegions()
 
-  componentWillMount: ->
-    @state.flash = @props.decoration.flash
+  componentDidMount: ->
+    @startFlashAnimation() if @props.decoration.flash?
 
-  componentWillUpdate: (newProps) ->
-    if newProps.decoration.flash?
-      if @flashTimeout?
-        # This happens when re-rendered before the flash finishes. We need to
-        # render _without_ the flash class first, then re-render with the
-        # flash class. Otherwise there will be no flash.
-        clearTimeout(@flashTimeout)
-        setImmediate => @setState(flash: newProps.decoration.flash)
-        @flashTimeout = null
-        @state.flash = null
-      else
-        @state.flash = newProps.decoration.flash
+  componentDidUpdate: ->
+    @startFlashAnimation() if @props.decoration.flash?
 
-  turnOffFlash: ->
-    clearTimeout(@flashTimeout)
-    @flashTimeout = null
-    @setState(flash: null)
+  startFlashAnimation: ->
+    {flash} = @props.decoration
+
+    node = @getDOMNode()
+    node.classList.remove(flash.class)
+
+    requestAnimationFrame =>
+      node.classList.add(flash.class)
+      clearTimeout(@flashTimeoutId)
+      removeFlashClass = -> node.classList.remove(flash.class)
+      @flashTimeoutId = setTimeout(removeFlashClass, flash.duration ? 500)
 
   renderSingleLineRegions: ->
     {startPixelPosition, endPixelPosition, lineHeightInPixels} = @props
@@ -91,4 +83,4 @@ HighlightComponent = React.createClass
     regions
 
   shouldComponentUpdate: (newProps, newState) ->
-    newState.flash isnt @state.flash or not isEqualForProperties(newProps, @props, 'startPixelPosition', 'endPixelPosition', 'lineHeightInPixels')
+    not isEqualForProperties(newProps, @props, 'startPixelPosition', 'endPixelPosition', 'lineHeightInPixels')