feat(DropdownMenuItem): support footer slot (#3309)

* feat(DropdownMenuItem): support footer slot * test: update snapshots
Tencent · Nov 28, 2024 · 21c9b4e · 21c9b4e
1 parent e46ed43
commit 21c9b4e
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 20 deletions.
diff --git a/src/dropdown-item/dropdown-item.less b/src/dropdown-item/dropdown-item.less
@@ -76,6 +76,13 @@
     }
   }
 
+  &__body,
+  &__footer {
+    &:empty {
+      display: none;
+    }
+  }
+
   &__radio,
   &__checkbox {
     width: 100%;

diff --git a/src/dropdown-item/dropdown-item.ts b/src/dropdown-item/dropdown-item.ts
@@ -11,6 +11,10 @@ const name = `${prefix}-dropdown-item`;
 export interface DropdownItemProps extends TdDropdownItemProps {}
 @wxComponent()
 export default class DropdownMenuItem extends SuperComponent {
+  options = {
+    multipleSlots: true,
+  };
+
   externalClasses = [
     `${prefix}-class`,
     `${prefix}-class-content`,

diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
@@ -25,9 +25,14 @@
     t-class="{{classPrefix}}__popup-host"
     t-class-content="{{classPrefix}}__content {{prefix}}-class-content"
   >
-    <view wx:if="{{options && options.length > 0}}" class="{{classPrefix}}__body">
+    <view class="{{classPrefix}}__body">
       <!-- 单选列表 -->
-      <scroll-view wx:if="{{!multiple}}" class="{{classPrefix}}__scroll" scroll-y scroll-into-view="id_{{value}}">
+      <scroll-view
+        wx:if="{{!multiple && options && options.length > 0}}"
+        class="{{classPrefix}}__scroll"
+        scroll-y
+        scroll-into-view="id_{{value}}"
+      >
         <t-radio-group
           class="{{classPrefix}}__radio {{prefix}}-class-column"
           t-class="{{classPrefix}}__radio-group"
@@ -51,7 +56,12 @@
         </t-radio-group>
       </scroll-view>
       <!-- 多选列表 -->
-      <scroll-view wx:else class="{{classPrefix}}__scroll" scroll-y scroll-into-view="id_{{firstCheckedValue}}">
+      <scroll-view
+        wx:if="{{multiple && options && options.length > 0}}"
+        class="{{classPrefix}}__scroll"
+        scroll-y
+        scroll-into-view="id_{{firstCheckedValue}}"
+      >
         <t-checkbox-group
           class="{{classPrefix}}__checkbox {{prefix}}-class-column"
           t-class="{{classPrefix}}__checkbox-group"
@@ -74,23 +84,26 @@
 
       <slot />
     </view>
-    <view class="{{classPrefix}}__footer {{prefix}}-class-footer" wx:if="{{multiple}}">
-      <t-button
-        block
-        class="{{classPrefix}}__footer-btn {{classPrefix}}__reset-btn"
-        theme="light"
-        disabled="{{value.length == 0}}"
-        bindtap="handleReset"
-        >重置</t-button
-      >
-      <t-button
-        block
-        class="{{classPrefix}}__footer-btn {{classPrefix}}__confirm-btn"
-        theme="primary"
-        disabled="{{value.length == 0}}"
-        bindtap="handleConfirm"
-        >确定</t-button
-      >
+    <view class="{{classPrefix}}__footer {{prefix}}-class-footer">
+      <slot name="footer" />
+      <block wx:if="{{multiple}}">
+        <t-button
+          block
+          class="{{classPrefix}}__footer-btn {{classPrefix}}__reset-btn"
+          theme="light"
+          content="重置"
+          disabled="{{value.length == 0}}"
+          bindtap="handleReset"
+        />
+        <t-button
+          block
+          class="{{classPrefix}}__footer-btn {{classPrefix}}__confirm-btn"
+          theme="primary"
+          content="确定"
+          disabled="{{value.length == 0}}"
+          bindtap="handleConfirm"
+        />
+      </block>
     </view>
   </t-popup>
 </view>
diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md
@@ -20,6 +20,7 @@ name | params | description
 -- | -- | --
 close | \- | \-
 open | \- | \-
+
 ### DropdownMenu External Classes
 
 className | Description
@@ -55,6 +56,7 @@ change | `(value: DropdownValue)` | \-
 close | \- | \-
 confirm | `(value: DropdownValue)` | \-
 reset | \- | \-
+
 ### DropdownItem External Classes
 
 className | Description

diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
@@ -67,6 +67,7 @@ z-index | Number | 11600 | 菜单栏 z-index 层级 | N
 -- | -- | --
 close | \- | 菜单关闭时触发
 open | \- | 菜单展开时触发
+
 ### DropdownMenu External Classes
 
 类名 | 描述
@@ -102,6 +103,7 @@ change | `(value: DropdownValue)` | 值改变时触发
 close | \- | 关闭时触发
 confirm | `(value: DropdownValue)` | 点击确认时触发
 reset | \- | 点击重置时触发
+
 ### DropdownItem External Classes
 
 类名 | 描述

diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -585,6 +585,9 @@ exports[`dropdown-menu :base 1`] = `
                     </t-radio-group>
                   </wx-scroll-view>
                 </wx-view>
+                <wx-view
+                  class="t-dropdown-item__footer t-class-footer"
+                />
                 <wx-view
                   class="t-popup__close"
                   bind:tap="handleClose"