Create hooks for Focus Trap and ESC listener and use in Modal, Popover and Tooltip

packages/thumbprint-react/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 -   [Patch] Simplify `<noscript>` output in `Image` component by removing `<picture>` and `srcSet` and using only `<img alt="..." src="..." />`.
 -   [Minor] Add the new `Popover` component.
+-   [Patch] Refactor out shared ESC listener logic from popover and modal curtain.
+-   [Patch] Refactor ModalCurtain to be a function component using hooks.
 
 ## 6.2.1 - 2019-06-24
 

packages/thumbprint-react/components/ModalCurtain/__snapshots__/test.jsx.snap

@@ -152,9 +152,6 @@ exports[`renders modal in \`entered\` stage 1`] = `
         role="dialog"
         tabIndex="-1"
       >
-        <EscListener
-          onEscPress={[Function]}
-        />
         <NoScroll />
       </div>
     </FocusTrap>
@@ -206,9 +203,6 @@ exports[`renders modal in \`entering\` stage 1`] = `
         role="dialog"
         tabIndex="-1"
       >
-        <EscListener
-          onEscPress={[Function]}
-        />
         <NoScroll />
       </div>
     </FocusTrap>

packages/thumbprint-react/components/ModalCurtain/index.jsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
+
 import NoScroll from './components/no-scroll.jsx';
-import EscListener from './components/esc-listener.jsx';
+
+import useCloseOnEscape from '../../utils/use-close-on-escape';
+
 import styles from './index.module.scss';
 
 const propTypes = {
@@ -54,89 +57,66 @@ const defaultProps = {
     shouldCloseOnEscape: true,
 };
 
-export default class ModalCurtain extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isClient: false,
-        };
-
-        this.modalWrapperNode = null;
-    }
-
-    componentDidMount() {
-        this.setState({ isClient: true });
-    }
-
-    render() {
-        const { isClient } = this.state;
-        const { shouldCloseOnEscape, accessibilityLabel, onCloseClick, children } = this.props;
-
-        if (!isClient) return null;
-
-        const { stage } = this.props;
-
-        const isEnteringOrEntered = stage === 'entering' || stage === 'entered';
-        const shouldRenderEscListener = shouldCloseOnEscape && isEnteringOrEntered;
-        const shouldRenderNoScroll = isEnteringOrEntered;
-
-        return ReactDOM.createPortal(
-            <FocusTrap
-                active={stage === 'entered'}
-                focusTrapOptions={{
-                    clickOutsideDeactivates: true,
-                    // Set initial focus to the modal wrapper itself instead of
-                    // focusing on the first focusable element by default
-                    initialFocus: () => this.modalWrapperNode,
-                }}
-            >
-                {/**
-                    Use tabIndex="-1" to allow programmatic focus (as initialFocus node for <FocusTrap>)
-                    but not be tabbable by user.
-                */}
-                <div
-                    role="dialog"
-                    aria-label={accessibilityLabel}
-                    tabIndex="-1"
-                    ref={div => {
-                        this.modalWrapperNode = div;
-                    }}
-                >
-                    {shouldRenderEscListener && <EscListener onEscPress={onCloseClick} />}
-
-                    {shouldRenderNoScroll && <NoScroll />}
-
-                    {/**
-                        This component uses the render prop pattern. `children` expects a function
-                        and receives an object that contains `curtainOnClick` and
-                        `curtainClassName`.
-
-                        While using those two properties is optional, they provide helpful
-                        functionality.
-                    */}
-                    {children &&
-                        children({
-                            curtainOnClick: event => {
-                                // Ensures that the click event happened on the element that has the
-                                // `onClick`. This prevents clicks deep within `children` from bubbling
-                                // up and closing the ModalCurtain.
-                                if (event.target === event.currentTarget) {
-                                    onCloseClick();
-                                }
-                            },
-                            curtainClassName: classNames({
-                                [styles.root]: true,
-                                [styles.rootOpen]: isEnteringOrEntered,
-                            }),
-                        })}
-                </div>
-            </FocusTrap>,
-            document.body,
-        );
-    }
+export default function ModalCurtain({
+    stage,
+    shouldCloseOnEscape,
+    accessibilityLabel,
+    onCloseClick,
+    children,
+}) {
+    const [isClient, setIsClient] = useState(false);
+    const modalWrapperNode = useRef(null);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    const isEnteringOrEntered = stage === 'entering' || stage === 'entered';
+    const shouldRenderEscListener = shouldCloseOnEscape && isEnteringOrEntered;
+    const shouldRenderNoScroll = isEnteringOrEntered;
+
+    useCloseOnEscape(shouldRenderEscListener ? onCloseClick : () => {});
+
+    if (!isClient) return null;
+
+    return ReactDOM.createPortal(
+        <FocusTrap
+            active={stage === 'entered'}
+            focusTrapOptions={{
+                clickOutsideDeactivates: true,
+                // Set initial focus to the modal wrapper itself instead of focusing on the first
+                // ocusable element by default
+                initialFocus: () => modalWrapperNode,
+            }}
+        >
+            {/* Use tabIndex="-1" to allow programmatic focus (as initialFocus node for <FocusTrap>)
+            but not be tabbable by user. */}
+            <div role="dialog" aria-label={accessibilityLabel} tabIndex="-1" ref={modalWrapperNode}>
+                {shouldRenderNoScroll && <NoScroll />}
+
+                {/* This component uses the render prop pattern. `children` expects a function and
+                receives an object that contains `curtainOnClick` and `curtainClassName`.
+                While using those two properties is optional, they provide helpful functionality. */}
+                {children &&
+                    children({
+                        curtainOnClick: event => {
+                            // Ensures that the click event happened on the element that has the
+                            // `onClick`. This prevents clicks deep within `children` from bubbling
+                            // up and closing the ModalCurtain.
+                            if (event.target === event.currentTarget) {
+                                onCloseClick();
+                            }
+                        },
+                        curtainClassName: classNames({
+                            [styles.root]: true,
+                            [styles.rootOpen]: isEnteringOrEntered,
+                        }),
+                    })}
+            </div>
+        </FocusTrap>,
+        document.body,
+    );
 }
 
 ModalCurtain.propTypes = propTypes;
-
 ModalCurtain.defaultProps = defaultProps;