refactor(NavBar): backArrow -> backIcon

Author: guoyunhe

src/components/config-provider/config-provider.tsx

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react'
 import type { FC, ReactNode } from 'react'
+import React, { useContext } from 'react'
 import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
 import { mergeProps } from '../../utils/with-default-props'
@@ -29,7 +29,7 @@ type Config = {
     arrow?: ReactNode
   }
   navBar?: {
-    backArrow?: ReactNode
+    backIcon?: ReactNode
   }
   noticeBar?: {
     icon?: ReactNode

src/components/config-provider/index.en.md

@@ -27,7 +27,7 @@ Configure locale messages and custom icons globally.
 | imageUploader | ImageUploader config | `{ uploadIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
 | input | Input config | `{ clearIcon?: ReactNode }` | - |
 | listItem | List.Item config | `{ arrow?: ReactNode }` | - |
-| navBar | NavBar config | `{ backArrow?: ReactNode }` | - |
+| navBar | NavBar config | `{ backIcon?: ReactNode }` | - |
 | noticeBar | NoticeBar config | `{ icon?: ReactNode, closeIcon?: ReactNode }` | - |
 | numberKeyboard | NumberKeyboard config | `{ closeIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
 | popup | Popup config | `{ closeIcon?: ReactNode }` | - |

src/components/config-provider/index.zh.md

@@ -27,7 +27,7 @@
 | imageUploader | ImageUploader 配置 | `{ uploadIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
 | input | Input 配置 | `{ clearIcon?: ReactNode }` | - |
 | listItem | List.Item 配置 | `{ arrow?: ReactNode }` | - |
-| navBar | NavBar 配置 | `{ backArrow?: ReactNode }` | - |
+| navBar | NavBar 配置 | `{ backIcon?: ReactNode }` | - |
 | noticeBar | NoticeBar 配置 | `{ icon?: ReactNode, closeIcon?: ReactNode }` | - |
 | numberKeyboard | NumberKeyboard 配置 | `{ closeIcon?: ReactNode, deleteIcon?: ReactNode }` | - |
 | popup | Popup 配置 | `{ closeIcon?: ReactNode }` | - |

src/components/nav-bar/demos/demo1.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { NavBar, Space, Toast } from 'antd-mobile'
+import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
 import { DemoBlock } from 'demos'
-import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons'
+import React from 'react'
 
 import './demo1.less'
 
@@ -34,13 +34,13 @@ export default () => {
       </DemoBlock>
 
       <DemoBlock title='返回按钮不显示图标' padding='0'>
-        <NavBar back='返回' onBack={back} backArrow={false}>
+        <NavBar back='返回' onBack={back} backIcon={false}>
           标题
         </NavBar>
       </DemoBlock>
 
       <DemoBlock title='自定义返回按钮图标' padding='0'>
-        <NavBar back='返回' backArrow={<CloseOutline />} onBack={back}>
+        <NavBar back='返回' backIcon={<CloseOutline />} onBack={back}>
           标题
         </NavBar>
       </DemoBlock>

src/components/nav-bar/index.en.md

@@ -16,8 +16,8 @@ Need to display the title and action of the current page content.
 
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
-| back | The returned text of the area, if `null` returned, `backArrow` would not be rendered | `ReacNode \| null` | `''` |
-| backArrow | Whether to display the arrow of the return area, you can also pass in `ReactNode` for customization | `boolean \| ReactNode` | `true` |
+| back | The returned text of the area, if `null` returned, `backIcon` would not be rendered | `ReacNode \| null` | `''` |
+| backIcon | Whether to display the back arrow icon of the return area, you can also pass in `ReactNode` for customization | `boolean \| ReactNode` | `true` |
 | children | Title | `ReactNode` | - |
 | left | Content on the left, rendered on the right side of the return area | `ReactNode` | - |
 | onBack | Callback after clicking the return area | `() => void` | - |

src/components/nav-bar/index.zh.md

@@ -16,8 +16,8 @@
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| back | 返回区域的文字，如果为 `null` 的话，`backArrow` 也不会渲染 | `ReactNode \| null` | `''` |
-| backArrow | 是否显示返回区域的箭头，也可以传入 `ReactNode` 进行自定义 | `boolean \| ReactNode` | `true` |
+| back | 返回区域的文字，如果为 `null` 的话，`backIcon` 也不会渲染 | `ReactNode \| null` | `''` |
+| backIcon | 是否显示返回区域的箭头，也可以传入 `ReactNode` 进行自定义 | `boolean \| ReactNode` | `true` |
 | children | 标题 | `ReactNode` | - |
 | left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | - |
 | onBack | 点击返回区域后的回调 | `() => void` | - |

src/components/nav-bar/nav-bar.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import type { FC, ReactNode } from 'react'
-import classNames from 'classnames'
 import { LeftOutline } from 'antd-mobile-icons'
+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 { useConfig } from '../config-provider'
@@ -10,6 +10,10 @@ const classPrefix = `adm-nav-bar`
 
 export type NavBarProps = {
   back?: ReactNode
+  backIcon?: boolean | ReactNode
+  /**
+   * @deprecated use `backIcon` instead
+   */
   backArrow?: boolean | ReactNode
   left?: ReactNode
   right?: ReactNode
@@ -18,23 +22,23 @@ export type NavBarProps = {
 } & NativeProps<'--height' | '--border-bottom'>
 
 const defaultProps = {
-  backArrow: true,
+  backIcon: true,
 }
 
 export const NavBar: FC<NavBarProps> = p => {
   const { navBar: componentConfig = {} } = useConfig()
   const props = mergeProps(defaultProps, componentConfig, p)
-  const { back, backArrow } = props
+  const { back, backIcon, backArrow } = props
 
   return withNativeProps(
     props,
     <div className={classNames(classPrefix)}>
       <div className={`${classPrefix}-left`} role='button'>
         {back !== null && (
           <div className={`${classPrefix}-back`} onClick={props.onBack}>
-            {backArrow && (
+            {(backIcon || backArrow) && (
               <span className={`${classPrefix}-back-arrow`}>
-                {backArrow === true ? <LeftOutline /> : backArrow}
+                {(backIcon === true || backArrow === true) ? <LeftOutline /> : ( backIcon || backArrow)}
               </span>
             )}
             <span aria-hidden='true'>{back}</span>

src/components/nav-bar/tests/nav-bar.test.tsx

@@ -10,11 +10,11 @@ describe('NavBar', () => {
     expect(screen.getByText('Title')).toBeInTheDocument()
   })
   test('render back arrow', () => {
-    render(<NavBar backArrow>Title</NavBar>)
+    render(<NavBar backIcon>Title</NavBar>)
     expect(screen.getByText('Title')).toBeInTheDocument()
   })
   test('render custom back arrow', () => {
-    render(<NavBar backArrow={'Back'}>Title</NavBar>)
+    render(<NavBar backIcon={'Back'}>Title</NavBar>)
     expect(screen.getByText('Back')).toBeInTheDocument()
   })
 })