Updates per review comments

patternfly · May 15, 2019 · 163d17c · 163d17c
1 parent 5f12676
commit 163d17c
Show file tree

Hide file tree

Showing 15 changed files with 50 additions and 49 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.md b/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';

diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx
@@ -1,10 +1,11 @@
-import Modal from './Modal';
 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');
 

diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx
@@ -6,7 +6,7 @@ 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';
+import { ModalContent } from './ModalContent';
 
 export interface ModalProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Modal. */
@@ -33,18 +33,22 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement> {
   isSmall?: boolean;
 }
 
-export class Modal extends React.Component<ModalProps> {
+interface ModalState {
+  container: HTMLElement;
+}
+
+export class Modal extends React.Component<ModalProps, ModalState> {
   static currentId = 0;
   id = '';
   container?: HTMLDivElement = undefined;
 
   static defaultProps = {
-    width: undefined as any,
     className: '',
     isOpen: false,
     hideTitle: false,
     ariaDescribedById: '',
     actions: [] as any[],
+    onClose: () => undefined as any,
     isLarge: false,
     isSmall: false
   };
@@ -53,12 +57,16 @@ export class Modal extends React.Component<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!();
+      this.props.onClose();
     }
   };
 
@@ -72,10 +80,11 @@ export class Modal extends React.Component<ModalProps> {
   };
 
   componentDidMount() {
-    if (this.container) {
-      document.body.appendChild(this.container);
-    }
+    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 {
@@ -103,17 +112,15 @@ export class Modal extends React.Component<ModalProps> {
 
   render() {
     const { ...props } = this.props;
+    const { container } = this.state;
 
-    if (!canUseDOM) {
+    if (!canUseDOM || !container) {
       return null;
     }
 
-    if (!this.container) {
-      this.container = document.createElement('div');
-    }
-
-    return ReactDOM.createPortal(<ModalContent {...props} title={this.props.title} id={this.id} ariaDescribedById={this.props.ariaDescribedById}/>, this.container);
+    return ReactDOM.createPortal(
+      <ModalContent {...props} title={this.props.title} id={this.id} ariaDescribedById={this.props.ariaDescribedById}/>,
+      container
+    );
   }
 }
-
-export default Modal;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx
@@ -1,7 +1,8 @@
-import ModalBox from './ModalBox';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
+import { ModalBox } from './ModalBox';
+
 test('ModalBox Test', () => {
   const view = shallow(
     <ModalBox title="Test Modal Box" id="boxId">

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx
@@ -25,7 +25,7 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
   title,
   id,
   ...props
-}) => (
+}: ModalBoxProps) => (
   <div
     {...props}
     role="dialog"
@@ -37,5 +37,3 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
     {children}
   </div>
 );
-
-export default ModalBox;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx
@@ -1,7 +1,8 @@
-import ModalBoxBody from './ModalBoxBody';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
+import { ModalBoxBody } from './ModalBoxBody';
+
 test('ModalBoxBody Test', () => {
   const view = shallow(<ModalBoxBody id="id" className="test-box-class">This is a ModalBox header</ModalBoxBody>);
   expect(view).toMatchSnapshot();

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx
@@ -13,10 +13,8 @@ export const ModalBoxBody: React.FunctionComponent<ModalBoxBodyProps> = ({
   children = null,
   className = '',
   ...props
-}) => (
+}: ModalBoxBodyProps) => (
   <div {...props} className={css(styles.modalBoxBody, className)}>
     {children}
   </div>
 );
-
-export default ModalBoxBody;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import ModalBoxCloseButton from './ModalBoxCloseButton';
+import { ModalBoxCloseButton } from './ModalBoxCloseButton';
 
 test('ModalBoxCloseButton Test', () => {
   const mockfn = jest.fn();

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx
@@ -6,19 +6,17 @@ export interface ModalBoxCloseButtonProps {
   /** additional classes added to the close button */
   className?: string;
   /** A callback for when the close button is clicked */
-  onClose?(): void;
+  onClose?: () => void;
 }
 
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
   className = '',
-  onClose = () => undefined,
+  onClose = () => undefined as any,
   ...props
-}) => (
+}: ModalBoxCloseButtonProps) => (
   <React.Fragment>
     <Button className={className} variant="plain" onClick={onClose} aria-label="Close" {...props}>
       <TimesIcon />
     </Button>
   </React.Fragment>
 );
-
-export default ModalBoxCloseButton;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import ModalBoxFooter from './ModalBoxFooter';
+import { ModalBoxFooter } from './ModalBoxFooter';
 
 test('ModalBoxFooter Test', () => {
   const view = shallow(<ModalBoxFooter className="test-box-footer-class">This is a ModalBox Footer</ModalBoxFooter>);

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx
@@ -13,10 +13,8 @@ export const ModalBoxFooter: React.FunctionComponent<ModalBoxFooterProps> = ({
   children = null,
   className = '',
   ...props
-}) => (
+}: ModalBoxFooterProps) => (
   <div {...props} className={css(styles.modalBoxFooter, className)}>
     {children}
   </div>
 );
-
-export default ModalBoxFooter;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import ModalBoxHeader from './ModalBoxHeader';
+
 import {TitleLevel} from '../Title';
+import { ModalBoxHeader } from './ModalBoxHeader';
 
 test('ModalBoxHeader Test', () => {
   const view = shallow(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx
@@ -21,7 +21,7 @@ export const ModalBoxHeader: React.FunctionComponent<ModalBoxHeaderProps> = ({
   hideTitle = false,
   headingLevel = TitleLevel.h1,
   ...props
-}) => {
+}: ModalBoxHeaderProps) => {
   const hidden = hideTitle ? css(accessibleStyles.screenReader) : '';
 
   return (
@@ -32,5 +32,3 @@ export const ModalBoxHeader: React.FunctionComponent<ModalBoxHeaderProps> = ({
     </React.Fragment>
   );
 };
-
-export default ModalBoxHeader;
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx
@@ -1,6 +1,7 @@
 import* as React from 'react';
 import { shallow } from 'enzyme';
-import ModalContent from './ModalContent';
+
+import { ModalContent } from './ModalContent';
 
 test('Modal Content Test only body', () => {
   const view = shallow(

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx
@@ -9,11 +9,11 @@ import styles from '@patternfly/patternfly/layouts/Bullseye/bullseye.css';
 import { css } from '@patternfly/react-styles';
 
 import Backdrop from '../Backdrop/Backdrop';
-import ModalBoxBody from './ModalBoxBody';
-import ModalBoxHeader from './ModalBoxHeader';
-import ModalBoxHCloseButton from './ModalBoxCloseButton';
-import ModalBox from './ModalBox';
-import ModalBoxFooter from './ModalBoxFooter';
+import { ModalBoxBody } from './ModalBoxBody';
+import { ModalBoxHeader } from './ModalBoxHeader';
+import { ModalBoxCloseButton } from './ModalBoxCloseButton';
+import { ModalBox } from './ModalBox';
+import { ModalBoxFooter } from './ModalBoxFooter';
 
 export interface ModalContentProps {
   /** content rendered inside the Modal. */
@@ -35,7 +35,7 @@ export interface ModalContentProps {
   /** Content of the Modal Footer */
   actions?: any,
   /** A callback for when the close button is clicked */
-  onClose?(): void;
+  onClose?: () => void;
   /** id to use for Modal Box description */
   ariaDescribedById?: string;
   /** id of the ModalBoxBody */
@@ -49,7 +49,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   title,
   hideTitle = false,
   actions = [],
-  onClose = () => undefined,
+  onClose = () => undefined as any,
   isLarge = false,
   isSmall = false,
   width = -1,
@@ -76,7 +76,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           title={title}
           id={ariaDescribedById || id}
         >
-          <ModalBoxHCloseButton onClose={onClose} />
+          <ModalBoxCloseButton onClose={onClose} />
           {modalBoxHeader}
           <ModalBoxBody {...props} id={id}>
             {children}
@@ -87,5 +87,3 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </Backdrop>
   );
 };
-
-export default ModalContent;