fix(popover): render Portal (#1464)

某些时候无法正常显示popover, 比如说:overfilow:hidden

src/popover/Popover.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useCallback, useEffect, useRef, useLayoutEffe
 import classNames from 'classnames';
 import { debounce, isUndefined } from 'lodash';
 import { usePopper } from 'react-popper';
+import ReactDOM from 'react-dom';
 import { PopoverProps, placements } from './interface';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 
@@ -21,6 +22,8 @@ const Popover = (props: PopoverProps) => {
     overlayInnerClassName,
     overlayStyle,
     children,
+    strategy = 'absolute',
+    getContainer,
   } = props;
 
   const prefixCls = usePrefixCls('popover-new', customPrefixCls);
@@ -52,6 +55,7 @@ const Popover = (props: PopoverProps) => {
   const { styles, attributes } = usePopper(referenceElement.current, popperElement.current, {
     placement: placements[placement],
     modifiers: [{ name: 'arrow', options: { element: arrowElement.current } }],
+    strategy,
   });
 
   const updateVisible = useCallback(
@@ -144,27 +148,29 @@ const Popover = (props: PopoverProps) => {
     }
     return roles;
   }, [isClickToShow, isFocusToShow, isHoverToShow, onClick, onFocus, onBlur, onMouseEnter, onMouseLeave]);
-
+  const contentRender = content && (
+    <div
+      {...attributes.popper}
+      className={contentCls}
+      ref={popperElement}
+      style={{ ...(overlayStyle || {}), ...styles.popper }}
+      onMouseEnter={onContentMouseEnter}
+      onMouseLeave={onContentMouseLeave}
+    >
+      {allowArrow && <div className={`${prefixCls}__arrow`} ref={arrowElement} style={{ ...styles.arrow }} />}
+      <div className={contentInnerCls} style={overlayInnerStyle}>
+        {content}
+      </div>
+    </div>
+  );
   return (
     <>
       <div className={`${prefixCls}__popcorn`} ref={referenceElement} {...divRoles}>
         {children}
       </div>
-      {content && (
-        <div
-          {...attributes.popper}
-          className={contentCls}
-          ref={popperElement}
-          style={{ ...(overlayStyle || {}), ...styles.popper }}
-          onMouseEnter={onContentMouseEnter}
-          onMouseLeave={onContentMouseLeave}
-        >
-          {allowArrow && <div className={`${prefixCls}__arrow`} ref={arrowElement} style={{ ...styles.arrow }} />}
-          <div className={contentInnerCls} style={overlayInnerStyle}>
-            {content}
-          </div>
-        </div>
-      )}
+      {typeof getContainer === 'function'
+        ? ReactDOM.createPortal(contentRender, getContainer(referenceElement.current as HTMLDivElement))
+        : contentRender}
     </>
   );
 };

src/popover/demos/Popover.stories.tsx

@@ -224,3 +224,22 @@ export const Enterable = EnterableTemplate.bind({});
 Enterable.args = {
   content,
 };
+
+const PortalTemplate: Story<PopoverProps> = (args) => (
+  <>
+    <div style={{ overflow: 'hidden' }}>
+      <Popover {...args} strategy="fixed">
+        <Input value="Popover supports mouse enter!" />
+      </Popover>
+    </div>
+    <span>|</span>
+    <Popover {...args} getContainer={(node) => node?.parentElement || document.body}>
+      <Input value="Popover does't support mouse enter!" />
+    </Popover>
+  </>
+);
+
+export const Portal = PortalTemplate.bind({});
+Portal.args = {
+  content,
+};

src/popover/interface.ts

@@ -77,6 +77,12 @@ export interface PopoverProps {
    * 卡片内容区域的样式对象
    */
   overlayInnerStyle?: React.CSSProperties;
+  /**
+   * position 布局方式
+   * This can be useful if you want to position a tooltip inside an overflow: hidden container that you want to make overflow.
+   * Please note that you can also try strategy: 'fixed' to obtain a similar effect with less hassle.
+   */
+  strategy?: 'fixed' | 'absolute';
   /**
    * 浮动显示的层
    */