Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
9f948584
Unverified
Commit
9f948584
authored
Jul 20, 2020
by
Kyle Keating
Committed by
GitHub
Jul 20, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Improve typecheck for MenuKeyboardNavigationProps (#2345)
parent
0b01c170
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
14 additions
and
4 deletions
+14
-4
menu-keyboard-navigation.js
src/sidebar/components/menu-keyboard-navigation.js
+14
-3
tsconfig.json
src/tsconfig.json
+0
-1
No files found.
src/sidebar/components/menu-keyboard-navigation.js
View file @
9f948584
...
@@ -8,12 +8,22 @@ function isElementVisible(element) {
...
@@ -8,12 +8,22 @@ function isElementVisible(element) {
return
element
.
offsetParent
!==
null
;
return
element
.
offsetParent
!==
null
;
}
}
/**
* @typedef MenuKeyboardNavigationProps
* @prop {string} [className]
* @prop {(e: KeyboardEvent) => any} [closeMenu] - Callback when the menu is closed via keyboard input
* @prop {boolean} [visible] - When true`, sets focus on the first item in the list
* @prop {Object} children - Array of nodes which may contain <MenuItems> or any nodes
*/
/**
/**
* Helper component used by Menu and MenuItem to facilitate keyboard navigation of a
* Helper component used by Menu and MenuItem to facilitate keyboard navigation of a
* list of <MenuItem> components. This component should not be used directly.
* list of <MenuItem> components. This component should not be used directly.
*
*
* Note that `ArrowRight` shall be handled by the parent <MenuItem> directly and
* Note that `ArrowRight` shall be handled by the parent <MenuItem> directly and
* all other focus() related navigation is handled here.
* all other focus() related navigation is handled here.
*
* @param {MenuKeyboardNavigationProps} props
*/
*/
export
default
function
MenuKeyboardNavigation
({
export
default
function
MenuKeyboardNavigation
({
className
,
className
,
...
@@ -21,7 +31,7 @@ export default function MenuKeyboardNavigation({
...
@@ -21,7 +31,7 @@ export default function MenuKeyboardNavigation({
children
,
children
,
visible
,
visible
,
})
{
})
{
const
menuRef
=
useRef
(
null
);
const
menuRef
=
useRef
(
/** @type {HTMLDivElement|null} */
(
null
)
);
useEffect
(()
=>
{
useEffect
(()
=>
{
let
focusTimer
=
null
;
let
focusTimer
=
null
;
...
@@ -30,7 +40,7 @@ export default function MenuKeyboardNavigation({
...
@@ -30,7 +40,7 @@ export default function MenuKeyboardNavigation({
// The focus won't work without delaying rendering.
// The focus won't work without delaying rendering.
const
firstItem
=
menuRef
.
current
.
querySelector
(
'[role^="menuitem"]'
);
const
firstItem
=
menuRef
.
current
.
querySelector
(
'[role^="menuitem"]'
);
if
(
firstItem
)
{
if
(
firstItem
)
{
firstItem
.
focus
();
/** @type {HTMLElement} */
(
firstItem
)
.
focus
();
}
}
});
});
}
}
...
@@ -42,7 +52,8 @@ export default function MenuKeyboardNavigation({
...
@@ -42,7 +52,8 @@ export default function MenuKeyboardNavigation({
const
onKeyDown
=
event
=>
{
const
onKeyDown
=
event
=>
{
const
menuItems
=
Array
.
from
(
const
menuItems
=
Array
.
from
(
menuRef
.
current
.
querySelectorAll
(
'[role^="menuitem"]'
)
/** @type {NodeListOf<HTMLElement>} */
(
menuRef
.
current
.
querySelectorAll
(
'[role^="menuitem"]'
))
).
filter
(
isElementVisible
);
).
filter
(
isElementVisible
);
let
focusedIndex
=
menuItems
.
findIndex
(
el
=>
let
focusedIndex
=
menuItems
.
findIndex
(
el
=>
...
...
src/tsconfig.json
View file @
9f948584
...
@@ -57,7 +57,6 @@
...
@@ -57,7 +57,6 @@
"sidebar/components/login-prompt-panel.js"
,
"sidebar/components/login-prompt-panel.js"
,
"sidebar/components/markdown-editor.js"
,
"sidebar/components/markdown-editor.js"
,
"sidebar/components/menu-item.js"
,
"sidebar/components/menu-item.js"
,
"sidebar/components/menu-keyboard-navigation.js"
,
"sidebar/components/menu.js"
,
"sidebar/components/menu.js"
,
"sidebar/components/moderation-banner.js"
,
"sidebar/components/moderation-banner.js"
,
"sidebar/components/new-note-btn.js"
,
"sidebar/components/new-note-btn.js"
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment