Change KeyboardNavigation from hoc to render prop component

public/app/features/dashboard/dashgrid/DataSourcePicker.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
-import withKeyboardNavigation, { KeyboardNavigationProps } from './withKeyboardNavigation';
+import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
 import { DataSourceSelectItem } from 'app/types';
 
 export interface Props {
@@ -13,109 +13,105 @@ interface State {
   searchQuery: string;
 }
 
-export const DataSourcePicker = withKeyboardNavigation(
-  class DataSourcePicker extends PureComponent<Props & KeyboardNavigationProps, State> {
-    searchInput: HTMLElement;
+export class DataSourcePicker extends PureComponent<Props, State> {
+  searchInput: HTMLElement;
 
-    constructor(props) {
-      super(props);
-      this.state = {
-        searchQuery: '',
-      };
-    }
-
-    getDataSources() {
-      const { searchQuery } = this.state;
-      const regex = new RegExp(searchQuery, 'i');
-      const { datasources } = this.props;
-
-      const filtered = datasources.filter(item => {
-        return regex.test(item.name) || regex.test(item.meta.name);
-      });
-
-      return filtered;
-    }
-
-    get maxSelectedIndex() {
-      const filtered = this.getDataSources();
-      return filtered.length - 1;
-    }
-
-    renderDataSource = (ds: DataSourceSelectItem, index: number) => {
-      const { onChangeDataSource, selected, onMouseEnter } = this.props;
-      const onClick = () => onChangeDataSource(ds);
-      const isSelected = selected === index;
-      const cssClass = classNames({
-        'ds-picker-list__item': true,
-        'ds-picker-list__item--selected': isSelected,
-      });
-      return (
-        <div
-          key={index}
-          className={cssClass}
-          title={ds.name}
-          onClick={onClick}
-          onMouseEnter={() => onMouseEnter(index)}
-        >
-          <img className="ds-picker-list__img" src={ds.meta.info.logos.small} />
-          <div className="ds-picker-list__name">{ds.name}</div>
-        </div>
-      );
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchQuery: '',
     };
-
-    componentDidMount() {
-      setTimeout(() => {
-        this.searchInput.focus();
-      }, 300);
-    }
-
-    onSearchQueryChange = evt => {
-      const value = evt.target.value;
-      this.setState(prevState => ({
-        ...prevState,
-        searchQuery: value,
-      }));
-    };
-
-    renderFilters() {
-      const { searchQuery } = this.state;
-      const { onKeyDown } = this.props;
-      return (
-        <>
-          <label className="gf-form--has-input-icon">
-            <input
-              type="text"
-              className="gf-form-input width-13"
-              placeholder=""
-              ref={elem => (this.searchInput = elem)}
-              onChange={this.onSearchQueryChange}
-              value={searchQuery}
-              onKeyDown={evt => {
-                onKeyDown(evt, this.maxSelectedIndex, () => {
-                  const { onChangeDataSource, selected } = this.props;
-                  const ds = this.getDataSources()[selected];
-                  onChangeDataSource(ds);
-                });
-              }}
-            />
-            <i className="gf-form-input-icon fa fa-search" />
-          </label>
-        </>
-      );
-    }
-
-    render() {
-      return (
-        <>
-          <div className="cta-form__bar">
-            {this.renderFilters()}
-            <div className="gf-form--grow" />
-          </div>
-          <div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div>
-        </>
-      );
-    }
   }
-);
+
+  getDataSources() {
+    const { searchQuery } = this.state;
+    const regex = new RegExp(searchQuery, 'i');
+    const { datasources } = this.props;
+
+    const filtered = datasources.filter(item => {
+      return regex.test(item.name) || regex.test(item.meta.name);
+    });
+
+    return filtered;
+  }
+
+  get maxSelectedIndex() {
+    const filtered = this.getDataSources();
+    return filtered.length - 1;
+  }
+
+  renderDataSource = (ds: DataSourceSelectItem, index: number, keyNavProps: KeyboardNavigationProps) => {
+    const { onChangeDataSource } = this.props;
+    const { selected, onMouseEnter } = keyNavProps;
+    const onClick = () => onChangeDataSource(ds);
+    const isSelected = selected === index;
+    const cssClass = classNames({
+      'ds-picker-list__item': true,
+      'ds-picker-list__item--selected': isSelected,
+    });
+    return (
+      <div key={index} className={cssClass} title={ds.name} onClick={onClick} onMouseEnter={() => onMouseEnter(index)}>
+        <img className="ds-picker-list__img" src={ds.meta.info.logos.small} />
+        <div className="ds-picker-list__name">{ds.name}</div>
+      </div>
+    );
+  };
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.searchInput.focus();
+    }, 300);
+  }
+
+  onSearchQueryChange = evt => {
+    const value = evt.target.value;
+    this.setState(prevState => ({
+      ...prevState,
+      searchQuery: value,
+    }));
+  };
+
+  renderFilters({ onKeyDown, selected }: KeyboardNavigationProps) {
+    const { searchQuery } = this.state;
+    return (
+      <label className="gf-form--has-input-icon">
+        <input
+          type="text"
+          className="gf-form-input width-13"
+          placeholder=""
+          ref={elem => (this.searchInput = elem)}
+          onChange={this.onSearchQueryChange}
+          value={searchQuery}
+          onKeyDown={evt => {
+            onKeyDown(evt, this.maxSelectedIndex, () => {
+              const { onChangeDataSource } = this.props;
+              const ds = this.getDataSources()[selected];
+              onChangeDataSource(ds);
+            });
+          }}
+        />
+        <i className="gf-form-input-icon fa fa-search" />
+      </label>
+    );
+  }
+
+  render() {
+    return (
+      <KeyboardNavigation
+        render={(keyNavProps: KeyboardNavigationProps) => (
+          <>
+            <div className="cta-form__bar">
+              {this.renderFilters(keyNavProps)}
+              <div className="gf-form--grow" />
+            </div>
+            <div className="ds-picker-list">
+              {this.getDataSources().map((ds, index) => this.renderDataSource(ds, index, keyNavProps))}
+            </div>
+          </>
+        )}
+      />
+    );
+  }
+}
 
 export default DataSourcePicker;

