Floating search box

src/jsoneditor/components/TreeMode.js

@@ -103,8 +103,8 @@ export default class TreeMode extends PureComponent {
       'undo': this.handleUndo,
       'redo': this.handleRedo,
       'find': this.handleFocusFind,
-      'findNext': this.handleNext,
-      'findPrevious': this.handlePrevious
+      'findNext': this.handleSearchNext,
+      'findPrevious': this.handleSearchPrevious
     }
 
     this.emitter = mitt()
@@ -296,8 +296,9 @@ export default class TreeMode extends PureComponent {
       resultCount: this.state.searchResult.matches
           ? this.state.searchResult.matches.length : 0,
       onChange: this.handleSearch,
-      onNext: this.handleNext,
-      onPrevious: this.handlePrevious,
+      onNext: this.handleSearchNext,
+      onPrevious: this.handleSearchPrevious,
+      onClose: this.handleCloseSearch,
       findKeyBinding: this.props.findKeyBinding,
       delay: SEARCH_DEBOUNCE
     })
@@ -645,7 +646,7 @@ export default class TreeMode extends PureComponent {
     selectFind(event.target)
   }
 
-  handleNext = (event) => {
+  handleSearchNext = (event) => {
     event.preventDefault()
 
     if (this.state.searchResult) {
@@ -657,7 +658,7 @@ export default class TreeMode extends PureComponent {
       })
 
       // scroll to the active result (on next tick, after this path has been expanded)
-      // TODO: this code is duplicate with handlePrevious, move into a separate function
+      // TODO: this code is duplicate with handleSearchPrevious, move into a separate function
       setTimeout(() => {
         if (searchResult.active && searchResult.active.path) {
           this.scrollTo(searchResult.active.path)
@@ -670,7 +671,7 @@ export default class TreeMode extends PureComponent {
     }
   }
 
-  handlePrevious = (event) => {
+  handleSearchPrevious = (event) => {
     event.preventDefault()
 
     if (this.state.searchResult) {
@@ -694,6 +695,18 @@ export default class TreeMode extends PureComponent {
     }
   }
 
+  handleCloseSearch = (event) => {
+    event.preventDefault()
+
+    const { eson, searchResult } = search(this.state.eson, '')
+
+    this.setState({
+      showSearch: false,
+      eson,
+      searchResult
+    })
+  }
+
   /**
    * Apply a JSONPatch to the current JSON document and emit a change event
    * @param {JSONPatchDocument} operations

src/jsoneditor/components/menu/Search.js

@@ -7,12 +7,13 @@ import fontawesome from '@fortawesome/fontawesome'
 import faSearch from '@fortawesome/fontawesome-free-solid/faSearch'
 import faCaretUp from '@fortawesome/fontawesome-free-solid/faCaretUp'
 import faCaretDown from '@fortawesome/fontawesome-free-solid/faCaretDown'
+import faTimes from '@fortawesome/fontawesome-free-solid/faTimes'
 
 import './Menu.css'
 
 import './Search.css'
 
-fontawesome.library.add(faSearch, faCaretUp, faCaretDown)
+fontawesome.library.add(faSearch, faCaretUp, faCaretDown, faTimes)
 
 export default class Search extends Component {
   constructor (props) {
@@ -54,9 +55,16 @@ export default class Search extends Component {
             className: 'jsoneditor-search-previous',
             title: 'Previous result',
             onClick: this.props.onPrevious
-          }, h('i', {className: 'fa fa-caret-up'}))
+          }, h('i', {className: 'fa fa-caret-up'})),
+          h('button', {
+            key: 'close',
+            type: 'button',
+            className: 'jsoneditor-search-close',
+            title: 'Close search',
+            onClick: this.props.onClose
+          }, h('i', {className: 'fa fa-times'})),
       ]),
-      this.renderResultsCount(this.props.resultCount)
+      // this.renderResultsCount(this.props.resultCount) // FIXME: show result count
     ])
   }
 

src/jsoneditor/components/menu/Search.scss

@@ -9,14 +9,17 @@ div.jsoneditor-search {
   font-size: $fontSize;
 
   form.jsoneditor-search-box {
-    display: inline-flex;
-    position: relative;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 10px 20px 10px 10px;
+    z-index: 1;
     max-width: 100%;
+    box-shadow: 0 2px 6px 0 rgba(0,0,0,.24);
 
     background-color: white;
-    border: 1px solid $theme-color;
-    border-left-width: 0;
-    box-sizing: border-box;
+    border: 2px solid $theme-color;
+    border-radius: 3px;
 
     $search-icon-width: 28px;
     $search-icon-padding: 4px;
@@ -39,7 +42,6 @@ div.jsoneditor-search {
       border: none;
       outline: none;
       width: 120px;
-      max-width: 100%;
       height: 22px;
       line-height: 22px;
       padding: 2px 2px 2px $search-icon-width;
@@ -51,7 +53,7 @@ div.jsoneditor-search {
       position: relative;
       cursor: pointer;
 
-      width: 16px;
+      width: 20px;
       height: 100%;
       line-height: 28px;
       background: transparent;
@@ -62,6 +64,14 @@ div.jsoneditor-search {
       font-family: arial, sans-serif;
       font-size: 16px;
       padding: 0;
+
+      &:hover {
+        color: $gray-icon;
+      }
+
+      &:last-child {
+        margin-right: 4px;
+      }
     }
   }