Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions browser/main/Detail/MarkdownNoteDetail.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,6 @@ class MarkdownNoteDetail extends React.Component {
})
ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))
ee.on('code:generate-toc', this.generateToc)

// Focus content if using blur or double click
if (this.state.switchPreview === 'BLUR' || this.state.switchPreview === 'DBL_CLICK') this.focus()
}

componentWillReceiveProps (nextProps) {
Expand All @@ -84,6 +81,20 @@ class MarkdownNoteDetail extends React.Component {
if (this.refs.tags) this.refs.tags.reset()
})
}

// Focus content if using blur or double click
// --> Moved here from componentDidMount so a re-render during search won't set focus to the editor
const {switchPreview} = nextProps.config.editor

if (this.state.switchPreview !== switchPreview) {
this.setState({
switchPreview
})
if (switchPreview === 'BLUR' || switchPreview === 'DBL_CLICK') {
console.log('setting focus', switchPreview)
this.focus()
}
}
}

componentWillUnmount () {
Expand Down
92 changes: 29 additions & 63 deletions browser/main/TopBar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import ee from 'browser/main/lib/eventEmitter'
import NewNoteButton from 'browser/main/NewNoteButton'
import i18n from 'browser/lib/i18n'
import debounce from 'lodash/debounce'
import CInput from 'react-composition-input'
import { push } from 'connected-react-router'
import queryString from 'query-string'

class TopBar extends React.Component {
constructor (props) {
Expand All @@ -17,21 +17,29 @@ class TopBar extends React.Component {
this.state = {
search: '',
searchOptions: [],
isSearching: false,
isAlphabet: false,
isIME: false,
isConfirmTranslation: false
isSearching: false
}

const { dispatch } = this.props

this.focusSearchHandler = () => {
this.handleOnSearchFocus()
}

this.codeInitHandler = this.handleCodeInit.bind(this)
this.updateKeyword = this.updateKeyword.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.handleSearchFocus = this.handleSearchFocus.bind(this)
this.handleSearchBlur = this.handleSearchBlur.bind(this)
this.handleSearchChange = this.handleSearchChange.bind(this)
this.handleSearchClearButton = this.handleSearchClearButton.bind(this)

this.updateKeyword = debounce(this.updateKeyword, 1000 / 60, {
this.debouncedUpdateKeyword = debounce((keyword) => {
dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
this.setState({
search: keyword
})
ee.emit('top:search', keyword)
}, 1000 / 60, {
maxWait: 1000 / 8
})
}
Expand Down Expand Up @@ -66,11 +74,10 @@ class TopBar extends React.Component {
}

handleKeyDown (e) {
// reset states
this.setState({
isAlphabet: false,
isIME: false
})
// Re-apply search field on ENTER key
if (e.keyCode === 13) {
this.debouncedUpdateKeyword(e.target.value)
}

// Clear search on ESC
if (e.keyCode === 27) {
Expand All @@ -88,59 +95,19 @@ class TopBar extends React.Component {
ee.emit('list:prior')
e.preventDefault()
}

// When the key is an alphabet, del, enter or ctr
if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
this.setState({
isAlphabet: true
})
// When the key is an IME input (Japanese, Chinese)
} else if (e.keyCode === 229) {
this.setState({
isIME: true
})
}
}

handleKeyUp (e) {
// reset states
this.setState({
isConfirmTranslation: false
})

// When the key is translation confirmation (Enter, Space)
if (this.state.isIME && (e.keyCode === 32 || e.keyCode === 13)) {
this.setState({
isConfirmTranslation: true
})
const keyword = this.refs.searchInput.value
this.updateKeyword(keyword)
}
}

handleSearchChange (e) {
if (this.state.isAlphabet || this.state.isConfirmTranslation) {
const keyword = this.refs.searchInput.value
this.updateKeyword(keyword)
} else {
e.preventDefault()
}
}

updateKeyword (keyword) {
const { dispatch } = this.props
dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
this.setState({
search: keyword
})
ee.emit('top:search', keyword)
const keyword = e.target.value
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I wanted to use this.refs.searchInput.value but it wasn't working - maybe there is an issue with CInput and the ref but with event.target.value it is woking.
So that's OK and I just wanted to mention it.

this.debouncedUpdateKeyword(keyword)
}

handleSearchFocus (e) {
this.setState({
isSearching: true
})
}

handleSearchBlur (e) {
e.stopPropagation()

Expand Down Expand Up @@ -170,7 +137,7 @@ class TopBar extends React.Component {
}

handleCodeInit () {
ee.emit('top:search', this.refs.searchInput.value)
ee.emit('top:search', this.refs.searchInput.value || '')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this emit there? With out adding the || '' I've got an error from CodeEditor.js because it seems that the value is undefined here.
How can I test this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I didn't notice that it can be undefined.

}

render () {
Expand All @@ -183,24 +150,23 @@ class TopBar extends React.Component {
<div styleName='control'>
<div styleName='control-search'>
<div styleName='control-search-input'
onFocus={(e) => this.handleSearchFocus(e)}
onBlur={(e) => this.handleSearchBlur(e)}
onFocus={this.handleSearchFocus}
onBlur={this.handleSearchBlur}
tabIndex='-1'
ref='search'
>
<input
<CInput
ref='searchInput'
value={this.state.search}
onChange={(e) => this.handleSearchChange(e)}
onKeyDown={(e) => this.handleKeyDown(e)}
onKeyUp={(e) => this.handleKeyUp(e)}
onInputChange={this.handleSearchChange}
onKeyDown={this.handleKeyDown}
placeholder={i18n.__('Search')}
type='text'
className='searchInput'
/>
{this.state.search !== '' &&
<button styleName='control-search-input-clear'
onClick={(e) => this.handleSearchClearButton(e)}
onClick={this.handleSearchClearButton}
>
<i className='fa fa-fw fa-times' />
<span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "boost",
"productName": "Boostnote",
"version": "0.11.17",
"version": "0.11.17",
"main": "index.js",
"description": "Boostnote",
"license": "GPL-3.0",
Expand Down Expand Up @@ -105,6 +105,7 @@
"react-autosuggest": "^9.4.0",
"react-codemirror": "^1.0.0",
"react-color": "^2.2.2",
"react-composition-input": "^1.1.1",
"react-debounce-render": "^4.0.1",
"react-dom": "^16.8.6",
"react-image-carousel": "^2.0.18",
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7744,6 +7744,13 @@ react-color@^2.2.2:
reactcss "^1.2.0"
tinycolor2 "^1.4.1"

react-composition-input@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-composition-input/-/react-composition-input-1.1.1.tgz#51fc711f8b1c7d11e39210639175f0b48de44aff"
integrity sha512-xzRAUvsrEdSjI1tQXu3ouPHkHVZnunx6OoAFsv4YxVV6fIBHc9XZuxkmJwoxSatPxJ6WN94k91PBWQTsL6h/ZA==
dependencies:
prop-types "^15.6.2"

react-css-modules@^4.7.9:
version "4.7.9"
resolved "https://registry.yarnpkg.com/react-css-modules/-/react-css-modules-4.7.9.tgz#459235e149a0df7a62b092ae079d53cb0b6154ee"
Expand Down