From 2d0ac3b2ee9db29043aad601b5031679ce3d63bc Mon Sep 17 00:00:00 2001 From: Theofanis Despoudis Date: Wed, 24 Apr 2019 16:57:39 +0100 Subject: [PATCH] `EuiOverlayMask` converted to TS (#1858) * `EuiOverlayMask` converted to TS * `EuiOverlayMask` updated Changelog * `EuiOverlayMask` code review fixes --- CHANGELOG.md | 1 + src/components/index.d.ts | 1 - src/components/overlay_mask/index.d.ts | 20 ------ src/components/overlay_mask/index.js | 3 - src/components/overlay_mask/index.ts | 1 + src/components/overlay_mask/overlay_mask.js | 66 -------------------- src/components/overlay_mask/overlay_mask.tsx | 64 +++++++++++++++++++ 7 files changed, 66 insertions(+), 90 deletions(-) delete mode 100644 src/components/overlay_mask/index.d.ts delete mode 100644 src/components/overlay_mask/index.js create mode 100644 src/components/overlay_mask/index.ts delete mode 100644 src/components/overlay_mask/overlay_mask.js create mode 100644 src/components/overlay_mask/overlay_mask.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 85f2c56acd6..2b220772da0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858)) - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848)) - Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848)) diff --git a/src/components/index.d.ts b/src/components/index.d.ts index c7b9dad7363..f5f8145c2d6 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -20,7 +20,6 @@ /// /// /// -/// /// /// /// diff --git a/src/components/overlay_mask/index.d.ts b/src/components/overlay_mask/index.d.ts deleted file mode 100644 index f449081d291..00000000000 --- a/src/components/overlay_mask/index.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { CommonProps } from '../common'; - -import { FunctionComponent, HTMLAttributes } from 'react'; - -declare module '@elastic/eui' { - - /** - * EuiOverlayMask type defs - * - * @see './overlay_mask.js' - */ - export interface EuiOverlayMaskProps { - onClick?: () => void; - } - - export const EuiOverlayMask: FunctionComponent< - CommonProps & HTMLAttributes & EuiOverlayMaskProps - >; - -} diff --git a/src/components/overlay_mask/index.js b/src/components/overlay_mask/index.js deleted file mode 100644 index bd249edd4b5..00000000000 --- a/src/components/overlay_mask/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { - EuiOverlayMask, -} from './overlay_mask'; diff --git a/src/components/overlay_mask/index.ts b/src/components/overlay_mask/index.ts new file mode 100644 index 00000000000..23c5c1e1ada --- /dev/null +++ b/src/components/overlay_mask/index.ts @@ -0,0 +1 @@ +export { EuiOverlayMask } from './overlay_mask'; diff --git a/src/components/overlay_mask/overlay_mask.js b/src/components/overlay_mask/overlay_mask.js deleted file mode 100644 index 4032f639dce..00000000000 --- a/src/components/overlay_mask/overlay_mask.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * NOTE: We can't test this component because Enzyme doesn't support rendering - * into portals. - */ - -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { createPortal } from 'react-dom'; -import classNames from 'classnames'; - -export class EuiOverlayMask extends Component { - constructor(props) { - super(props); - - const { - className, - children, // eslint-disable-line no-unused-vars - onClick, - ...rest - } = this.props; - - this.overlayMaskNode = document.createElement('div'); - this.overlayMaskNode.className = classNames( - 'euiOverlayMask', - className - ); - if (onClick) { - this.overlayMaskNode.addEventListener('click', onClick); - } - Object.keys(rest).forEach((key) => { - if (typeof rest[key] !== 'string') { - throw new Error(`Unhandled property type. EuiOverlayMask property ${key} is not a string.`); - } - this.overlayMaskNode.setAttribute(key, rest[key]); - }); - - document.body.appendChild(this.overlayMaskNode); - } - - componentDidMount() { - document.body.classList.add('euiBody-hasOverlayMask'); - } - - componentWillUnmount() { - document.body.classList.remove('euiBody-hasOverlayMask'); - - if (this.props.onClick) { - this.overlayMaskNode.removeEventListener('click', this.props.onClick); - } - document.body.removeChild(this.overlayMaskNode); - this.overlayMaskNode = null; - } - - render() { - return createPortal( - this.props.children, - this.overlayMaskNode - ); - } -} - -EuiOverlayMask.propTypes = { - className: PropTypes.string, - children: PropTypes.node, - onClick: PropTypes.func, -}; diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx new file mode 100644 index 00000000000..56fe895bb80 --- /dev/null +++ b/src/components/overlay_mask/overlay_mask.tsx @@ -0,0 +1,64 @@ +/** + * NOTE: We can't test this component because Enzyme doesn't support rendering + * into portals. + */ + +import { Component, HTMLAttributes } from 'react'; +import { createPortal } from 'react-dom'; +import classNames from 'classnames'; +import { CommonProps, keysOf, Omit } from '../common'; + +export interface EuiOverlayMaskProps { + onClick?: () => void; +} + +export type Props = CommonProps & + Omit< + Partial, string>>, + keyof EuiOverlayMaskProps + > & + EuiOverlayMaskProps; + +export class EuiOverlayMask extends Component { + private overlayMaskNode?: HTMLDivElement; + + constructor(props: Props) { + super(props); + + const { className, children, onClick, ...rest } = this.props; + + this.overlayMaskNode = document.createElement('div'); + this.overlayMaskNode.className = classNames('euiOverlayMask', className); + if (onClick) { + this.overlayMaskNode.addEventListener('click', onClick); + } + keysOf(rest).forEach(key => { + if (typeof rest[key] !== 'string') { + throw new Error( + `Unhandled property type. EuiOverlayMask property ${key} is not a string.` + ); + } + this.overlayMaskNode!.setAttribute(key, rest[key]!); + }); + + document.body.appendChild(this.overlayMaskNode); + } + + componentDidMount() { + document.body.classList.add('euiBody-hasOverlayMask'); + } + + componentWillUnmount() { + document.body.classList.remove('euiBody-hasOverlayMask'); + + if (this.props.onClick) { + this.overlayMaskNode!.removeEventListener('click', this.props.onClick); + } + document.body.removeChild(this.overlayMaskNode!); + this.overlayMaskNode = undefined; + } + + render() { + return createPortal(this.props.children, this.overlayMaskNode!); + } +}