From 7abf53009ad4e3bb3d76dc8c3328dd7422a01742 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Fri, 26 May 2017 18:01:44 +0900 Subject: [PATCH 1/8] change search ux --- browser/main/NoteList/index.js | 69 ++++++++++++++++++++++ browser/main/TopBar/index.js | 105 +++------------------------------ browser/main/index.js | 1 + 3 files changed, 77 insertions(+), 98 deletions(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index b296bc5a9..c8fafd1a2 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -212,6 +212,10 @@ class NoteList extends React.Component { .map((uniqueKey) => data.noteMap.get(uniqueKey)) } + if (location.pathname.match(/\/searched/)) { + return this.getSearchNotes() + } + let storageKey = params.storageKey let folderKey = params.folderKey let storage = data.storageMap.get(storageKey) @@ -349,6 +353,71 @@ class NoteList extends React.Component { }) } + getSearchNotes () { + let { data } = this.props + let search = document.getElementsByClassName('TopBar__control-search-input___browser-main-TopBar-')[0].childNodes[0].value + let notes = data.noteMap.map((note) => note) + if (search.trim().length === 0) return [] + let searchBlocks = search.split(' ') + searchBlocks.forEach((block) => { + if (block.match(/^!#.+/)) { + let tag = block.match(/^!#(.+)/)[1] + let regExp = new RegExp(_.escapeRegExp(tag), 'i') + notes = notes + .filter((note) => { + if (!_.isArray(note.tags)) return false + return note.tags.some((_tag) => { + return _tag.match(regExp) + }) + }) + } else if (block.match(/^!.+/)) { + let block = block.match(/^!(.+)/)[1] + let regExp = new RegExp(_.escapeRegExp(block), 'i') + notes = notes.filter((note) => { + if (!_.isArray(note.tags) || !note.tags.some((_tag) => { + return _tag.match(regExp) + })) { + return true + } + if (note.type === 'SNIPPET_NOTE') { + return !note.description.match(regExp) + } else if (note.type === 'MARKDOWN_NOTE') { + return !note.content.match(regExp) + } + return false + }) + } else if (block.match(/^#.+/)) { + let tag = block.match(/#(.+)/)[1] + let regExp = new RegExp(_.escapeRegExp(tag), 'i') + notes = notes + .filter((note) => { + if (!_.isArray(note.tags)) return false + return note.tags.some((_tag) => { + return _tag.match(regExp) + }) + }) + } else { + let regExp = new RegExp(_.escapeRegExp(block), 'i') + notes = notes.filter((note) => { + if (_.isArray(note.tags) && note.tags.some((_tag) => { + return _tag.match(regExp) + })) { + return true + } + if (note.type === 'SNIPPET_NOTE') { + return note.description.match(regExp) + } else if (note.type === 'MARKDOWN_NOTE') { + return note.content.match(regExp) + } + return false + }) + } + }) + + return notes + + } + render () { let { location, notes, config } = this.props let sortFunc = config.sortBy === 'CREATED_AT' diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js index 946c72427..0aca7a5d7 100644 --- a/browser/main/TopBar/index.js +++ b/browser/main/TopBar/index.js @@ -18,7 +18,7 @@ class TopBar extends React.Component { this.state = { search: '', searchOptions: [], - searchPopupOpen: false + isSearching: false } this.newNoteHandler = () => { @@ -87,79 +87,17 @@ class TopBar extends React.Component { } handleSearchChange (e) { + let { router } = this.context + router.push('/searched') this.setState({ search: this.refs.searchInput.value }) } - getOptions () { - let { data } = this.props - let { search } = this.state - let notes = data.noteMap.map((note) => note) - if (search.trim().length === 0) return [] - let searchBlocks = search.split(' ') - searchBlocks.forEach((block) => { - if (block.match(/^!#.+/)) { - let tag = block.match(/^!#(.+)/)[1] - let regExp = new RegExp(_.escapeRegExp(tag), 'i') - notes = notes - .filter((note) => { - if (!_.isArray(note.tags)) return false - return note.tags.some((_tag) => { - return _tag.match(regExp) - }) - }) - } else if (block.match(/^!.+/)) { - let block = block.match(/^!(.+)/)[1] - let regExp = new RegExp(_.escapeRegExp(block), 'i') - notes = notes.filter((note) => { - if (!_.isArray(note.tags) || !note.tags.some((_tag) => { - return _tag.match(regExp) - })) { - return true - } - if (note.type === 'SNIPPET_NOTE') { - return !note.description.match(regExp) - } else if (note.type === 'MARKDOWN_NOTE') { - return !note.content.match(regExp) - } - return false - }) - } else if (block.match(/^#.+/)) { - let tag = block.match(/#(.+)/)[1] - let regExp = new RegExp(_.escapeRegExp(tag), 'i') - notes = notes - .filter((note) => { - if (!_.isArray(note.tags)) return false - return note.tags.some((_tag) => { - return _tag.match(regExp) - }) - }) - } else { - let regExp = new RegExp(_.escapeRegExp(block), 'i') - notes = notes.filter((note) => { - if (_.isArray(note.tags) && note.tags.some((_tag) => { - return _tag.match(regExp) - })) { - return true - } - if (note.type === 'SNIPPET_NOTE') { - return note.description.match(regExp) - } else if (note.type === 'MARKDOWN_NOTE') { - return note.content.match(regExp) - } - return false - }) - } - }) - - return notes - } - handleOptionClick (uniqueKey) { return (e) => { this.setState({ - searchPopupOpen: false + isSearching: false }, () => { let { location } = this.props hashHistory.push({ @@ -174,7 +112,7 @@ class TopBar extends React.Component { handleSearchFocus (e) { this.setState({ - searchPopupOpen: true + isSearching: true }) } handleSearchBlur (e) { @@ -191,7 +129,7 @@ class TopBar extends React.Component { } if (!isStillFocused) { this.setState({ - searchPopupOpen: false + isSearching: false }) } } @@ -251,7 +189,7 @@ class TopBar extends React.Component { } handleOnSearchFocus () { - if (this.state.searchPopupOpen) { + if (this.state.isSearching) { this.refs.search.childNodes[0].blur() } else { this.refs.search.childNodes[0].focus() @@ -260,27 +198,6 @@ class TopBar extends React.Component { render () { let { config, style, data } = this.props - let searchOptionList = this.getOptions() - .map((note) => { - let storage = data.storageMap.get(note.storage) - let folder = _.find(storage.folders, {key: note.folder}) - return
this.handleOptionClick(note.storage + '-' + note.key)(e)} - > -
- {folder.name} - in {storage.name} -
- {note.type === 'SNIPPET_NOTE' - ? - : - }  - {note.title} -
- }) - return (
- {this.state.searchPopupOpen && -
- {searchOptionList.length > 0 - ? searchOptionList - :
Empty List
- } -
- }
{this.state.search > 0 &&