From e565423c7ea28e7b4901712f9ad2536faffc4e29 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 11 Mar 2022 22:40:51 +0800
Subject: [PATCH] feat: deprecated dropdown center placement

---
 .../__tests__/__snapshots__/demo.test.js.snap   |  4 ++--
 components/dropdown/demo/placement.vue          |  4 ++--
 components/dropdown/dropdown.tsx                | 17 ++++++++++++++---
 components/dropdown/props.ts                    | 11 ++++++++++-
 components/tooltip/placements.ts                |  3 ++-
 site/src/layouts/index.vue                      |  2 +-
 6 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 8ca45e165..27b4ee66b 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -76,7 +76,7 @@ exports[`renders ./components/dropdown/demo/placement.vue correctly 1`] = `
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
-    <!----><span>bottomCenter</span>
+    <!----><span>bottom</span>
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
@@ -87,7 +87,7 @@ exports[`renders ./components/dropdown/demo/placement.vue correctly 1`] = `
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
-    <!----><span>topCenter</span>
+    <!----><span>top</span>
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
diff --git a/components/dropdown/demo/placement.vue b/components/dropdown/demo/placement.vue
index 000c7a6ff..627682682 100644
--- a/components/dropdown/demo/placement.vue
+++ b/components/dropdown/demo/placement.vue
@@ -53,10 +53,10 @@ export default defineComponent({
     return {
       placements: [
         'bottomLeft',
-        'bottomCenter',
+        'bottom',
         'bottomRight',
         'topLeft',
-        'topCenter',
+        'top',
         'topRight',
       ] as DropdownProps['placement'][],
     };
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index ba95650e9..7420bb96e 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -83,10 +83,21 @@ const Dropdown = defineComponent({
     };
 
     const placement = computed(() => {
-      if (props.placement !== undefined) {
-        return props.placement;
+      const placement = props.placement;
+      if (!placement) {
+        return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
       }
-      return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
+
+      if (placement.includes('Center')) {
+        const newPlacement = placement.slice(0, placement.indexOf('Center'));
+        devWarning(
+          !placement.includes('Center'),
+          'Dropdown',
+          `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
+        );
+        return newPlacement;
+      }
+      return placement;
     });
 
     const handleVisibleChange = (val: boolean) => {
diff --git a/components/dropdown/props.ts b/components/dropdown/props.ts
index 710dc9c9a..32868489b 100644
--- a/components/dropdown/props.ts
+++ b/components/dropdown/props.ts
@@ -39,7 +39,16 @@ const dropdownProps = () => ({
   prefixCls: PropTypes.string,
   transitionName: PropTypes.string,
   placement: PropTypes.oneOf(
-    tuple('topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'),
+    tuple(
+      'topLeft',
+      'topCenter',
+      'top',
+      'topRight',
+      'bottomLeft',
+      'bottomCenter',
+      'bottom',
+      'bottomRight',
+    ),
   ),
   overlayClassName: PropTypes.string,
   overlayStyle: PropTypes.style,
diff --git a/components/tooltip/placements.ts b/components/tooltip/placements.ts
index b89a794e9..c96ff90ee 100644
--- a/components/tooltip/placements.ts
+++ b/components/tooltip/placements.ts
@@ -41,6 +41,7 @@ export default function getPlacements(config: PlacementsConfig) {
     horizontalArrowShift = 16,
     verticalArrowShift = 8,
     autoAdjustOverflow,
+    arrowPointAtCenter,
   } = config;
   const placementMap = {
     left: {
@@ -93,7 +94,7 @@ export default function getPlacements(config: PlacementsConfig) {
     },
   };
   Object.keys(placementMap).forEach(key => {
-    placementMap[key] = config.arrowPointAtCenter
+    placementMap[key] = arrowPointAtCenter
       ? {
           ...placementMap[key],
           overflow: getOverflowOptions(autoAdjustOverflow),
diff --git a/site/src/layouts/index.vue b/site/src/layouts/index.vue
index 774ba7032..205e03504 100644
--- a/site/src/layouts/index.vue
+++ b/site/src/layouts/index.vue
@@ -54,7 +54,7 @@
           </a-affix>
         </section>
         <div class="fixed-widgets" :style="isZhCN ? { bottom: '175px' } : {}">
-          <a-dropdown placement="topCenter">
+          <a-dropdown placement="top">
             <template #overlay>
               <a-menu
                 :selected-keys="[themeMode.theme.value]"