OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

iterate some more 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-02 23:51:02 +01:00
parent 404009c8cb
commit 0854924b8d
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/structures/ContextMenu.tsx
View File

@ -114,7 +114,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
this.initialFocus.focus(); this.initialFocus.focus();
} }
collectContextMenuRect = (element) => { private collectContextMenuRect = (element) => {
// We don't need to clean up when unmounting, so ignore // We don't need to clean up when unmounting, so ignore
if (!element) return; if (!element) return;
@ -131,7 +131,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
}); });
}; };
onContextMenu = (e) => { private onContextMenu = (e) => {
if (this.props.onFinished) { if (this.props.onFinished) {
this.props.onFinished(); this.props.onFinished();
@ -154,20 +154,20 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
} }
}; };
onContextMenuPreventBubbling = (e) => { private onContextMenuPreventBubbling = (e) => {
// stop propagation so that any context menu handlers don't leak out of this context menu // stop propagation so that any context menu handlers don't leak out of this context menu
// but do not inhibit the default browser menu // but do not inhibit the default browser menu
e.stopPropagation(); e.stopPropagation();
}; };
// Prevent clicks on the background from going through to the component which opened the menu. // Prevent clicks on the background from going through to the component which opened the menu.
_onFinished = (ev: InputEvent) => { private onFinished = (ev: React.MouseEvent) => {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
if (this.props.onFinished) this.props.onFinished(); if (this.props.onFinished) this.props.onFinished();
}; };
_onMoveFocus = (element, up) => { private onMoveFocus = (element: Element, up: boolean) => {
let descending = false; // are we currently descending or ascending through the DOM tree? let descending = false; // are we currently descending or ascending through the DOM tree?
do { do {
@ -201,25 +201,25 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
} while (element && !ARIA_MENU_ITEM_ROLES.has(element.getAttribute("role"))); } while (element && !ARIA_MENU_ITEM_ROLES.has(element.getAttribute("role")));
if (element) { if (element) {
element.focus(); (element as HTMLElement).focus();
} }
}; };
_onMoveFocusHomeEnd = (element, up) => { private onMoveFocusHomeEnd = (element: Element, up: boolean) => {
let results = element.querySelectorAll('[role^="menuitem"]'); let results = element.querySelectorAll('[role^="menuitem"]');
if (!results) { if (!results) {
results = element.querySelectorAll('[tab-index]'); results = element.querySelectorAll('[tab-index]');
} }
if (results && results.length) { if (results && results.length) {
if (up) { if (up) {
results[0].focus(); (results[0] as HTMLElement).focus();
} else { } else {
results[results.length - 1].focus(); (results[results.length - 1] as HTMLElement).focus();
} }
} }
}; };
_onKeyDown = (ev) => { private onKeyDown = (ev: React.KeyboardEvent) => {
if (!this.props.managed) { if (!this.props.managed) {
if (ev.key === Key.ESCAPE) { if (ev.key === Key.ESCAPE) {
this.props.onFinished(); this.props.onFinished();
@ -237,16 +237,16 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
this.props.onFinished(); this.props.onFinished();
break; break;
case Key.ARROW_UP: case Key.ARROW_UP:
this._onMoveFocus(ev.target, true); this.onMoveFocus(ev.target as Element, true);
break; break;
case Key.ARROW_DOWN: case Key.ARROW_DOWN:
this._onMoveFocus(ev.target, false); this.onMoveFocus(ev.target as Element, false);
break; break;
case Key.HOME: case Key.HOME:
this._onMoveFocusHomeEnd(this.state.contextMenuElem, true); this.onMoveFocusHomeEnd(this.state.contextMenuElem, true);
break; break;
case Key.END: case Key.END:
this._onMoveFocusHomeEnd(this.state.contextMenuElem, false); this.onMoveFocusHomeEnd(this.state.contextMenuElem, false);
break; break;
default: default:
handled = false; handled = false;
@ -259,7 +259,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
} }
}; };
renderMenu(hasBackground = this.props.hasBackground) { protected renderMenu(hasBackground = this.props.hasBackground) {
const position: Partial<Writeable<DOMRect>> = {}; const position: Partial<Writeable<DOMRect>> = {};
const props = this.props; const props = this.props;
@ -356,7 +356,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
<div <div
className="mx_ContextualMenu_background" className="mx_ContextualMenu_background"
style={wrapperStyle} style={wrapperStyle}
onClick={this._onFinished} onClick={this.onFinished}
onContextMenu={this.onContextMenu} onContextMenu={this.onContextMenu}
/> />
); );
@ -366,7 +366,7 @@ export class ContextMenu extends React.PureComponent<IProps, IState> {
<div <div
className="mx_ContextualMenu_wrapper" className="mx_ContextualMenu_wrapper"
style={{...position, ...wrapperStyle}} style={{...position, ...wrapperStyle}}
onKeyDown={this._onKeyDown} onKeyDown={this.onKeyDown}
onContextMenu={this.onContextMenuPreventBubbling} onContextMenu={this.onContextMenuPreventBubbling}
> >
<div <div