Web: Components: ContextMenu: Added property`s for creating menu by component

This commit is contained in:
Ilya Oleshko 2021-11-19 17:59:10 +03:00
parent 1b9b7e163d
commit 8ecdc5bdf5
2 changed files with 19 additions and 3 deletions

View File

@ -369,8 +369,10 @@ class ContextMenu extends Component {
position(event) {
if (event) {
let left = event.pageX + 1;
let top = event.pageY + 1;
const rects = this.props.containerRef?.current.getBoundingClientRect();
let left = rects ? rects.left : event.pageX + 1;
let top = rects ? rects.top : event.pageY + 1;
let width = this.menuRef.current.offsetParent
? this.menuRef.current.offsetWidth
: DomHelpers.getHiddenElementOuterWidth(this.menuRef.current);
@ -399,6 +401,14 @@ class ContextMenu extends Component {
top = document.body.scrollTop;
}
if (this.props.containerRef) {
top += rects.height + 4;
if (this.props.scaled) {
this.menuRef.current.style.width = rects.width + "px";
}
}
this.menuRef.current.style.left = left + "px";
this.menuRef.current.style.top = top + "px";
}
@ -583,6 +593,10 @@ ContextMenu.propTypes = {
onShow: PropTypes.func,
/** Callback to invoke when a popup menu is hidden */
onHide: PropTypes.func,
/** If you want to display relative to another component */
containerRef: PropTypes.any,
/** Scale with by container component*/
scaled: PropTypes.bool,
};
ContextMenu.defaultProps = {
@ -596,6 +610,8 @@ ContextMenu.defaultProps = {
appendTo: null,
onShow: null,
onHide: null,
scaled: false,
containerRef: null,
};
export default ContextMenu;

View File

@ -34,7 +34,7 @@ const StyledContextMenu = styled.div`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 8px;
margin-left: 4px;
margin-top: -4px;
}