@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
75 lines (74 loc) • 2.43 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
}, ref) => {
const {
colorMode
} = (0, _chaynsApi.useSite)();
const isBottomLeftAlignment = alignment === _popup.PopupAlignment.BottomLeft;
const isTopLeftAlignment = alignment === _popup.PopupAlignment.TopLeft;
const isTopRightAlignment = alignment === _popup.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.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'
},
transformTemplate: ({
y = '0px'
}) => `
translateX(${percentageOffsetX}%)
translateY(${percentageOffsetY}%)
translateX(${anchorOffsetX}px)
translateY(${anchorOffsetY}px)
translateY(${y})
`
}, children);
});
PopupContentWrapper.displayName = 'PopupContent';
var _default = exports.default = PopupContentWrapper;
//# sourceMappingURL=PopupContentWrapper.js.map