From 657bf771a41a25bf18e1743e2c077b11308b4462 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Tue, 15 Feb 2022 18:22:02 +0300 Subject: [PATCH] Use tooltip from grafana/ui --- src/components/ActionButton/ActionButton.tsx | 3 +- src/components/Tooltip/Popper.tsx | 80 ------------------- src/components/Tooltip/Portal.tsx | 36 --------- src/components/Tooltip/Tooltip.tsx | 15 ---- src/components/Tooltip/withPopper.tsx | 76 ------------------ src/components/index.ts | 1 - .../components/AlertList/AlertCard.tsx | 5 +- src/panel-triggers/components/EventTag.tsx | 2 +- .../components/Problems/ProblemDetails.tsx | 3 +- .../components/Problems/ProblemStatusBar.tsx | 2 +- 10 files changed, 8 insertions(+), 215 deletions(-) delete mode 100644 src/components/Tooltip/Popper.tsx delete mode 100644 src/components/Tooltip/Portal.tsx delete mode 100644 src/components/Tooltip/Tooltip.tsx delete mode 100644 src/components/Tooltip/withPopper.tsx diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx index 377cc51..50e95bd 100644 --- a/src/components/ActionButton/ActionButton.tsx +++ b/src/components/ActionButton/ActionButton.tsx @@ -1,9 +1,8 @@ import React, { FC } from 'react'; import { cx, css } from '@emotion/css'; -import { stylesFactory, useTheme } from '@grafana/ui'; +import { stylesFactory, useTheme, Tooltip } from '@grafana/ui'; import { GrafanaTheme, GrafanaThemeType } from '@grafana/data'; import { FAIcon } from '../FAIcon/FAIcon'; -import { Tooltip } from '../Tooltip/Tooltip'; interface Props { icon?: string; diff --git a/src/components/Tooltip/Popper.tsx b/src/components/Tooltip/Popper.tsx deleted file mode 100644 index c378d1e..0000000 --- a/src/components/Tooltip/Popper.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { FC } from 'react'; -import { cx, css } from '@emotion/css'; -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; - `, - tooltipContent: css` - overflow-wrap: break-word; - `, -})); - -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/components/Tooltip/Portal.tsx b/src/components/Tooltip/Portal.tsx deleted file mode 100644 index e5a4527..0000000 --- a/src/components/Tooltip/Portal.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { PureComponent } from 'react'; -import ReactDOM from 'react-dom'; - -interface Props { - className?: string; - root?: HTMLElement; -} - -export default class BodyPortal extends PureComponent { - node: HTMLElement; - portalRoot: HTMLElement; - - constructor(props) { - super(props); - const { - className, - root = document.body - } = this.props; - - this.node = document.createElement('div'); - if (className) { - this.node.classList.add(className); - } - - this.portalRoot = root; - this.portalRoot.appendChild(this.node); - } - - componentWillUnmount() { - this.portalRoot.removeChild(this.node); - } - - render() { - return ReactDOM.createPortal(this.props.children, this.node); - } -} diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx deleted file mode 100644 index 45cd911..0000000 --- a/src/components/Tooltip/Tooltip.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FC } from 'react'; -import Popper from './Popper'; -import withPopper, { UsingPopperProps } from './withPopper'; - -const TooltipWrapper: FC = ({ hidePopper, showPopper, className, children, ...restProps }) => { - return ( -
- {children} -
- ); -}; - -export const Tooltip = withPopper(TooltipWrapper); - -export default Tooltip; diff --git a/src/components/Tooltip/withPopper.tsx b/src/components/Tooltip/withPopper.tsx deleted file mode 100644 index b50c798..0000000 --- a/src/components/Tooltip/withPopper.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; - -export interface UsingPopperProps { - showPopper: (prevState: object) => void; - hidePopper: (prevState: object) => void; - renderContent: (content: any) => any; - show: boolean; - placement?: string; - content: string | ((props: any) => JSX.Element); - className?: string; - refClassName?: string; - popperClassName?: string; -} - -interface Props { - placement?: string; - className?: string; - refClassName?: string; - popperClassName?: string; - content: string | ((props: any) => JSX.Element); -} - -interface State { - show: boolean; -} - -export const withPopper = (WrappedComponent) => { - return class extends React.Component { - static defaultProps: Partial = { - placement: 'auto', - }; - - constructor(props) { - super(props); - this.state = { - show: false, - }; - } - - showPopper = () => { - this.setState({ show: true }); - }; - - hidePopper = () => { - this.setState({ show: false }); - }; - - renderContent(content) { - if (typeof content === 'function') { - // If it's a function we assume it's a React component - const ReactComponent = content; - return ; - } - return content; - } - - render() { - const { show } = this.state; - const { placement, className } = this.props; - - return ( - - ); - } - }; -}; - -export default withPopper; diff --git a/src/components/index.ts b/src/components/index.ts index c342b30..359bc21 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,5 +3,4 @@ export { FAIcon } from './FAIcon/FAIcon'; export { AckButton } from './AckButton/AckButton'; export { ExploreButton } from './ExploreButton/ExploreButton'; export { ExecScriptButton } from './ExecScriptButton/ExecScriptButton'; -export { Tooltip } from './Tooltip/Tooltip'; export { ModalController } from './Modal/ModalController'; diff --git a/src/panel-triggers/components/AlertList/AlertCard.tsx b/src/panel-triggers/components/AlertList/AlertCard.tsx index 7b2bdd5..532c7ef 100644 --- a/src/panel-triggers/components/AlertList/AlertCard.tsx +++ b/src/panel-triggers/components/AlertList/AlertCard.tsx @@ -9,8 +9,9 @@ import EventTag from '../EventTag'; import AlertAcknowledges from './AlertAcknowledges'; import AlertIcon from './AlertIcon'; import { ProblemDTO, ZBXTag } from '../../../datasource-zabbix/types'; -import { ModalController, Tooltip } from '../../../components'; +import { ModalController } from '../../../components'; import { DataSourceRef } from '@grafana/data'; +import { Tooltip } from '@grafana/ui'; interface AlertCardProps { problem: ProblemDTO; @@ -260,7 +261,7 @@ class AlertAcknowledgesButton extends PureComponent + ); diff --git a/src/panel-triggers/components/EventTag.tsx b/src/panel-triggers/components/EventTag.tsx index 9365c90..6e3dce3 100644 --- a/src/panel-triggers/components/EventTag.tsx +++ b/src/panel-triggers/components/EventTag.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { ZBXTag } from '../types'; -import Tooltip from '../../components/Tooltip/Tooltip'; import { DataSourceRef } from '@grafana/data'; +import { Tooltip } from '@grafana/ui'; const TAG_COLORS = [ '#E24D42', diff --git a/src/panel-triggers/components/Problems/ProblemDetails.tsx b/src/panel-triggers/components/Problems/ProblemDetails.tsx index d129bd8..3898852 100644 --- a/src/panel-triggers/components/Problems/ProblemDetails.tsx +++ b/src/panel-triggers/components/Problems/ProblemDetails.tsx @@ -1,6 +1,7 @@ import React, { FC, PureComponent } from 'react'; import moment from 'moment'; import { TimeRange, DataSourceRef } from "@grafana/data"; +import { Tooltip } from '@grafana/ui'; import { getDataSourceSrv } from '@grafana/runtime'; import * as utils from '../../../datasource-zabbix/utils'; import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types'; @@ -10,7 +11,7 @@ import { AckModal, AckProblemData } from '../AckModal'; import EventTag from '../EventTag'; import AcknowledgesList from './AcknowledgesList'; import ProblemTimeline from './ProblemTimeline'; -import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController, Tooltip } from '../../../components'; +import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components'; import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal'; import ProblemStatusBar from "./ProblemStatusBar"; diff --git a/src/panel-triggers/components/Problems/ProblemStatusBar.tsx b/src/panel-triggers/components/Problems/ProblemStatusBar.tsx index e6a18de..a58fbb7 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 { Tooltip } from '@grafana/ui'; import FAIcon from '../../../components/FAIcon/FAIcon'; -import Tooltip from '../../../components/Tooltip/Tooltip'; import { ZBXTrigger, ZBXAlert } from '../../types'; export interface ProblemStatusBarProps {