@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
149 lines (146 loc) • 5.33 kB
JavaScript
"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import * as m from 'motion/react-m';
import { useMemo } from 'react';
import { CloseOutlined } from '@nex-ui/icons';
import { DialogRoot } from './DialogRoot.mjs';
import { DialogClose } from './DialogClose.mjs';
import { DialogContentProvider } from './DialogContext.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { ModalPanel } from '../modal/ModalPanel.mjs';
import { ModalContent } from '../modal/ModalContent.mjs';
import { ButtonBase } from '../buttonBase/ButtonBase.mjs';
import { dialogContentRecipe } from '../../theme/recipes/dialog.mjs';
import { Ripple } from '../utils/ripple/Ripple.mjs';
const slots = [
'root',
'paper',
'closeButton'
];
const useSlotAriaProps = (ownerState)=>{
const { 'aria-labelledby': defaultAriaLabelledBy, 'aria-describedby': defaultAriaDescribedBy } = ownerState;
const { paper = {}, closeButton = {} } = ownerState.slotProps ?? {};
const { 'aria-label': closeButtonAriaLabel = 'Close dialog' } = closeButton;
const { role = 'dialog', 'aria-modal': modal = true, 'aria-labelledby': ariaLabelledBy = defaultAriaLabelledBy, 'aria-describedby': ariaDescribedBy = defaultAriaDescribedBy } = paper;
return useMemo(()=>({
paper: {
role,
'aria-modal': modal,
'aria-labelledby': ariaLabelledBy,
'aria-describedby': ariaDescribedBy
},
closeButton: {
'aria-label': closeButtonAriaLabel
}
}), [
role,
modal,
ariaLabelledBy,
ariaDescribedBy,
closeButtonAriaLabel
]);
};
const DialogContent = (inProps)=>{
const props = useDefaultProps({
name: 'DialogContent',
props: inProps
});
const { children, slotProps, closeIcon, classNames, motionProps: motionPropsProp, placement = 'top', scroll = 'outside', fullScreen = false, hideCloseButton = false, size = 'md', ...remainingProps } = props;
const ownerState = {
...props,
placement,
scroll,
size,
fullScreen,
hideCloseButton
};
const styles = useStyles({
ownerState,
name: 'DialogContent',
recipe: dialogContentRecipe
});
const slotAriaProps = useSlotAriaProps(ownerState);
const slotClasses = useSlotClasses({
name: 'DialogContent',
slots,
classNames
});
const motionProps = useMemo(()=>{
const mProps = typeof motionPropsProp === 'function' ? motionPropsProp(placement) : motionPropsProp;
return {
variants: {
visible: {
transform: 'scale(1)'
},
hidden: {
transform: 'scale(1.04)'
}
},
...mProps
};
}, [
motionPropsProp,
placement
]);
const [DialogContentRoot, getDialogContentRootProps] = useSlot({
elementType: ModalPanel,
style: styles.root,
externalForwardedProps: remainingProps,
shouldForwardComponent: false,
classNames: slotClasses.root,
dataAttrs: {
size,
placement,
scroll,
fullScreen,
hideCloseButton
}
});
const [DialogContentPaper, getDialogContentPaperProps] = useSlot({
elementType: ModalContent,
style: styles.paper,
classNames: slotClasses.paper,
externalSlotProps: slotProps?.paper,
shouldForwardComponent: false,
a11y: slotAriaProps.paper,
additionalProps: {
as: m.section,
...motionProps
}
});
const [DialogContentCloseButton, getDialogContentCloseButtonProps] = useSlot({
elementType: ButtonBase,
externalSlotProps: slotProps?.closeButton,
style: styles.closeButton,
classNames: slotClasses.closeButton,
shouldForwardComponent: false,
a11y: slotAriaProps.closeButton
});
return /*#__PURE__*/ jsx(DialogRoot, {
children: /*#__PURE__*/ jsx(DialogContentRoot, {
...getDialogContentRootProps(),
children: /*#__PURE__*/ jsx(DialogContentPaper, {
...getDialogContentPaperProps(),
children: /*#__PURE__*/ jsxs(DialogContentProvider, {
value: ownerState,
children: [
!hideCloseButton && /*#__PURE__*/ jsx(DialogClose, {
children: /*#__PURE__*/ jsx(Ripple, {
children: /*#__PURE__*/ jsx(DialogContentCloseButton, {
...getDialogContentCloseButtonProps(),
children: closeIcon ?? /*#__PURE__*/ jsx(CloseOutlined, {})
})
})
}),
children
]
})
})
})
});
};
DialogContent.displayName = 'DialogContent';
export { DialogContent };