feat(popover): popover 不再对触发元素包裹 div；popover 默认挂载到 body 上 (#1527)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Nov 25, 2021 · e186fb0 · e186fb0 · vercel · Nov 25, 2021
1 parent 520f170
commit e186fb0
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 67 deletions.
diff --git a/src/date-picker/interfaces.ts b/src/date-picker/interfaces.ts
@@ -12,7 +12,7 @@ export interface DatePickerProps
   /**
    * 自定义的触发器
    */
-  trigger?: React.ReactNode;
+  trigger?: React.ReactElement;
   /**
    * 日期展示格式
    * @see https://date-fns.org/v2.25.0/docs/fp/format

diff --git a/src/date-range-picker/interfaces.ts b/src/date-range-picker/interfaces.ts
@@ -15,7 +15,7 @@ export interface DateRangePickerProps
   /**
    * 自定义的触发器
    */
-  trigger?: React.ReactNode;
+  trigger?: React.ReactElement;
   /**
    * 日期展示格式
    * @see https://date-fns.org/v2.25.0/docs/fp/format

diff --git a/src/list/inner/CascaderItem.tsx b/src/list/inner/CascaderItem.tsx
@@ -76,7 +76,7 @@ const CascaderItem = WithRef<HTMLLIElement, CascaderItemProps & Omit<DOMAttribut
       return <></>;
     };
 
-    const PopoverRender = (element: React.ReactNode): React.ReactElement => {
+    const PopoverRender = (element: React.ReactElement): React.ReactElement => {
       if (!isEmpty(childrens) || React.isValidElement(children)) {
         return (
           <div className={prefixClsItem}>

diff --git a/src/list/interfance.ts b/src/list/interfance.ts
@@ -81,7 +81,7 @@ export interface OptionProps {
   disabledTooltip?: string;
   prefix?: string | React.ReactNode;
   suffix?: string | React.ReactNode;
-  wrapper?: (element: React.ReactNode) => React.ReactElement;
+  wrapper?: (element: React.ReactElement) => React.ReactElement;
 
   [key: string]: unknown;
 }

diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
@@ -27,7 +27,7 @@ const Popover = (props: PopoverProps) => {
     strategy = 'absolute',
     triggerClassName,
     triggerStyle,
-    getContainer,
+    getContainer = () => document.body,
     distoryOnHide = true,
   } = props;
 
@@ -55,7 +55,7 @@ const Popover = (props: PopoverProps) => {
   const triggerChildEvent = useCallback(
     (name: string, e: any) => {
       if (supportRef(children)) {
-        const fireEvent = (children as React.ReactElement)?.props?.[name];
+        const fireEvent = children?.props?.[name];
         fireEvent?.(e);
       }
     },
@@ -120,20 +120,19 @@ const Popover = (props: PopoverProps) => {
 
   const isFocusToShow = useMemo(() => trigger.indexOf('focus') !== -1, [trigger]);
 
-  const onMouseEnter = useMemo(
-    () =>
-      debounce((e: Event) => {
-        triggerChildEvent('onMouseEnter', e);
-        isHoverToShow && updateVisible(true);
-      }, 100),
-    [triggerChildEvent, isHoverToShow, updateVisible]
+  const onMouseEnter = useCallback(
+    (e: Event) => {
+      triggerChildEvent('onMouseEnter', e);
+      isHoverToShow && updateVisible(true);
+    },
+    [isHoverToShow, triggerChildEvent, updateVisible]
   );
-  const onMouseLeave = useMemo(
-    () =>
-      debounce((e: Event) => {
-        triggerChildEvent('onMouseLeave', e);
-        isHoverToShow && updateVisible(false);
-      }, 100),
+
+  const onMouseLeave = useCallback(
+    (e: Event) => {
+      triggerChildEvent('onMouseLeave', e);
+      isHoverToShow && updateVisible(false);
+    },
     [triggerChildEvent, isHoverToShow, updateVisible]
   );
 
@@ -176,21 +175,6 @@ const Popover = (props: PopoverProps) => {
     [trigger, updateVisible]
   );
 
-  const divRoles = useMemo(() => {
-    const roles: any = {};
-    if (isClickToShow) {
-      roles.onClick = onClick;
-    }
-    if (isFocusToShow) {
-      roles.onFocus = onFocus;
-      roles.onBlur = onBlur;
-    }
-    if (isHoverToShow) {
-      roles.onMouseEnter = onMouseEnter;
-      roles.onMouseLeave = onMouseLeave;
-    }
-    return roles;
-  }, [isClickToShow, isFocusToShow, isHoverToShow, onClick, onFocus, onBlur, onMouseEnter, onMouseLeave]);
   const contentRender = content && (
     <div
       {...attributes.popper}
@@ -207,29 +191,75 @@ const Popover = (props: PopoverProps) => {
     </div>
   );
 
-  // =============== refs =====================
-  let triggerNode = (
-    <div
-      className={classNames(`${prefixCls}__popcorn`, triggerClassName)}
-      style={triggerStyle}
-      ref={(instance) => setReferenceELement(instance)}
-      {...divRoles}
-    >
-      {children}
-    </div>
-  );
+  const triggerNode = useMemo(() => {
+    const child = React.Children.only(children);
+
+    const { props: childProps } = child;
 
-  if (supportRef(children)) {
-    const cloneProps = {
-      ...divRoles,
-      className: classNames((children as React.ReactElement)?.props?.className),
-      style: { ...(children as React.ReactElement)?.props?.style, ...overlayInnerStyle },
+    const handleEvents: {
+      onClick?: typeof onClick;
+      onFocus?: typeof onFocus;
+      onBlur?: typeof onBlur;
+      onMouseEnter?: typeof onMouseEnter;
+      onMouseLeave?: typeof onMouseLeave;
+    } = {};
+
+    if (isClickToShow) {
+      handleEvents.onClick = (event) => {
+        onClick(event);
+        childProps.onClick?.(event);
+      };
+    }
+    if (isFocusToShow) {
+      handleEvents.onFocus = (event) => {
+        onFocus(event);
+        childProps.onFocus?.(event);
+      };
+      handleEvents.onBlur = (event) => {
+        onBlur(event);
+        childProps.onBlur?.(event);
+      };
+    }
+    if (isHoverToShow) {
+      handleEvents.onMouseEnter = (event) => {
+        onMouseEnter(event);
+        childProps.onMouseEnter?.(event);
+      };
+      handleEvents.onMouseLeave = (event) => {
+        onMouseLeave(event);
+        childProps.onMouseLeave?.(event);
+      };
+    }
+
+    const cloneProps: Partial<any> & React.Attributes = {
+      ...handleEvents,
+      className: classNames(childProps.className, triggerClassName, `${prefixCls}__popcorn`),
+      style: { ...childProps.style, ...triggerStyle },
     };
 
-    const child = React.Children.only(children);
-    cloneProps.ref = composeRef(setReferenceELement, (child as any).ref);
-    triggerNode = React.cloneElement(child as React.ReactElement, cloneProps);
-  }
+    if (supportRef(child)) {
+      cloneProps.ref = composeRef(setReferenceELement, (child as any).ref);
+      return React.cloneElement(child, cloneProps);
+    }
+
+    const referenceNode = document.getElementsByClassName(`${prefixCls}__popcorn`)?.[0] as HTMLElement;
+    setReferenceELement(referenceNode);
+
+    return React.cloneElement(child, cloneProps);
+  }, [
+    children,
+    isClickToShow,
+    isFocusToShow,
+    isHoverToShow,
+    onBlur,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    prefixCls,
+    triggerClassName,
+    triggerStyle,
+  ]);
 
   const renderContent = (
     <>
@@ -238,6 +268,7 @@ const Popover = (props: PopoverProps) => {
         : contentRender}
     </>
   );
+
   return (
     <>
       {triggerNode}

diff --git a/src/popover/demos/Popover.stories.tsx b/src/popover/demos/Popover.stories.tsx
@@ -248,7 +248,7 @@ Portal.args = {
 
 const SupportRefTemplate: Story<PopoverProps> = (args) => (
   <Popover {...args} strategy="fixed">
-    Only String
+    <span>Only String</span>
   </Popover>
 );
 
@@ -261,15 +261,12 @@ const NotSupportRefTemplate: Story<PopoverProps> = (args) => {
   const onClick = () => {
     console.log('Click trigger button!');
   };
+  const NotSupportRefNode = (props: any) => <Button {...props}>Button Trigger</Button>;
   return (
     <>
-      <span>margin: 30px</span>
-      <br />
-      <div style={{ border: '1px solid #3c3c3c', borderRadius: '4px', display: 'inline-block' }}>
+      <div style={{ border: '1px solid #3c3c3c', borderRadius: '4px', padding: 300 }}>
         <Popover {...args} strategy="fixed">
-          <Button style={{ margin: 30 }} onClick={onClick}>
-            Button Trigger
-          </Button>
+          <NotSupportRefNode onClick={onClick} />
         </Popover>
       </div>
     </>
@@ -284,7 +281,7 @@ NotSupportRef.args = {
 
 const DisabledTemplate: Story<PopoverProps> = (args) => (
   <Popover {...args} strategy="fixed" disabled>
-    Disabled
+    <span>Disabled</span>
   </Popover>
 );
 

diff --git a/src/popover/demos/PopoverPage.tsx b/src/popover/demos/PopoverPage.tsx
@@ -20,6 +20,31 @@ export default function ListPage() {
         <li>样式：无变化。</li>
         <li>api变化：内容由content包裹，去除了footer，组件用到了react-popper</li>
       </ul>
+      <p>注意点⚠️</p>
+      <ul>
+        <li>被包裹的元素必须是一个原生 HTML 标签或者 React 组件</li>
+        <li>被包裹的组件尽量能传递 ref（及使用 React.forwardRef()），因为底层使用 ref 定位</li>
+        <li>如果不支持传递 ref，则通过 className 定位元素</li>
+        <li>
+          被包裹的元素必须能接收剩余的 props，如下：
+          <br />
+          <br />
+          <code>{`const Trigger = (props) => <Button {...props}>Trigger</Button>`}</code>
+          <br />
+          <br />
+          <code>ReactDOM.render((</code>
+          <br />
+          <code style={{ paddingLeft: '2em' }}>{`<Popover>`}</code>
+          <br />
+          <code style={{ paddingLeft: '4em' }}>{`<Trigger />`}</code>
+          <br />
+          <code style={{ paddingLeft: '2em' }}>{`</Popover>`}</code>
+          <br />
+          <code>), document.body)</code>
+          <br />
+          <br />
+        </li>
+      </ul>
       <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
       <Subheading>{formatMessage({ defaultMessage: 'controlled' })}</Subheading>
       <Canvas>

diff --git a/src/popover/interface.ts b/src/popover/interface.ts
@@ -48,7 +48,7 @@ export interface PopoverProps {
   /**
    被包裹的元素
    */
-  children: React.ReactNode;
+  children: React.ReactElement;
 
   placement?: Placement;
   trigger?: TriggerAction | TriggerAction[];
@@ -93,6 +93,7 @@ export interface PopoverProps {
   strategy?: 'fixed' | 'absolute';
   /**
    * 浮动显示的层
+   * @default () => document.body
    */
   getContainer?: (node: HTMLElement) => HTMLElement;
   /**

diff --git a/src/popover/style/index.less b/src/popover/style/index.less
@@ -7,9 +7,6 @@
 @popover-background-color: #ffffff00;
 
 .@{popover-prefix-cls} {
-  &__popcorn {
-    display: inline-block;
-  }
   &__content {
     z-index: @z-index-popover;
     visibility: hidden;

diff --git a/src/tooltip/interface.ts b/src/tooltip/interface.ts
@@ -16,5 +16,5 @@ export interface TooltipProps extends Omit<PopoverProps, 'content'> {
   /**
    被包裹的元素
    */
-  children: React.ReactNode;
+  children: React.ReactElement;
 }