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, | +disableTab?: boolean, | ||||
+disableAutoFocus?: boolean, | +disableAutoFocus?: boolean, | ||||
+backgroundColor?: string, | |||||
}; | }; | ||||
function ModalOverlay(props: ModalOverlayProps): React.Node { | function ModalOverlay(props: ModalOverlayProps): React.Node { | ||||
const { children, onClose, disableTab, disableAutoFocus } = props; | const { children, onClose, disableTab, 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 30 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 }} | |||||
> | > | ||||
{children} | {children} | ||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
export default ModalOverlay; | export default ModalOverlay; |