From a225042c015916338586806466ca9b859267ac41 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 19 Apr 2019 10:32:37 +0100 Subject: [PATCH 1/3] `EuiOverlayMask` converted to TS --- 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 +++++++++++++++++++ 6 files changed, 65 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/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..71f68c5ce77 --- /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 } from '../common'; + +export interface EuiOverlayMaskProps { + onClick?: () => void; +} + +export type Props = CommonProps & + HTMLAttributes & + 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); + } + interface RestType { + [key: string]: any; + } + Object.keys(rest).forEach((key: string) => { + if (typeof (rest as RestType)[key] !== 'string') { + throw new Error( + `Unhandled property type. EuiOverlayMask property ${key} is not a string.` + ); + } + this.overlayMaskNode!.setAttribute(key, (rest as RestType)[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!); + } +} From b7bee1f7ec0ebb922064c0fd5ad24e05c24c84e1 Mon Sep 17 00:00:00 2001 From: Theo Date: Fri, 19 Apr 2019 10:42:35 +0100 Subject: [PATCH 2/3] `EuiOverlayMask` updated Changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e678eb4414d..afef7344aed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858)) + **Bug fixes** - Fixed `EuiComboBox` to not pass its `inputRef` prop down to the DOM ([#1867](https://github.com/elastic/eui/pull/1867)) From 965765fb3c71d7fd27bd13bf174fbabba9cc239f Mon Sep 17 00:00:00 2001 From: Theo Date: Tue, 23 Apr 2019 11:40:28 +0100 Subject: [PATCH 3/3] `EuiOverlayMask` code review fixes --- src/components/overlay_mask/overlay_mask.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx index 71f68c5ce77..56fe895bb80 100644 --- a/src/components/overlay_mask/overlay_mask.tsx +++ b/src/components/overlay_mask/overlay_mask.tsx @@ -6,14 +6,17 @@ import { Component, HTMLAttributes } from 'react'; import { createPortal } from 'react-dom'; import classNames from 'classnames'; -import { CommonProps } from '../common'; +import { CommonProps, keysOf, Omit } from '../common'; export interface EuiOverlayMaskProps { onClick?: () => void; } export type Props = CommonProps & - HTMLAttributes & + Omit< + Partial, string>>, + keyof EuiOverlayMaskProps + > & EuiOverlayMaskProps; export class EuiOverlayMask extends Component { @@ -29,16 +32,13 @@ export class EuiOverlayMask extends Component { if (onClick) { this.overlayMaskNode.addEventListener('click', onClick); } - interface RestType { - [key: string]: any; - } - Object.keys(rest).forEach((key: string) => { - if (typeof (rest as RestType)[key] !== 'string') { + 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 as RestType)[key]); + this.overlayMaskNode!.setAttribute(key, rest[key]!); }); document.body.appendChild(this.overlayMaskNode);