diff --git a/src/components/TreeMode.js b/src/components/TreeMode.js index b9c2e74..4119f3c 100644 --- a/src/components/TreeMode.js +++ b/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 }) diff --git a/src/components/menu/Search.js b/src/components/menu/Search.js index 57f84ca..b3c2c03 100644 --- a/src/components/menu/Search.js +++ b/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'}, - h('input', {type: 'text', value: this.state.text, onInput: this.handleChange}) - ) + return h('div', {className: 'jsoneditor-search'}, [ + 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) } } @@ -44,4 +68,9 @@ export default class Search extends Component { } timeout = null +} + +Search.propTypes = { + text: PropTypes.string, + resultsCount: PropTypes.number } \ No newline at end of file diff --git a/src/components/menu/Search.less b/src/components/menu/Search.less index 66bd4a2..a4663d2 100644 --- a/src/components/menu/Search.less +++ b/src/components/menu/Search.less @@ -1,15 +1,27 @@ @theme-color: #3883fa; div.jsoneditor-search { - background: white; - border: 2px solid @theme-color; - box-sizing: border-box; + font-family: arial, sans-serif; + font-size: 10pt; - input { - border: none; - outline: none; - height: 22px; - line-height: 22px; - padding: 2px; + div.jsoneditor-results { + display: inline-block; + margin-right: 5px; + } + + 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; + } } } \ No newline at end of file