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

Changeset 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,
+disableAutoFocus?: boolean,		+disableAutoFocus?: boolean,
		+backgroundColor?: string,
};		};

function ModalOverlay(props: ModalOverlayProps): React.Node {		function ModalOverlay(props: ModalOverlayProps): React.Node {
const { children, onClose, disableAutoFocus } = props;		const { children, onClose, disableAutoFocus, backgroundColor } = props;

const overlayRef = React.useRef();		const overlayRef = React.useRef();
const firstClickRef = React.useRef(null);		const firstClickRef = React.useRef(null);

React.useLayoutEffect(() => {		React.useLayoutEffect(() => {
if (!disableAutoFocus && overlayRef.current) {		if (!disableAutoFocus && overlayRef.current) {
overlayRef.current.focus();		overlayRef.current.focus();
}		}
Show All 27 Lines	function ModalOverlay(props: ModalOverlayProps): React.Node {
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={{ backgroundColor: backgroundColor }}
		ashoatUnsubmitted Not Done Inline Actions This should be memoized. By passing in this new object every time, you've actually made all of the memoization above completely useless (memoization of `onBackgroundMouseDown`, `onBackgroundMouseUp`, and `onKeyDown` is now useless) ashoat: This should be memoized. By passing in this new object every time, you've actually made all of…
>		>
{children}		{children}
</div>		</div>
);		);
}		}

export default ModalOverlay;		export default ModalOverlay;