From d7a2da1ea84fb6d5775dedd8c7fcc527363e201d Mon Sep 17 00:00:00 2001
From: chouchouji <70570907+chouchouji@users.noreply.github.com>
Date: Sun, 2 Jun 2024 20:22:25 +0800
Subject: [PATCH] feat(floating-panel): support header slot (#12897)

---
 .../vant/src/floating-panel/FloatingPanel.tsx    | 16 +++++++++++++---
 packages/vant/src/floating-panel/README.md       |  1 +
 packages/vant/src/floating-panel/README.zh-CN.md |  1 +
 .../test/__snapshots__/index.spec.tsx.snap       | 11 +++++++++++
 .../vant/src/floating-panel/test/index.spec.tsx  | 12 ++++++++++++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/floating-panel/FloatingPanel.tsx b/packages/vant/src/floating-panel/FloatingPanel.tsx
index 2751dc486..bc1fe2366 100644
--- a/packages/vant/src/floating-panel/FloatingPanel.tsx
+++ b/packages/vant/src/floating-panel/FloatingPanel.tsx
@@ -150,6 +150,18 @@ export default defineComponent({
     // useEventListener will set passive to `false` to eliminate the warning of Chrome
     useEventListener('touchmove', onTouchmove, { target: rootRef });
 
+    const renderHeader = () => {
+      if (slots.header) {
+        return slots.header();
+      }
+
+      return (
+        <div class={bem('header')}>
+          <div class={bem('header-bar')} />
+        </div>
+      );
+    };
+
     return () => (
       <div
         class={[bem(), { 'van-safe-area-bottom': props.safeAreaInsetBottom }]}
@@ -159,9 +171,7 @@ export default defineComponent({
         onTouchend={onTouchend}
         onTouchcancel={onTouchend}
       >
-        <div class={bem('header')}>
-          <div class={bem('header-bar')} />
-        </div>
+        {renderHeader()}
         <div class={bem('content')} ref={contentRef}>
           {slots.default?.()}
         </div>
diff --git a/packages/vant/src/floating-panel/README.md b/packages/vant/src/floating-panel/README.md
index 7a15aa931..4d8a0ba41 100644
--- a/packages/vant/src/floating-panel/README.md
+++ b/packages/vant/src/floating-panel/README.md
@@ -102,6 +102,7 @@ By default, both the header and content areas of FloatingPanel can be dragged, b
 | Name    | Description          |
 | ------- | -------------------- |
 | default | Custom panel content |
+| header  | Custom panel header  |
 
 ### Types
 
diff --git a/packages/vant/src/floating-panel/README.zh-CN.md b/packages/vant/src/floating-panel/README.zh-CN.md
index c8d65b57f..9a4672b9c 100644
--- a/packages/vant/src/floating-panel/README.zh-CN.md
+++ b/packages/vant/src/floating-panel/README.zh-CN.md
@@ -102,6 +102,7 @@ export default {
 | Name    | Description    |
 | ------- | -------------- |
 | default | 自定义面板内容 |
+| header  | 自定义面板标头 |
 
 ### 类型定义
 
diff --git a/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
index 2ba52dd15..98226e04e 100644
--- a/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
@@ -29,3 +29,14 @@ exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props d
   </div>
 </div>
 `;
+
+exports[`should render header slot correctly 1`] = `
+<div
+  class="van-floating-panel van-safe-area-bottom"
+  style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
+>
+  Custom Header
+  <div class="van-floating-panel__content">
+  </div>
+</div>
+`;
diff --git a/packages/vant/src/floating-panel/test/index.spec.tsx b/packages/vant/src/floating-panel/test/index.spec.tsx
index deaa6c139..570d0cd17 100644
--- a/packages/vant/src/floating-panel/test/index.spec.tsx
+++ b/packages/vant/src/floating-panel/test/index.spec.tsx
@@ -116,3 +116,15 @@ test('should only drag header when allowDraggingContent is false', async () => {
   await later();
   expect(wrapper.emitted('change')).toBeTruthy();
 });
+
+test('should render header slot correctly', () => {
+  const wrapper = mount(FloatingPanel, {
+    slots: {
+      header: () => 'Custom Header',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+
+  wrapper.unmount();
+});