From 3af77d5041d023ebfbeca0a4f40cdb7be81c1571 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E8=81=AA?= <dingcong@apexsoft.com.cn>
Date: Tue, 2 Jul 2024 09:59:32 +0800
Subject: [PATCH 1/2] fix: nav_bar backIcon attribute is compatible with
 backArrow attribute

---
 src/components/nav-bar/nav-bar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index 79baa5abf2..ee5a59dea8 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/src/components/nav-bar/nav-bar.tsx
@@ -38,9 +38,9 @@ export const NavBar: FC<NavBarProps> = props => {
           <div className={`${classPrefix}-back`} onClick={mergedProps.onBack}>
             {(backIcon || backArrow) && (
               <span className={`${classPrefix}-back-arrow`}>
-                {backIcon === true || backArrow === true
-                  ? componentConfig.backIcon || <LeftOutline />
-                  : backIcon || backArrow}
+                {
+                  componentConfig.backIcon || backArrow || <LeftOutline />
+                }
               </span>
             )}
             <span aria-hidden='true'>{back}</span>

From 157664ddb88df2b78dd0d9ff890092211518536a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 2 Jul 2024 10:45:44 +0800
Subject: [PATCH 2/2] refactor: use mergeProp instead

---
 src/components/nav-bar/nav-bar.tsx            | 23 +++++++++++--------
 src/components/nav-bar/tests/nav-bar.test.tsx | 20 ++++++++--------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index ee5a59dea8..15ad98b940 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/src/components/nav-bar/nav-bar.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { mergeProps } from '../../utils/with-default-props'
+import { mergeProp, mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 
 const classPrefix = `adm-nav-bar`
@@ -21,26 +21,31 @@ export type NavBarProps = {
   children?: ReactNode
 } & NativeProps<'--height' | '--border-bottom'>
 
-const defaultProps = {
-  backIcon: true,
-}
+const defaultBackIcon = <LeftOutline />
 
 export const NavBar: FC<NavBarProps> = props => {
   const { navBar: componentConfig = {} } = useConfig()
-  const mergedProps = mergeProps(defaultProps, componentConfig, props)
+  const mergedProps = mergeProps(componentConfig, props)
   const { back, backIcon, backArrow } = mergedProps
 
+  const mergedDefaultBackIcon = componentConfig.backIcon || defaultBackIcon
+
+  const mergedBackIcon = mergeProp<ReactNode>(
+    defaultBackIcon,
+    componentConfig.backIcon,
+    backArrow === true ? mergedDefaultBackIcon : backArrow,
+    backIcon === true ? mergedDefaultBackIcon : backIcon
+  )
+
   return withNativeProps(
     mergedProps,
     <div className={classNames(classPrefix)}>
       <div className={`${classPrefix}-left`} role='button'>
         {back !== null && (
           <div className={`${classPrefix}-back`} onClick={mergedProps.onBack}>
-            {(backIcon || backArrow) && (
+            {mergedBackIcon && (
               <span className={`${classPrefix}-back-arrow`}>
-                {
-                  componentConfig.backIcon || backArrow || <LeftOutline />
-                }
+                {mergedBackIcon}
               </span>
             )}
             <span aria-hidden='true'>{back}</span>
diff --git a/src/components/nav-bar/tests/nav-bar.test.tsx b/src/components/nav-bar/tests/nav-bar.test.tsx
index dc2791733a..31f2549e67 100644
--- a/src/components/nav-bar/tests/nav-bar.test.tsx
+++ b/src/components/nav-bar/tests/nav-bar.test.tsx
@@ -16,8 +16,10 @@ describe('NavBar', () => {
     })
 
     it('legacy', () => {
-      const { baseElement } = render(<NavBar backArrow>Title</NavBar>)
-      expect(baseElement.querySelector('.antd-mobile-icon')).toBeTruthy()
+      const { baseElement } = render(
+        <NavBar backArrow={<span className='bamboo' />}>Title</NavBar>
+      )
+      expect(baseElement.querySelector('.bamboo')).toBeTruthy()
     })
 
     it('props', () => {
@@ -35,23 +37,23 @@ describe('NavBar', () => {
     })
 
     it('context', () => {
-      render(
-        <ConfigProvider navBar={{ backIcon: 'little' }}>
+      const { baseElement } = render(
+        <ConfigProvider navBar={{ backIcon: <span className='little' /> }}>
           <NavBar backIcon>Title</NavBar>
         </ConfigProvider>
       )
 
-      expect(screen.getByText('little')).toBeVisible()
+      expect(baseElement.querySelector('.little')).toBeTruthy()
     })
 
     it('props override context', () => {
-      render(
-        <ConfigProvider navBar={{ backIcon: 'little' }}>
-          <NavBar backIcon='bamboo'>Title</NavBar>
+      const { baseElement } = render(
+        <ConfigProvider navBar={{ backIcon: <span className='little' /> }}>
+          <NavBar backIcon={<span className='bamboo' />}>Title</NavBar>
         </ConfigProvider>
       )
 
-      expect(screen.getByText('bamboo')).toBeVisible()
+      expect(baseElement.querySelector('.bamboo')).toBeTruthy()
     })
   })
 })