Move tooltip to components

package.json

@@ -65,6 +65,7 @@
     "jshint-stylish": "^2.1.0",
     "load-grunt-tasks": "~3.2.0",
     "lodash": "~4.17.13",
+    "memoize-one": "^5.1.1",
     "moment": "~2.21.0",
     "ng-annotate-webpack-plugin": "^0.3.0",
     "node-sass": "^4.13.0",

src/components/Tooltip/Popper.tsx

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import { cx, css } from 'emotion';
+import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
+import Transition from 'react-transition-group/Transition';
+import { stylesFactory } from '@grafana/ui';
+import BodyPortal from './Portal';
+
+const getStyles = stylesFactory(() => ({
+  defaultTransitionStyles: css`
+    transition: opacity 200ms linear;
+    opacity: 0;
+  `,
+}));
+
+const transitionStyles = {
+  exited: { opacity: 0 },
+  entering: { opacity: 0 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+};
+
+interface Props {
+  renderContent: (content: any) => any;
+  show: boolean;
+  placement?: any;
+  content: string | ((props: any) => JSX.Element);
+  refClassName?: string;
+  popperClassName?: string;
+}
+
+const Popper: FC<Props> = ({ show, placement, popperClassName, refClassName, content, children, renderContent }) => {
+  const refClass = cx('popper_ref', refClassName);
+  const styles = getStyles();
+  const popperClass = cx('popper', popperClassName, styles.defaultTransitionStyles);
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <div className={refClass} ref={ref}>
+            {children}
+          </div>
+        )}
+      </Reference>
+      <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
+        {transitionState => (
+          <BodyPortal>
+            <ReactPopper placement={placement}>
+              {({ ref, style, placement, arrowProps }) => {
+                return (
+                  <div
+                    ref={ref}
+                    style={{
+                      ...style,
+                      ...transitionStyles[transitionState],
+                    }}
+                    data-placement={placement}
+                    className={popperClass}
+                  >
+                    <div className="popper__background">
+                      {renderContent(content)}
+                      <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                    </div>
+                  </div>
+                );
+              }}
+            </ReactPopper>
+          </BodyPortal>
+        )}
+      </Transition>
+    </Manager>
+  );
+};
+
+export default Popper;

