chore: auto merge branches (#41067)

chore: merge feature into master
ant-design · Mar 5, 2023 · 43e4d28 · 43e4d28
2 parents 79ac80a + 8ae56f2
commit 43e4d28
Show file tree

Hide file tree

Showing 142 changed files with 41,142 additions and 47,449 deletions.
diff --git a/components/_util/placements.ts b/components/_util/placements.ts
@@ -1,17 +1,6 @@
-import { placements } from 'rc-tooltip/lib/placements';
-import type { BuildInPlacements } from 'rc-trigger';
-
-const autoAdjustOverflowEnabled = {
-  adjustX: 1,
-  adjustY: 1,
-};
-
-const autoAdjustOverflowDisabled = {
-  adjustX: 0,
-  adjustY: 0,
-};
-
-const targetOffset = [0, 0];
+/* eslint-disable default-case */
+import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+import { getArrowOffset } from '../style/placementArrow';
 
 export interface AdjustOverflow {
   adjustX?: 0 | 1;
@@ -20,135 +9,218 @@ export interface AdjustOverflow {
 
 export interface PlacementsConfig {
   arrowWidth: number;
-  horizontalArrowShift?: number;
-  verticalArrowShift?: number;
   arrowPointAtCenter?: boolean;
   autoAdjustOverflow?: boolean | AdjustOverflow;
   offset: number;
+  borderRadius: number;
 }
 
-export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
-  if (typeof autoAdjustOverflow === 'boolean') {
-    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+export function getOverflowOptions(
+  placement: string,
+  arrowOffset: ReturnType<typeof getArrowOffset>,
+  arrowWidth: number,
+  autoAdjustOverflow?: boolean | AdjustOverflow,
+) {
+  if (autoAdjustOverflow === false) {
+    return {
+      adjustX: false,
+      adjustY: false,
+    };
   }
-  return {
-    ...autoAdjustOverflowDisabled,
-    ...autoAdjustOverflow,
-  };
-}
 
-type PlacementType = keyof BuildInPlacements;
+  const overflow =
+    autoAdjustOverflow && typeof autoAdjustOverflow === 'object' ? autoAdjustOverflow : {};
 
-function getArrowOffset(type: PlacementType, arrowWidth: number, offset: number): number[] {
-  switch (type) {
+  const baseOverflow: AlignType['overflow'] = {};
+
+  switch (placement) {
     case 'top':
-    case 'topLeft':
-    case 'topRight':
-      return [0, -(arrowWidth / 2 + offset)];
     case 'bottom':
-    case 'bottomLeft':
-    case 'bottomRight':
-      return [0, arrowWidth / 2 + offset];
+      baseOverflow.shiftX = arrowOffset.dropdownArrowOffset * 2 + arrowWidth;
+      break;
+
     case 'left':
-    case 'leftTop':
-    case 'leftBottom':
-      return [-(arrowWidth / 2 + offset), 0];
     case 'right':
-    case 'rightTop':
-    case 'rightBottom':
-      return [arrowWidth / 2 + offset, 0];
-    /* istanbul ignore next */
-    default:
-      return [0, 0];
+      baseOverflow.shiftY = arrowOffset.dropdownArrowOffsetVertical * 2 + arrowWidth;
+      break;
   }
-}
 
-function vertexCalc(point1: number[], point2: number[]): number[] {
-  return [point1[0] + point2[0], point1[1] + point2[1]];
+  const mergedOverflow = {
+    ...baseOverflow,
+    ...overflow,
+  };
+
+  // Support auto shift
+  if (!mergedOverflow.shiftX) {
+    mergedOverflow.adjustX = true;
+  }
+  if (!mergedOverflow.shiftY) {
+    mergedOverflow.adjustY = true;
+  }
+
+  return mergedOverflow;
 }
 
+type PlacementType = keyof BuildInPlacements;
+
+const PlacementAlignMap: BuildInPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+  },
+  right: {
+    points: ['cl', 'cr'],
+  },
+  top: {
+    points: ['bc', 'tc'],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+  },
+  leftTop: {
+    points: ['tr', 'tl'],
+  },
+  topRight: {
+    points: ['br', 'tr'],
+  },
+  rightTop: {
+    points: ['tl', 'tr'],
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+  },
+  rightBottom: {
+    points: ['bl', 'br'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+  },
+  leftBottom: {
+    points: ['br', 'bl'],
+  },
+};
+
+const ArrowCenterPlacementAlignMap: BuildInPlacements = {
+  topLeft: {
+    points: ['bl', 'tc'],
+  },
+  leftTop: {
+    points: ['tr', 'cl'],
+  },
+  topRight: {
+    points: ['br', 'tc'],
+  },
+  rightTop: {
+    points: ['tl', 'cr'],
+  },
+  bottomRight: {
+    points: ['tr', 'bc'],
+  },
+  rightBottom: {
+    points: ['bl', 'cr'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bc'],
+  },
+  leftBottom: {
+    points: ['br', 'cl'],
+  },
+};
+
+const DisableAutoArrowList: Set<keyof BuildInPlacements> = new Set([
+  'topLeft',
+  'topRight',
+  'bottomLeft',
+  'bottomRight',
+  'leftTop',
+  'leftBottom',
+  'rightTop',
+  'rightBottom',
+]);
+
 export default function getPlacements(config: PlacementsConfig) {
-  const {
-    arrowWidth,
-    horizontalArrowShift = 16,
-    verticalArrowShift = 8,
-    autoAdjustOverflow,
-    arrowPointAtCenter,
-    offset,
-  } = config;
+  const { arrowWidth, autoAdjustOverflow, arrowPointAtCenter, offset, borderRadius } = config;
   const halfArrowWidth = arrowWidth / 2;
 
-  const placementMap: BuildInPlacements = {
-    left: {
-      points: ['cr', 'cl'],
-      offset: [-offset, 0],
-    },
-    right: {
-      points: ['cl', 'cr'],
-      offset: [offset, 0],
-    },
-    top: {
-      points: ['bc', 'tc'],
-      offset: [0, -offset],
-    },
-    bottom: {
-      points: ['tc', 'bc'],
-      offset: [0, offset],
-    },
-    topLeft: {
-      points: ['bl', 'tc'],
-      offset: [-(horizontalArrowShift + halfArrowWidth), -offset],
-    },
-    leftTop: {
-      points: ['tr', 'cl'],
-      offset: [-offset, -(verticalArrowShift + halfArrowWidth)],
-    },
-    topRight: {
-      points: ['br', 'tc'],
-      offset: [horizontalArrowShift + halfArrowWidth, -offset],
-    },
-    rightTop: {
-      points: ['tl', 'cr'],
-      offset: [offset, -(verticalArrowShift + halfArrowWidth)],
-    },
-    bottomRight: {
-      points: ['tr', 'bc'],
-      offset: [horizontalArrowShift + halfArrowWidth, offset],
-    },
-    rightBottom: {
-      points: ['bl', 'cr'],
-      offset: [offset, verticalArrowShift + halfArrowWidth],
-    },
-    bottomLeft: {
-      points: ['tl', 'bc'],
-      offset: [-(horizontalArrowShift + halfArrowWidth), offset],
-    },
-    leftBottom: {
-      points: ['br', 'cl'],
-      offset: [-offset, verticalArrowShift + halfArrowWidth],
-    },
-  };
-  Object.keys(placementMap).forEach((key) => {
-    placementMap[key] = arrowPointAtCenter
-      ? {
-          ...placementMap[key],
-          offset: vertexCalc(
-            placementMap[key].offset!,
-            getArrowOffset(key as PlacementType, arrowWidth, offset),
-          ),
-          overflow: getOverflowOptions(autoAdjustOverflow),
-          targetOffset,
-        }
-      : {
-          ...placements[key],
-          offset: vertexCalc(
-            placements[key].offset!,
-            getArrowOffset(key as PlacementType, arrowWidth, offset),
-          ),
-          overflow: getOverflowOptions(autoAdjustOverflow),
-        };
-
-    placementMap[key].ignoreShake = true;
+  const placementMap: BuildInPlacements = {};
+
+  Object.keys(PlacementAlignMap).forEach((key: PlacementType) => {
+    const template =
+      (arrowPointAtCenter && ArrowCenterPlacementAlignMap[key]) || PlacementAlignMap[key];
+
+    const placementInfo = {
+      ...template,
+      offset: [0, 0],
+    };
+    placementMap[key] = placementInfo;
+
+    // Disable autoArrow since design is fixed position
+    if (DisableAutoArrowList.has(key)) {
+      placementInfo.autoArrow = false;
+    }
+
+    // Static offset
+    switch (key) {
+      case 'top':
+      case 'topLeft':
+      case 'topRight':
+        placementInfo.offset[1] = -halfArrowWidth - offset;
+        break;
+
+      case 'bottom':
+      case 'bottomLeft':
+      case 'bottomRight':
+        placementInfo.offset[1] = halfArrowWidth + offset;
+        break;
+
+      case 'left':
+      case 'leftTop':
+      case 'leftBottom':
+        placementInfo.offset[0] = -halfArrowWidth - offset;
+        break;
+
+      case 'right':
+      case 'rightTop':
+      case 'rightBottom':
+        placementInfo.offset[0] = halfArrowWidth + offset;
+        break;
+    }
+
+    // Dynamic offset
+    const arrowOffset = getArrowOffset({
+      contentRadius: borderRadius,
+      limitVerticalRadius: true,
+    });
+
+    if (arrowPointAtCenter) {
+      switch (key) {
+        case 'topLeft':
+        case 'bottomLeft':
+          placementInfo.offset[0] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          break;
+
+        case 'topRight':
+        case 'bottomRight':
+          placementInfo.offset[0] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          break;
+
+        case 'leftTop':
+        case 'rightTop':
+          placementInfo.offset[1] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          break;
+
+        case 'leftBottom':
+        case 'rightBottom':
+          placementInfo.offset[1] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          break;
+      }
+    }
+
+    // Overflow
+    placementInfo.overflow = getOverflowOptions(key, arrowOffset, arrowWidth, autoAdjustOverflow);
   });
+
   return placementMap;
 }