Popover fixes (#1727, #1723)

Author: bataevvlad

src/components/devsupport/components/measure/measure.component.tsx

@@ -64,9 +64,13 @@ export const MeasureElement: React.FC<MeasureElementProps> = (props): MeasuringE
   };
 
   const onUIManagerMeasure = (x: number, y: number, w: number, h: number): void => {
-    const originY = props.shouldUseTopInsets ? y + StatusBar.currentHeight || 0 : y;
-    const frame: Frame = bindToWindow(new Frame(x, originY, w, h), Frame.window());
-    props.onMeasure(frame);
+    if (!w && !h) {
+      measureSelf();
+    } else {
+      const originY = props.shouldUseTopInsets ? y + StatusBar.currentHeight || 0 : y;
+      const frame: Frame = bindToWindow(new Frame(x, originY, w, h), Frame.window());
+      props.onMeasure(frame);
+    }
   };
 
   const measureSelf = (): void => {

src/components/ui/popover/placement.service.ts

@@ -22,7 +22,7 @@ const PLACEMENT_FAMILIES: string[] = [
 export class PopoverPlacementService {
 
   public find(preferredValue: PopoverPlacement, options: PlacementOptions): PopoverPlacement {
-    const placement: PopoverPlacement = this.findRecursive(preferredValue, PLACEMENT_FAMILIES, options);
+    const placement: PopoverPlacement = this.findRecursive(preferredValue, [...PLACEMENT_FAMILIES], options);
 
     return placement || preferredValue;
   }

src/components/ui/popover/popover.component.tsx

@@ -36,6 +36,7 @@ type PopoverModalProps = Omit<ModalProps, ' children'>;
 
 export interface PopoverProps extends PopoverViewProps, PopoverModalProps, RNModalProps {
   children?: React.ReactElement;
+  placement: PopoverPlacement;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   anchor: RenderFCProp<any>;
   fullWidth?: boolean;
@@ -135,7 +136,7 @@ export class Popover extends React.Component<PopoverProps, State> {
   }
 
   public static getDerivedStateFromProps(props, state): State {
-    if (!props.visible) {
+    if (!props.visible && !Point.outscreen().equals(state.contentPosition)) {
       return {
         ...state,
         contentPosition: Point.outscreen(),
@@ -187,7 +188,7 @@ export class Popover extends React.Component<PopoverProps, State> {
       <PopoverView
         {...this.props}
         contentContainerStyle={[this.props.contentContainerStyle, styles.popoverView, this.contentFlexPosition]}
-        placement={this.state.actualPlacement.reverse()}
+        layoutDirection={PopoverPlacements.parse(this.state.actualPlacement).flex()}
       >
         {this.renderContentElement()}
       </PopoverView>

src/components/ui/popover/popoverView.component.tsx

@@ -22,15 +22,14 @@ import {
   StyleType,
 } from '../../theme';
 import {
-  PopoverPlacement,
-  PopoverPlacements,
+  FlexPlacement,
 } from './type';
 
 type AnimatedViewStyle = ViewStyle;
 
 export interface PopoverViewProps extends ViewProps, StyledComponentProps {
   contentContainerStyle?: StyleProp<AnimatedViewStyle>;
-  placement?: PopoverPlacement | string;
+  layoutDirection?: FlexPlacement;
   indicator?: (props: ViewProps) => React.ReactElement;
 }
 
@@ -41,11 +40,6 @@ const INDICATOR_WIDTH = 6;
 
 @styled('Popover')
 export class PopoverView extends React.Component<PopoverViewProps> {
-
-  private get placement(): PopoverPlacement {
-    return PopoverPlacements.parse(this.props.placement);
-  }
-
   private getComponentStyle = (source: StyleType): StyleType => {
     const { indicatorWidth, indicatorHeight, indicatorBackgroundColor, ...containerParameters } = source;
 
@@ -60,7 +54,7 @@ export class PopoverView extends React.Component<PopoverViewProps> {
   };
 
   private getDirectionStyle = (): StyleType => {
-    const { direction, alignment } = this.placement.flex();
+    const { direction, alignment } = this.props.layoutDirection;
 
     const isVertical: boolean = direction.startsWith('column');
     const isStart: boolean = alignment.endsWith('start');