diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
new file mode 100644
index 00000000..ec38d63f
--- /dev/null
+++ b/browser/main/Detail/FolderSelect.js
@@ -0,0 +1,267 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FolderSelect.styl'
+import _ from 'lodash'
+
+class FolderSelect extends React.Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ status: 'IDLE',
+ search: '',
+ optionIndex: -1
+ }
+ }
+
+ componentDidMount () {
+ this.value = this.props.value
+ }
+
+ componentDidUpdate () {
+ this.value = this.props.value
+ }
+
+ handleClick (e) {
+ this.setState({
+ status: 'SEARCH',
+ optionIndex: -1
+ }, () => {
+ this.refs.search.focus()
+ })
+ }
+
+ handleFocus (e) {
+ if (this.state.status === 'IDLE') {
+ this.setState({
+ status: 'FOCUS'
+ })
+ }
+ }
+
+ handleBlur (e) {
+ if (this.state.status === 'FOCUS') {
+ this.setState({
+ status: 'IDLE'
+ })
+ }
+ }
+
+ handleKeyDown (e) {
+ switch (e.keyCode) {
+ case 13:
+ if (this.state.status === 'FOCUS') {
+ this.setState({
+ status: 'SEARCH',
+ optionIndex: -1
+ }, () => {
+ this.refs.search.focus()
+ })
+ }
+ break
+ case 40:
+ case 38:
+ if (this.state.status === 'FOCUS') {
+ this.setState({
+ status: 'SEARCH',
+ optionIndex: 0
+ }, () => {
+ this.refs.search.focus()
+ })
+ }
+ break
+ case 9:
+ if (e.shiftKey) {
+ e.preventDefault()
+ let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+ let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+ if (previousEl != null) previousEl.focus()
+ }
+ }
+ }
+
+ handleSearchInputBlur (e) {
+ if (e.relatedTarget !== this.refs.root) {
+ this.setState({
+ status: 'IDLE'
+ })
+ }
+ }
+
+ handleSearchInputChange (e) {
+ let { folders } = this.props
+ let search = this.refs.search.value
+ let optionIndex = search.length > 0
+ ? _.findIndex(folders, (folder) => {
+ return folder.name.match(new RegExp('^' + _.escapeRegExp(search), 'i'))
+ })
+ : -1
+
+ this.setState({
+ search: this.refs.search.value,
+ optionIndex: optionIndex
+ })
+ }
+
+ handleSearchInputKeyDown (e) {
+ switch (e.keyCode) {
+ case 40:
+ e.stopPropagation()
+ this.nextOption()
+ break
+ case 38:
+ e.stopPropagation()
+ this.previousOption()
+ break
+ case 13:
+ e.stopPropagation()
+ this.selectOption()
+ break
+ case 27:
+ e.stopPropagation()
+ this.setState({
+ status: 'FOCUS'
+ }, () => {
+ this.refs.root.focus()
+ })
+ }
+ }
+
+ nextOption () {
+ let { folders } = this.props
+ let { optionIndex } = this.state
+
+ optionIndex++
+ if (optionIndex >= folders.length) optionIndex = 0
+
+ this.setState({
+ optionIndex
+ })
+ }
+
+ previousOption () {
+ let { folders } = this.props
+ let { optionIndex } = this.state
+
+ optionIndex--
+ if (optionIndex < 0) optionIndex = folders.length - 1
+
+ this.setState({
+ optionIndex
+ })
+ }
+
+ selectOption () {
+ let { folders } = this.props
+ let optionIndex = this.state.optionIndex
+
+ let folder = folders[optionIndex]
+ if (folder != null) {
+ this.setState({
+ status: 'FOCUS'
+ }, () => {
+ this.setValue(folder.key)
+ this.refs.root.focus()
+ })
+ }
+ }
+
+ handleOptionClick (folderKey) {
+ return (e) => {
+ e.stopPropagation()
+ this.setState({
+ status: 'FOCUS'
+ }, () => {
+ this.setValue(folderKey)
+ this.refs.root.focus()
+ })
+ }
+ }
+
+ setValue (folderKey) {
+ this.value = folderKey
+ this.props.onChange()
+ }
+
+ render () {
+ let { className, folders, value } = this.props
+ let currentFolder = _.find(folders, {key: value})
+ let optionList = folders.map((folder, index) => {
+ return (
+ this.handleOptionClick(folder.key)(e)}
+ >
+
+ {folder.name}
+
+ )
+ })
+
+ return (
+ this.handleClick(e)}
+ onFocus={(e) => this.handleFocus(e)}
+ onBlur={(e) => this.handleBlur(e)}
+ onKeyDown={(e) => this.handleKeyDown(e)}
+ >
+ {this.state.status === 'SEARCH'
+ ?
+
this.handleSearchInputChange(e)}
+ onBlur={(e) => this.handleSearchInputBlur(e)}
+ onKeyDown={(e) => this.handleSearchInputKeyDown(e)}
+ />
+
+ {optionList}
+
+
+ :
+
+
+ {currentFolder.name}
+
+
+
+ }
+
+
this.handleStarButtonClick(e)}
isActive={isStarred}
/>
-
FolderSelect
+
this.handleChange()}
+ />
{
- let splitted = location.query.key.split('-')
- let repoKey = splitted[0]
- let noteKey = splitted[1]
return repoKey === note._repository.key && noteKey === note.key
})
if (targetIndex > -1) {
@@ -133,11 +133,7 @@ class NoteList extends React.Component {
if (location.pathname.match(/\/home/)) {
return repositories
.reduce((sum, repository) => {
- return sum.concat(repository.notes
- .map((note) => {
- note._repository = repository
- return note
- }))
+ return sum.concat(repository.notes)
}, [])
}
@@ -148,11 +144,7 @@ class NoteList extends React.Component {
.map((starredKey) => {
return _.find(repository.notes, {key: starredKey})
})
- .filter((note) => _.isObject(note))
- .map((note) => {
- note._repository = repository
- return note
- }))
+ .filter((note) => _.isObject(note)))
}, [])
}
@@ -162,18 +154,10 @@ class NoteList extends React.Component {
let folder = _.find(repository.folders, {key: folderKey})
if (folder == null) {
return repository.notes
- .map((note) => {
- note._repository = repository
- return note
- })
}
return repository.notes
.filter((note) => note.folder === folderKey)
- .map((note) => {
- note._repository = repository
- return note
- })
}
handleNoteClick (key) {
diff --git a/browser/main/lib/queue.js b/browser/main/lib/queue.js
index c0554b48..8e70ae0c 100644
--- a/browser/main/lib/queue.js
+++ b/browser/main/lib/queue.js
@@ -4,6 +4,7 @@ import _ from 'lodash'
let tasks = []
function _save (task, repoKey, note) {
+ note = Object.assign({}, note)
delete note._repository
task.status = 'process'
@@ -15,7 +16,6 @@ function _save (task, repoKey, note) {
})
.then((note) => {
tasks.splice(tasks.indexOf(task), 1)
- console.log(tasks)
console.info('Note saved', note)
})
.catch((err) => {
diff --git a/browser/main/store.js b/browser/main/store.js
index 3f41ad5c..8050466d 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -33,6 +33,11 @@ function repositories (state = initialRepositories, action) {
console.info('REDUX >> ', action)
switch (action.type) {
case 'INIT_ALL':
+ action.data.forEach((repo) => {
+ repo.notes.forEach((note) => {
+ note._repository = repo
+ })
+ })
return action.data.slice()
case 'ADD_REPOSITORY':
{
@@ -113,6 +118,7 @@ function repositories (state = initialRepositories, action) {
let targetRepo = _.find(repos, {key: action.repository})
if (targetRepo == null) return state
+ action.note._repository = targetRepo
targetRepo.notes.push(action.note)
return repos
@@ -126,6 +132,8 @@ function repositories (state = initialRepositories, action) {
let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note.key})
action.note.updatedAt = Date.now()
+ action.note._repository = targetRepo
+
if (targetNoteIndex > -1) {
targetRepo.notes.splice(targetNoteIndex, 1, action.note)
} else {