From 556f33ac645be2ac0cf7f06fea2e79db1874bccd Mon Sep 17 00:00:00 2001 From: Mikhail Shatikhin Date: Tue, 14 May 2024 17:38:32 +0500 Subject: [PATCH] fix: revert popup --- packages/react-ui/internal/Popup/Popup.tsx | 122 +++++++-------------- 1 file changed, 40 insertions(+), 82 deletions(-) diff --git a/packages/react-ui/internal/Popup/Popup.tsx b/packages/react-ui/internal/Popup/Popup.tsx index df2be921278..cf4bd514036 100644 --- 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 { 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>; private locationUpdateId: Nullable = null; @@ -334,26 +332,19 @@ export class Popup extends React.Component { {(flags) => { this.featureFlags = getFullReactUIFlagsContext(flags); return ( - - {(container) => { - this.container = container; + + {(emotion) => { + this.emotion = emotion; return ( - - {(emotion) => { - this.emotion = emotion; - return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); - }} - - ); + + {(theme) => { + this.theme = theme; + return this.renderMain(); }} - + ); }} - + ); }} @@ -766,72 +757,39 @@ export class Popup extends React.Component { ); } - 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) {