Skip to content

N
nexpie-grafana-theme
Commit a0da303f by Johannes Schill
Options

Change KeyboardNavigation from hoc to render prop component

parent 07ce88f6
Showing with 253 additions and 248 deletions
public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
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: '',
};
}
constructor(props) {
super(props);
this.state = {
searchQuery: '',
};
}
getDataSources() {
const { searchQuery } = this.state;
const regex = new RegExp(searchQuery, 'i');
const { datasources } = this.props;
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);
});
const filtered = datasources.filter(item => {
return regex.test(item.name) || regex.test(item.meta.name);
});
return filtered;
}
return filtered;
}
get maxSelectedIndex() {
const filtered = this.getDataSources();
return filtered.length - 1;
}
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>
);
};
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);
}
componentDidMount() {
setTimeout(() => {
this.searchInput.focus();
}, 300);
}
onSearchQueryChange = evt => {
const value = evt.target.value;
this.setState(prevState => ({
...prevState,
searchQuery: value,
}));
};
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>
</>
);
}
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 (
<>
<div className="cta-form__bar">
{this.renderFilters()}
<div className="gf-form--grow" />
</div>
<div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div>
</>
);
}
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/withKeyboardNavigation.tsx → public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
import React, { KeyboardEvent, ComponentType, Component } from 'react';
import React, { KeyboardEvent, Component } from 'react';
interface State {
selected: number;
......@@ -10,56 +10,62 @@ export interface KeyboardNavigationProps {
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,
};
}
interface Props {
render: (injectProps: any) => void;
}
goToNext = (maxSelectedIndex: number) => {
const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
this.setState({
selected: nextIndex,
});
};
class KeyboardNavigation extends Component<Props, State> {
constructor(props) {
super(props);
goToPrev = (maxSelectedIndex: number) => {
const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
this.setState({
selected: nextIndex,
});
this.state = {
selected: 0,
};
}
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();
}
};
goToNext = (maxSelectedIndex: number) => {
const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
this.setState({
selected: nextIndex,
});
};
onMouseEnter = (mouseEnterIndex: number) => {
this.setState({
selected: mouseEnterIndex,
});
};
goToPrev = (maxSelectedIndex: number) => {
const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
this.setState({
selected: nextIndex,
});
};
render() {
return (
<WrappedComponent {...this.state} {...this.props} onKeyDown={this.onKeyDown} onMouseEnter={this.onMouseEnter} />
);
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,
});
};
};
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,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('');
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)}
/>
);
};
getFilteredPluginList = (): PanelPlugin[] => {
const { searchQuery } = this.state;
const regex = new RegExp(searchQuery, 'i');
const pluginList = this.pluginList;
export class VizTypePicker extends PureComponent<Props, State> {
searchInput: HTMLElement;
pluginList = this.getPanelPlugins('');
const filtered = pluginList.filter(item => {
return regex.test(item.name);
});
constructor(props) {
super(props);
return filtered;
this.state = {
searchQuery: '',
};
}
onSearchQueryChange = evt => {
const value = evt.target.value;
this.setState(prevState => ({
...prevState,
searchQuery: value,
}));
};
get maxSelectedIndex() {
const filteredPluginList = this.getFilteredPluginList();
return filteredPluginList.length - 1;
}
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>
</>
);
};
componentDidMount() {
setTimeout(() => {
this.searchInput.focus();
}, 300);
}
getPanelPlugins(filter): PanelPlugin[] {
const panels = _.chain(config.panels)
.filter({ hideFromList: false })
.map(item => item)
.value();
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>
</>
);
}
// 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>
</>
)}
/>
);
}
}
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