   scroll: (var_args) ->
     # NOTE(steida): scroll doesn't work anymore for some reason.
     # http://www.polymer-project.org/platform/pointer-events.html
-    @createTouchableTags arguments, 'pan-x pan-y'
+    @createTouchableComponents arguments, 'pan-x pan-y'
 
   ###*
     @param {Arguments} tags
     @param {string} touchAction
     @return {Object}
-    @private
   ###
-  createTouchableTags: (tags, touchAction) ->
+  createTouchableComponents: (tags, touchAction) ->
     obj = {}
-    for tag in tags
-      obj[tag] = React.createClass
-        render: ->
-          @transferPropsTo React.DOM[tag] null, @props.children
+    obj[tag] = @createTouchableComponent tag, touchAction for tag in tags
+    obj
 
-        componentDidMount: ->
-          @getDOMNode().setAttribute 'touch-action', touchAction
-          goog.events.listen @getDOMNode(), 'pointerdown', @onPointerDown
-          goog.events.listen @getDOMNode(), 'pointerup', @onPointerUp
+  ###*
+    @param {string} tag
+    @param {string} touchAction
+    @return {function(): React.ReactComponent}
+  ###
+  createTouchableComponent: (tag, touchAction) ->
+    React.createClass
+      render: ->
+        @transferPropsTo React.DOM[tag] null, @props.children
 
-        componentWillUnmount: ->
-          goog.events.unlisten @getDOMNode(), 'pointerdown', @onPointerDown
-          goog.events.unlisten @getDOMNode(), 'pointerup', @onPointerUp
+      componentDidMount: ->
+        @getDOMNode().setAttribute 'touch-action', touchAction
+        goog.events.listen @getDOMNode(), 'pointerdown', @onPointerDown
+        goog.events.listen @getDOMNode(), 'pointerup', @onPointerUp
 
-        onPointerDown: (e) ->
-          goog.dom.classlist.add @getDOMNode(), 'touch-hover'
-          @removeTouchHoverBeforeTouchCallout()
-          return if !this.props.onPointerDown
-          this.props.onPointerDown e
+      componentWillUnmount: ->
+        goog.events.unlisten @getDOMNode(), 'pointerdown', @onPointerDown
+        goog.events.unlisten @getDOMNode(), 'pointerup', @onPointerUp
 
-        onPointerUp: (e) ->
+      onPointerDown: (e) ->
+        goog.dom.classlist.add @getDOMNode(), 'touch-hover'
+        @removeTouchHoverBeforeTouchCallout()
+        return if !this.props.onPointerDown
+        this.props.onPointerDown e
+
+      onPointerUp: (e) ->
+        goog.dom.classlist.remove @getDOMNode(), 'touch-hover'
+        clearTimeout @touchHoverHideTimer
+        return if !this.props.onPointerUp
+        this.props.onPointerUp e
+
+      removeTouchHoverBeforeTouchCallout: ->
+        clearTimeout @touchHoverHideTimer
+        @touchHoverHideTimer = setTimeout =>
+          return if !@isMounted()
           goog.dom.classlist.remove @getDOMNode(), 'touch-hover'
-          clearTimeout @touchHoverHideTimer
-          return if !this.props.onPointerUp
-          this.props.onPointerUp e
-
-        removeTouchHoverBeforeTouchCallout: ->
-          clearTimeout @touchHoverHideTimer
-          @touchHoverHideTimer = setTimeout =>
-            return if !@isMounted()
-            goog.dom.classlist.remove @getDOMNode(), 'touch-hover'
-          , Touch.CALLOUT_DELAY
-
-    obj+        , Touch.CALLOUT_DELAY
goog.provide 'app.react.Touch'

goog.require 'goog.dom.classlist'

    @return {Object}
  ###
  none: (var_args) ->
    @createTouchableComponents arguments, 'none'

  ###*
    @param {...string} var_args
    @return {Object}
  ###
  panX: (var_args) ->
    @createTouchableComponents arguments, 'pan-x'

  ###*
    @param {...string} var_args
    @return {Object}
  ###
  panY: (var_args) ->
    @createTouchableComponents arguments, 'pan-y'

  ###*
    @param {...string} var_args
