add keyboard driven selection to the pageCitationmenu

WorldBrain · Feb 25, 2024 · 3447d3c · 3447d3c
1 parent 8f31d4d
commit 3447d3c
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 14 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/citations/PageCitations.tsx b/src/citations/PageCitations.tsx
@@ -54,6 +54,35 @@ export default class PageCitations extends React.PureComponent<Props, State> {
         })
     }
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown)
+    }
+
+    handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            event.stopPropagation()
+            this.setState({ optionSelected: 'ShareViaLink' })
+        } else if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            event.stopPropagation()
+            this.setState({ optionSelected: 'CopyToClipboard' })
+        } else if (event.key === 'Tab') {
+            event.preventDefault()
+            event.stopPropagation()
+            this.setState((prevState) => ({
+                optionSelected:
+                    prevState.optionSelected === 'CopyToClipboard'
+                        ? 'ShareViaLink'
+                        : 'CopyToClipboard',
+            }))
+        }
+    }
+
     private renderPreview = async (
         template: Template,
         templateType: 'originalPage' | 'examplePage',

diff --git a/src/custom-lists/ui/space-links.tsx b/src/custom-lists/ui/space-links.tsx
@@ -23,10 +23,41 @@ export interface Props {
 
 interface State {
     showCopyMessageIdx: number | null
+    selectedLink: number
 }
 
 export default class SpaceLinks extends React.PureComponent<Props> {
-    state: State = { showCopyMessageIdx: null }
+    state: State = { showCopyMessageIdx: null, selectedLink: 0 }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown, true)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown, true)
+    }
+
+    handleKeyDown = (event: KeyboardEvent) => {
+        const maxIndex = this.props.inviteLinks.length - 1
+        if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            event.stopPropagation()
+            const nextIndex = this.state.selectedLink + 1
+            this.setState({
+                selectedLink: nextIndex > maxIndex ? maxIndex : nextIndex,
+            })
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            event.stopPropagation()
+            const prevIndex = this.state.selectedLink - 1
+            this.setState({ selectedLink: prevIndex < 0 ? 0 : prevIndex })
+        } else if (event.key === 'Enter') {
+            const { link } = this.props.inviteLinks[this.state.selectedLink]
+            this.showCopyMessage(this.state.selectedLink)
+            this.props.copyLink(link)
+            this.trackClick('reader')
+        }
+    }
 
     private showCopyMessage(idx: number) {
         this.setState({ showCopyMessageIdx: idx }, () =>
@@ -91,6 +122,19 @@ export default class SpaceLinks extends React.PureComponent<Props> {
                                             this.props.copyLink(link)
                                             await this.trackClick('reader')
                                         })}
+                                        selected={
+                                            this.state.selectedLink === linkIdx
+                                        }
+                                        onMouseEnter={() =>
+                                            this.setState({
+                                                selectedLink: linkIdx,
+                                            })
+                                        }
+                                        onMouseLeave={() =>
+                                            this.setState({
+                                                selectedLink: null,
+                                            })
+                                        }
                                     >
                                         <Link>
                                             {this.state.showCopyMessageIdx ===
@@ -217,7 +261,9 @@ const LinkAndRoleBox = styled.div<{
 
 `
 
-const LinkBox = styled.div`
+const LinkBox = styled.div<{
+    selected: boolean
+}>`
     width: fill-available;
     display: flex;
     font-size: 14px;
@@ -232,9 +278,11 @@ const LinkBox = styled.div`
     align-items: center;
     border-radius: 5px;
 
-    &:hover {
-        outline: 1px solid ${(props) => props.theme.colors.greyScale3};
-    }
+    ${(props) =>
+        props.selected &&
+        css`
+            background-color: ${(props) => props.theme.colors.greyScale2}90;
+        `}
 `
 
 const Link = styled.span`

diff --git a/src/dashboard-refactor/header/search-bar/index.tsx b/src/dashboard-refactor/header/search-bar/index.tsx
@@ -92,7 +92,8 @@ export default class SearchBar extends PureComponent<SearchBarProps> {
                             onKeyDown={(e) => {
                                 if (
                                     e.key !== 'ArrowDown' &&
-                                    e.key !== 'ArrowUp'
+                                    e.key !== 'ArrowUp' &&
+                                    e.key !== 'Escape'
                                 ) {
                                     e.stopPropagation()
                                 }

diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
@@ -182,6 +182,8 @@ export class DashboardContainer extends StatefulUIElement<
                 this.props.inPageMode &&
                 !this.state.isNoteSidebarShown
             ) {
+                event.stopPropagation()
+                event.preventDefault()
                 this.props.closeInPageMode()
             }
 
@@ -197,9 +199,9 @@ export class DashboardContainer extends StatefulUIElement<
                 this.processEvent('changeFocusItem', {
                     direction: event.key === 'ArrowUp' ? 'up' : 'down',
                 })
+                event.stopPropagation()
+                event.preventDefault()
             }
-            event.stopPropagation()
-            event.preventDefault()
         }
     }
 
@@ -1651,11 +1653,6 @@ export class DashboardContainer extends StatefulUIElement<
                                 isPeeking: true,
                             })
                         }}
-                        onMouseLeave={() => {
-                            this.processEvent('setSidebarPeeking', {
-                                isPeeking: true,
-                            })
-                        }}
                         onDragEnter={() => {
                             this.processEvent('setSidebarPeeking', {
                                 isPeeking: true,