-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Simplified search input & fixed chinese character input #3037
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
25728e5
edc9d8b
9794149
25d055e
60e841e
639bfbe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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) { | ||
|
|
@@ -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 | ||
| }) | ||
| } | ||
|
|
@@ -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) { | ||
|
|
@@ -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 | ||
| this.debouncedUpdateKeyword(keyword) | ||
| } | ||
|
|
||
| handleSearchFocus (e) { | ||
| this.setState({ | ||
| isSearching: true | ||
| }) | ||
| } | ||
|
|
||
| handleSearchBlur (e) { | ||
| e.stopPropagation() | ||
|
|
||
|
|
@@ -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 || '') | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why is this
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. LGTM. I didn't notice that it can be undefined. |
||
| } | ||
|
|
||
| render () { | ||
|
|
@@ -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> | ||
|
|
||
There was a problem hiding this comment.
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.valuebut it wasn't working - maybe there is an issue withCInputand the ref but withevent.target.valueit is woking.So that's OK and I just wanted to mention it.