IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Scroll to top when visualization picker is opened

Browse Source
This commit is contained in:
Torkel Ödegaard
2019-01-17 11:27:32 +01:00
parent 9cb49d14cd
commit 548708a8d3
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/features/dashboard/panel_editor/VisualizationTab.tsx
View File

@@ -26,6 +26,7 @@ interface Props {
interface State { interface State {
isVizPickerOpen: boolean; isVizPickerOpen: boolean;
searchQuery: string; searchQuery: string;
scrollTop: number;
} }
export class VisualizationTab extends PureComponent<Props, State> { export class VisualizationTab extends PureComponent<Props, State> {
@@ -39,6 +40,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
this.state = { this.state = {
isVizPickerOpen: false, isVizPickerOpen: false,
searchQuery: '', searchQuery: '',
scrollTop: 0,
}; };
} }
@@ -143,7 +145,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
}; };
onOpenVizPicker = () => { onOpenVizPicker = () => {
this.setState({ isVizPickerOpen: true }); this.setState({ isVizPickerOpen: true, scrollTop: 0 });
}; };
onCloseVizPicker = () => { onCloseVizPicker = () => {
@@ -201,9 +203,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />; renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />;
setScrollTop = (event: React.MouseEvent<HTMLElement>) => {
const target = event.target as HTMLElement;
this.setState({ scrollTop: target.scrollTop });
};
render() { render() {
const { plugin } = this.props; const { plugin } = this.props;
const { isVizPickerOpen, searchQuery } = this.state; const { isVizPickerOpen, searchQuery, scrollTop } = this.state;
const pluginHelp: EditorToolbarView = { const pluginHelp: EditorToolbarView = {
heading: 'Help', heading: 'Help',
@@ -212,7 +219,8 @@ export class VisualizationTab extends PureComponent<Props, State> {
}; };
return ( return (
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]}> <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]}
scrollTop={scrollTop} setScrollTop={this.setScrollTop}>
<> <>
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}> <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
<VizTypePicker <VizTypePicker