fix: revert popup

skbkontur · May 21, 2024 · 556f33a · 556f33a
1 parent 6b7603d
commit 556f33a
Showing 1 changed file with 40 additions and 82 deletions.
diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx
@@ -26,7 +26,6 @@ import { isInstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement
 import { createPropsGetter } from '../../lib/createPropsGetter';
 import { isInstanceOf } from '../../lib/isInstanceOf';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
-import { RenderContainerElement, RenderLayerConsumer } from '../RenderLayer';
 import {
   getFullReactUIFlagsContext,
   ReactUIFeatureFlags,
@@ -258,7 +257,6 @@ export class Popup extends React.Component<PopupProps, PopupState> {
   public state: PopupState = { location: this.props.opened ? DUMMY_LOCATION : null };
   private theme!: Theme;
   private emotion!: Emotion;
-  private container!: RenderContainerElement;
   public featureFlags!: ReactUIFeatureFlags;
   private layoutEventsToken: Nullable<ReturnType<typeof LayoutEvents.addListener>>;
   private locationUpdateId: Nullable<number> = null;
@@ -334,26 +332,19 @@ export class Popup extends React.Component<PopupProps, PopupState> {
         {(flags) => {
           this.featureFlags = getFullReactUIFlagsContext(flags);
           return (
-            <RenderLayerConsumer>
-              {(container) => {
-                this.container = container;
+            <EmotionConsumer>
+              {(emotion) => {
+                this.emotion = emotion;
                 return (
-                  <EmotionConsumer>
-                    {(emotion) => {
-                      this.emotion = emotion;
-                      return (
-                        <ThemeContext.Consumer>
-                          {(theme) => {
-                            this.theme = theme;
-                            return this.renderMain();
-                          }}
-                        </ThemeContext.Consumer>
-                      );
+                  <ThemeContext.Consumer>
+                    {(theme) => {
+                      this.theme = theme;
+                      return this.renderMain();
                     }}
-                  </EmotionConsumer>
+                  </ThemeContext.Consumer>
                 );
               }}
-            </RenderLayerConsumer>
+            </EmotionConsumer>
           );
         }}
       </ReactUIFeatureFlagsContext.Consumer>
@@ -766,72 +757,39 @@ export class Popup extends React.Component<PopupProps, PopupState> {
     );
   }
 
-  private getCoordinates(anchorRect: Rect, popupRect: Rect, positionName: string): { top: number; left: number } {
-    const calcCoordinates = () => {
-      const { margin: marginFromProps } = this.props;
-      const margin =
-        isNonNullable(marginFromProps) && !isNaN(marginFromProps)
-          ? marginFromProps
-          : parseInt(this.theme.popupMargin) || 0;
-      const position = PopupHelper.getPositionObject(positionName);
-      const popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
-
-      switch (position.direction) {
-        case 'top':
-          return {
-            top: anchorRect.top - popupRect.height - margin,
-            left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
-          };
-        case 'bottom':
-          return {
-            top: anchorRect.top + anchorRect.height + margin,
-            left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
-          };
-        case 'left':
-          return {
-            top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
-            left: anchorRect.left - popupRect.width - margin,
-          };
-        case 'right':
-          return {
-            top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
-            left: anchorRect.left + anchorRect.width + margin,
-          };
-        default:
-          throw new Error(`Unexpected direction '${position.direction}'`);
-      }
-    };
-
-    const containerCoordinates = this.getCoords(this.container?.firstElementChild);
-    const coordinates = calcCoordinates();
-
-    return this.container?.firstElementChild
-      ? {
-          top: coordinates.top - containerCoordinates.top,
-          left: coordinates.left - containerCoordinates.left,
-        }
-      : coordinates;
-  }
+  private getCoordinates(anchorRect: Rect, popupRect: Rect, positionName: string) {
+    const { margin: marginFromProps } = this.props;
+    const margin =
+      isNonNullable(marginFromProps) && !isNaN(marginFromProps)
+        ? marginFromProps
+        : parseInt(this.theme.popupMargin) || 0;
+    const position = PopupHelper.getPositionObject(positionName);
+    const popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
-  private getCoords(element?: Element | null) {
-    if (!element) {
-      return { top: 0, left: 0 };
+    switch (position.direction) {
+      case 'top':
+        return {
+          top: anchorRect.top - popupRect.height - margin,
+          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
+        };
+      case 'bottom':
+        return {
+          top: anchorRect.top + anchorRect.height + margin,
+          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
+        };
+      case 'left':
+        return {
+          top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+          left: anchorRect.left - popupRect.width - margin,
+        };
+      case 'right':
+        return {
+          top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+          left: anchorRect.left + anchorRect.width + margin,
+        };
+      default:
+        throw new Error(`Unexpected direction '${position.direction}'`);
     }
-
-    const box = element.getBoundingClientRect();
-    const body = globalObject.document?.body;
-    const docEl = globalObject.document?.documentElement;
-
-    const scrollTop = globalObject.scrollY || docEl?.scrollTop || body?.scrollTop || 0;
-    const scrollLeft = globalObject.scrollX || docEl?.scrollLeft || body?.scrollLeft || 0;
-
-    const clientTop = docEl?.clientTop || body?.clientTop || 0;
-    const clientLeft = docEl?.clientLeft || body?.clientLeft || 0;
-
-    const top = box.top + scrollTop - clientTop;
-    const left = box.left + scrollLeft - clientLeft;
-
-    return { top: Math.round(top), left: Math.round(left) };
   }
 
   private getPinOffset(align: string) {