Clear visualization picker search on picker close

This commit is contained in:
Dominik Prokop 2019-02-11 11:03:24 +01:00
parent 396a5a947f
commit f39fef2a02
3 changed files with 14 additions and 3 deletions

View File

@ -27,6 +27,7 @@
"@types/react-dom": "^16.0.9",
"@types/react-grid-layout": "^0.16.6",
"@types/react-select": "^2.0.4",
"@types/react-transition-group": "^2.0.15",
"@types/react-virtualized": "^9.18.12",
"angular-mocks": "1.6.6",
"autoprefixer": "^6.4.0",

View File

@ -1,11 +1,12 @@
import React, { FC } from 'react';
import Transition from 'react-transition-group/Transition';
import Transition, { ExitHandler } from 'react-transition-group/Transition';
interface Props {
duration: number;
children: JSX.Element;
in: boolean;
unmountOnExit?: boolean;
onExited?: ExitHandler;
}
export const FadeIn: FC<Props> = props => {
@ -22,7 +23,12 @@ export const FadeIn: FC<Props> = props => {
};
return (
<Transition in={props.in} timeout={props.duration} unmountOnExit={props.unmountOnExit || false}>
<Transition
in={props.in}
timeout={props.duration}
unmountOnExit={props.unmountOnExit || false}
onExited={props.onExited}
>
{state => (
<div
style={{

View File

@ -149,6 +149,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
}
}
clearQuery = () => {
this.setState({ searchQuery: '' });
};
onPanelOptionsChanged = (options: any) => {
this.props.panel.updateOptions(options);
this.forceUpdate();
@ -241,7 +245,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
setScrollTop={this.setScrollTop}
>
<>
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true} onExited={this.clearQuery}>
<VizTypePicker
current={plugin}
onTypeChanged={this.onTypeChanged}