EuiOverlayMask converted to TS

src/components/index.d.ts

@@ -20,7 +20,6 @@
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./observer/mutation_observer/index.d.ts" />
 /// <reference path="./observer/resize_observer/index.d.ts" />
-/// <reference path="./overlay_mask/index.d.ts" />
 /// <reference path="./page/index.d.ts" />
 /// <reference path="./pagination/index.d.ts" />
 /// <reference path="./panel/index.d.ts" />

src/components/overlay_mask/index.ts

@@ -0,0 +1 @@
+export { EuiOverlayMask } from './overlay_mask';

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<HTMLDivElement> &
+  EuiOverlayMaskProps;
+
+export class EuiOverlayMask extends Component<Props> {
+  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!);
+  }
+}