diff --git a/package.json b/package.json index 9a04bff77eb..452e4ecb742 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", "@types/node": "^8.0.31", - "@types/react": "^16.4.14", + "@types/react": "^16.7.6", "@types/react-custom-scrollbars": "^4.0.5", - "@types/react-dom": "^16.0.7", + "@types/react-dom": "^16.0.9", "@types/react-select": "^2.0.4", "angular-mocks": "1.6.6", "autoprefixer": "^6.4.0", @@ -152,12 +152,12 @@ "prismjs": "^1.6.0", "prop-types": "^15.6.2", "rc-cascader": "^0.14.0", - "react": "^16.5.0", + "react": "^16.6.3", "react-custom-scrollbars": "^4.2.1", - "react-dom": "^16.5.0", + "react-dom": "^16.6.3", "react-grid-layout": "0.16.6", "react-highlight-words": "^0.10.0", - "react-popper": "^0.7.5", + "react-popper": "^1.3.0", "react-redux": "^5.0.7", "react-select": "2.1.0", "react-sizeme": "^2.3.6", @@ -180,6 +180,7 @@ "tslint-react": "^3.6.0" }, "resolutions": { - "caniuse-db": "1.0.30000772" + "caniuse-db": "1.0.30000772", + "**/@types/react": "16.7.6" } } diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx index ee86d07fb53..62397243c1c 100644 --- a/public/app/core/components/Tooltip/Popover.tsx +++ b/public/app/core/components/Tooltip/Popover.tsx @@ -1,34 +1,19 @@ -import React from 'react'; -import withTooltip from './withTooltip'; -import { Target } from 'react-popper'; - -interface PopoverProps { - tooltipSetState: (prevState: object) => void; -} - -class Popover extends React.Component { - constructor(props) { - super(props); - this.toggleTooltip = this.toggleTooltip.bind(this); - } - - toggleTooltip() { - const { tooltipSetState } = this.props; - tooltipSetState(prevState => { - return { - ...prevState, - show: !prevState.show, - }; - }); - } +import React, { PureComponent } from 'react'; +import Popper from './Popper'; +import withPopper, { UsingPopperProps } from './withPopper'; +class Popover extends PureComponent { render() { + const { children, hidePopper, showPopper, className, ...restProps } = this.props; + + const togglePopper = restProps.show ? hidePopper : showPopper; + return ( - - {this.props.children} - +
+ {children} +
); } } -export default withTooltip(Popover); +export default withPopper(Popover); diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx new file mode 100644 index 00000000000..343f7ff35d9 --- /dev/null +++ b/public/app/core/components/Tooltip/Popper.tsx @@ -0,0 +1,69 @@ +import React, { PureComponent } from 'react'; +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; +} + +class Popper extends PureComponent { + render() { + const { children, renderContent, show, placement, refClassName } = this.props; + const { content } = this.props; + + return ( + + + {({ ref }) => ( +
+ {children} +
+ )} +
+ + {transitionState => ( + + {({ ref, style, placement, arrowProps }) => { + return ( +
+
+ {renderContent(content)} +
+
+
+ ); + }} + + )} + + + ); + } +} + +export default Popper; diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx index 62be658f7cf..795da94a03c 100644 --- a/public/app/core/components/Tooltip/Tooltip.tsx +++ b/public/app/core/components/Tooltip/Tooltip.tsx @@ -1,36 +1,17 @@ import React, { PureComponent } from 'react'; -import withTooltip from './withTooltip'; -import { Target } from 'react-popper'; - -interface Props { - tooltipSetState: (prevState: object) => void; -} - -class Tooltip extends PureComponent { - showTooltip = () => { - const { tooltipSetState } = this.props; - - tooltipSetState(prevState => ({ - ...prevState, - show: true, - })); - }; - - hideTooltip = () => { - const { tooltipSetState } = this.props; - tooltipSetState(prevState => ({ - ...prevState, - show: false, - })); - }; +import Popper from './Popper'; +import withPopper, { UsingPopperProps } from './withPopper'; +class Tooltip extends PureComponent { render() { + const { children, hidePopper, showPopper, className, ...restProps } = this.props; + return ( - - {this.props.children} - +
+ {children} +
); } } -export default withTooltip(Tooltip); +export default withPopper(Tooltip); diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap index 12ec960a017..b36a4fe9af9 100644 --- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap +++ b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap @@ -3,10 +3,10 @@ exports[`Popover renders correctly 1`] = `