     displayName: 'StrokeWidths'
     getState: -> {strokeWidth: @props.lc.tool?.strokeWidth}
     getInitialState: -> @getState()
+    mixins: [LC.React.Mixins.UpdateOnToolChangeMixin]
+
     render: ->
       {ul, li, svg, circle} = React.DOM
       strokeWidths = [1, 2, 5, 10, 20, 40]

  # we don't want the parent to have to worry about this, so it's in @state.
  getState: -> {isEnabled: @props.lc.canUndo()}
  getInitialState: -> @getState()

  componentDidMount: ->
    @subscriber = => @setState @getState()
    @props.lc.on 'drawingChange', @subscriber
  componentWillUnmount: ->
    @props.lc.removeEventListener('drawingChange', @subscriber)

  render: ->
    {div} = React.DOM

    displayName: 'Eyedropper'
    imageName: 'eyedropper'
    getTool: -> new LC.EyeDropper()


LC.React.Mixins =
  UpdateOnDrawingChangeMixin:
    componentDidMount: ->
      @subscriber = => @setState @getState()
      @props.lc.on 'drawingChange', @subscriber
    componentWillUnmount: ->
      @props.lc.removeEventListener('drawingChange', @subscriber)

  UpdateOnToolChangeMixin:
    componentDidMount: ->
      @subscriber = => @setState @getState()
      @props.lc.on 'toolChange', @subscriber
    componentWillUnmount: ->
      @props.lc.removeEventListener('toolChange', @subscriber)


LC.React.Picker = React.createClass