public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx

@@ -0,0 +1,71 @@
+import React, { KeyboardEvent, Component } from 'react';
+
+interface State {
+  selected: number;
+}
+
+export interface KeyboardNavigationProps {
+  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
+  onMouseEnter: (select: number) => void;
+  selected: number;
+}
+
+interface Props {
+  render: (injectProps: any) => void;
+}
+
+class KeyboardNavigation extends Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selected: 0,
+    };
+  }
+
+  goToNext = (maxSelectedIndex: number) => {
+    const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
+    this.setState({
+      selected: nextIndex,
+    });
+  };
+
+  goToPrev = (maxSelectedIndex: number) => {
+    const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
+    this.setState({
+      selected: nextIndex,
+    });
+  };
+
+  onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
+    if (evt.key === 'ArrowDown') {
+      evt.preventDefault();
+      this.goToNext(maxSelectedIndex);
+    }
+    if (evt.key === 'ArrowUp') {
+      evt.preventDefault();
+      this.goToPrev(maxSelectedIndex);
+    }
+    if (evt.key === 'Enter' && onEnterAction) {
+      onEnterAction();
+    }
+  };
+
+  onMouseEnter = (mouseEnterIndex: number) => {
+    this.setState({
+      selected: mouseEnterIndex,
+    });
+  };
+
+  render() {
+    const injectProps = {
+      onKeyDown: this.onKeyDown,
+      onMouseEnter: this.onMouseEnter,
+      selected: this.state.selected,
+    };
+
+    return <>{this.props.render({ ...injectProps })}</>;
+  }
+}
+
+export default KeyboardNavigation;

