Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 1x 1x 20x 20x 20x 18x 1x 1x | import {forwardRef} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import {Overlay as RadixOverlay} from '@radix-ui/react-dialog'
import {BASE_CLASS} from './config.js'
import {useModalContext} from './hooks'
const BASE_CLASS_OVERLAY = `${BASE_CLASS}-Overlay`
/** A layer that covers the inert portion of the view when the dialog is open. **/
const Overlay = forwardRef(({as: As = 'div', forceMount, className, ...props}, forwardedRef) => {
const {forceMount: forceMountContext, isMounted, isOpen, hasAnimation} = useModalContext()
const forceMountValue = forceMount !== undefined ? forceMount : forceMountContext
if (forceMountValue === false && !isMounted) return null
return (
<RadixOverlay asChild={true} forceMount={(forceMountValue || isOpen) && hasAnimation}>
<As
data-sui-component={Overlay.displayName}
className={cx(BASE_CLASS_OVERLAY, className)}
{...props}
data-animation={hasAnimation}
ref={forwardedRef}
/>
</RadixOverlay>
)
})
Overlay.displayName = 'MoleculeModal.Overlay'
Overlay.propTypes = {
/* Render the passed value as the correspondent HTML tag or the component if a function is passed */
as: PropTypes.elementType,
/* Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Modal.Portal. **/
forceMount: PropTypes.bool,
/** Additional classes */
className: PropTypes.string
}
export default Overlay
|