fix(dropdown): correct the top of the dropdown menu when has panelTop…

…Content
Tencent · Sep 13, 2024 · 2b6062e · 2b6062e
1 parent 2183cb2
commit 2b6062e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/dropdown/DropdownMenu.tsx b/src/dropdown/DropdownMenu.tsx
@@ -70,6 +70,9 @@ const DropdownMenu: React.FC<DropdownProps> = (props) => {
       const optionItem = { ...(menu as DropdownOption) };
       const onViewIdx = Math.ceil(calcScrollTopMap[deep] / 30);
       const isOverflow = idx >= onViewIdx;
+      // 只有第一层子节点需要加上 panelTopContent 的高度
+      const shouldCalcPanelTopContent = panelTopContent && deep > 0;
+
       const itemIdx = isOverflow ? idx - onViewIdx : idx;
       if (optionItem.children) {
         optionItem.children = renderOptions(optionItem.children, deep + 1);
@@ -97,7 +100,7 @@ const DropdownMenu: React.FC<DropdownProps> = (props) => {
                 })}
                 style={{
                   position: 'absolute',
-                  top: `${itemIdx * 30 + (isOverflow ? 0 : panelTopContentHeight)}px`,
+                  top: `${itemIdx * 30 + (shouldCalcPanelTopContent ? 0 : panelTopContentHeight)}px`,
                 }}
               >
                 <div

diff --git a/src/dropdown/_example/child.tsx b/src/dropdown/_example/child.tsx
@@ -10,7 +10,24 @@ export default function BasicDropdown() {
     MessagePlugin.success(`选中【${data.value}】`);
   };
   return (
-    <Dropdown minColumnWidth={100} trigger="click">
+    <Dropdown
+      minColumnWidth={100}
+      trigger="click"
+      panelTopContent={
+        <div
+          style={{
+            height: 48,
+            backgroundColor: '#eee',
+            borderRadius: '6px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          Top Content
+        </div>
+      }
+    >
       <Button variant="text" suffix={<Icon name="chevron-down" size="16" />}>
         更多
       </Button>