@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
122 lines (121 loc) • 5.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
var _ContextMenuContent = require("./ContextMenuContent.styles");
var _ContextMenu = require("../ContextMenu.types");
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,
onItemFocus,
focusedIndex,
onMouseEnter,
onMouseLeave
}, 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,
shouldShowSpacer
}, index) => {
const isFocused = index === focusedIndex;
let iconElement = null;
if (/*#__PURE__*/(0, _react.isValidElement)(icons)) {
iconElement = icons;
} else if (Array.isArray(icons) && icons.length > 0) {
iconElement = /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icons: icons
}));
}
return /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItem, {
key: `context-menu-item-${key}`,
"data-index": index
}, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemWrapper, {
key: key,
onClick: event => {
event.preventDefault();
event.stopPropagation();
void onClick(event);
},
tabIndex: 0,
$shouldHidePopupArrow: shouldHidePopupArrow,
$isFocused: isFocused,
onFocus: () => onItemFocus(index)
}, iconElement, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemText, null, text)), shouldShowSpacer && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemSpacer, null));
}), [items, focusedIndex, shouldHidePopupArrow, onItemFocus]);
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})
`,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, headline && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentHeadline, null, headline), content);
});
ContextMenuContent.displayName = 'ContextMenuContent';
var _default = exports.default = ContextMenuContent;
//# sourceMappingURL=ContextMenuContent.js.map