@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
181 lines (178 loc) • 6.19 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 { DrawerRoot } from './DrawerRoot.mjs';
import { DrawerClose } from './DrawerClose.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 { drawerContentRecipe } from '../../theme/recipes/drawer.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 drawer' } = closeButton;
const { role = 'dialog', 'aria-modal': ariaModal = true, 'aria-labelledby': ariaLabelledBy = defaultAriaLabelledBy, 'aria-describedby': ariaDescribedBy = defaultAriaDescribedBy } = paper;
return useMemo(()=>({
paper: {
role,
'aria-modal': ariaModal,
'aria-labelledby': ariaLabelledBy,
'aria-describedby': ariaDescribedBy
},
closeButton: {
'aria-label': closeButtonAriaLabel
}
}), [
role,
ariaModal,
ariaLabelledBy,
ariaDescribedBy,
closeButtonAriaLabel
]);
};
const DrawerContent = (inProps)=>{
const props = useDefaultProps({
name: 'DrawerContent',
props: inProps
});
const { classNames, children, slotProps, closeIcon, motionProps: motionPropsProp, placement = 'right', hideCloseButton = false, size = 'md', ...remainingProps } = props;
const ownerState = {
...props,
placement,
size,
closeIcon,
hideCloseButton
};
const styles = useStyles({
ownerState,
name: 'DrawerContent',
recipe: drawerContentRecipe
});
const slotAriaProps = useSlotAriaProps(ownerState);
const slotClasses = useSlotClasses({
name: 'DrawerContent',
slots,
classNames
});
const motionProps = useMemo(()=>{
const mProps = typeof motionPropsProp === 'function' ? motionPropsProp(placement) : motionPropsProp;
let variants;
switch(placement){
case 'left':
variants = {
visible: {
transform: 'translateX(0)'
},
hidden: {
transform: 'translateX(-100%)'
}
};
break;
case 'right':
variants = {
visible: {
transform: 'translateX(0)'
},
hidden: {
transform: 'translateX(100%)'
}
};
break;
case 'top':
variants = {
visible: {
transform: 'translateY(0)'
},
hidden: {
transform: 'translateY(-100%)'
}
};
break;
case 'bottom':
variants = {
visible: {
transform: 'translateY(0)'
},
hidden: {
transform: 'translateY(100%)'
}
};
break;
// istanbul ignore next
default:
variants = {};
}
return {
variants,
...mProps
};
}, [
motionPropsProp,
placement
]);
const [DrawerContentRoot, getDrawerContentRootProps] = useSlot({
elementType: ModalPanel,
style: styles.root,
externalForwardedProps: remainingProps,
shouldForwardComponent: false,
classNames: slotClasses.root,
dataAttrs: {
size,
placement,
hideCloseButton
}
});
const [DrawerContentPaper, getDrawerContentPaperProps] = useSlot({
elementType: ModalContent,
style: styles.paper,
classNames: slotClasses.paper,
externalSlotProps: slotProps?.paper,
shouldForwardComponent: false,
a11y: slotAriaProps.paper,
additionalProps: {
as: m.div,
...motionProps
}
});
const [DrawerContentCloseButton, getDrawerContentCloseButtonProps] = useSlot({
elementType: ButtonBase,
externalSlotProps: slotProps?.closeButton,
style: styles.closeButton,
classNames: slotClasses.closeButton,
shouldForwardComponent: false,
a11y: slotAriaProps.closeButton
});
return /*#__PURE__*/ jsx(DrawerRoot, {
children: /*#__PURE__*/ jsx(DrawerContentRoot, {
...getDrawerContentRootProps(),
children: /*#__PURE__*/ jsxs(DrawerContentPaper, {
...getDrawerContentPaperProps(),
children: [
!hideCloseButton && /*#__PURE__*/ jsx(DrawerClose, {
children: /*#__PURE__*/ jsx(Ripple, {
children: /*#__PURE__*/ jsx(DrawerContentCloseButton, {
...getDrawerContentCloseButtonProps(),
children: closeIcon ?? /*#__PURE__*/ jsx(CloseOutlined, {})
})
})
}),
children
]
})
})
});
};
DrawerContent.displayName = 'DrawerContent';
export { DrawerContent };