@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
107 lines (106 loc) • 4.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _contextMenu = require("../../../types/contextMenu");
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
var _ContextMenuContent = require("./ContextMenuContent.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
alignment,
coordinates,
items,
zIndex,
shouldHidePopupArrow,
headline,
shouldSeparateLastItem
}, ref) => {
const isBottomLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomLeft;
const isTopLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.TopLeft;
const isTopRightAlignment = alignment === _contextMenu.ContextMenuAlignment.TopRight;
const isTopCenterAlignment = alignment === _contextMenu.ContextMenuAlignment.TopCenter;
const isBottomCenterAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomCenter;
const percentageOffsetX = (0, _react.useMemo)(() => {
if (isBottomLeftAlignment || isTopLeftAlignment) {
return -100;
}
if (isBottomCenterAlignment || isTopCenterAlignment) {
return -50;
}
return 0;
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
const anchorOffsetX = (0, _react.useMemo)(() => {
if (isBottomLeftAlignment || isTopLeftAlignment) {
return 15;
}
if (isBottomCenterAlignment || isTopCenterAlignment) {
return 0;
}
return -15;
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;
const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;
const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
const content = (0, _react.useMemo)(() => items.map(({
onClick,
key,
text,
icons
}, index) => {
const item = /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItem, {
key: key,
onClick: event => {
event.preventDefault();
event.stopPropagation();
void onClick(event);
},
$shouldHidePopupArrow: shouldHidePopupArrow
}, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icons: icons
})), /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemText, null, text));
if (shouldSeparateLastItem && index + 1 === items.length) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemBorder, null), item);
}
return item;
}), [items, shouldHidePopupArrow, shouldSeparateLastItem]);
return /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledMotionContextMenuContent, {
animate: {
opacity: 1,
y: 0
},
exit: {
opacity: 0,
y: exitAndInitialY
},
initial: {
opacity: 0,
y: exitAndInitialY
},
$position: alignment,
$shouldHidePopupArrow: shouldHidePopupArrow,
$zIndex: zIndex,
ref: ref,
style: {
left: coordinates.x,
top: coordinates.y
},
transition: {
ease: 'anticipate'
},
transformTemplate: ({
y = '0px'
}) => `
translateX(${percentageOffsetX}%)
translateY(${percentageOffsetY}%)
translateX(${anchorOffsetX}px)
translateY(${anchorOffsetY}px)
translateY(${y})
`
}, headline && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentHeadline, null, headline), content);
});
ContextMenuContent.displayName = 'ContextMenuContent';
var _default = exports.default = ContextMenuContent;
//# sourceMappingURL=ContextMenuContent.js.map