/* * SonarQube * Copyright (C) 2009-2022 SonarSource SA * mailto:info AT sonarsource DOT com * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 3 of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; import PageActions from '../../components/ui/PageActions'; import { getComponentMeasureUniqueKey } from '../../helpers/component'; import { isInput, isShortcut } from '../../helpers/keyboardEventHelpers'; import { KeyboardKeys } from '../../helpers/keycodes'; import { ComponentMeasure } from '../../types/types'; import { getWrappedDisplayName } from './utils'; export interface WithKeyboardNavigationProps { components?: ComponentMeasure[]; cycle?: boolean; isFile?: boolean; onEndOfList?: () => void; onGoToParent?: () => void; onHighlight?: (item: ComponentMeasure) => void; onSelect?: (item: ComponentMeasure) => void; selected?: ComponentMeasure; } export default function withKeyboardNavigation

( WrappedComponent: React.ComponentClass

> ) { return class Wrapper extends React.Component

{ static displayName = getWrappedDisplayName(WrappedComponent, 'withKeyboardNavigation'); componentDidMount() { document.addEventListener('keydown', this.handleKeyDown); } componentWillUnmount() { document.removeEventListener('keydown', this.handleKeyDown); } handleKeyDown = (event: KeyboardEvent) => { if (isInput(event) || isShortcut(event)) { return true; } if (event.key === KeyboardKeys.UpArrow) { event.preventDefault(); return this.skipIfFile(this.handleHighlightPrevious); } else if (event.key === KeyboardKeys.DownArrow) { event.preventDefault(); return this.skipIfFile(this.handleHighlightNext); } else if (event.key === KeyboardKeys.RightArrow || event.key === KeyboardKeys.Enter) { event.preventDefault(); return this.skipIfFile(this.handleSelectCurrent); } else if (event.key === KeyboardKeys.LeftArrow) { event.preventDefault(); this.handleSelectParent(); return false; // always hijack left / Why did you put this @wouter? } return false; }; getCurrentIndex = () => { const { selected, components = [] } = this.props; return selected ? components.findIndex( component => getComponentMeasureUniqueKey(component) === getComponentMeasureUniqueKey(selected) ) : -1; }; skipIfFile = (handler: () => void) => { if (this.props.isFile) { return true; } handler(); return false; }; handleHighlightNext = () => { if (this.props.onHighlight === undefined) { return; } const { components = [], cycle } = this.props; const index = this.getCurrentIndex(); const first = cycle ? 0 : index; this.props.onHighlight( index < components.length - 1 ? components[index + 1] : components[first] ); if (index + 1 === components.length - 1 && this.props.onEndOfList) { this.props.onEndOfList(); } }; handleHighlightPrevious = () => { if (this.props.onHighlight === undefined) { return; } const { components = [], cycle } = this.props; const index = this.getCurrentIndex(); const last = cycle ? components.length - 1 : index; this.props.onHighlight(index > 0 ? components[index - 1] : components[last]); }; handleSelectCurrent = () => { if (this.props.onSelect === undefined) { return; } const { selected } = this.props; if (selected !== undefined) { this.props.onSelect(selected as ComponentMeasure); } }; handleSelectNext = () => { if (this.props.onSelect === undefined) { return; } const { components = [] } = this.props; const index = this.getCurrentIndex(); if (index !== -1 && index < components.length - 1) { this.props.onSelect(components[index + 1]); } }; handleSelectParent = () => { if (this.props.onGoToParent !== undefined) { this.props.onGoToParent(); } }; handleSelectPrevious = () => { if (this.props.onSelect === undefined) { return; } const { components = [] } = this.props; const index = this.getCurrentIndex(); if (components.length && index > 0) { this.props.onSelect(components[index - 1]); } }; render() { return ( <> ); } }; }