From ea0ba1fcf1041990a013e6b006c20985cd9c76f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=93=AD=E4=BD=A0=E5=87=A0=E5=93=87?= <GRAMMAC@163.com>
Date: Mon, 3 Oct 2022 21:43:32 +0800
Subject: [PATCH] feat(nav-bar): add clickable prop to nav-bar component
 (#11048)

* feat: add clickable prop to nav-bar

* test(nav-bar): add clickable prop test case
---
 packages/vant/src/nav-bar/NavBar.tsx          |  5 ++--
 packages/vant/src/nav-bar/README.md           |  1 +
 packages/vant/src/nav-bar/README.zh-CN.md     |  3 ++-
 .../test/__snapshots__/index.spec.ts.snap     | 12 +++++++++
 packages/vant/src/nav-bar/test/index.spec.ts  | 26 +++++++++++++++++++
 5 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/nav-bar/NavBar.tsx b/packages/vant/src/nav-bar/NavBar.tsx
index 09fe11efa..c88208df1 100644
--- a/packages/vant/src/nav-bar/NavBar.tsx
+++ b/packages/vant/src/nav-bar/NavBar.tsx
@@ -33,6 +33,7 @@ export const navBarProps = {
   leftArrow: Boolean,
   placeholder: Boolean,
   safeAreaInsetTop: Boolean,
+  clickable: truthProp,
 };
 
 export type NavBarProps = ExtractPropTypes<typeof navBarProps>;
@@ -92,7 +93,7 @@ export default defineComponent({
           <div class={bem('content')}>
             {hasLeft && (
               <div
-                class={[bem('left'), HAPTICS_FEEDBACK]}
+                class={[bem('left'), props.clickable ? HAPTICS_FEEDBACK : '']}
                 onClick={onClickLeft}
               >
                 {renderLeft()}
@@ -103,7 +104,7 @@ export default defineComponent({
             </div>
             {hasRight && (
               <div
-                class={[bem('right'), HAPTICS_FEEDBACK]}
+                class={[bem('right'), props.clickable ? HAPTICS_FEEDBACK : '']}
                 onClick={onClickRight}
               >
                 {renderRight()}
diff --git a/packages/vant/src/nav-bar/README.md b/packages/vant/src/nav-bar/README.md
index 467dc4b0b..d0efa3989 100644
--- a/packages/vant/src/nav-bar/README.md
+++ b/packages/vant/src/nav-bar/README.md
@@ -99,6 +99,7 @@ export default {
 | placeholder | Whether to generate a placeholder element when fixed | _boolean_ | `false` |
 | z-index | Z-index | _number \| string_ | `1` |
 | safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
+| clickable | Whether to add `van-haptics-feedback` class name to parent element when render `Slots` | _boolean_ | `true` |
 
 ### Slots
 
diff --git a/packages/vant/src/nav-bar/README.zh-CN.md b/packages/vant/src/nav-bar/README.zh-CN.md
index 296505aa0..9b1a72a85 100644
--- a/packages/vant/src/nav-bar/README.zh-CN.md
+++ b/packages/vant/src/nav-bar/README.zh-CN.md
@@ -97,7 +97,7 @@ export default {
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | title | 标题 | _string_ | `''` |
 | left-text | 左侧文案 | _string_ | `''` |
 | right-text | 右侧文案 | _string_ | `''` |
@@ -107,6 +107,7 @@ export default {
 | placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
 | z-index | 导航栏 z-index | _number \| string_ | `1` |
 | safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
+| clickable | 渲染 `Slots` 是否在父元素添加 `van-haptics-feedback` 类名 | _boolean_ | `true` |  |
 
 ### Slots
 
diff --git a/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap
index 09d8a7d95..a8b637a18 100644
--- a/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap
@@ -25,6 +25,18 @@ exports[`should render placeholder element when using placeholder prop 1`] = `
 </div>
 `;
 
+exports[`should render slots correctly when set clickable to false 1`] = `
+<div class="van-nav-bar__left">
+  Custom Left
+</div>
+`;
+
+exports[`should render slots correctly when set clickable to false 2`] = `
+<div class="van-nav-bar__right">
+  Custom Right
+</div>
+`;
+
 exports[`should render title slot correctly 1`] = `
 <div class="van-nav-bar__title van-ellipsis">
   Custom Title
diff --git a/packages/vant/src/nav-bar/test/index.spec.ts b/packages/vant/src/nav-bar/test/index.spec.ts
index 094379bd0..0088f4708 100644
--- a/packages/vant/src/nav-bar/test/index.spec.ts
+++ b/packages/vant/src/nav-bar/test/index.spec.ts
@@ -1,4 +1,5 @@
 import { NavBar } from '..';
+import { HAPTICS_FEEDBACK } from '../../utils';
 import { mount, mockGetBoundingClientRect, later } from '../../../test';
 
 test('should render left slot correctly', () => {
@@ -9,6 +10,9 @@ test('should render left slot correctly', () => {
   });
 
   expect(wrapper.find('.van-nav-bar__left').html()).toMatchSnapshot();
+  expect(
+    wrapper.find('.van-nav-bar__left').classes(HAPTICS_FEEDBACK)
+  ).toBeTruthy();
 });
 
 test('should render left slot correctly', () => {
@@ -19,6 +23,9 @@ test('should render left slot correctly', () => {
   });
 
   expect(wrapper.find('.van-nav-bar__right').html()).toMatchSnapshot();
+  expect(
+    wrapper.find('.van-nav-bar__right').classes(HAPTICS_FEEDBACK)
+  ).toBeTruthy();
 });
 
 test('should render title slot correctly', () => {
@@ -85,3 +92,22 @@ test('should change z-index when using z-index prop', () => {
   });
   expect(wrapper.style.zIndex).toEqual('100');
 });
+
+test('should render slots correctly when set clickable to false', () => {
+  const wrapper = mount(NavBar, {
+    slots: {
+      left: () => 'Custom Left',
+      right: () => 'Custom Right',
+    },
+    props: {
+      clickable: false,
+    },
+  });
+
+  const leftDom = wrapper.find('.van-nav-bar__left');
+  const rightDom = wrapper.find('.van-nav-bar__right');
+  expect(leftDom.html()).toMatchSnapshot();
+  expect(rightDom.html()).toMatchSnapshot();
+  expect(leftDom.classes(HAPTICS_FEEDBACK)).toBeFalsy();
+  expect(rightDom.classes(HAPTICS_FEEDBACK)).toBeFalsy();
+});