added toggle next and previous snippet in list using keyboard shortcut

ZeroX-DG · ZeroX-DG · commit b9b46427ba13 · 2018-08-01T21:25:50.000+07:00
diff --git a/browser/core/functions/keyboard.js b/browser/core/functions/keyboard.js
@@ -40,6 +40,18 @@ const actions = [
     action: () => {
       eventEmitter.emit('snippets:unSave')
     }
+  },
+  {
+    name: 'TogglePreviousSnippet',
+    action: () => {
+      eventEmitter.emit('snippet-list:previous')
+    }
+  },
+  {
+    name: 'ToggleNextSnippet',
+    action: () => {
+      eventEmitter.emit('snippet-list:next')
+    }
   }
 ]
 
diff --git a/browser/lib/config-manager.js b/browser/lib/config-manager.js
@@ -37,7 +37,9 @@ const DEFAULT_CONFIG = {
     toggleSidebar: OSX ? 'Cmd + B' : 'Ctrl + B',
     closeAllModals: 'Esc',
     SaveAllSnippets: OSX ? 'Cmd + S' : 'Ctrl + S',
-    CancelEditSnippets: 'Esc'
+    CancelEditSnippets: 'Esc',
+    TogglePreviousSnippet: OSX ? 'Cmd + pageup' : 'Ctrl + pageup',
+    ToggleNextSnippet: OSX ? 'Cmd + pagedown' : 'Ctrl + pagedown'
   }
 }
 
diff --git a/browser/render/layouts/list-and-detail/snippet-detail-multi-file/index.jsx b/browser/render/layouts/list-and-detail/snippet-detail-multi-file/index.jsx
@@ -27,16 +27,25 @@ export default class SnippetDetailMultiFile extends React.Component {
   }
 
   componentDidMount () {
-    eventEmitter.on('snippets:saveAll', () => {
-      if (this.state.isEditing) {
-        this.handleSaveChangesClick()
-      }
-    })
-    eventEmitter.on('snippets:unSave', () => {
-      if (this.state.isEditing) {
-        this.handleDiscardChangesClick()
-      }
-    })
+    eventEmitter.on('snippets:saveAll', this.handleSaveChangesEvent)
+    eventEmitter.on('snippets:unSave', this.handleDiscardChangesEvent)
+  }
+
+  componentWillUnmount () {
+    eventEmitter.off('snippets:saveAll', this.handleSaveChangesEvent)
+    eventEmitter.off('snippets:unSave', this.handleDiscardChangesEvent)
+  }
+
+  handleSaveChangesEvent () {
+    if (this.state.isEditing) {
+      this.handleSaveChangesClick()
+    }
+  }
+
+  handleDiscardChangesEvent () {
+    if (this.state.isEditing) {
+      this.handleDiscardChangesClick()
+    }
   }
 
   renderTopBar () {
diff --git a/browser/render/layouts/list-and-detail/snippet-detail/index.jsx b/browser/render/layouts/list-and-detail/snippet-detail/index.jsx
@@ -25,16 +25,25 @@ export default class SnippetDetail extends React.Component {
   }
 
   componentDidMount () {
-    eventEmitter.on('snippets:saveAll', () => {
-      if (this.state.isEditing) {
-        this.handleSaveChangesClick()
-      }
-    })
-    eventEmitter.on('snippets:unSave', () => {
-      if (this.state.isEditing) {
-        this.handleDiscardChangesClick()
-      }
-    })
+    eventEmitter.on('snippets:saveAll', this.handleSaveChangesEvent)
+    eventEmitter.on('snippets:unSave', this.handleDiscardChangesEvent)
+  }
+
+  componentWillUnmount () {
+    eventEmitter.off('snippets:saveAll', this.handleSaveChangesEvent)
+    eventEmitter.off('snippets:unSave', this.handleDiscardChangesEvent)
+  }
+
+  handleSaveChangesEvent () {
+    if (this.state.isEditing) {
+      this.handleSaveChangesClick()
+    }
+  }
+
+  handleDiscardChangesEvent () {
+    if (this.state.isEditing) {
+      this.handleDiscardChangesClick()
+    }
   }
 
   renderTopBar () {
diff --git a/browser/render/layouts/list-and-detail/snippet-list/index.jsx b/browser/render/layouts/list-and-detail/snippet-list/index.jsx
@@ -15,6 +15,42 @@ export default class SnippetList extends React.Component {
     eventEmitter.on('snippet-detail:edit-end', () => {
       this.refs.wall.style.display = 'none'
     })
+    eventEmitter.on('snippet-list:previous', () => {
+      const { snippets, selectedSnippet } = this.props.store
+      if (selectedSnippet) {
+        for (let i = 0; i < snippets.length; i++) {
+          if (snippets[i].key === selectedSnippet.key) {
+            // previous of the i-th snippet is i - 1
+            let previousIndex = i - 1
+            if (previousIndex < 0) {
+              previousIndex = snippets.length - 1
+            }
+            this.props.store.selectedSnippet = snippets[previousIndex]
+            break
+          }
+        }
+      } else {
+        this.props.store.selectedSnippet = snippets[0]
+      }
+    })
+    eventEmitter.on('snippet-list:next', () => {
+      const { snippets, selectedSnippet } = this.props.store
+      if (selectedSnippet) {
+        for (let i = 0; i < snippets.length; i++) {
+          if (snippets[i].key === selectedSnippet.key) {
+            // the next snippet of the i-th snippet is i + 1
+            let nextIndex = i + 1
+            if (nextIndex > snippets.length - 1) {
+              nextIndex = 0
+            }
+            this.props.store.selectedSnippet = snippets[nextIndex]
+            break
+          }
+        }
+      } else {
+        this.props.store.selectedSnippet = snippets[0]
+      }
+    })
   }
 
   renderSnippetList () {

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,18 @@ const actions = [`
`40`	`40`	`action: () => {`
`41`	`41`	`eventEmitter.emit('snippets:unSave')`
`42`	`42`	`}`
	`43`	`+ },`
	`44`	`+ {`
	`45`	`+ name: 'TogglePreviousSnippet',`
	`46`	`+ action: () => {`
	`47`	`+ eventEmitter.emit('snippet-list:previous')`
	`48`	`+ }`
	`49`	`+ },`
	`50`	`+ {`
	`51`	`+ name: 'ToggleNextSnippet',`
	`52`	`+ action: () => {`
	`53`	`+ eventEmitter.emit('snippet-list:next')`
	`54`	`+ }`
`43`	`55`	`}`
`44`	`56`	`]`
`45`	`57`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,9 @@ const DEFAULT_CONFIG = {`
`37`	`37`	`toggleSidebar: OSX ? 'Cmd + B' : 'Ctrl + B',`
`38`	`38`	`closeAllModals: 'Esc',`
`39`	`39`	`SaveAllSnippets: OSX ? 'Cmd + S' : 'Ctrl + S',`
`40`		`- CancelEditSnippets: 'Esc'`
	`40`	`+ CancelEditSnippets: 'Esc',`
	`41`	`+ TogglePreviousSnippet: OSX ? 'Cmd + pageup' : 'Ctrl + pageup',`
	`42`	`+ ToggleNextSnippet: OSX ? 'Cmd + pagedown' : 'Ctrl + pagedown'`
`41`	`43`	`}`
`42`	`44`	`}`
`43`	`45`