feat(TabBar): add onClick props to the TabBar.Item

ant-design · Aug 7, 2024 · 6454b83 · 6454b83
1 parent 7d99732
commit 6454b83
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 8 deletions.
diff --git a/src/components/tab-bar/demos/demo1.tsx b/src/components/tab-bar/demos/demo1.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Badge, TabBar } from 'antd-mobile'
+import { Badge, TabBar, Toast } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import {
   AppOutline,
@@ -10,7 +10,7 @@ import {
 } from 'antd-mobile-icons'
 
 export default () => {
-  const tabs = [
+  const tabs1 = [
     {
       key: 'home',
       title: '首页',
@@ -37,21 +37,45 @@ export default () => {
     },
   ]
 
+  const tabs2 = [
+    {
+      key: 'home',
+      title: '首页',
+      icon: <AppOutline />,
+      onClick: () => {
+        Toast.show('onClick 首页')
+      },
+    },
+    {
+      key: 'todo',
+      title: '待办',
+      icon: <UnorderedListOutline />,
+    },
+    {
+      key: 'personalCenter',
+      title: '我的',
+      icon: <UserOutline />,
+      onClick: (key: string) => {
+        Toast.show(`onClick ${key}`)
+      },
+    },
+  ]
+
   const [activeKey, setActiveKey] = useState('todo')
 
   return (
     <>
       <DemoBlock title='基础用法' padding='0'>
         <TabBar>
-          {tabs.map(item => (
+          {tabs1.map(item => (
             <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
           ))}
         </TabBar>
       </DemoBlock>
 
       <DemoBlock title='徽标' padding='0'>
         <TabBar>
-          {tabs.map(item => (
+          {tabs1.map(item => (
             <TabBar.Item
               key={item.key}
               icon={item.icon}
@@ -64,35 +88,48 @@ export default () => {
 
       <DemoBlock title='仅图标' padding='0'>
         <TabBar>
-          {tabs.map(item => (
+          {tabs1.map(item => (
             <TabBar.Item key={item.key} icon={item.icon} />
           ))}
         </TabBar>
       </DemoBlock>
 
       <DemoBlock title='仅标题' padding='0'>
         <TabBar>
-          {tabs.map(item => (
+          {tabs1.map(item => (
             <TabBar.Item key={item.key} title={item.title} />
           ))}
         </TabBar>
       </DemoBlock>
 
       <DemoBlock title='受控组件' padding='0'>
         <TabBar activeKey={activeKey} onChange={setActiveKey}>
-          {tabs.map(item => (
+          {tabs1.map(item => (
             <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
           ))}
         </TabBar>
       </DemoBlock>
 
       <DemoBlock title='开启安全区' padding='0'>
         <TabBar safeArea>
-          {tabs.map(item => (
+          {tabs1.map(item => (
             <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
           ))}
         </TabBar>
       </DemoBlock>
+
+      <DemoBlock title='Item 点击事件' padding='0'>
+        <TabBar safeArea>
+          {tabs2.map(item => (
+            <TabBar.Item
+              key={item.key}
+              icon={item.icon}
+              title={item.title}
+              onClick={item.onClick}
+            />
+          ))}
+        </TabBar>
+      </DemoBlock>
     </>
   )
 }
diff --git a/src/components/tab-bar/index.en.md b/src/components/tab-bar/index.en.md
@@ -33,6 +33,7 @@ Useful for switching between different pages.
 | icon | Icon | `ReactNode \| ((active: boolean) => ReactNode)` | - |
 | key | Corresponding to `activeKey` | `string` | - |
 | title | Title | `ReactNode \| ((active: boolean) => ReactNode)` | - |
+| onClick | Callback when click item | `(key: string) => void` | - |
 
 ## FAQ
 

diff --git a/src/components/tab-bar/index.zh.md b/src/components/tab-bar/index.zh.md
@@ -33,6 +33,7 @@
 | icon | 图标 | `ReactNode \| ((active: boolean) => ReactNode)` | - |
 | key | 对应 `activeKey` | `string` | - |
 | title | 标题 | `ReactNode \| ((active: boolean) => ReactNode)` | - |
+| onClick | 点击事件的回调 | `(key: string) => void` | - |
 
 ## FAQ
 

diff --git a/src/components/tab-bar/tab-bar.tsx b/src/components/tab-bar/tab-bar.tsx
@@ -12,6 +12,7 @@ export type TabBarItemProps = {
   icon?: ReactNode | ((active: boolean) => ReactNode)
   title?: ReactNode | ((active: boolean) => ReactNode)
   badge?: BadgeProps['content']
+  onClick?: (key: string) => void
 } & NativeProps
 
 /* istanbul ignore next */
@@ -117,8 +118,11 @@ export const TabBar: FC<TabBarProps> = p => {
               key={item.key}
               onClick={() => {
                 const { key } = item
+
                 if (key === undefined || key === null) return
+
                 setActiveKey(key.toString())
+                item.props.onClick?.(key as string)
               }}
               className={classNames(`${classPrefix}-item`, {
                 [`${classPrefix}-item-active`]: active,