Skip to content

N
nexpie-grafana-theme
Commit 20134c90 by Johannes Schill
Options

Add keyboard navigation to datasource picker via a hoc.

parent 1ffac5a3
Showing with 167 additions and 75 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 { DataSourceSelectItem } from 'app/types'; import { DataSourceSelectItem } from 'app/types';
interface Props { export interface Props {
onChangeDataSource: (ds: any) => void; onChangeDataSource: (ds: any) => 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 class DataSourcePicker extends PureComponent<Props, State> { export const DataSourcePicker = withKeyboardNavigation(
searchInput: HTMLElement; class DataSourcePicker extends PureComponent<Props, State> {
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() {
const filtered = this.getDataSources();
return filtered.length - 1;
}
renderDataSource = (ds: DataSourceSelectItem, index: number) => { renderDataSource = (ds: DataSourceSelectItem, index: number) => {
const { onChangeDataSource } = this.props; const { onChangeDataSource, selected, onMouseEnter } = this.props;
const onClick = () => onChangeDataSource(ds); const onClick = () => onChangeDataSource(ds);
const cssClass = classNames({ const isSelected = selected === index;
'ds-picker-list__item': true, 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>
);
};
return ( componentDidMount() {
<div key={index} className={cssClass} title={ds.name} onClick={onClick}> setTimeout(() => {
<img className="ds-picker-list__img" src={ds.meta.info.logos.small} /> this.searchInput.focus();
<div className="ds-picker-list__name">{ds.name}</div> }, 300);
</div> }
);
};
componentDidMount() { onSearchQueryChange = evt => {
setTimeout(() => { const value = evt.target.value;
this.searchInput.focus(); this.setState(prevState => ({
}, 300); ...prevState,
} searchQuery: value,
}));
};
onSearchQueryChange = evt => { renderFilters() {
const value = evt.target.value; const { searchQuery } = this.state;
this.setState(prevState => ({ const { onKeyDown } = this.props;
...prevState, return (
searchQuery: value, <>
})); <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>
</>
);
}
renderFilters() { render() {
const { searchQuery } = this.state; return (
return ( <>
<> <div className="cta-form__bar">
<label className="gf-form--has-input-icon"> {this.renderFilters()}
<input <div className="gf-form--grow" />
type="text" </div>
className="gf-form-input width-13" <div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div>
placeholder="" </>
ref={elem => (this.searchInput = elem)} );
onChange={this.onSearchQueryChange} }
value={searchQuery}
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
</>
);
} }
);
render() { export default DataSourcePicker;
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>
</>
);
}
}
public/app/features/dashboard/dashgrid/withKeyboardNavigation.tsx 0 → 100644
import React from 'react';
import { Props } from './DataSourcePicker';
interface State {
selected: number;
}
const withKeyboardNavigation = WrappedComponent => {
return class extends React.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() {
return (
<WrappedComponent
selected={this.state.selected}
onKeyDown={this.onKeyDown}
onMouseEnter={this.onMouseEnter}
{...this.props}
/>
);
}
};
};
export default withKeyboardNavigation;
public/sass/components/_panel_editor.scss
...@@ -257,13 +257,13 @@ ...@@ -257,13 +257,13 @@
align-items: center; align-items: center;
height: 44px; height: 44px;
&:hover { &--selected {
background: $panel-editor-viz-item-bg-hover; background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover; border: $panel-editor-viz-item-border-hover;
box-shadow: $panel-editor-viz-item-shadow-hover; box-shadow: $panel-editor-viz-item-shadow-hover;
} }
&--selected { &--active {
box-shadow: 0 0 6px $orange; box-shadow: 0 0 6px $orange;
border: 1px solid $orange; border: 1px solid $orange;
......
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