diff --git a/CHANGELOG.md b/CHANGELOG.md index adebe87df47..87dcacbbd74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiToolTipPopover` to TS ([#1800](https://github.com/elastic/eui/pull/1800)) - Converted `EuiTableHeaderMobile` to TS ([#1786](https://github.com/elastic/eui/pull/1786)) - Added `menuLeft` and `menuRight` icons ([#1797](https://github.com/elastic/eui/pull/1797)) - Updated EuiNavDrawer’s collapse/expand button to use `menuLeft` and `menuRight` icons ([#1797](https://github.com/elastic/eui/pull/1797)) diff --git a/src/components/tool_tip/__snapshots__/tool_tip_popover.test.js.snap b/src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap similarity index 100% rename from src/components/tool_tip/__snapshots__/tool_tip_popover.test.js.snap rename to src/components/tool_tip/__snapshots__/tool_tip_popover.test.tsx.snap diff --git a/src/components/tool_tip/index.d.ts b/src/components/tool_tip/index.d.ts index 67f984bd079..5fec0cc8ccc 100644 --- a/src/components/tool_tip/index.d.ts +++ b/src/components/tool_tip/index.d.ts @@ -1,3 +1,4 @@ +export { EuiToolTipPopover } from './tool_tip_popover'; import { ReactElement, ReactNode, FunctionComponent } from 'react'; import { EuiIcon } from '../icon'; import { Omit, PropsOf } from '../common'; diff --git a/src/components/tool_tip/tool_tip_popover.test.js b/src/components/tool_tip/tool_tip_popover.test.tsx similarity index 80% rename from src/components/tool_tip/tool_tip_popover.test.js rename to src/components/tool_tip/tool_tip_popover.test.tsx index 44eb63ef5d5..203c4c843ae 100644 --- a/src/components/tool_tip/tool_tip_popover.test.js +++ b/src/components/tool_tip/tool_tip_popover.test.tsx @@ -7,10 +7,9 @@ import { EuiToolTipPopover } from './tool_tip_popover'; describe('EuiToolTipPopover', () => { test('is rendered', () => { const component = render( + // tslint:disable-next-line:no-empty {}} {...requiredProps} /> ); - - expect(component) - .toMatchSnapshot(); + expect(component).toMatchSnapshot(); }); }); diff --git a/src/components/tool_tip/tool_tip_popover.js b/src/components/tool_tip/tool_tip_popover.tsx similarity index 55% rename from src/components/tool_tip/tool_tip_popover.js rename to src/components/tool_tip/tool_tip_popover.tsx index 6c28d807319..069ba4f21e6 100644 --- a/src/components/tool_tip/tool_tip_popover.js +++ b/src/components/tool_tip/tool_tip_popover.tsx @@ -1,17 +1,17 @@ -import React, { - Component, -} from 'react'; -import PropTypes from 'prop-types'; +import React, { HTMLAttributes, Component, ReactNode } from 'react'; import classNames from 'classnames'; +import { CommonProps } from '../common'; -export class EuiToolTipPopover extends Component { - static propTypes = { - children: PropTypes.node, - className: PropTypes.string, - title: PropTypes.node, - positionToolTip: PropTypes.func.isRequired, - popoverRef: PropTypes.func, - } +export type EuiToolTipPopoverProps = CommonProps & + HTMLAttributes & { + positionToolTip: (rect: ClientRect | DOMRect) => void; + children?: ReactNode; + title?: ReactNode; + popoverRef?: (ref: HTMLDivElement) => void; + }; + +export class EuiToolTipPopover extends Component { + private popover: HTMLDivElement | undefined; updateDimensions = () => { requestAnimationFrame(() => { @@ -22,12 +22,12 @@ export class EuiToolTipPopover extends Component { }); }; - setPopoverRef = ref => { + setPopoverRef = (ref: HTMLDivElement) => { this.popover = ref; if (this.props.popoverRef) { this.props.popoverRef(ref); } - } + }; componentDidMount() { document.body.classList.add('euiBody-hasPortalContent'); @@ -46,29 +46,20 @@ export class EuiToolTipPopover extends Component { children, title, className, - positionToolTip, // eslint-disable-line no-unused-vars - popoverRef, // eslint-disable-line no-unused-vars + positionToolTip, + popoverRef, ...rest } = this.props; - const classes = classNames( - 'euiToolTipPopover', - className - ); + const classes = classNames('euiToolTipPopover', className); let optionalTitle; if (title) { - optionalTitle = ( -
{title}
- ); + optionalTitle =
{title}
; } return ( -
+
{optionalTitle} {children}