feat(Modal): Convert Modal component to typescript

packages/patternfly-4/react-core/src/components/Modal/Modal.md

@@ -1,6 +1,7 @@
 ---
 title: 'Modal'
 cssPrefix: 'pf-c-modal-box'
+typescript: true
 ---
 
 import { Modal, Button } from '@patternfly/react-core';

packages/patternfly-4/react-core/src/components/Modal/Modal.test.js → packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx

@@ -1,10 +1,11 @@
-import Modal from './Modal';
-import React from 'react';
+import * as React from 'react';
 import { shallow } from 'enzyme';
 import { KEY_CODES } from '../../helpers/constants';
 import { css } from '../../../../react-styles/dist/js';
 import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css';
 
+import { Modal } from './Modal';
+
 jest.spyOn(document, 'createElement');
 jest.spyOn(document, 'addEventListener');
 
@@ -24,15 +25,17 @@ test('Modal creates a container element once for div', () => {
 
 test('modal closes with escape', () => {
   shallow(<Modal {...props} isOpen />);
-  const [event, handler] = document.addEventListener.mock.calls[0];
+  const mock: any = (document.addEventListener as any).mock;
+  const [event, handler] = mock.calls[0];
   expect(event).toBe('keydown');
   handler({ keyCode: KEY_CODES.ESCAPE_KEY });
   expect(props.onClose).toBeCalled();
 });
 
 test('modal does not call onClose for esc key if it is not open', () => {
   shallow(<Modal {...props} />);
-  const [event, handler] = document.addEventListener.mock.calls[0];
+  const mock: any = (document.addEventListener as any).mock;
+  const [event, handler] = mock.calls[0];
   expect(event).toBe('keydown');
   handler({ keyCode: KEY_CODES.ESCAPE_KEY });
   expect(props.onClose).not.toBeCalled();
@@ -41,7 +44,7 @@ test('modal does not call onClose for esc key if it is not open', () => {
 test('Each modal is given a new id', () => {
   const first = shallow(<Modal {...props} />);
   const second = shallow(<Modal {...props} />);
-  expect(first.instance().id).not.toBe(second.instance().id);
+  expect((first.instance() as any).id).not.toBe((second.instance() as any).id);
 });
 
 test('modal removes body backdropOpen class when removed', () => {

packages/patternfly-4/react-core/src/components/Modal/Modal.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { canUseDOM } from 'exenv';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css';
+
+import { KEY_CODES } from '../../helpers/constants';
+import { ModalContent } from './ModalContent';
+
+export interface ModalProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the Modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the Modal */
+  className?: string;
+  /** Flag to show the modal */
+  isOpen?: boolean;
+  /** Content of the Modal Header */
+  title: string;
+  /** Flag to hide the title */
+  hideTitle?: boolean;
+  /** Id to use for Modal Box description */
+  ariaDescribedById?: string;
+  /** Action buttons to put in the Modal Footer */
+  actions?: any,
+  /** A callback for when the close button is clicked */
+  onClose?: () => void;
+  /** Default width of the Modal. */
+  width?: number | string;
+  /** Creates a large version of the Modal */
+  isLarge?: boolean;
+  /** Creates a small version of the Modal */
+  isSmall?: boolean;
+}
+
+interface ModalState {
+  container: HTMLElement;
+}
+
+export class Modal extends React.Component<ModalProps, ModalState> {
+  static currentId = 0;
+  id = '';
+  container?: HTMLDivElement = undefined;
+
+  static defaultProps = {
+    className: '',
+    isOpen: false,
+    hideTitle: false,
+    ariaDescribedById: '',
+    actions: [] as any[],
+    onClose: () => undefined as any,
+    isLarge: false,
+    isSmall: false
+  };
+
+  constructor(props: ModalProps) {
+    super(props);
+    const newId = Modal.currentId++;
+    this.id = `pf-modal-${newId}`;
+
+    this.state = {
+      container: undefined
+    };
+  }
+
+
+  handleEscKeyClick = (event: KeyboardEvent): void => {
+    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+      this.props.onClose();
+    }
+  };
+
+  toggleSiblingsFromScreenReaders = (hide: boolean) => {
+    const bodyChildren = document.body.children;
+    for (const child of Array.from(bodyChildren)) {
+      if (child !== this.container) {
+        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+      }
+    }
+  };
+
+  componentDidMount() {
+    const container = document.createElement('div');
+    this.setState({ container });
+    document.body.appendChild(container);
+    document.addEventListener('keydown', this.handleEscKeyClick, false);
+
+    if (this.props.isOpen) {
+      document.body.classList.add(css(styles.backdropOpen));
+    } else {
+      document.body.classList.remove(css(styles.backdropOpen));
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isOpen) {
+      document.body.classList.add(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
+    } else {
+      document.body.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(false);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.container) {
+      document.body.removeChild(this.container);
+    }
+    document.removeEventListener('keydown', this.handleEscKeyClick, false);
+    document.body.classList.remove(css(styles.backdropOpen));
+  }
+
+  render() {
+    const { ...props } = this.props;
+    const { container } = this.state;
+
+    if (!canUseDOM || !container) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      <ModalContent {...props} title={this.props.title} id={this.id} ariaDescribedById={this.props.ariaDescribedById}/>,
+      container
+    );
+  }
+}