Differential D7930 Diff 26958 lib/components/modal-overlay.react.js

Changeset View

Standalone View

lib/components/modal-overlay.react.js

// @flow		// @flow

import FocusTrap from 'focus-trap-react';		import FocusTrap from 'focus-trap-react';
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,
		+backgroundColor?: string,
};		};

function ModalOverlay(props: ModalOverlayProps): React.Node {		function ModalOverlay(props: ModalOverlayProps): React.Node {
const { children, onClose } = props;		const {
		children,
		onClose,
		backgroundColor = 'var(--modal-overlay-background-90)',
		} = 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 19 Lines	const onKeyDown = React.useCallback(
event => {		event => {
if (event.key === 'Escape') {		if (event.key === 'Escape') {
onClose();		onClose();
}		}
},		},
[onClose],		[onClose],
);		);

		const containerStyle = React.useMemo(
		() => ({
		backgroundColor,
		}),
		[backgroundColor],
		);

return (		return (
<div		<div
className={css.modalOverlay}		className={css.modalOverlay}
ref={overlayRef}		ref={overlayRef}
onMouseDown={onBackgroundMouseDown}		onMouseDown={onBackgroundMouseDown}
onMouseUp={onBackgroundMouseUp}		onMouseUp={onBackgroundMouseUp}
tabIndex={0}		tabIndex={0}
onKeyDown={onKeyDown}		onKeyDown={onKeyDown}
		style={containerStyle}
>		>
<FocusTrap>{children}</FocusTrap>		<FocusTrap>{children}</FocusTrap>
</div>		</div>
);		);
}		}

export default ModalOverlay;		export default ModalOverlay;