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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 1x 1x 67x 67x 67x 33x 67x 59x 1x 1x | import {forwardRef, useEffect} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import {Content as RadixContent} from '@radix-ui/react-dialog'
import {useModalContext} from './hooks/index.js'
import {BASE_CLASS, MODAL_ANIMATIONS, MODAL_SIZES} from './config.js'
const BASE_CLASS_CONTENT = `${BASE_CLASS}-Content`
/** Contains content to be rendered in the open dialog. **/
const Content = forwardRef(
(
{
as: As = 'div',
className,
size = MODAL_SIZES.MEDIUM,
animation = MODAL_ANIMATIONS.FADE,
onOpenAutoFocus,
onCloseAutoFocus,
onEscapeKeyDown,
onPointerDownOutside,
onInteractOutside,
forceMount,
children,
...props
},
forwardedRef
) => {
const {forceMount: forceMountContext, setAnimation, isMounted, hasAnimation} = useModalContext()
const forceMountValue = forceMount !== undefined ? forceMount : forceMountContext
useEffect(() => {
setAnimation(animation)
}, [animation])
if (forceMountValue === false || !isMounted) return null
return (
<RadixContent
forceMount={forceMountValue || hasAnimation}
asChild={true}
ref={forwardedRef}
onOpenAutoFocus={onOpenAutoFocus}
onCloseAutoFocus={onCloseAutoFocus}
onEscapeKeyDown={onEscapeKeyDown}
onPointerDownOutside={onPointerDownOutside}
onInteractOutside={onInteractOutside}
>
<As
data-sui-component={Content.displayName}
data-animation={animation}
className={cx(BASE_CLASS_CONTENT, {[`${BASE_CLASS_CONTENT}--size-${size}`]: size}, className)}
{...props}
>
<div
className={cx(`${BASE_CLASS_CONTENT}-Container`, {[`${BASE_CLASS_CONTENT}-Container--size-${size}`]: size})}
>
{children}
</div>
</As>
</RadixContent>
)
}
)
Content.displayName = 'MoleculeModal.Content'
Content.propTypes = {
/* Render the passed value as the correspondent HTML tag or the component if a function is passed */
as: PropTypes.elementType,
/** Additional classes */
className: PropTypes.string,
/** 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,
/** Event hand,ler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault. **/
onOpenAutoFocus: PropTypes.func,
/** Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. **/
onCloseAutoFocus: PropTypes.func,
/** Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. **/
onEscapeKeyDown: PropTypes.func,
/** Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault. **/
onPointerDownOutside: PropTypes.func,
/** Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. **/
onInteractOutside: PropTypes.func,
/** Size of the modal **/
size: PropTypes.oneOf(Object.values(MODAL_SIZES)),
/** Animation to be used when opening the modal **/
animation: PropTypes.oneOf(Object.values(MODAL_ANIMATIONS)),
/** The content of the component. **/
children: PropTypes.node
}
export default Content
|