simple select

public/app/core/components/Picker/SimplePicker.tsx

@@ -0,0 +1,33 @@
+import React, { SFC } from 'react';
+import Select from 'react-select';
+import DescriptionOption from './DescriptionOption';
+import ResetStyles from './ResetStyles';
+
+interface Props {
+  options: any[];
+  className?: string;
+  onSelected: (item: any) => {} | void;
+  getOptionValue: (item: any) => string;
+  getOptionLabel: (item: any) => string;
+}
+
+const SimplePicker: SFC<Props> = ({ className, getOptionLabel, getOptionValue, onSelected, options }) => {
+  return (
+    <Select
+      isSearchable={false}
+      classNamePrefix={`gf-form-select-box`}
+      className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
+      placeholder="Choose"
+      options={options}
+      onChange={onSelected}
+      components={{
+        Option: DescriptionOption,
+      }}
+      styles={ResetStyles}
+      getOptionValue={getOptionValue}
+      getOptionLabel={getOptionLabel}
+    />
+  );
+};
+
+export default SimplePicker;

public/app/core/components/Tooltip/Tooltip.tsx

@@ -1,37 +1,28 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import withTooltip from './withTooltip';
 import { Target } from 'react-popper';
 
-interface TooltipProps {
+interface Props {
   tooltipSetState: (prevState: object) => void;
 }
 
-class Tooltip extends React.Component<TooltipProps, any> {
-  constructor(props) {
-    super(props);
-    this.showTooltip = this.showTooltip.bind(this);
-    this.hideTooltip = this.hideTooltip.bind(this);
-  }
-
-  showTooltip() {
+class Tooltip extends PureComponent<Props> {
+  showTooltip = () => {
     const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => {
-      return {
-        ...prevState,
-        show: true,
-      };
-    });
-  }
 
-  hideTooltip() {
+    tooltipSetState(prevState => ({
+      ...prevState,
+      show: true,
+    }));
+  };
+
+  hideTooltip = () => {
     const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => {
-      return {
-        ...prevState,
-        show: false,
-      };
-    });
-  }
+    tooltipSetState(prevState => ({
+      ...prevState,
+      show: false,
+    }));
+  };
 
   render() {
     return (