Changeset View
Changeset View
Standalone View
Standalone View
lib/components/modal-overlay.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import css from './modal-overlay.css'; | import css from './modal-overlay.css'; | ||||
type ModalOverlayProps = { | type ModalOverlayProps = { | ||||
+onClose: () => void, | +onClose: () => void, | ||||
+children?: React.Node, | +children?: React.Node, | ||||
+disableTab?: boolean, | |||||
}; | }; | ||||
function ModalOverlay(props: ModalOverlayProps): React.Node { | function ModalOverlay(props: ModalOverlayProps): React.Node { | ||||
const { children, onClose } = props; | const { children, onClose, disableTab } = props; | ||||
const overlayRef = React.useRef(); | const overlayRef = React.useRef(); | ||||
const firstClickRef = React.useRef(null); | const firstClickRef = React.useRef(null); | ||||
React.useLayoutEffect(() => { | React.useLayoutEffect(() => { | ||||
if (overlayRef.current) { | if (overlayRef.current) { | ||||
overlayRef.current.focus(); | overlayRef.current.focus(); | ||||
} | } | ||||
Show All 15 Lines | const onBackgroundMouseUp = React.useCallback( | ||||
[onClose], | [onClose], | ||||
); | ); | ||||
const onKeyDown = React.useCallback( | const onKeyDown = React.useCallback( | ||||
event => { | event => { | ||||
if (event.key === 'Escape') { | if (event.key === 'Escape') { | ||||
onClose(); | onClose(); | ||||
} | } | ||||
if (disableTab && event.key === 'Tab') { | |||||
event.preventDefault(); | |||||
} | |||||
}, | }, | ||||
[onClose], | [disableTab, onClose], | ||||
); | ); | ||||
return ( | return ( | ||||
<div | <div | ||||
className={css.modalOverlay} | className={css.modalOverlay} | ||||
ref={overlayRef} | ref={overlayRef} | ||||
onMouseDown={onBackgroundMouseDown} | onMouseDown={onBackgroundMouseDown} | ||||
onMouseUp={onBackgroundMouseUp} | onMouseUp={onBackgroundMouseUp} | ||||
Show All 9 Lines |