From ca0f297ac762b81aa6fc60c29fe6c7010f8a1300 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 19 May 2020 11:48:10 +0300 Subject: [PATCH] Move tooltip to components --- package.json | 1 + src/components/Tooltip/Popper.tsx | 75 +++++++++++++++++++ .../components/Tooltip/Portal.tsx | 3 +- src/components/Tooltip/Tooltip.tsx | 13 ++++ .../components/Tooltip/withPopper.tsx | 40 ++++------ .../components/AlertList/AlertCard.tsx | 2 +- src/panel-triggers/components/EventTag.tsx | 2 +- .../components/Problems/ProblemDetails.tsx | 2 +- .../components/Problems/ProblemStatusBar.tsx | 2 +- .../components/Tooltip/Popper.tsx | 75 ------------------- .../components/Tooltip/Tooltip.tsx | 17 ----- yarn.lock | 2 +- 12 files changed, 109 insertions(+), 125 deletions(-) create mode 100644 src/components/Tooltip/Popper.tsx rename src/{panel-triggers => }/components/Tooltip/Portal.tsx (90%) create mode 100644 src/components/Tooltip/Tooltip.tsx rename src/{panel-triggers => }/components/Tooltip/withPopper.tsx (64%) delete mode 100644 src/panel-triggers/components/Tooltip/Popper.tsx delete mode 100644 src/panel-triggers/components/Tooltip/Tooltip.tsx diff --git a/package.json b/package.json index 39f21ef..65bf82a 100644 --- a/package.json +++ b/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", diff --git a/src/components/Tooltip/Popper.tsx b/src/components/Tooltip/Popper.tsx new file mode 100644 index 0000000..3d492f5 --- /dev/null +++ b/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 = ({ show, placement, popperClassName, refClassName, content, children, renderContent }) => { + const refClass = cx('popper_ref', refClassName); + const styles = getStyles(); + const popperClass = cx('popper', popperClassName, styles.defaultTransitionStyles); + + return ( + + + {({ ref }) => ( +
+ {children} +
+ )} + + + {transitionState => ( + + + {({ ref, style, placement, arrowProps }) => { + return ( +
+
+ {renderContent(content)} +
+
+
+ ); + }} + + + )} + + + ); +}; + +export default Popper; diff --git a/src/panel-triggers/components/Tooltip/Portal.tsx b/src/components/Tooltip/Portal.tsx similarity index 90% rename from src/panel-triggers/components/Tooltip/Portal.tsx rename to src/components/Tooltip/Portal.tsx index dd2bb3b..e5a4527 100644 --- a/src/panel-triggers/components/Tooltip/Portal.tsx +++ b/src/components/Tooltip/Portal.tsx @@ -7,7 +7,7 @@ interface Props { } export default class BodyPortal extends PureComponent { - node: HTMLElement = document.createElement('div'); + node: HTMLElement; portalRoot: HTMLElement; constructor(props) { @@ -17,6 +17,7 @@ export default class BodyPortal extends PureComponent { root = document.body } = this.props; + this.node = document.createElement('div'); if (className) { this.node.classList.add(className); } diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx new file mode 100644 index 0000000..3b7fc04 --- /dev/null +++ b/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 = ({ hidePopper, showPopper, className, children, ...restProps }) => { + return ( +
+ {children} +
+ ); +}; + +export default withPopper(Tooltip); diff --git a/src/panel-triggers/components/Tooltip/withPopper.tsx b/src/components/Tooltip/withPopper.tsx similarity index 64% rename from src/panel-triggers/components/Tooltip/withPopper.tsx rename to src/components/Tooltip/withPopper.tsx index 00ec28b..b50c798 100644 --- a/src/panel-triggers/components/Tooltip/withPopper.tsx +++ b/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 { + static defaultProps: Partial = { + 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 => ({ - ...prevState, - show: true, - })); + this.setState({ show: true }); }; hidePopper = () => { - this.setState(prevState => ({ - ...prevState, - show: false, - })); + this.setState({ show: false }); }; renderContent(content) { @@ -71,8 +55,8 @@ export default function withPopper(WrappedComponent) { } render() { - const { show, placement } = this.state; - const className = this.props.className || ''; + const { show } = this.state; + const { placement, className } = this.props; return ( ); } }; -} +}; + +export default withPopper; diff --git a/src/panel-triggers/components/AlertList/AlertCard.tsx b/src/panel-triggers/components/AlertList/AlertCard.tsx index 2bb7559..a1d76ff 100644 --- a/src/panel-triggers/components/AlertList/AlertCard.tsx +++ b/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'; diff --git a/src/panel-triggers/components/EventTag.tsx b/src/panel-triggers/components/EventTag.tsx index c84a0ba..d67d5c1 100644 --- a/src/panel-triggers/components/EventTag.tsx +++ b/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', diff --git a/src/panel-triggers/components/Problems/ProblemDetails.tsx b/src/panel-triggers/components/Problems/ProblemDetails.tsx index 48ffdd8..3adaf91 100644 --- a/src/panel-triggers/components/Problems/ProblemDetails.tsx +++ b/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'; diff --git a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx b/src/panel-triggers/components/Problems/ProblemStatusBar.tsx index b88fd60..b29aa69 100644 --- a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx +++ b/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 { diff --git a/src/panel-triggers/components/Tooltip/Popper.tsx b/src/panel-triggers/components/Tooltip/Popper.tsx deleted file mode 100644 index f3b451b..0000000 --- a/src/panel-triggers/components/Tooltip/Popper.tsx +++ /dev/null @@ -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 { - render() { - const { children, renderContent, show, placement, refClassName } = this.props; - const { content } = this.props; - const popperClassName = classNames('popper', this.props.popperClassName); - - return ( - - - {({ ref }) => ( -
- {children} -
- )} - - - {transitionState => ( - - - {({ ref, style, placement, arrowProps }) => { - return ( -
-
- {renderContent(content)} -
-
-
- ); - }} - - - )} - - - ); - } -} - -export default Popper; diff --git a/src/panel-triggers/components/Tooltip/Tooltip.tsx b/src/panel-triggers/components/Tooltip/Tooltip.tsx deleted file mode 100644 index 1f5fc05..0000000 --- a/src/panel-triggers/components/Tooltip/Tooltip.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { PureComponent } from 'react'; -import Popper from './Popper'; -import withPopper, { UsingPopperProps } from './withPopper'; - -class Tooltip extends PureComponent { - render() { - const { children, hidePopper, showPopper, className, ...restProps } = this.props; - - return ( -
- {children} -
- ); - } -} - -export default withPopper(Tooltip); diff --git a/yarn.lock b/yarn.lock index 2dbfbae..6ca9404 100644 --- a/yarn.lock +++ b/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==