fix(tooltip, popover, popconfirm): fix arrow not point at target elem…

…ent center
growingio · May 19, 2021 · 6c79e09 · 6c79e09
1 parent f2f5926
commit 6c79e09
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 19 deletions.
diff --git a/src/components/popconfirm/Popconfirm.stories.tsx b/src/components/popconfirm/Popconfirm.stories.tsx
@@ -49,13 +49,13 @@ Controlled.args = {
 const PlacementTemplate: Story<PopconfirmProps> = (props) => (
   <div className="popconfirmDisplay">
     <div className="popconfirm-top">
-      <Popconfirm placement="topLeft" {...props} arrowPointAtCenter={false}>
+      <Popconfirm placement="topLeft" {...props}>
         <Button type="secondary">TopLeft</Button>
       </Popconfirm>
       <Popconfirm placement="top" {...props}>
         <Button type="secondary">Top</Button>
       </Popconfirm>
-      <Popconfirm placement="topRight" {...props} arrowPointAtCenter={false}>
+      <Popconfirm placement="topRight" {...props}>
         <Button type="secondary">TopRight</Button>
       </Popconfirm>
     </div>
@@ -82,13 +82,13 @@ const PlacementTemplate: Story<PopconfirmProps> = (props) => (
       </Popconfirm>
     </div>
     <div className="popconfirm-buttom">
-      <Popconfirm placement="bottomLeft" {...props} arrowPointAtCenter={false}>
+      <Popconfirm placement="bottomLeft" {...props}>
         <Button type="secondary">BottomLeft</Button>
       </Popconfirm>
       <Popconfirm placement="bottom" {...props}>
         <Button type="secondary">Bottom</Button>
       </Popconfirm>
-      <Popconfirm placement="bottomRight" {...props} arrowPointAtCenter={false}>
+      <Popconfirm placement="bottomRight" {...props}>
         <Button type="secondary">BottomRight</Button>
       </Popconfirm>
     </div>

diff --git a/src/components/popconfirm/Popconfirm.tsx b/src/components/popconfirm/Popconfirm.tsx
@@ -5,6 +5,7 @@ import Button from '../button';
 import { PopconfirmProps } from './interface';
 import useControlledState from '../../utils/hooks/useControlledState';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
+import getPlacements from '../tooltip/placements';
 
 const Popconfirm: React.FC<PopconfirmProps> = (props: PopconfirmProps) => {
   const {
@@ -18,6 +19,8 @@ const Popconfirm: React.FC<PopconfirmProps> = (props: PopconfirmProps) => {
     prefixCls: customizePrefixCls,
     subPrefixCls = 'popconfirm',
     visible,
+    arrowPointAtCenter,
+    autoAdjustOverflow,
     // defaultVisible,
     onVisibleChange,
     icon,
@@ -69,6 +72,7 @@ const Popconfirm: React.FC<PopconfirmProps> = (props: PopconfirmProps) => {
       overlayInnerStyle={{ width: desc ? 400 : 260 }}
       overlay={popConfirmOverlay()}
       trigger="click"
+      builtinPlacements={getPlacements({ arrowPointAtCenter, autoAdjustOverflow, arrowWidth: 12 })}
       {...rest}
     >
       {children}

diff --git a/src/components/popover/Popover.stories.tsx b/src/components/popover/Popover.stories.tsx
@@ -95,13 +95,13 @@ Arrow.args = {
 const PlacementTemplate: Story<PopoverProps> = (props) => (
   <div className="popover-demo-box">
     <div className="popover-top">
-      <Popover placement="topLeft" {...props} arrowPointAtCenter={false}>
+      <Popover placement="topLeft" {...props}>
         <span className="popoverSpan">TopLeft</span>
       </Popover>
       <Popover placement="top" {...props}>
         <span className="popoverSpan">Top</span>
       </Popover>
-      <Popover placement="topRight" {...props} arrowPointAtCenter={false}>
+      <Popover placement="topRight" {...props}>
         <span className="popoverSpan">TopRight</span>
       </Popover>
     </div>
@@ -128,13 +128,13 @@ const PlacementTemplate: Story<PopoverProps> = (props) => (
       </Popover>
     </div>
     <div className="popover-buttom">
-      <Popover placement="bottomLeft" {...props} arrowPointAtCenter={false}>
+      <Popover placement="bottomLeft" {...props}>
         <span className="popoverSpan">BottomLeft</span>
       </Popover>
       <Popover placement="bottom" {...props}>
         <span className="popoverSpan">Bottom</span>
       </Popover>
-      <Popover placement="bottomRight" {...props} arrowPointAtCenter={false}>
+      <Popover placement="bottomRight" {...props}>
         <span className="popoverSpan">BottomRight</span>
       </Popover>
     </div>

diff --git a/src/components/popover/index.tsx b/src/components/popover/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import Tooltip from '../tooltip';
+import getPlacements from '../tooltip/placements';
 import { PopoverProps } from './interface';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 
 export { PopoverProps } from './interface';
 
 const Popover: React.FC<PopoverProps> = (props: PopoverProps) => {
-  const { children, contentArea, footerArea, prefixCls: customizePrefixCls, subPrefixCls = 'popover', ...rest } = props;
+  const { children, contentArea, footerArea, prefixCls: customizePrefixCls, subPrefixCls = 'popover', arrowPointAtCenter, autoAdjustOverflow, ...rest } = props;
   const prefixCls = usePrefixCls(subPrefixCls, customizePrefixCls);
 
   const popoverOverlay = () => (
@@ -16,7 +17,14 @@ const Popover: React.FC<PopoverProps> = (props: PopoverProps) => {
     </>
   );
   return (
-    <Tooltip prefixCls={customizePrefixCls} subPrefixCls={subPrefixCls} overlay={popoverOverlay()} {...rest}>
+    <Tooltip 
+      prefixCls={customizePrefixCls} 
+      subPrefixCls={subPrefixCls} 
+      overlay={popoverOverlay()} 
+      builtinPlacements={getPlacements({ arrowPointAtCenter, autoAdjustOverflow, arrowWidth: 12})} 
+      arrowPointAtCenter={arrowPointAtCenter} autoAdjustOverflow={autoAdjustOverflow}
+      {...rest} 
+    >
       {children}
     </Tooltip>
   );

diff --git a/src/components/tooltip/Tooltip.stories.tsx b/src/components/tooltip/Tooltip.stories.tsx
@@ -74,6 +74,7 @@ const Template: Story<TooltipProps> = (args) => (
 );
 export const Default = Template.bind({});
 Default.args = {
+  arrowPointAtCenter:true,
   title: '这是提示文案。',
 };
 

diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
@@ -25,6 +25,7 @@ const Tooltip = (props: TooltipProps): JSX.Element => {
     autoAdjustOverflow = true,
     getContainer,
     getTooltipContainer,
+    builtinPlacements,
     ...rest
   } = props;
 
@@ -73,7 +74,7 @@ const Tooltip = (props: TooltipProps): JSX.Element => {
       transitionName="spread-transition"
       arrowContent={<span className={`${prefixCls}-arrow-content`} />}
       overlay={getOverlay()}
-      builtinPlacements={getPlacements({ arrowPointAtCenter, autoAdjustOverflow })}
+      builtinPlacements={builtinPlacements ?? getPlacements({ arrowPointAtCenter, autoAdjustOverflow })}
       visible={controlledVisible && !disabled && !isNoContent}
       onVisibleChange={(_visible) => {
         if (disabled) {

diff --git a/src/components/tooltip/placements.ts b/src/components/tooltip/placements.ts
@@ -63,35 +63,35 @@ export default function getPlacements(config: PlacementsConfig) {
     },
     topLeft: {
       points: ['bl', 'tc'],
-      offset: [-(horizontalArrowShift + arrowWidth), -4],
+      offset: [-(horizontalArrowShift + arrowWidth - 6), -4],
     },
     leftTop: {
       points: ['tr', 'cl'],
-      offset: [-4, -(verticalArrowShift + arrowWidth)],
+      offset: [-4, -(verticalArrowShift + arrowWidth - 6)],
     },
     topRight: {
       points: ['br', 'tc'],
-      offset: [horizontalArrowShift + arrowWidth, -4],
+      offset: [horizontalArrowShift + arrowWidth - 6, -4],
     },
     rightTop: {
       points: ['tl', 'cr'],
-      offset: [4, -(verticalArrowShift + arrowWidth)],
+      offset: [4, -(verticalArrowShift + arrowWidth - 6)],
     },
     bottomRight: {
       points: ['tr', 'bc'],
-      offset: [horizontalArrowShift + arrowWidth, 4],
+      offset: [horizontalArrowShift + arrowWidth - 6, 4],
     },
     rightBottom: {
       points: ['bl', 'cr'],
-      offset: [4, verticalArrowShift + arrowWidth],
+      offset: [4, verticalArrowShift + arrowWidth - 6],
     },
     bottomLeft: {
       points: ['tl', 'bc'],
-      offset: [-(horizontalArrowShift + arrowWidth), 4],
+      offset: [-(horizontalArrowShift + arrowWidth - 6), 4],
     },
     leftBottom: {
       points: ['br', 'cl'],
-      offset: [-4, verticalArrowShift + arrowWidth],
+      offset: [-4, verticalArrowShift + arrowWidth -6],
     },
   };
   Object.keys(placementMap).forEach((key) => {