@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
72 lines • 2.22 kB
JavaScript
import { useSite } from 'chayns-api';
import React from 'react';
import { PopupAlignment } from '../../../types/popup';
import { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';
const PopupContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
alignment,
children,
coordinates,
offset,
width,
onMouseLeave,
shouldScrollWithContent,
onMouseEnter
} = _ref;
const {
colorMode
} = useSite();
const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
const isTopRightAlignment = alignment === PopupAlignment.TopRight;
const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;
const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
return /*#__PURE__*/React.createElement(StyledMotionPopupContentWrapper, {
animate: {
opacity: 1,
y: 0
},
$colorMode: colorMode,
$offset: offset,
exit: {
opacity: 0,
y: exitAndInitialY
},
initial: {
opacity: 0,
y: exitAndInitialY
},
$position: alignment,
$shouldScrollWithContent: shouldScrollWithContent,
ref: ref,
"data-ispopup": "true",
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
style: {
left: coordinates.x,
top: coordinates.y,
width
},
transition: {
type: 'tween'
},
transformTemplate: _ref2 => {
let {
y = '0px'
} = _ref2;
return `
translateX(${percentageOffsetX}%)
translateY(${percentageOffsetY}%)
translateX(${anchorOffsetX}px)
translateY(${anchorOffsetY}px)
translateY(${y})
`;
}
}, children);
});
PopupContentWrapper.displayName = 'PopupContent';
export default PopupContentWrapper;
//# sourceMappingURL=PopupContentWrapper.js.map