Skip to content

N
nexpie-grafana-theme
Commit 4dbfcde7 by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #14446 from grafana/14274-develop-viz-keynav 

Change KeyboardNavigation HOC to a component with render prop instead
parents 5d4034be a0da303f
Showing with 178 additions and 200 deletions
public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import withKeyboardNavigation from './withKeyboardNavigation'; import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
import { DataSourceSelectItem } from 'app/types'; import { DataSourceSelectItem } from 'app/types';
export interface Props { export interface Props {
onChangeDataSource: (ds: any) => void; onChangeDataSource: (ds: DataSourceSelectItem) => void;
datasources: DataSourceSelectItem[]; datasources: DataSourceSelectItem[];
selected?: number;
onKeyDown?: (evt: any, maxSelectedIndex: number, onEnterAction: () => void) => void;
onMouseEnter?: (select: number) => void;
} }
interface State { interface State {
searchQuery: string; searchQuery: string;
} }
export const DataSourcePicker = withKeyboardNavigation( export class DataSourcePicker extends PureComponent<Props, State> {
class DataSourcePicker extends PureComponent<Props, State> { searchInput: HTMLElement;
searchInput: HTMLElement;
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
searchQuery: '', searchQuery: '',
}; };
} }
getDataSources() { getDataSources() {
const { searchQuery } = this.state; const { searchQuery } = this.state;
const regex = new RegExp(searchQuery, 'i'); const regex = new RegExp(searchQuery, 'i');
const { datasources } = this.props; const { datasources } = this.props;
const filtered = datasources.filter(item => { const filtered = datasources.filter(item => {
return regex.test(item.name) || regex.test(item.meta.name); return regex.test(item.name) || regex.test(item.meta.name);
}); });
return filtered; return filtered;
} }
get maxSelectedIndex() { get maxSelectedIndex() {
const filtered = this.getDataSources(); const filtered = this.getDataSources();
return filtered.length - 1; return filtered.length - 1;
} }
renderDataSource = (ds: DataSourceSelectItem, index: number) => { renderDataSource = (ds: DataSourceSelectItem, index: number, keyNavProps: KeyboardNavigationProps) => {
const { onChangeDataSource, selected, onMouseEnter } = this.props; const { onChangeDataSource } = this.props;
const onClick = () => onChangeDataSource(ds); const { selected, onMouseEnter } = keyNavProps;
const isSelected = selected === index; const onClick = () => onChangeDataSource(ds);
const cssClass = classNames({ const isSelected = selected === index;
'ds-picker-list__item': true, const cssClass = classNames({
'ds-picker-list__item--selected': isSelected, 'ds-picker-list__item': true,
}); 'ds-picker-list__item--selected': isSelected,
return ( });
<div return (
key={index} <div key={index} className={cssClass} title={ds.name} onClick={onClick} onMouseEnter={() => onMouseEnter(index)}>
className={cssClass} <img className="ds-picker-list__img" src={ds.meta.info.logos.small} />
title={ds.name} <div className="ds-picker-list__name">{ds.name}</div>
onClick={onClick} </div>
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() { componentDidMount() {
setTimeout(() => { setTimeout(() => {
this.searchInput.focus(); this.searchInput.focus();
}, 300); }, 300);
} }
onSearchQueryChange = evt => { onSearchQueryChange = evt => {
const value = evt.target.value; const value = evt.target.value;
this.setState(prevState => ({ this.setState(prevState => ({
...prevState, ...prevState,
searchQuery: value, searchQuery: value,
})); }));
}; };
renderFilters() { renderFilters({ onKeyDown, selected }: KeyboardNavigationProps) {
const { searchQuery } = this.state; const { searchQuery } = this.state;
const { onKeyDown } = this.props; return (
return ( <label className="gf-form--has-input-icon">
<> <input
<label className="gf-form--has-input-icon"> type="text"
<input className="gf-form-input width-13"
type="text" placeholder=""
className="gf-form-input width-13" ref={elem => (this.searchInput = elem)}
placeholder="" onChange={this.onSearchQueryChange}
ref={elem => (this.searchInput = elem)} value={searchQuery}
onChange={this.onSearchQueryChange} onKeyDown={evt => {
value={searchQuery} onKeyDown(evt, this.maxSelectedIndex, () => {
onKeyDown={evt => { const { onChangeDataSource } = this.props;
onKeyDown(evt, this.maxSelectedIndex, () => { const ds = this.getDataSources()[selected];
const { onChangeDataSource, selected } = this.props; onChangeDataSource(ds);
const ds = this.getDataSources()[selected]; });
onChangeDataSource(ds); }}
}); />
}} <i className="gf-form-input-icon fa fa-search" />
/> </label>
<i className="gf-form-input-icon fa fa-search" /> );
</label> }
</>
);
}
render() { render() {
return ( return (
<> <KeyboardNavigation
<div className="cta-form__bar"> render={(keyNavProps: KeyboardNavigationProps) => (
{this.renderFilters()} <>
<div className="gf-form--grow" /> <div className="cta-form__bar">
</div> {this.renderFilters(keyNavProps)}
<div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div> <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; export default DataSourcePicker;
public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx → public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
import React from 'react'; import React, { KeyboardEvent, Component } from 'react';
import { Props } from './DataSourcePicker';
interface State { interface State {
selected: number; selected: number;
} }
const withKeyboardNavigation = WrappedComponent => { export interface KeyboardNavigationProps {
return class extends React.Component<Props, State> { onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
constructor(props) { onMouseEnter: (select: number) => void;
super(props); selected: number;
}
this.state = { interface Props {
selected: 0, render: (injectProps: any) => void;
}; }
}
goToNext = (maxSelectedIndex: number) => { class KeyboardNavigation extends Component<Props, State> {
const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1; constructor(props) {
this.setState({ super(props);
selected: nextIndex,
});
};
goToPrev = (maxSelectedIndex: number) => { this.state = {
const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1; selected: 0,
this.setState({
selected: nextIndex,
});
}; };
}
onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => { goToNext = (maxSelectedIndex: number) => {
if (evt.key === 'ArrowDown') { const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
evt.preventDefault(); this.setState({
this.goToNext(maxSelectedIndex); selected: nextIndex,
} });
if (evt.key === 'ArrowUp') { };
evt.preventDefault();
this.goToPrev(maxSelectedIndex);
}
if (evt.key === 'Enter' && onEnterAction) {
onEnterAction();
}
};
onMouseEnter = (mouseEnterIndex: number) => { goToPrev = (maxSelectedIndex: number) => {
this.setState({ const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
selected: mouseEnterIndex, this.setState({
}); selected: nextIndex,
}; });
};
render() { onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
return ( if (evt.key === 'ArrowDown') {
<WrappedComponent evt.preventDefault();
selected={this.state.selected} this.goToNext(maxSelectedIndex);
onKeyDown={this.onKeyDown}
onMouseEnter={this.onMouseEnter}
{...this.props}
/>
);
} }
if (evt.key === 'ArrowUp') {
evt.preventDefault();
this.goToPrev(maxSelectedIndex);
}
if (evt.key === 'Enter' && onEnterAction) {
onEnterAction();
}
};
onMouseEnter = (mouseEnterIndex: number) => {
this.setState({
selected: mouseEnterIndex,
});
}; };
};
export default withKeyboardNavigation; 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,15 +4,15 @@ import _ from 'lodash'; ...@@ -4,15 +4,15 @@ import _ from 'lodash';
import config from 'app/core/config'; import config from 'app/core/config';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
import VizTypePickerPlugin from './VizTypePickerPlugin'; import VizTypePickerPlugin from './VizTypePickerPlugin';
import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
interface Props { export interface Props {
current: PanelPlugin; current: PanelPlugin;
onTypeChanged: (newType: PanelPlugin) => void; onTypeChanged: (newType: PanelPlugin) => void;
} }
interface State { interface State {
searchQuery: string; searchQuery: string;
selected: number;
} }
export class VizTypePicker extends PureComponent<Props, State> { export class VizTypePicker extends PureComponent<Props, State> {
...@@ -24,7 +24,6 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -24,7 +24,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
this.state = { this.state = {
searchQuery: '', searchQuery: '',
selected: 0,
}; };
} }
...@@ -33,35 +32,6 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -33,35 +32,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
return filteredPluginList.length - 1; return filteredPluginList.length - 1;
} }
goRight = () => {
const nextIndex = this.state.selected >= this.maxSelectedIndex ? 0 : this.state.selected + 1;
this.setState({
selected: nextIndex,
});
};
goLeft = () => {
const nextIndex = this.state.selected <= 0 ? this.maxSelectedIndex : this.state.selected - 1;
this.setState({
selected: nextIndex,
});
};
onKeyDown = evt => {
if (evt.key === 'ArrowDown') {
evt.preventDefault();
this.goRight();
}
if (evt.key === 'ArrowUp') {
evt.preventDefault();
this.goLeft();
}
if (evt.key === 'Enter') {
const filteredPluginList = this.getFilteredPluginList();
this.props.onTypeChanged(filteredPluginList[this.state.selected]);
}
};
componentDidMount() { componentDidMount() {
setTimeout(() => { setTimeout(() => {
this.searchInput.focus(); this.searchInput.focus();
...@@ -78,14 +48,10 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -78,14 +48,10 @@ export class VizTypePicker extends PureComponent<Props, State> {
return _.sortBy(panels, 'sort'); return _.sortBy(panels, 'sort');
} }
onMouseEnter = (mouseEnterIndex: number) => { renderVizPlugin = (plugin: PanelPlugin, index: number, keyNavProps: KeyboardNavigationProps) => {
this.setState({ const { onTypeChanged } = this.props;
selected: mouseEnterIndex, const { selected, onMouseEnter } = keyNavProps;
}); const isSelected = selected === index;
};
renderVizPlugin = (plugin: PanelPlugin, index: number) => {
const isSelected = this.state.selected === index;
const isCurrent = plugin.id === this.props.current.id; const isCurrent = plugin.id === this.props.current.id;
return ( return (
<VizTypePickerPlugin <VizTypePickerPlugin
...@@ -94,9 +60,9 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -94,9 +60,9 @@ export class VizTypePicker extends PureComponent<Props, State> {
isCurrent={isCurrent} isCurrent={isCurrent}
plugin={plugin} plugin={plugin}
onMouseEnter={() => { onMouseEnter={() => {
this.onMouseEnter(index); onMouseEnter(index);
}} }}
onClick={() => this.props.onTypeChanged(plugin)} onClick={() => onTypeChanged(plugin)}
/> />
); );
}; };
...@@ -118,11 +84,11 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -118,11 +84,11 @@ export class VizTypePicker extends PureComponent<Props, State> {
this.setState(prevState => ({ this.setState(prevState => ({
...prevState, ...prevState,
searchQuery: value, searchQuery: value,
selected: 0,
})); }));
}; };
renderFilters = () => { renderFilters = ({ onKeyDown, selected }: KeyboardNavigationProps) => {
const { searchQuery } = this.state;
return ( return (
<> <>
<label className="gf-form--has-input-icon"> <label className="gf-form--has-input-icon">
...@@ -132,7 +98,14 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -132,7 +98,14 @@ export class VizTypePicker extends PureComponent<Props, State> {
placeholder="" placeholder=""
ref={elem => (this.searchInput = elem)} ref={elem => (this.searchInput = elem)}
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
onKeyDown={this.onKeyDown} 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" /> <i className="gf-form-input-icon fa fa-search" />
</label> </label>
...@@ -144,13 +117,19 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -144,13 +117,19 @@ export class VizTypePicker extends PureComponent<Props, State> {
const filteredPluginList = this.getFilteredPluginList(); const filteredPluginList = this.getFilteredPluginList();
return ( return (
<> <KeyboardNavigation
<div className="cta-form__bar"> render={(keyNavProps: KeyboardNavigationProps) => (
{this.renderFilters()} <>
<div className="gf-form--grow" /> <div className="cta-form__bar">
</div> {this.renderFilters(keyNavProps)}
<div className="viz-picker">{filteredPluginList.map(this.renderVizPlugin)}</div> <div className="gf-form--grow" />
</> </div>
<div className="viz-picker">
{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index, keyNavProps))}
</div>
</>
)}
/>
); );
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment