From 07ce88f685c113ec134ca3c8eca095f921cc7dc5 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 11 Dec 2018 11:46:59 +0100
Subject: [PATCH] Clean up hoc and extend component props automatically

---
 .../dashgrid/withKeyboardNavigation.tsx       | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx b/public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx
index ef20fe96a29..f0b84b6299b 100644
--- a/public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx
+++ b/public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx
@@ -1,19 +1,17 @@
-import React from 'react';
-import { Props as DataSourceProps } from './DataSourcePicker';
-import { Props as VizTypeProps } from './VizTypePicker';
+import React, { KeyboardEvent, ComponentType, Component } from 'react';
 
 interface State {
   selected: number;
 }
 
 export interface KeyboardNavigationProps {
-  selected?: number;
-  onKeyDown?: (evt: React.KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter?: (select: number) => void;
+  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
+  onMouseEnter: (select: number) => void;
+  selected: number;
 }
 
-const withKeyboardNavigation = WrappedComponent => {
-  return class extends React.Component<DataSourceProps | VizTypeProps, State> {
+const withKeyboardNavigation = <P extends object>(WrappedComponent: ComponentType<P & KeyboardNavigationProps>) => {
+  return class WithKeyboardNavigation extends Component<P, State> {
     constructor(props) {
       super(props);
 
@@ -58,12 +56,7 @@ const withKeyboardNavigation = WrappedComponent => {
 
     render() {
       return (
-        <WrappedComponent
-          selected={this.state.selected}
-          onKeyDown={this.onKeyDown}
-          onMouseEnter={this.onMouseEnter}
-          {...this.props}
-        />
+        <WrappedComponent {...this.state} {...this.props} onKeyDown={this.onKeyDown} onMouseEnter={this.onMouseEnter} />
       );
     }
   };