Floating search box
This commit is contained in:
parent
081cde4489
commit
fdd44a276c
|
@ -103,8 +103,8 @@ export default class TreeMode extends PureComponent {
|
||||||
'undo': this.handleUndo,
|
'undo': this.handleUndo,
|
||||||
'redo': this.handleRedo,
|
'redo': this.handleRedo,
|
||||||
'find': this.handleFocusFind,
|
'find': this.handleFocusFind,
|
||||||
'findNext': this.handleNext,
|
'findNext': this.handleSearchNext,
|
||||||
'findPrevious': this.handlePrevious
|
'findPrevious': this.handleSearchPrevious
|
||||||
}
|
}
|
||||||
|
|
||||||
this.emitter = mitt()
|
this.emitter = mitt()
|
||||||
|
@ -296,8 +296,9 @@ export default class TreeMode extends PureComponent {
|
||||||
resultCount: this.state.searchResult.matches
|
resultCount: this.state.searchResult.matches
|
||||||
? this.state.searchResult.matches.length : 0,
|
? this.state.searchResult.matches.length : 0,
|
||||||
onChange: this.handleSearch,
|
onChange: this.handleSearch,
|
||||||
onNext: this.handleNext,
|
onNext: this.handleSearchNext,
|
||||||
onPrevious: this.handlePrevious,
|
onPrevious: this.handleSearchPrevious,
|
||||||
|
onClose: this.handleCloseSearch,
|
||||||
findKeyBinding: this.props.findKeyBinding,
|
findKeyBinding: this.props.findKeyBinding,
|
||||||
delay: SEARCH_DEBOUNCE
|
delay: SEARCH_DEBOUNCE
|
||||||
})
|
})
|
||||||
|
@ -645,7 +646,7 @@ export default class TreeMode extends PureComponent {
|
||||||
selectFind(event.target)
|
selectFind(event.target)
|
||||||
}
|
}
|
||||||
|
|
||||||
handleNext = (event) => {
|
handleSearchNext = (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
||||||
if (this.state.searchResult) {
|
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)
|
// 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(() => {
|
setTimeout(() => {
|
||||||
if (searchResult.active && searchResult.active.path) {
|
if (searchResult.active && searchResult.active.path) {
|
||||||
this.scrollTo(searchResult.active.path)
|
this.scrollTo(searchResult.active.path)
|
||||||
|
@ -670,7 +671,7 @@ export default class TreeMode extends PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePrevious = (event) => {
|
handleSearchPrevious = (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
||||||
if (this.state.searchResult) {
|
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
|
* Apply a JSONPatch to the current JSON document and emit a change event
|
||||||
* @param {JSONPatchDocument} operations
|
* @param {JSONPatchDocument} operations
|
||||||
|
|
|
@ -7,12 +7,13 @@ import fontawesome from '@fortawesome/fontawesome'
|
||||||
import faSearch from '@fortawesome/fontawesome-free-solid/faSearch'
|
import faSearch from '@fortawesome/fontawesome-free-solid/faSearch'
|
||||||
import faCaretUp from '@fortawesome/fontawesome-free-solid/faCaretUp'
|
import faCaretUp from '@fortawesome/fontawesome-free-solid/faCaretUp'
|
||||||
import faCaretDown from '@fortawesome/fontawesome-free-solid/faCaretDown'
|
import faCaretDown from '@fortawesome/fontawesome-free-solid/faCaretDown'
|
||||||
|
import faTimes from '@fortawesome/fontawesome-free-solid/faTimes'
|
||||||
|
|
||||||
import './Menu.css'
|
import './Menu.css'
|
||||||
|
|
||||||
import './Search.css'
|
import './Search.css'
|
||||||
|
|
||||||
fontawesome.library.add(faSearch, faCaretUp, faCaretDown)
|
fontawesome.library.add(faSearch, faCaretUp, faCaretDown, faTimes)
|
||||||
|
|
||||||
export default class Search extends Component {
|
export default class Search extends Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
@ -54,9 +55,16 @@ export default class Search extends Component {
|
||||||
className: 'jsoneditor-search-previous',
|
className: 'jsoneditor-search-previous',
|
||||||
title: 'Previous result',
|
title: 'Previous result',
|
||||||
onClick: this.props.onPrevious
|
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
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,14 +9,17 @@ div.jsoneditor-search {
|
||||||
font-size: $fontSize;
|
font-size: $fontSize;
|
||||||
|
|
||||||
form.jsoneditor-search-box {
|
form.jsoneditor-search-box {
|
||||||
display: inline-flex;
|
position: absolute;
|
||||||
position: relative;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 10px 20px 10px 10px;
|
||||||
|
z-index: 1;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
box-shadow: 0 2px 6px 0 rgba(0,0,0,.24);
|
||||||
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border: 1px solid $theme-color;
|
border: 2px solid $theme-color;
|
||||||
border-left-width: 0;
|
border-radius: 3px;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
$search-icon-width: 28px;
|
$search-icon-width: 28px;
|
||||||
$search-icon-padding: 4px;
|
$search-icon-padding: 4px;
|
||||||
|
@ -39,7 +42,6 @@ div.jsoneditor-search {
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
max-width: 100%;
|
|
||||||
height: 22px;
|
height: 22px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
padding: 2px 2px 2px $search-icon-width;
|
padding: 2px 2px 2px $search-icon-width;
|
||||||
|
@ -51,7 +53,7 @@ div.jsoneditor-search {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
width: 16px;
|
width: 20px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
@ -62,6 +64,14 @@ div.jsoneditor-search {
|
||||||
font-family: arial, sans-serif;
|
font-family: arial, sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $gray-icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue