From 3df743f47bc783af177624a24e7ec75b3cd7557d Mon Sep 17 00:00:00 2001 From: richardtks Date: Sat, 10 Nov 2018 19:17:11 +0800 Subject: [PATCH 1/4] Change the selection behavior to the default behavior There are two behaviors being changed: 1. When user click on the notes a. Shift - It will select the notes among the first and the last note b. Ctrl - it will only select the selected note 2. When user uses the arrow keys a. Shift - it will extends the selection from the last selected note b. Ctrl - Nothing will happens --- browser/main/NoteList/index.js | 44 ++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 30ad93c3..77a8384e 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -84,7 +84,9 @@ class NoteList extends React.Component { // TODO: not Selected noteKeys but SelectedNote(for reusing) this.state = { + ctrlKeyDown: false, shiftKeyDown: false, + firstShiftSelectedNoteIndex: -1, selectedNoteKeys: [] } @@ -267,7 +269,7 @@ class NoteList extends React.Component { } handleNoteListKeyDown (e) { - if (e.metaKey || e.ctrlKey) return true + if (e.metaKey) return true // A key if (e.keyCode === 65 && !e.shiftKey) { @@ -307,6 +309,8 @@ class NoteList extends React.Component { if (e.shiftKey) { this.setState({ shiftKeyDown: true }) + } else if (e.ctrlKey) { + this.setState({ ctrlKeyDown: true }) } } @@ -314,6 +318,10 @@ class NoteList extends React.Component { if (!e.shiftKey) { this.setState({ shiftKeyDown: false }) } + + if (!e.ctrlKey) { + this.setState({ ctrlKeyDown: false }) + } } getNotes () { @@ -390,25 +398,51 @@ class NoteList extends React.Component { return pinnedNotes.concat(unpinnedNotes) } + getNoteIndexByKey (noteKey) { + return this.notes.findIndex((note) => { + if (!note) return -1 + + return note.key === noteKey + }) + } + handleNoteClick (e, uniqueKey) { const { router } = this.context const { location } = this.props let { selectedNoteKeys } = this.state - const { shiftKeyDown } = this.state + const { ctrlKeyDown, shiftKeyDown } = this.state + let firstShiftSelectedNoteIndex = -1 - if (shiftKeyDown && selectedNoteKeys.includes(uniqueKey)) { + if (ctrlKeyDown && selectedNoteKeys.includes(uniqueKey)) { const newSelectedNoteKeys = selectedNoteKeys.filter((noteKey) => noteKey !== uniqueKey) this.setState({ selectedNoteKeys: newSelectedNoteKeys }) return } - if (!shiftKeyDown) { + if (!ctrlKeyDown && !shiftKeyDown) { selectedNoteKeys = [] } selectedNoteKeys.push(uniqueKey) + + if (shiftKeyDown && selectedNoteKeys.length > 0) { + const firstSelectedNoteIndex = + Math.max(this.getNoteIndexByKey(selectedNoteKeys[0]), + this.state.firstShiftSelectedNoteIndex) + const lastSelectedNoteIndex = this.getNoteIndexByKey(uniqueKey) + const startIndex = Math.min(firstSelectedNoteIndex, lastSelectedNoteIndex) + const endIndex = Math.max(firstSelectedNoteIndex, lastSelectedNoteIndex) + selectedNoteKeys = [] + for (let i = startIndex; i <= endIndex; i++) { + selectedNoteKeys.push(this.notes[i].key) + } + + firstShiftSelectedNoteIndex = firstSelectedNoteIndex + } + this.setState({ - selectedNoteKeys + selectedNoteKeys, + firstShiftSelectedNoteIndex }) router.push({ From ad7b155a995f7afcd4bb56d0b164106e956a7bfd Mon Sep 17 00:00:00 2001 From: richardtks Date: Sat, 10 Nov 2018 19:39:44 +0800 Subject: [PATCH 2/4] Updated the condition with more appropriate naming --- browser/main/NoteList/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 77a8384e..2ad529e2 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -412,6 +412,7 @@ class NoteList extends React.Component { let { selectedNoteKeys } = this.state const { ctrlKeyDown, shiftKeyDown } = this.state let firstShiftSelectedNoteIndex = -1 + const hasSelectedNoteKey = selectedNoteKeys.length > 0 if (ctrlKeyDown && selectedNoteKeys.includes(uniqueKey)) { const newSelectedNoteKeys = selectedNoteKeys.filter((noteKey) => noteKey !== uniqueKey) @@ -425,7 +426,7 @@ class NoteList extends React.Component { } selectedNoteKeys.push(uniqueKey) - if (shiftKeyDown && selectedNoteKeys.length > 0) { + if (shiftKeyDown && hasSelectedNoteKey) { const firstSelectedNoteIndex = Math.max(this.getNoteIndexByKey(selectedNoteKeys[0]), this.state.firstShiftSelectedNoteIndex) From aa56aad46e8a5c573236dc6ed17fedb736d84ea5 Mon Sep 17 00:00:00 2001 From: richardtks Date: Sat, 10 Nov 2018 20:29:24 +0800 Subject: [PATCH 3/4] Improvement on the code The improvement was suggested by github --- browser/main/NoteList/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index 2ad529e2..af89f878 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -427,12 +427,14 @@ class NoteList extends React.Component { selectedNoteKeys.push(uniqueKey) if (shiftKeyDown && hasSelectedNoteKey) { - const firstSelectedNoteIndex = - Math.max(this.getNoteIndexByKey(selectedNoteKeys[0]), - this.state.firstShiftSelectedNoteIndex) + const firstSelectedNoteIndex = selectedNoteKeys[0] > this.state.firstShiftSelectedNoteIndex + ? selectedNoteKeys[0] : this.state.firstShiftSelectedNoteIndex const lastSelectedNoteIndex = this.getNoteIndexByKey(uniqueKey) - const startIndex = Math.min(firstSelectedNoteIndex, lastSelectedNoteIndex) - const endIndex = Math.max(firstSelectedNoteIndex, lastSelectedNoteIndex) + const startIndex = firstSelectedNoteIndex < lastSelectedNoteIndex + ? firstSelectedNoteIndex : lastSelectedNoteIndex + const endIndex = firstSelectedNoteIndex > lastSelectedNoteIndex + ? firstSelectedNoteIndex : lastSelectedNoteIndex + selectedNoteKeys = [] for (let i = startIndex; i <= endIndex; i++) { selectedNoteKeys.push(this.notes[i].key) From 82987cd53cb93b6632a2f3349a6bd4a2e4cd7b48 Mon Sep 17 00:00:00 2001 From: richardtks Date: Sat, 10 Nov 2018 21:23:56 +0800 Subject: [PATCH 4/4] Fix the variable name to more appropriate one --- browser/main/NoteList/index.js | 35 ++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index af89f878..7219a27f 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -86,7 +86,7 @@ class NoteList extends React.Component { this.state = { ctrlKeyDown: false, shiftKeyDown: false, - firstShiftSelectedNoteIndex: -1, + prevShiftNoteIndex: -1, selectedNoteKeys: [] } @@ -409,9 +409,8 @@ class NoteList extends React.Component { handleNoteClick (e, uniqueKey) { const { router } = this.context const { location } = this.props - let { selectedNoteKeys } = this.state + let { selectedNoteKeys, prevShiftNoteIndex } = this.state const { ctrlKeyDown, shiftKeyDown } = this.state - let firstShiftSelectedNoteIndex = -1 const hasSelectedNoteKey = selectedNoteKeys.length > 0 if (ctrlKeyDown && selectedNoteKeys.includes(uniqueKey)) { @@ -424,28 +423,40 @@ class NoteList extends React.Component { if (!ctrlKeyDown && !shiftKeyDown) { selectedNoteKeys = [] } + + if (!shiftKeyDown) { + prevShiftNoteIndex = -1 + } + selectedNoteKeys.push(uniqueKey) if (shiftKeyDown && hasSelectedNoteKey) { - const firstSelectedNoteIndex = selectedNoteKeys[0] > this.state.firstShiftSelectedNoteIndex - ? selectedNoteKeys[0] : this.state.firstShiftSelectedNoteIndex - const lastSelectedNoteIndex = this.getNoteIndexByKey(uniqueKey) - const startIndex = firstSelectedNoteIndex < lastSelectedNoteIndex - ? firstSelectedNoteIndex : lastSelectedNoteIndex - const endIndex = firstSelectedNoteIndex > lastSelectedNoteIndex - ? firstSelectedNoteIndex : lastSelectedNoteIndex + let firstShiftNoteIndex = this.getNoteIndexByKey(selectedNoteKeys[0]) + // Shift selection can either start from first note in the exisiting selectedNoteKeys + // or previous first shift note index + firstShiftNoteIndex = firstShiftNoteIndex > prevShiftNoteIndex + ? firstShiftNoteIndex : prevShiftNoteIndex + + const lastShiftNoteIndex = this.getNoteIndexByKey(uniqueKey) + + const startIndex = firstShiftNoteIndex < lastShiftNoteIndex + ? firstShiftNoteIndex : lastShiftNoteIndex + const endIndex = firstShiftNoteIndex > lastShiftNoteIndex + ? firstShiftNoteIndex : lastShiftNoteIndex selectedNoteKeys = [] for (let i = startIndex; i <= endIndex; i++) { selectedNoteKeys.push(this.notes[i].key) } - firstShiftSelectedNoteIndex = firstSelectedNoteIndex + if (prevShiftNoteIndex < 0) { + prevShiftNoteIndex = firstShiftNoteIndex + } } this.setState({ selectedNoteKeys, - firstShiftSelectedNoteIndex + prevShiftNoteIndex }) router.push({