@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
93 lines (90 loc) • 3.3 kB
JavaScript
"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { CloseOutlined } from '@nex-ui/icons';
import { DialogRoot } from './DialogRoot.mjs';
import { DialogClose } from './DialogClose.mjs';
import { useDialog } from './DialogContext.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { ModalContent } from '../modal/ModalContent.mjs';
import { ButtonBase } from '../buttonBase/ButtonBase.mjs';
import { useNexUI } from '../provider/Context.mjs';
import { composeClasses } from '../utils/composeClasses.mjs';
import { dialogContentRecipe } from '../../theme/recipes/dialog.mjs';
import { getUtilityClass } from '../utils/getUtilityClass.mjs';
import { Ripple } from '../utils/ripple/Ripple.mjs';
const useSlotClasses = ()=>{
const { prefix } = useNexUI();
return useMemo(()=>{
const prefixClassName = `${prefix}-dialog-content`;
const slots = {
root: [
'root'
],
closeButton: [
'close-button'
]
};
return composeClasses(slots, getUtilityClass(prefixClassName));
}, [
prefix
]);
};
const DialogContent = (inProps)=>{
const { hideCloseButton, scroll, fullScreen, closeIcon: defaultCloseIcon, maxWidth: defaultMaxWidth } = useDialog();
const props = useDefaultProps({
name: 'DialogContent',
props: inProps
});
const { children, slotProps, maxWidth = defaultMaxWidth, closeIcon = defaultCloseIcon, ...remainingProps } = props;
const ownerState = {
...props,
maxWidth,
fullScreen
};
const styles = useStyles({
ownerState: {
scroll,
...ownerState
},
name: 'DialogContent',
recipe: dialogContentRecipe
});
const classes = useSlotClasses();
const [DialogContentRoot, getDialogContentRootProps] = useSlot({
ownerState,
elementType: ModalContent,
style: styles.content,
classNames: classes.root,
externalForwardedProps: remainingProps,
shouldForwardComponent: false
});
const [DialogContentCloseButton, getDialogContentCloseButtonProps] = useSlot({
ownerState,
elementType: ButtonBase,
externalSlotProps: slotProps?.closeButton,
style: styles.closeButton,
classNames: classes.closeButton,
shouldForwardComponent: false
});
return /*#__PURE__*/ jsx(DialogRoot, {
children: /*#__PURE__*/ jsxs(DialogContentRoot, {
...getDialogContentRootProps(),
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 };