RecordPerfButton.coffee

React = require 'react'
Perf = require 'react-addons-perf'
ReactDOM = require 'react-dom'
rd = React.DOM

###
Usage: `require('debug/RecordPerfButton').attachToDOM()`

Add to any file to attach a record button to the DOM, toggleable via click and <alt> keypress.
Useful for quickly testing performance as it will:
  - start/stop a perf measurement,
  - make Perf accessible on window,
  - and log the wasted time.
###

hasRendered = false

RecordPerfButton = React.createClass {
  displayName: 'RecordPerfButton'

  statics: {
    attachToDOM: ->
      if hasRendered
        return
      hasRendered = true
      document.addEventListener 'DOMContentLoaded', ->
        # Find / create the container
        container = document.createElement('div')
        container.style.position = 'fixed'
        container.style.top = 0
        container.style.zIndex = 9999
        node = document.body.appendChild(container)
        ReactDOM.render React.createElement(RecordPerfButton), container
        return
      return
  }

  getInitialState: -> {recording: false}

  toggleRecord: ->
    if not @state.recording
      Perf.start()
      window.Perf = Perf
      @setState({recording: true})
    else
      Perf.stop()
      Perf.printWasted()
      @setState({recording: false})
    return

  mouseDownHandler: (e) ->
    e.preventDefault()
    return

  handleKeyDown: (e) ->
    if e.altKey
      @toggleRecord()
    return

  componentDidMount: ->
    window.addEventListener('keydown', @handleKeyDown)
    return

  componentWillUnmount: ->
    window.removeEventListener('keydown', @handleKeyDown)
    return

  render: ->
    return rd.div {
      onMouseDown: @mouseDownHandler
      onClick: @toggleRecord
      style: {
        display: 'inline-block'
        marginTop: 13
        marginLeft: 13
        width: 30
        height: 30
        borderRadius: 15
        backgroundColor: if @state.recording then 'red' else 'grey'
      }
    }
}

module.exports = RecordPerfButton