public/app/features/dashboard/dashgrid/VizTypePicker.tsx

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
-import withKeyboardNavigation, { KeyboardNavigationProps } from './withKeyboardNavigation';
+import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
 
 export interface Props {
   current: PanelPlugin;
@@ -15,118 +15,121 @@ interface State {
   searchQuery: string;
 }
 
-export const VizTypePicker = withKeyboardNavigation(
-  class VizTypePicker extends PureComponent<Props & KeyboardNavigationProps, State> {
-    searchInput: HTMLElement;
-    pluginList = this.getPanelPlugins('');
+export class VizTypePicker extends PureComponent<Props, State> {
+  searchInput: HTMLElement;
+  pluginList = this.getPanelPlugins('');
 
-    constructor(props) {
-      super(props);
+  constructor(props) {
+    super(props);
 
-      this.state = {
-        searchQuery: '',
-      };
-    }
-
-    get maxSelectedIndex() {
-      const filteredPluginList = this.getFilteredPluginList();
-      return filteredPluginList.length - 1;
-    }
-
-    componentDidMount() {
-      setTimeout(() => {
-        this.searchInput.focus();
-      }, 300);
-    }
-
-    getPanelPlugins(filter): PanelPlugin[] {
-      const panels = _.chain(config.panels)
-        .filter({ hideFromList: false })
-        .map(item => item)
-        .value();
-
-      // add sort by sort property
-      return _.sortBy(panels, 'sort');
-    }
-
-    renderVizPlugin = (plugin: PanelPlugin, index: number) => {
-      const { onTypeChanged, selected, onMouseEnter } = this.props;
-      const isSelected = selected === index;
-      const isCurrent = plugin.id === this.props.current.id;
-      return (
-        <VizTypePickerPlugin
-          key={plugin.id}
-          isSelected={isSelected}
-          isCurrent={isCurrent}
-          plugin={plugin}
-          onMouseEnter={() => {
-            onMouseEnter(index);
-          }}
-          onClick={() => onTypeChanged(plugin)}
-        />
-      );
+    this.state = {
+      searchQuery: '',
     };
-
-    getFilteredPluginList = (): PanelPlugin[] => {
-      const { searchQuery } = this.state;
-      const regex = new RegExp(searchQuery, 'i');
-      const pluginList = this.pluginList;
-
-      const filtered = pluginList.filter(item => {
-        return regex.test(item.name);
-      });
-
-      return filtered;
-    };
-
-    onSearchQueryChange = evt => {
-      const value = evt.target.value;
-      this.setState(prevState => ({
-        ...prevState,
-        searchQuery: value,
-      }));
-    };
-
-    renderFilters = () => {
-      const { searchQuery } = this.state;
-      const { onKeyDown } = this.props;
-      return (
-        <>
-          <label className="gf-form--has-input-icon">
-            <input
-              type="text"
-              className="gf-form-input width-13"
-              placeholder=""
-              ref={elem => (this.searchInput = elem)}
-              onChange={this.onSearchQueryChange}
-              value={searchQuery}
-              // onKeyDown={this.props.onKeyDown}
-              onKeyDown={evt => {
-                onKeyDown(evt, this.maxSelectedIndex, () => {
-                  const { onTypeChanged, selected } = this.props;
-                  const vizType = this.getFilteredPluginList()[selected];
-                  onTypeChanged(vizType);
-                });
-              }}
-            />
-            <i className="gf-form-input-icon fa fa-search" />
-          </label>
-        </>
-      );
-    };
-
-    render() {
-      const filteredPluginList = this.getFilteredPluginList();
-
-      return (
-        <>
-          <div className="cta-form__bar">
-            {this.renderFilters()}
-            <div className="gf-form--grow" />
-          </div>
-          <div className="viz-picker">{filteredPluginList.map(this.renderVizPlugin)}</div>
-        </>
-      );
-    }
   }
-);
+
+  get maxSelectedIndex() {
+    const filteredPluginList = this.getFilteredPluginList();
+    return filteredPluginList.length - 1;
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.searchInput.focus();
+    }, 300);
+  }
+
+  getPanelPlugins(filter): PanelPlugin[] {
+    const panels = _.chain(config.panels)
+      .filter({ hideFromList: false })
+      .map(item => item)
+      .value();
+
+    // add sort by sort property
+    return _.sortBy(panels, 'sort');
+  }
+
+  renderVizPlugin = (plugin: PanelPlugin, index: number, keyNavProps: KeyboardNavigationProps) => {
+    const { onTypeChanged } = this.props;
+    const { selected, onMouseEnter } = keyNavProps;
+    const isSelected = selected === index;
+    const isCurrent = plugin.id === this.props.current.id;
+    return (
+      <VizTypePickerPlugin
+        key={plugin.id}
+        isSelected={isSelected}
+        isCurrent={isCurrent}
+        plugin={plugin}
+        onMouseEnter={() => {
+          onMouseEnter(index);
+        }}
+        onClick={() => onTypeChanged(plugin)}
+      />
+    );
+  };
+
+  getFilteredPluginList = (): PanelPlugin[] => {
+    const { searchQuery } = this.state;
+    const regex = new RegExp(searchQuery, 'i');
+    const pluginList = this.pluginList;
+
+    const filtered = pluginList.filter(item => {
+      return regex.test(item.name);
+    });
+
+    return filtered;
+  };
+
+  onSearchQueryChange = evt => {
+    const value = evt.target.value;
+    this.setState(prevState => ({
+      ...prevState,
+      searchQuery: value,
+    }));
+  };
+
+  renderFilters = ({ onKeyDown, selected }: KeyboardNavigationProps) => {
+    const { searchQuery } = this.state;
+    return (
+      <>
+        <label className="gf-form--has-input-icon">
+          <input
+            type="text"
+            className="gf-form-input width-13"
+            placeholder=""
+            ref={elem => (this.searchInput = elem)}
+            onChange={this.onSearchQueryChange}
+            value={searchQuery}
+            onKeyDown={evt => {
+              onKeyDown(evt, this.maxSelectedIndex, () => {
+                const { onTypeChanged } = this.props;
+                const vizType = this.getFilteredPluginList()[selected];
+                onTypeChanged(vizType);
+              });
+            }}
+          />
+          <i className="gf-form-input-icon fa fa-search" />
+        </label>
+      </>
+    );
+  };
+
+  render() {
+    const filteredPluginList = this.getFilteredPluginList();
+
+    return (
+      <KeyboardNavigation
+        render={(keyNavProps: KeyboardNavigationProps) => (
+          <>
+            <div className="cta-form__bar">
+              {this.renderFilters(keyNavProps)}
+              <div className="gf-form--grow" />
+            </div>
+            <div className="viz-picker">
+              {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index, keyNavProps))}
+            </div>
+          </>
+        )}
+      />
+    );
+  }
+}