src/components/Tooltip/Portal.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 export default class BodyPortal extends PureComponent<Props> {
-  node: HTMLElement = document.createElement('div');
+  node: HTMLElement;
   portalRoot: HTMLElement;
 
   constructor(props) {
@@ -17,6 +17,7 @@ export default class BodyPortal extends PureComponent<Props> {
       root = document.body
     } = this.props;
 
+    this.node = document.createElement('div');
     if (className) {
       this.node.classList.add(className);
     }

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import Popper from './Popper';
+import withPopper, { UsingPopperProps } from './withPopper';
+
+const Tooltip: FC<UsingPopperProps> = ({ hidePopper, showPopper, className, children, ...restProps }) => {
+  return (
+    <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
+      <Popper {...restProps}>{children}</Popper>
+    </div>
+  );
+};
+
+export default withPopper(Tooltip);

src/components/Tooltip/withPopper.tsx

@@ -21,44 +21,28 @@ interface Props {
 }
 
 interface State {
-  placement: string;
   show: boolean;
 }
 
-export default function withPopper(WrappedComponent) {
+export const withPopper = (WrappedComponent) => {
   return class extends React.Component<Props, State> {
+    static defaultProps: Partial<Props> = {
+      placement: 'auto',
+    };
+
     constructor(props) {
       super(props);
-      this.setState = this.setState.bind(this);
       this.state = {
-        placement: this.props.placement || 'auto',
         show: false,
       };
     }
 
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.placement && nextProps.placement !== this.state.placement) {
-        this.setState(prevState => {
-          return {
-            ...prevState,
-            placement: nextProps.placement,
-          };
-        });
-      }
-    }
-
     showPopper = () => {
-      this.setState(prevState => ({
+      this.setState({ show: true });
-        ...prevState,
-        show: true,
-      }));
     };
 
     hidePopper = () => {
-      this.setState(prevState => ({
+      this.setState({ show: false });
-        ...prevState,
-        show: false,
-      }));
     };
 
     renderContent(content) {
@@ -71,8 +55,8 @@ export default function withPopper(WrappedComponent) {
     }
 
     render() {
-      const { show, placement } = this.state;
+      const { show } = this.state;
-      const className = this.props.className || '';
+      const { placement, className } = this.props;
 
       return (
         <WrappedComponent
@@ -80,11 +64,13 @@ export default function withPopper(WrappedComponent) {
           showPopper={this.showPopper}
           hidePopper={this.hidePopper}
           renderContent={this.renderContent}
-          show={show}
           placement={placement}
           className={className}
+          show={show}
         />
       );
     }
   };
-}
+};
+
+export default withPopper;

src/panel-triggers/components/AlertList/AlertCard.tsx

@@ -6,7 +6,7 @@ import { isNewProblem, formatLastChange } from '../../utils';
 import { ProblemsPanelOptions, TriggerSeverity } from '../../types';
 import { AckProblemData, AckModal } from '../AckModal';
 import EventTag from '../EventTag';
-import Tooltip from '.././Tooltip/Tooltip';
+import Tooltip from '../../../components/Tooltip/Tooltip';
 import AlertAcknowledges from './AlertAcknowledges';
 import AlertIcon from './AlertIcon';
 import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types';

src/panel-triggers/components/EventTag.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { ZBXTag } from '../types';
-import Tooltip from './Tooltip/Tooltip';
+import Tooltip from '../../components/Tooltip/Tooltip';
 
 const TAG_COLORS = [
   '#E24D42',

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -6,7 +6,7 @@ import { ProblemDTO, ZBXHost, ZBXGroup, ZBXEvent, ZBXTag, ZBXAlert } from '../..
 import { ZBXItem, ZBXAcknowledge, GFTimeRange, RTRow } from '../../types';
 import { AckModal, AckProblemData } from '../AckModal';
 import EventTag from '../EventTag';
-import Tooltip from '../Tooltip/Tooltip';
+import Tooltip from '../../../components/Tooltip/Tooltip';
 import ProblemStatusBar from './ProblemStatusBar';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';

src/panel-triggers/components/Problems/ProblemStatusBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FAIcon from '../FAIcon';
-import Tooltip from '../Tooltip/Tooltip';
+import Tooltip from '../../../components/Tooltip/Tooltip';
 import { ZBXTrigger, ZBXAlert } from '../../types';
 
 export interface ProblemStatusBarProps {

src/panel-triggers/components/Tooltip/Popper.tsx

@@ -1,75 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import BodyPortal from './Portal';
-import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
-import Transition from 'react-transition-group/Transition';
-
-const defaultTransitionStyles = {
-  transition: 'opacity 200ms linear',
-  opacity: 0,
-};
-
-const transitionStyles = {
-  exited: { opacity: 0 },
-  entering: { opacity: 0 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-};
-
-interface Props {
-  renderContent: (content: any) => any;
-  show: boolean;
-  placement?: any;
-  content: string | ((props: any) => JSX.Element);
-  refClassName?: string;
-  popperClassName?: string;
-}
-
-class Popper extends PureComponent<Props> {
-  render() {
-    const { children, renderContent, show, placement, refClassName } = this.props;
-    const { content } = this.props;
-    const popperClassName = classNames('popper', this.props.popperClassName);
-
-    return (
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <div className={`popper_ref ${refClassName || ''}`} ref={ref}>
-              {children}
-            </div>
-          )}
-        </Reference>
-        <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
-          {transitionState => (
-            <BodyPortal>
-              <ReactPopper placement={placement}>
-                {({ ref, style, placement, arrowProps }) => {
-                  return (
-                    <div
-                      ref={ref}
-                      style={{
-                        ...style,
-                        ...defaultTransitionStyles,
-                        ...transitionStyles[transitionState],
-                      }}
-                      data-placement={placement}
-                      className={popperClassName}
-                    >
-                      <div className="popper__background">
-                        {renderContent(content)}
-                        <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
-                      </div>
-                    </div>
-                  );
-                }}
-              </ReactPopper>
-            </BodyPortal>
-          )}
-        </Transition>
-      </Manager>
-    );
-  }
-}
-
-export default Popper;

src/panel-triggers/components/Tooltip/Tooltip.tsx

@@ -1,17 +0,0 @@
-import React, { PureComponent } from 'react';
-import Popper from './Popper';
-import withPopper, { UsingPopperProps } from './withPopper';
-
-class Tooltip extends PureComponent<UsingPopperProps> {
-  render() {
-    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
-
-    return (
-      <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
-        <Popper {...restProps}>{children}</Popper>
-      </div>
-    );
-  }
-}
-
-export default withPopper(Tooltip);

yarn.lock

@@ -6426,7 +6426,7 @@ memoize-one@^4.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
   integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
 
-memoize-one@^5.0.0:
+memoize-one@^5.0.0, memoize-one@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==