Show search result count
This commit is contained in:
parent
c7418807d8
commit
d1f35c6214
|
@ -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
|
||||
})
|
||||
|
|
|
@ -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'}, [
|
||||
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
|
||||
}
|
|
@ -1,6 +1,17 @@
|
|||
@theme-color: #3883fa;
|
||||
|
||||
div.jsoneditor-search {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
|
||||
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;
|
||||
|
@ -13,3 +24,4 @@ div.jsoneditor-search {
|
|||
padding: 2px;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue