Show search result count

src/components/TreeMode.js

@@ -114,7 +114,7 @@ export default class TreeMode extends Component {
 
     // enrich the data with search results
     const searchResults = this.state.search.text ? search(data, this.state.search.text) : null
-    if (searchResults) {
+    if (searchResults && searchResults.length > 0) {
       data = addSearchResults(data, searchResults)
 
       data = addFocus(data, searchResults[0]) // TODO: change to using focus from state
@@ -125,7 +125,7 @@ export default class TreeMode extends Component {
       className: `jsoneditor jsoneditor-mode-${props.mode}`,
       'data-jsoneditor': 'true'
     }, [
-      this.renderMenu(),
+      this.renderMenu(searchResults ? searchResults.length : null),
 
       h('div', {key: 'contents', className: 'jsoneditor-contents jsoneditor-tree-contents', onClick: this.handleHideMenus},
         h('ul', {className: 'jsoneditor-list jsoneditor-root'},
@@ -141,7 +141,7 @@ export default class TreeMode extends Component {
     ])
   }
 
-  renderMenu () {
+  renderMenu (searchResultsCount: number) {
     let items = [
       h('button', {
         key: 'expand-all',
@@ -198,6 +198,7 @@ export default class TreeMode extends Component {
         h('div', {key: 'search', className: 'jsoneditor-menu-panel-right'},
           h(Search, {
             text: this.state.search.text,
+            resultsCount: searchResultsCount,
             onChange: this.handleSearch,
             delay: SEARCH_DEBOUNCE
           })

src/components/menu/Search.js

@@ -1,8 +1,14 @@
-import { createElement as h, Component } from 'react'
+// @flow weak
+
+import { createElement as h, Component, PropTypes } from 'react'
 
 import '!style!css!less!./Search.less'
 
 export default class Search extends Component {
+  state: {
+    text: string
+  }
+
   constructor (props) {
     super (props)
 
@@ -12,19 +18,37 @@ export default class Search extends Component {
   }
 
   render () {
-    // TODO: show number of search results left from the input box
     // TODO: prev/next
     // TODO: focus on search results
     // TODO: expand the focused search result if not expanded
 
-    return h('div', {className: 'jsoneditor-search'},
+    return h('div', {className: 'jsoneditor-search'}, [
-      h('input', {type: 'text', value: this.state.text, onInput: this.handleChange})
+      this.renderResultsCount(this.props.resultsCount),
-    )
+      h('div', {key: 'box', className: 'jsoneditor-search-box'},
+          h('input', {type: 'text', value: this.state.text, onInput: this.handleChange})
+      )
+    ])
+  }
+
+  renderResultsCount (resultsCount : number | null) {
+    if (resultsCount == null) {
+      return null
+    }
+
+    if (resultsCount == 0) {
+      return h('div', {key: 'count', className: 'jsoneditor-results'}, '(no results)')
+    }
+
+    if (resultsCount > 0) {
+      return h('div', {key: 'count', className: 'jsoneditor-results'}, this.props.resultsCount + ' results')
+    }
+
+    return null
   }
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.text !== this.props.text) {
-      // clear a pending onChange callback (if any
+      // clear a pending onChange callback (if any)
       clearTimeout(this.timeout)
     }
   }
@@ -45,3 +69,8 @@ export default class Search extends Component {
 
   timeout = null
 }
+
+Search.propTypes = {
+  text: PropTypes.string,
+  resultsCount: PropTypes.number
+}

src/components/menu/Search.less

@@ -1,15 +1,27 @@
 @theme-color: #3883fa;
 
 div.jsoneditor-search {
-  background: white;
+  font-family: arial, sans-serif;
-  border: 2px solid @theme-color;
+  font-size: 10pt;
-  box-sizing: border-box;
 
-  input {
+  div.jsoneditor-results {
-    border: none;
+    display: inline-block;
-    outline: none;
+    margin-right: 5px;
-    height: 22px;
+  }
-    line-height: 22px;
+
-    padding: 2px;
+  div.jsoneditor-search-box {
+    display: inline-block;
+
+    background: white;
+    border: 2px solid @theme-color;
+    box-sizing: border-box;
+
+    input {
+      border: none;
+      outline: none;
+      height: 22px;
+      line-height: 22px;
+      padding: 2px;
+    }
   }
 }