Merge branch 'feature/workspaces' of https://github.com/ONLYOFFICE/AppServer into feature/workspaces

packages/asc-web-components/context-menu-button/index.js

@@ -29,6 +29,8 @@ class ContextMenuButton extends React.Component {
       isOpen: props.opened,
       data: props.data,
       displayType,
+      offsetX: props.manualX,
+      offsetY: props.manualY,
     };
     this.throttledResize = throttle(this.resize, 300);
   }
@@ -71,7 +73,7 @@ class ContextMenuButton extends React.Component {
     }
 
     if (this.props.manualX !== prevProps.manualX) {
-      this.onIconButtonClick();
+      this.onContextClick();
     }
 
     if (this.props.opened && this.state.displayType === "aside") {
@@ -83,6 +85,20 @@ class ContextMenuButton extends React.Component {
     }
   }
 
+  onContextClick = () => {
+    if (this.props.isDisabled) {
+      this.stopAction;
+      return;
+    }
+
+    this.setState({
+      data: this.props.getData(),
+      isOpen: !this.state.isOpen,
+      offsetX: this.props.manualX,
+      offsetY: this.props.manualY,
+    });
+  };
+
   onIconButtonClick = () => {
     if (this.props.isDisabled) {
       this.stopAction;
@@ -93,6 +109,8 @@ class ContextMenuButton extends React.Component {
       {
         data: this.props.getData(),
         isOpen: !this.state.isOpen,
+        offsetX: "0px",
+        offsetY: "100%",
       },
       () =>
         !this.props.isDisabled &&
@@ -107,7 +125,7 @@ class ContextMenuButton extends React.Component {
     const dropDownItem = path ? path.find((x) => x === this.ref.current) : null;
     if (dropDownItem) return;
 
-    this.onIconButtonClick();
+    this.onClose();
   };
 
   onDropDownItemClick = (item, e) => {
@@ -151,11 +169,9 @@ class ContextMenuButton extends React.Component {
       style,
       isFill, // eslint-disable-line react/prop-types
       asideHeader, // eslint-disable-line react/prop-types
-      manualX,
-      manualY,
     } = this.props;
 
-    const { isOpen, displayType } = this.state;
+    const { isOpen, displayType, offsetX, offsetY } = this.state;
     const iconButtonName = isOpen && iconOpenName ? iconOpenName : iconName;
     return (
       <StyledOuter ref={this.ref} className={className} id={id} style={style}>
@@ -177,8 +193,9 @@ class ContextMenuButton extends React.Component {
         />
         {displayType === "dropdown" ? (
           <DropDown
-            manualX={manualX}
-            manualY={manualY}
+            id="contextMenu"
+            manualX={offsetX}
+            manualY={offsetY}
             directionX={directionX}
             directionY={directionY}
             open={isOpen}

packages/asc-web-components/row/index.js

@@ -16,7 +16,11 @@ class Row extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { contextX: "0px", contextY: "0px", contextOpened: false };
+    this.state = {
+      contextX: "0px",
+      contextY: "100%",
+      contextOpened: false,
+    };
 
     this.rowRef = React.createRef();
   }
@@ -34,13 +38,31 @@ class Row extends React.Component {
   onContextMenu = (e) => {
     e.preventDefault();
 
-    const cursorX = -(window.innerWidth - e.pageX) + "px";
-    const cursorY = "-3px";
+    const menu = document.getElementById("contextMenu");
+
+    const containerBounds =
+      this.container !== document && this.container.getBoundingClientRect();
+
+    const clickX = containerBounds.right - e.clientX;
+    const clickY = e.clientY - containerBounds.top;
+    const containerWidth = this.container.offsetWidth;
+    const containerHeight = this.container.offsetHeight;
+    const menuWidth = (menu && menu.offsetWidth) || 180;
+    const menuHeight = menu && menu.offsetHeight;
+
+    const left = containerWidth - clickX > menuWidth && clickX < menuWidth;
+    const bottom = containerHeight - clickY < menuHeight && clickY > menuHeight;
+
+    let newTop = `0px`;
+    let newRight = `0px`;
+
+    newRight = !left ? `${clickX - menuWidth - 8}px` : `${clickX + 8}px`;
+    newTop = bottom ? `${clickY - menuHeight}px` : `${clickY}px`;
 
     this.setState({
-      contextX: cursorX,
-      contextY: cursorY,
       contextOpened: !this.state.contextOpened,
+      contextX: newRight,
+      contextY: newTop,
     });
   };
 
@@ -59,6 +81,8 @@ class Row extends React.Component {
       sectionWidth,
     } = this.props;
 
+    const { contextOpened, contextX, contextY } = this.state;
+
     const renderCheckbox = Object.prototype.hasOwnProperty.call(
       this.props,
       "checked"
@@ -107,13 +131,14 @@ class Row extends React.Component {
           )}
           {renderContext ? (
             <ContextMenuButton
-              opened={this.state.contextOpened}
+              manualX={contextX}
+              manualY={contextY}
+              opened={contextOpened}
               color="#A3A9AE"
               hoverColor="#657077"
               className="expandButton"
-              manualX={this.state.contextX}
-              manualY={this.state.contextY}
               getData={getOptions}
+              directionX="right"
             />
           ) : (
             <div className="expandButton"> </div>