@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
94 lines (93 loc) • 3.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _chaynsApi = require("chayns-api");
var _react = _interopRequireDefault(require("react"));
var _popup = require("../../../types/popup");
var _PopupContentWrapper = require("./PopupContentWrapper.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
alignment,
children,
coordinates,
offset,
width,
onMouseLeave,
shouldScrollWithContent,
onMouseEnter,
maxHeight
}, ref) => {
const {
colorMode
} = (0, _chaynsApi.useSite)();
const isBottomLeftAlignment = alignment === _popup.PopupAlignment.BottomLeft;
const isBottomCenterAlignment = alignment === _popup.PopupAlignment.BottomCenter;
const isTopLeftAlignment = alignment === _popup.PopupAlignment.TopLeft;
const isTopCenterAlignment = alignment === _popup.PopupAlignment.TopCenter;
const isTopRightAlignment = alignment === _popup.PopupAlignment.TopRight;
const isCenterAlignment = isBottomCenterAlignment || isTopCenterAlignment;
const isTopAlignment = isTopLeftAlignment || isTopCenterAlignment || isTopRightAlignment;
let percentageOffsetX = 0;
if (isCenterAlignment) {
percentageOffsetX = -50;
} else if (isBottomLeftAlignment || isTopLeftAlignment) {
percentageOffsetX = -100;
}
const percentageOffsetY = isTopAlignment ? -100 : 0;
let anchorOffsetX = -13;
if (isCenterAlignment) {
anchorOffsetX = 0;
} else if (isBottomLeftAlignment || isTopLeftAlignment) {
anchorOffsetX = 13;
}
const anchorOffsetY = isTopAlignment ? -21 : 21;
const exitAndInitialY = isTopAlignment ? -16 : 16;
return /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.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',
duration: 0.15
},
transformTemplate: ({
y = '0px'
}) => `
translateX(${percentageOffsetX}%)
translateY(${percentageOffsetY}%)
translateX(${anchorOffsetX}px)
translateY(${anchorOffsetY}px)
translateY(${y})
`
}, /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.StyledPopupContentWrapperContent, {
className: "chayns-scrollbar",
$maxHeight: maxHeight
}, children));
});
PopupContentWrapper.displayName = 'PopupContent';
var _default = exports.default = PopupContentWrapper;
//# sourceMappingURL=PopupContentWrapper.js.map