public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx

@@ -1,65 +0,0 @@
-import React, { KeyboardEvent, ComponentType, Component } from 'react';
-
-interface State {
-  selected: number;
-}
-
-export interface KeyboardNavigationProps {
-  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter: (select: number) => void;
-  selected: number;
-}
-
-const withKeyboardNavigation = <P extends object>(WrappedComponent: ComponentType<P & KeyboardNavigationProps>) => {
-  return class WithKeyboardNavigation extends Component<P, State> {
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        selected: 0,
-      };
-    }
-
-    goToNext = (maxSelectedIndex: number) => {
-      const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
-      this.setState({
-        selected: nextIndex,
-      });
-    };
-
-    goToPrev = (maxSelectedIndex: number) => {
-      const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
-      this.setState({
-        selected: nextIndex,
-      });
-    };
-
-    onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
-      if (evt.key === 'ArrowDown') {
-        evt.preventDefault();
-        this.goToNext(maxSelectedIndex);
-      }
-      if (evt.key === 'ArrowUp') {
-        evt.preventDefault();
-        this.goToPrev(maxSelectedIndex);
-      }
-      if (evt.key === 'Enter' && onEnterAction) {
-        onEnterAction();
-      }
-    };
-
-    onMouseEnter = (mouseEnterIndex: number) => {
-      this.setState({
-        selected: mouseEnterIndex,
-      });
-    };
-
-    render() {
-      return (
-        <WrappedComponent {...this.state} {...this.props} onKeyDown={this.onKeyDown} onMouseEnter={this.onMouseEnter} />
-      );
-    }
-  };
-};
-
-export default withKeyboardNavigation;