fix(Popover): update offset to make sure the popover panel in window (#…

…1608)

* fix(Popover): update offset to make sure the popover panel in window

* fix(Popover): fix bottom and transform

* fix(sonar): fix check issue

* fix(eslint): fix eslint issue

Co-authored-by: Zhang Rui <zhangrui@growingio.com>

src/popover/Popover.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useMemo, useCallback, useRef, useLayoutEffect, useEffect } from 'react';
 import classNames from 'classnames';
 import { debounce, isFunction } from 'lodash';
-import { usePopper } from 'react-popper';
 import ReactDOM from 'react-dom';
 import ResizeObserver from 'rc-resize-observer';
-import { PopoverProps, placements } from './interface';
+import { PopoverProps } from './interface';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 import { composeRef, supportRef } from '../utils/composeRef';
 import useControlledState from '../utils/hooks/useControlledState';
+import usePop from './usePop';
 
 const Popover = (props: PopoverProps) => {
   const {
@@ -26,7 +26,7 @@ const Popover = (props: PopoverProps) => {
     overlayInnerClassName,
     overlayStyle,
     children,
-    strategy = 'absolute',
+    strategy = 'fixed',
     offset = allowArrow ? [0, -2] : [0, 4],
     triggerClassName,
     triggerStyle,
@@ -81,8 +81,10 @@ const Popover = (props: PopoverProps) => {
     [offset]
   );
 
-  const { styles, attributes, ...popperProps } = usePopper(referenceElement, popperElement, {
-    placement: placements[placement],
+  const { styles, attributes, ...popperProps } = usePop({
+    referenceElement,
+    popperElement,
+    placement,
     modifiers: defaultModifiers,
     strategy,
   });

src/popover/usePop.ts

@@ -0,0 +1,59 @@
+import { PositioningStrategy } from '@popperjs/core';
+import { Modifier, usePopper } from 'react-popper';
+import { placements } from './interface';
+
+export interface UsePopProps {
+  referenceElement: any;
+  popperElement: any;
+  placement: string;
+  modifiers: ReadonlyArray<Modifier<any>>;
+  strategy: PositioningStrategy;
+}
+
+const clear = (text: string) => (replaces: string[]) => {
+  let replaceText = text;
+  replaces.forEach((replace) => {
+    while (replaceText.indexOf(replace) > -1) {
+      replaceText = replaceText.replace(replace, '');
+    }
+  });
+  return replaceText;
+};
+
+const clear3D = (transform: string): string | number[] => {
+  if (!transform) {
+    return transform;
+  }
+  if (transform.indexOf('translate3d') === -1) {
+    return transform;
+  }
+  const text = clear(transform)(['translate3d(', 'px', ')']);
+  return text.split(',').map((value) => Number(value));
+};
+
+const usePop = ({ referenceElement, popperElement, placement, modifiers, strategy }: UsePopProps) => {
+  const { styles, attributes, ...popperProps } = usePopper(referenceElement, popperElement, {
+    placement: placements[placement],
+    modifiers,
+    strategy,
+  });
+  if (popperElement) {
+    const three = clear3D(styles?.popper?.transform as string);
+    if (Array.isArray(three)) {
+      const [x, y, z] = three;
+      const divHeight = popperElement.offsetHeight;
+      const winHeight = window.innerHeight;
+      if (styles?.popper?.bottom === 'auto') {
+        let yField = y < 0 ? 0 : y;
+        yField = yField + divHeight > winHeight ? winHeight - divHeight : yField;
+        styles.popper.transform = `translate3d(${x}px, ${yField}px, ${z}px)`;
+      } else if (styles?.popper?.bottom === '0') {
+        const yField = y + divHeight > 0 ? 0 : y;
+        styles.popper.transform = `translate3d(${x}px, ${yField}px, ${z}px)`;
+      }
+    }
+  }
+  return { styles, attributes, ...popperProps };
+};
+
+export default usePop;