Merge pull request #3071 from atom/ns-react-select-list-editor

Use React for select list mini editors when config option is toggled

src/editor-component.coffee

@@ -184,6 +184,7 @@ EditorComponent = React.createClass
 
     if @visible = @isVisible()
       @performInitialMeasurement()
+      @forceUpdate()
 
   componentWillUnmount: ->
     @props.parentView.trigger 'editor:will-be-removed', [@props.parentView]
@@ -191,6 +192,11 @@ EditorComponent = React.createClass
     clearInterval(@domPollingIntervalId)
     @domPollingIntervalId = null
 
+  componentWillUpdate: ->
+    wasVisible = @visible
+    @visible = @isVisible()
+    @performInitialMeasurement() if @visible and not wasVisible
+
   componentDidUpdate: (prevProps, prevState) ->
     cursorsMoved = @cursorsMoved
     selectionChanged = @selectionChanged
@@ -206,7 +212,6 @@ EditorComponent = React.createClass
       @props.parentView.trigger 'selection:changed' if selectionChanged
       @props.parentView.trigger 'editor:display-updated'
 
-    @visible = @isVisible()
     if @performedInitialMeasurement
       @measureScrollbars() if @measuringScrollbars
       @measureLineHeightAndDefaultCharWidthIfNeeded(prevState)
@@ -220,7 +225,6 @@ EditorComponent = React.createClass
     @props.editor.setVisible(true)
     @updatesPaused = false
     @performedInitialMeasurement = true
-    @requestUpdate()
 
   requestUpdate: ->
     if @updatesPaused
@@ -770,6 +774,7 @@ EditorComponent = React.createClass
         @measureHeightAndWidth()
       else
         @performInitialMeasurement()
+        @forceUpdate()
 
   requestHeightAndWidthMeasurement: ->
     return if @heightAndWidthMeasurementRequested

src/react-editor-view.coffee

@@ -14,39 +14,23 @@ class ReactEditorView extends View
 
   focusOnAttach: false
 
-  constructor: (editorOrParams, @props) ->
+  constructor: (editorOrParams, props) ->
+    super
+
     if editorOrParams instanceof Editor
       @editor = editorOrParams
     else
       {@editor, mini, placeholderText} = editorOrParams
-      @props ?= {}
-      @props.mini = mini
-      @props.placeholderText = placeholderText
+      props ?= {}
+      props.mini = mini
+      props.placeholderText = placeholderText
       @editor ?= new Editor
         buffer: new TextBuffer
         softWrap: false
         tabLength: 2
         softTabs: true
 
-    super
-
-  getEditor: -> @editor
-
-  getModel: -> @editor
-
-  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels()
-  Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth()
-  Object.defineProperty @::, 'firstRenderedScreenRow', get: -> @component.getRenderedRowRange()[0]
-  Object.defineProperty @::, 'lastRenderedScreenRow', get: -> @component.getRenderedRowRange()[1]
-  Object.defineProperty @::, 'active', get: -> @is(@getPane()?.activeView)
-  Object.defineProperty @::, 'isFocused', get: -> @component?.state.focused
-
-  afterAttach: (onDom) ->
-    return unless onDom
-    return if @attached
-
-    @attached = true
-    props = defaults({@editor, parentView: this}, @props)
+    props = defaults({@editor, parentView: this}, props)
     @component = React.renderComponent(EditorComponent(props), @element)
 
     node = @component.getDOMNode()
@@ -71,8 +55,23 @@ class ReactEditorView extends View
         lines.addClass(klass)
         lines.length > 0
 
-    @focus() if @focusOnAttach
 
+  getEditor: -> @editor
+
+  getModel: -> @editor
+
+  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels()
+  Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth()
+  Object.defineProperty @::, 'firstRenderedScreenRow', get: -> @component.getRenderedRowRange()[0]
+  Object.defineProperty @::, 'lastRenderedScreenRow', get: -> @component.getRenderedRowRange()[1]
+  Object.defineProperty @::, 'active', get: -> @is(@getPane()?.activeView)
+  Object.defineProperty @::, 'isFocused', get: -> @component?.state.focused
+
+  afterAttach: (onDom) ->
+    return unless onDom
+    return if @attached
+    @attached = true
+    @focus() if @focusOnAttach
     @trigger 'editor:attached', [this]
 
   scrollTop: (scrollTop) ->

src/select-list-view.coffee

@@ -1,5 +1,8 @@
 {$, View} = require './space-pen-extensions'
-EditorView = require './editor-view'
+if atom.config.get('core.useReactMiniEditors')
+  EditorView = require './react-editor-view'
+else
+  EditorView = require './editor-view'
 fuzzyFilter = require('fuzzaldrin').filter
 
 # Public: Provides a view that renders a list of items with an editor that

static/editor.less

@@ -83,6 +83,10 @@
       }
     }
   }
+
+  .placeholder-text {
+    color: @text-color-subtle;
+  }
 }
 
 .editor {
@@ -279,7 +283,7 @@
   z-index: -1;
 }
 
-.editor.mini {
+.editor.mini:not(.react) {
   height: auto;
   line-height: 25px;