@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
104 lines • 3.98 kB
JavaScript
import React, { useMemo } from 'react';
import { ContextMenuAlignment } from '../../../types/contextMenu';
import Icon from '../../icon/Icon';
import { StyledContextMenuContentHeadline, StyledContextMenuContentItem, StyledContextMenuContentItemBorder, StyledContextMenuContentItemIconWrapper, StyledContextMenuContentItemText, StyledMotionContextMenuContent } from './ContextMenuContent.styles';
const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
alignment,
coordinates,
items,
zIndex,
shouldHidePopupArrow,
headline,
shouldSeparateLastItem
} = _ref;
const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;
const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;
const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;
const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;
const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;
const percentageOffsetX = useMemo(() => {
if (isBottomLeftAlignment || isTopLeftAlignment) {
return -100;
}
if (isBottomCenterAlignment || isTopCenterAlignment) {
return -50;
}
return 0;
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
const anchorOffsetX = 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 = useMemo(() => items.map((_ref2, index) => {
let {
onClick,
key,
text,
icons
} = _ref2;
const item = /*#__PURE__*/React.createElement(StyledContextMenuContentItem, {
key: key,
onClick: event => {
event.preventDefault();
event.stopPropagation();
void onClick(event);
},
$shouldHidePopupArrow: shouldHidePopupArrow
}, /*#__PURE__*/React.createElement(StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
icons: icons
})), /*#__PURE__*/React.createElement(StyledContextMenuContentItemText, null, text));
if (shouldSeparateLastItem && index + 1 === items.length) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContextMenuContentItemBorder, null), item);
}
return item;
}), [items, shouldHidePopupArrow, shouldSeparateLastItem]);
return /*#__PURE__*/React.createElement(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: _ref3 => {
let {
y = '0px'
} = _ref3;
return `
translateX(${percentageOffsetX}%)
translateY(${percentageOffsetY}%)
translateX(${anchorOffsetX}px)
translateY(${anchorOffsetY}px)
translateY(${y})
`;
}
}, headline && /*#__PURE__*/React.createElement(StyledContextMenuContentHeadline, null, headline), content);
});
ContextMenuContent.displayName = 'ContextMenuContent';
export default ContextMenuContent;
//# sourceMappingURL=ContextMenuContent.js.map