From 6fe4780b8d8dc4648a921a302669d4951f28cce0 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Tue, 20 Aug 2024 10:00:40 +0800 Subject: [PATCH 01/22] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/style/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tab-bar/style/index.js b/src/tab-bar/style/index.js index 702d60a8..4b21b718 100644 --- a/src/tab-bar/style/index.js +++ b/src/tab-bar/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/tab-bar/_index.less'; +import '../../_common/style/mobile/components/tab-bar/v2/_index.less'; From fec44664ed3c9ea91251daafe1dab8e3da75f731 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 18:16:08 +0800 Subject: [PATCH 02/22] =?UTF-8?q?feat(Demo):=20=E5=8D=87=E7=BA=A7TabBar?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/mobile/mobile.config.js | 2 +- src/_common | 2 +- .../{badge-props.jsx => badge-props.tsx} | 0 src/tab-bar/_example/{base.jsx => base.tsx} | 0 .../_example/{mobile.jsx => mobile.tsx} | 22 ++++++++++++------- .../_example/{pure-icon.jsx => pure-icon.tsx} | 0 .../{text-spread.jsx => text-spread.tsx} | 0 src/tab-bar/_example/{text.jsx => text.tsx} | 0 8 files changed, 16 insertions(+), 10 deletions(-) rename src/tab-bar/_example/{badge-props.jsx => badge-props.tsx} (100%) rename src/tab-bar/_example/{base.jsx => base.tsx} (100%) rename src/tab-bar/_example/{mobile.jsx => mobile.tsx} (60%) rename src/tab-bar/_example/{pure-icon.jsx => pure-icon.tsx} (100%) rename src/tab-bar/_example/{text-spread.jsx => text-spread.tsx} (100%) rename src/tab-bar/_example/{text.jsx => text.tsx} (100%) diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index a915f7db..f77f44f5 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -205,7 +205,7 @@ export default { { title: 'TabBar 标签栏', name: 'tab-bar', - component: () => import('tdesign-mobile-react/tab-bar/_example/mobile.jsx'), + component: () => import('tdesign-mobile-react/tab-bar/_example/mobile.tsx'), }, { title: 'Fab 悬浮按钮', diff --git a/src/_common b/src/_common index d42b7fc2..77adc0f5 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit d42b7fc27b4e38a45ba28ff2ad50af060d8dd936 +Subproject commit 77adc0f57c1cc126f8f070e5baa72c7fad870564 diff --git a/src/tab-bar/_example/badge-props.jsx b/src/tab-bar/_example/badge-props.tsx similarity index 100% rename from src/tab-bar/_example/badge-props.jsx rename to src/tab-bar/_example/badge-props.tsx diff --git a/src/tab-bar/_example/base.jsx b/src/tab-bar/_example/base.tsx similarity index 100% rename from src/tab-bar/_example/base.jsx rename to src/tab-bar/_example/base.tsx diff --git a/src/tab-bar/_example/mobile.jsx b/src/tab-bar/_example/mobile.tsx similarity index 60% rename from src/tab-bar/_example/mobile.jsx rename to src/tab-bar/_example/mobile.tsx index d7e63e98..34547148 100644 --- a/src/tab-bar/_example/mobile.jsx +++ b/src/tab-bar/_example/mobile.tsx @@ -13,22 +13,28 @@ import './style/index.less'; function TabBarMobileDemo() { return (
- - - - - - - - + + + + + + + + + + + + + +
); } diff --git a/src/tab-bar/_example/pure-icon.jsx b/src/tab-bar/_example/pure-icon.tsx similarity index 100% rename from src/tab-bar/_example/pure-icon.jsx rename to src/tab-bar/_example/pure-icon.tsx diff --git a/src/tab-bar/_example/text-spread.jsx b/src/tab-bar/_example/text-spread.tsx similarity index 100% rename from src/tab-bar/_example/text-spread.jsx rename to src/tab-bar/_example/text-spread.tsx diff --git a/src/tab-bar/_example/text.jsx b/src/tab-bar/_example/text.tsx similarity index 100% rename from src/tab-bar/_example/text.jsx rename to src/tab-bar/_example/text.tsx From 14f71a664108809c0411b3814691ee467e1a3cc2 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 18:25:44 +0800 Subject: [PATCH 03/22] =?UTF-8?q?fix(TabBar-type):=20=E4=BF=AE=E5=A4=8DTab?= =?UTF-8?q?Bar=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/type.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index 004e9cf3..fcfab68e 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -29,7 +29,11 @@ export interface TdTabBarProps { /** * 选中标签切换时触发 */ - onChange?: () => void; + onChange?: (value: string | number) => void; + /** + * 标签栏内容 + */ + children?: TNode; } export interface TdTabBarItemProps { @@ -44,11 +48,18 @@ export interface TdTabBarItemProps { /** * 二级菜单 */ - subTabBar?: SubTabBarItem[] ; + subTabBar?: SubTabBarItem[]; /** * 标识符 */ value?: string | number; + /** + * 标签内容 + */ + children?: TNode; } -export interface SubTabBarItem { value: string; label: string }; +export interface SubTabBarItem { + value: string; + label: string; +} From d5e1f13e9dc4b902d2697eea48cede0cdc6d16e5 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 18:48:16 +0800 Subject: [PATCH 04/22] =?UTF-8?q?fix(TabBar-type):=20=E5=90=8C=E6=AD=A5?= =?UTF-8?q?=E6=96=B0=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/type.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index fcfab68e..cc4a77ca 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -18,6 +18,26 @@ export interface TdTabBarProps { * @default true */ fixed?: boolean; + /** + * 是否为 iPhoneX 留出底部安全距离 + * @default true + */ + safeAreaInsetBottom?: boolean; + /** + * 标签栏的形状 + * @default 'normal' + */ + shape?: 'normal' | 'round'; + /** + * 是否需要分割线 + * @default true + */ + split?: boolean; + /** + * 选项风格 + * @default 'normal' + */ + theme?: 'normal' | 'tag'; /** * 当前选中标签的索引 */ From 779df19194396c353a094d5195ea696fed12ca44 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 20:01:45 +0800 Subject: [PATCH 05/22] =?UTF-8?q?feat(TabBarItem):=20=E5=A2=9E=E5=8A=A0tab?= =?UTF-8?q?-bar-item/=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/style/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tab-bar/style/index.js b/src/tab-bar/style/index.js index 4b21b718..5d6c7d7d 100644 --- a/src/tab-bar/style/index.js +++ b/src/tab-bar/style/index.js @@ -1 +1,2 @@ import '../../_common/style/mobile/components/tab-bar/v2/_index.less'; +import '../../_common/style/mobile/components/tab-bar-item/v2/_index.less'; From 63492028a5d180a3bf04da5016df964bedc38d1f Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 20:02:19 +0800 Subject: [PATCH 06/22] =?UTF-8?q?feat(Demo):=20=E5=8D=87=E7=BA=A7TabBar?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/_example/badge-props.tsx | 19 ++++++++++------ src/tab-bar/_example/base.tsx | 16 ++++++------- src/tab-bar/_example/custom.tsx | 34 ++++++++++++++++++++++++++++ src/tab-bar/_example/mobile.tsx | 8 ++++--- src/tab-bar/_example/pure-icon.tsx | 13 +++++++---- src/tab-bar/_example/round.tsx | 34 ++++++++++++++++++++++++++++ src/tab-bar/_example/text-spread.tsx | 32 ++++++++++++++------------ src/tab-bar/_example/text.tsx | 16 ++++++------- 8 files changed, 127 insertions(+), 45 deletions(-) create mode 100644 src/tab-bar/_example/custom.tsx create mode 100644 src/tab-bar/_example/round.tsx diff --git a/src/tab-bar/_example/badge-props.tsx b/src/tab-bar/_example/badge-props.tsx index 8c6fab1b..b844fda6 100644 --- a/src/tab-bar/_example/badge-props.tsx +++ b/src/tab-bar/_example/badge-props.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react'; import { TabBar, TabBarItem } from 'tdesign-mobile-react'; -import { AppIcon } from 'tdesign-icons-react'; +import { Icon } from 'tdesign-icons-react'; function TabBarBaseDemo() { const list = [ - { name: 'label_1', text: '文字', icon: , badgeProps: { count: 16 } }, - { name: 'label_2', text: '文字', icon: , badgeProps: { dot: true } }, - { name: 'label_3', text: '文字', icon: , badgeProps: { count: 'New' } }, - { name: 'label_4', text: '文字', icon: , badgeProps: { count: '···' } }, + { name: 'label_1', text: '首页', icon: 'home', badgeProps: { count: 16 }, ariaLabel: '首页，有16条消息' }, + { name: 'label_2', text: '软件', icon: 'app', badgeProps: { dot: true }, ariaLabel: '软件，有新的消息' }, + { name: 'label_3', text: '聊天', icon: 'chat', badgeProps: { count: 'New' }, ariaLabel: '聊天，New' }, + { name: 'label_4', text: '我的', icon: 'user', badgeProps: { count: '···' }, ariaLabel: '我的，有很多消息' }, ]; const [value, setValue] = useState('label_1'); @@ -22,9 +22,14 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - + } + value={item.name} + badgeProps={item.badgeProps} + > {item.text} ))} diff --git a/src/tab-bar/_example/base.tsx b/src/tab-bar/_example/base.tsx index a3a46da6..2136f4ad 100644 --- a/src/tab-bar/_example/base.tsx +++ b/src/tab-bar/_example/base.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react'; import { TabBar, TabBarItem } from 'tdesign-mobile-react'; -import { AppIcon } from 'tdesign-icons-react'; +import { Icon } from 'tdesign-icons-react'; function TabBarBaseDemo() { const list = [ - { name: 'label_1', text: '文字', icon: }, - { name: 'label_2', text: '文字', icon: }, - { name: 'label_3', text: '文字', icon: }, - { name: 'label_4', text: '文字', icon: }, + { value: 'label_1', label: '首页', icon: 'home' }, + { value: 'label_2', label: '应用', icon: 'app' }, + { value: 'label_3', label: '聊天', icon: 'chat' }, + { value: 'label_4', label: '我的', icon: 'user' }, ]; const [value, setValue] = useState('label_1'); @@ -22,10 +22,10 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - - {item.text} + } value={item.value}> + {item.label} ))} diff --git a/src/tab-bar/_example/custom.tsx b/src/tab-bar/_example/custom.tsx new file mode 100644 index 00000000..60c09f2f --- /dev/null +++ b/src/tab-bar/_example/custom.tsx @@ -0,0 +1,34 @@ +import React, { useState, useEffect } from 'react'; +import { TabBar, TabBarItem } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +function TabBarBaseDemo() { + const list = [ + { value: 'label_1', icon: 'home', ariaLabel: '首页' }, + { value: 'label_2', icon: 'app', ariaLabel: '软件' }, + { value: 'label_3', icon: 'chat', ariaLabel: '聊天' }, + { value: 'label_4', icon: 'user', ariaLabel: '我的' }, + ]; + const [value, setValue] = useState('label_1'); + + const change = (changeValue) => { + setValue(changeValue); + console.log('TabBar 值改变为：', changeValue); + }; + + useEffect(() => { + console.log('当前值：', value); + }, [value]); + + return ( +
+ + {list.map((item, i) => ( + } value={item.value} /> + ))} + +
+ ); +} + +export default TabBarBaseDemo; diff --git a/src/tab-bar/_example/mobile.tsx b/src/tab-bar/_example/mobile.tsx index 34547148..46108059 100644 --- a/src/tab-bar/_example/mobile.tsx +++ b/src/tab-bar/_example/mobile.tsx @@ -7,6 +7,8 @@ import BadgePropsDemo from './badge-props'; import TextDemo from './text'; import PureIconDemo from './pure-icon'; import TextSpreadDemo from './text-spread'; +import RoundDemo from './round'; +import CustomDemo from './custom'; import './style/index.less'; @@ -26,14 +28,14 @@ function TabBarMobileDemo() { - + - + - +
); diff --git a/src/tab-bar/_example/pure-icon.tsx b/src/tab-bar/_example/pure-icon.tsx index 813d0479..06a2f07a 100644 --- a/src/tab-bar/_example/pure-icon.tsx +++ b/src/tab-bar/_example/pure-icon.tsx @@ -1,9 +1,14 @@ import React, { useState, useEffect } from 'react'; import { TabBar, TabBarItem } from 'tdesign-mobile-react'; -import { AppIcon } from 'tdesign-icons-react'; +import { Icon } from 'tdesign-icons-react'; function TabBarBaseDemo() { - const list = [{ name: 'label_1' }, { name: 'label_2' }, { name: 'label_3' }, { name: 'label_4' }]; + const list = [ + { value: 'label_1', icon: 'home', ariaLabel: '首页' }, + { value: 'label_2', icon: 'app', ariaLabel: '软件' }, + { value: 'label_3', icon: 'chat', ariaLabel: '聊天' }, + { value: 'label_4', icon: 'user', ariaLabel: '我的' }, + ]; const [value, setValue] = useState('label_1'); const change = (changeValue) => { @@ -17,9 +22,9 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - } value={item.name} /> + } value={item.value} /> ))}
diff --git a/src/tab-bar/_example/round.tsx b/src/tab-bar/_example/round.tsx new file mode 100644 index 00000000..201f1b23 --- /dev/null +++ b/src/tab-bar/_example/round.tsx @@ -0,0 +1,34 @@ +import React, { useState, useEffect } from 'react'; +import { TabBar, TabBarItem } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +function TabBarBaseDemo() { + const list = [ + { value: 'label_1', icon: 'home', ariaLabel: '首页' }, + { value: 'label_2', icon: 'app', ariaLabel: '软件' }, + { value: 'label_3', icon: 'chat', ariaLabel: '聊天' }, + { value: 'label_4', icon: 'user', ariaLabel: '我的' }, + ]; + const [value, setValue] = useState('label_1'); + + const change = (changeValue) => { + setValue(changeValue); + console.log('TabBar 值改变为：', changeValue); + }; + + useEffect(() => { + console.log('当前值：', value); + }, [value]); + + return ( +
+ + {list.map((item, i) => ( + } value={item.value} /> + ))} + +
+ ); +} + +export default TabBarBaseDemo; diff --git a/src/tab-bar/_example/text-spread.tsx b/src/tab-bar/_example/text-spread.tsx index 0b4b2883..75698218 100644 --- a/src/tab-bar/_example/text-spread.tsx +++ b/src/tab-bar/_example/text-spread.tsx @@ -4,28 +4,30 @@ import { TabBar, TabBarItem } from 'tdesign-mobile-react'; function TabBarBaseDemo() { const list = [ { - name: 'label_1', - text: '标签栏一', + value: 'home', + label: '首页', + icon: 'home', }, { - name: 'label_2', - text: '标签栏二', + value: 'app', + label: '应用', + icon: 'app', }, { - name: 'label_3', - text: '此处展开', + value: 'user', + label: '我的', children: [ { - value: 'spread_3', - label: '展开项三', + value: 'info', + label: '基本信息', }, { - value: 'spread_2', - label: '展开项二', + value: 'home-page', + label: '个人主页', }, { - value: 'spread_1', - label: '展开项一', + value: 'setting', + label: '设置', }, ], }, @@ -33,10 +35,10 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - - {item.text} + + {item.label} ))} diff --git a/src/tab-bar/_example/text.tsx b/src/tab-bar/_example/text.tsx index 66c816bd..0cc38e73 100644 --- a/src/tab-bar/_example/text.tsx +++ b/src/tab-bar/_example/text.tsx @@ -3,12 +3,12 @@ import { TabBar, TabBarItem } from 'tdesign-mobile-react'; function TabBarBaseDemo() { const list = [ - { name: 'label_1', text: '标签栏一' }, - { name: 'label_2', text: '标签栏二' }, - { name: 'label_3', text: '标签栏三' }, - { name: 'label_4', text: '标签栏四' }, + { value: 'home', label: '首页' }, + { value: 'app', label: '应用' }, + { value: 'chat', label: '聊天' }, + { value: 'user', label: '我的' }, ]; - const [value, setValue] = useState('label_1'); + const [value, setValue] = useState('home'); const change = (changeValue) => { setValue(changeValue); @@ -21,10 +21,10 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( - - {item.text} + + {item.label} ))} From ee1c5d323bd97602b16ce0ed97fd409b87ff169f Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 20:25:02 +0800 Subject: [PATCH 07/22] =?UTF-8?q?feat(Demo):=20=E7=BB=84=E4=BB=B6TabBar?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=A4=BA=E4=BE=8B=E5=8D=87=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/_example/custom.tsx | 2 +- src/tab-bar/_example/style/index.less | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/tab-bar/_example/custom.tsx b/src/tab-bar/_example/custom.tsx index 60c09f2f..a8fb00eb 100644 --- a/src/tab-bar/_example/custom.tsx +++ b/src/tab-bar/_example/custom.tsx @@ -21,7 +21,7 @@ function TabBarBaseDemo() { }, [value]); return ( -
+
{list.map((item, i) => ( } value={item.value} /> diff --git a/src/tab-bar/_example/style/index.less b/src/tab-bar/_example/style/index.less index 374185e0..21a757ef 100644 --- a/src/tab-bar/_example/style/index.less +++ b/src/tab-bar/_example/style/index.less @@ -5,4 +5,24 @@ .t-tab-bar + .t-tab-bar { margin-top: 16px; } + + .section { + &-custom { + --td-tab-bar-border-color: #e7e7e7; + --td-tab-bar-bg-color: #eee; + --td-tab-bar-hover-color: #ddd; + --td-tab-bar-item-color: #bbb; + --td-tab-bar-item-active-color: #333; + } + } +} + +:root[theme-mode='dark'] { + .tdesign-mobile-demo { + .section { + &-custom { + --td-tab-bar-color: rgba(0, 0, 0, 0.9); + } + } + } } From 32eebae622f8111e011b2914479b4398059519e2 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 20:39:12 +0800 Subject: [PATCH 08/22] =?UTF-8?q?feat(TabBar-type):=20=E5=A2=9E=E5=8A=A0Ta?= =?UTF-8?q?bBarContext=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/TabBarContext.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/tab-bar/TabBarContext.tsx b/src/tab-bar/TabBarContext.tsx index 18a41018..36ab8646 100644 --- a/src/tab-bar/TabBarContext.tsx +++ b/src/tab-bar/TabBarContext.tsx @@ -1,11 +1,15 @@ import React, { createContext, MutableRefObject, useMemo } from 'react'; import { ChangeHandler } from '../_util/useDefault'; +import { TdTabBarProps } from './type'; -export const TabBarContext = createContext<{ - defaultIndex: MutableRefObject; - activeValue: number | string | (number | string)[]; - updateChild: ChangeHandler; -}>(null); +export const TabBarContext = createContext< + { + defaultIndex: MutableRefObject; + activeValue: number | string | (number | string)[]; + updateChild: ChangeHandler; + itemCount: number; + } & Pick +>(null); export function TabBarProvider({ children, value }) { const memoValue = useMemo(() => value, [value]); From ee150277207d37f47ec4af8ba45a699664a4ad86 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 21:26:26 +0800 Subject: [PATCH 09/22] =?UTF-8?q?feat(TabBar):=20=E5=AE=8C=E6=88=90TabBar?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/TabBar.tsx | 29 ++++++-- src/tab-bar/TabBarItem.tsx | 133 ++++++++++++++++++++++++------------- src/tab-bar/type.ts | 4 +- 3 files changed, 111 insertions(+), 55 deletions(-) diff --git a/src/tab-bar/TabBar.tsx b/src/tab-bar/TabBar.tsx index 9cafeb0a..4f427079 100644 --- a/src/tab-bar/TabBar.tsx +++ b/src/tab-bar/TabBar.tsx @@ -9,7 +9,7 @@ import { TabBarProvider } from './TabBarContext'; export interface TabBarProps extends TdTabBarProps, StyledProps {} const TabBar = forwardRef((props, ref) => { - const { bordered, fixed, onChange, value, defaultValue } = props; + const { bordered, fixed, onChange, value, defaultValue, safeAreaInsetBottom, shape, split, theme } = props; const { classPrefix } = useConfig(); const name = `${classPrefix}-tab-bar`; const [activeValue, onToggleActiveValue] = useDefault(value, defaultValue, onChange); @@ -18,22 +18,33 @@ const TabBar = forwardRef((props, ref) => { const updateChild = onToggleActiveValue; - const tabBarClass = cls(name, { - [`${name}--bordered`]: bordered, - [`${name}--fixed`]: fixed, - }); + const tabBarClass = cls( + name, + { + [`${name}--bordered`]: bordered, + [`${name}--fixed`]: fixed, + [`${name}--safe`]: safeAreaInsetBottom, + }, + `${name}--${props.shape}`, + ); + + const itemCount = React.Children.count(props.children); const memoProviderValues = useMemo( () => ({ defaultIndex, activeValue, updateChild, + shape, + split, + theme, + itemCount, }), - [defaultIndex, activeValue, updateChild], + [defaultIndex, activeValue, updateChild, shape, split, theme, itemCount], ); return ( -
+
{props.children}
); @@ -42,6 +53,10 @@ const TabBar = forwardRef((props, ref) => { TabBar.defaultProps = { bordered: true, fixed: true, + safeAreaInsetBottom: true, + shape: 'normal', + split: true, + theme: 'normal', }; export default memo(TabBar); diff --git a/src/tab-bar/TabBarItem.tsx b/src/tab-bar/TabBarItem.tsx index 4d854e9c..3d5181df 100644 --- a/src/tab-bar/TabBarItem.tsx +++ b/src/tab-bar/TabBarItem.tsx @@ -1,7 +1,7 @@ import cls from 'classnames'; -import React, { forwardRef, memo, useContext, useEffect, useMemo, useState } from 'react'; - +import React, { forwardRef, memo, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { CSSTransition } from 'react-transition-group'; +import { Icon } from 'tdesign-icons-react'; import type { StyledProps } from '../common'; import type { TdTabBarItemProps } from './type'; import { TabBarContext } from './TabBarContext'; @@ -11,14 +11,21 @@ import useTabBarCssTransition from './useTabBarCssTransition'; export interface TabBarItemProps extends TdTabBarItemProps, StyledProps {} -const defaultBadgeOffset = [0, 5]; +const defaultBadgeOffset = [0, 0]; const defaultBadgeMaxCount = 99; const TabBarItem = forwardRef((props, ref) => { const { subTabBar, icon, badgeProps, value, children } = props; const hasSubTabBar = useMemo(() => !!subTabBar, [subTabBar]); - const { defaultIndex, activeValue, updateChild } = useContext(TabBarContext); + const { defaultIndex, activeValue, updateChild, shape, split, theme, itemCount } = useContext(TabBarContext); + + const { classPrefix } = useConfig(); + + const textNode = useRef(null); + + const [iconOnly, setIconOnly] = useState(false); + // 组件每次 render 生成一个临时的当前组件唯一值 const [currentName] = useState(() => { if (value) { @@ -27,7 +34,10 @@ const TabBarItem = forwardRef((props, ref) => { return (defaultIndex.current += 1); }); - const { classPrefix } = useConfig(); + useEffect(() => { + const height = textNode?.current?.clientHeight; + setIconOnly(Number(height) === 0); + }, [textNode]); const componentName = `${classPrefix}-tab-bar-item`; @@ -42,6 +52,9 @@ const TabBarItem = forwardRef((props, ref) => { const mergedBadgeProps = useMemo( () => ({ + count: 0, + dot: false, + size: 'medium', offset: defaultBadgeOffset, maxCount: defaultBadgeMaxCount, ...badgeProps, @@ -83,68 +96,96 @@ const TabBarItem = forwardRef((props, ref) => { setIsSpread(() => false); }; - const tabItemCls = cls(componentName, { - [`${classPrefix}-no-border`]: icon, - }); - const tabItemInnerCls = cls(`${componentName}__content`, { - [`${classPrefix}-is-checked`]: isChecked, - [`${componentName}--onlytext`]: !icon, - }); + /** 拥挤否 */ + const crowded = itemCount > 3; + + const tabItemCls = cls( + componentName, + { + [`${componentName}--split`]: split, + [`${componentName}--text-only`]: !icon, + [`${componentName}--crowded`]: crowded, + }, + `${componentName}--${shape}`, + ); + const tabItemInnerCls = cls( + `${componentName}__content`, + { + [`${componentName}__content--checked`]: isChecked, + }, + `${componentName}__content--${theme}`, + ); const tabItemIconCls = cls(`${componentName}__icon`); const tabItemSpreadCls = cls(`${componentName}__spread`); const tabItemSpreadItemCls = cls(`${componentName}__spread-item`); - const tabItemTextCls = cls(`${componentName}__text`); + const tabItemTextCls = cls(`${componentName}__text`, { + [`${componentName}__text--small`]: icon, + }); const tabItemIconMenuCls = cls(`${componentName}__icon-menu`); const transitionClsNames = useTabBarCssTransition({ name: 'spread', }); + const iconSize = `${iconOnly ? 24 : 20}px`; + + const iconContent = + icon && + React.cloneElement(icon, { + style: { fontSize: iconSize }, + }); + return ( -
-
+
+
{icon && ( -
+
{badgeProps && (badgeProps?.dot || badgeProps?.count) ? ( - + ) : ( - icon + iconContent )}
)} {children && ( -
- {shouldShowSubTabBar &&
} +
+ {shouldShowSubTabBar && ( + <> + +
+ + )} {children}
)} - - -
    - {subTabBar?.map((child, index) => ( -
  • { - e.stopPropagation(); - selectChild(child.value || index); - }} - > - {child.label} -
    • - ))} -
-
+ + +
    + {subTabBar?.map((child, index) => ( +
    { + e.stopPropagation(); + selectChild(child.value || index); + }} + > + {index !== 0 &&
    } +
    {child.label}
    +
    + ))} +
+
); }); diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index cc4a77ca..1286062a 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -5,7 +5,7 @@ * */ import { TdBadgeProps } from '../badge'; -import { TNode } from '../common'; +import { TElement, TNode } from '../common'; export interface TdTabBarProps { /** @@ -64,7 +64,7 @@ export interface TdTabBarItemProps { /** * 图标名称 */ - icon?: TNode; + icon?: TElement; /** * 二级菜单 */ From 291465d57ae0315db7dda625b357865929836b4e Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 21:32:02 +0800 Subject: [PATCH 10/22] =?UTF-8?q?feat(TabBar):=20=E5=8A=A0=E4=B8=8AparseTN?= =?UTF-8?q?ode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/TabBar.tsx | 7 ++++--- src/tab-bar/TabBarItem.tsx | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/tab-bar/TabBar.tsx b/src/tab-bar/TabBar.tsx index 4f427079..af019f0d 100644 --- a/src/tab-bar/TabBar.tsx +++ b/src/tab-bar/TabBar.tsx @@ -5,11 +5,12 @@ import useDefault from '../_util/useDefault'; import type { StyledProps } from '../common'; import type { TdTabBarProps } from './type'; import { TabBarProvider } from './TabBarContext'; +import parseTNode from '../_util/parseTNode'; export interface TabBarProps extends TdTabBarProps, StyledProps {} const TabBar = forwardRef((props, ref) => { - const { bordered, fixed, onChange, value, defaultValue, safeAreaInsetBottom, shape, split, theme } = props; + const { bordered, fixed, onChange, value, defaultValue, safeAreaInsetBottom, shape, split, theme, children } = props; const { classPrefix } = useConfig(); const name = `${classPrefix}-tab-bar`; const [activeValue, onToggleActiveValue] = useDefault(value, defaultValue, onChange); @@ -28,7 +29,7 @@ const TabBar = forwardRef((props, ref) => { `${name}--${props.shape}`, ); - const itemCount = React.Children.count(props.children); + const itemCount = React.Children.count(parseTNode(children)); const memoProviderValues = useMemo( () => ({ @@ -45,7 +46,7 @@ const TabBar = forwardRef((props, ref) => { return (
- {props.children} + {parseTNode(children)}
); }); diff --git a/src/tab-bar/TabBarItem.tsx b/src/tab-bar/TabBarItem.tsx index 3d5181df..3cc14d3f 100644 --- a/src/tab-bar/TabBarItem.tsx +++ b/src/tab-bar/TabBarItem.tsx @@ -8,6 +8,7 @@ import { TabBarContext } from './TabBarContext'; import Badge from '../badge'; import useConfig from '../_util/useConfig'; import useTabBarCssTransition from './useTabBarCssTransition'; +import parseTNode from '../_util/parseTNode'; export interface TabBarItemProps extends TdTabBarItemProps, StyledProps {} @@ -54,7 +55,6 @@ const TabBarItem = forwardRef((props, ref) => { () => ({ count: 0, dot: false, - size: 'medium', offset: defaultBadgeOffset, maxCount: defaultBadgeMaxCount, ...badgeProps, @@ -162,7 +162,7 @@ const TabBarItem = forwardRef((props, ref) => {
)} - {children} + {parseTNode(children)}
)}
From 5db30b480920e906d5d3187d7837379917b9a4e7 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Wed, 21 Aug 2024 21:36:22 +0800 Subject: [PATCH 11/22] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0snap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/snap/__snapshots__/csr.test.jsx.snap | 1696 +++++++++++++++++++++ test/snap/__snapshots__/ssr.test.jsx.snap | 16 + 2 files changed, 1712 insertions(+) diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index bb69d648..0eddad62 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -19087,6 +19087,1686 @@ exports[`csr snapshot test > csr test src/sticky/_example/offset.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/base.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/custom.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = ` +
+
+
+

+ TabBar 标签栏 +

+

+ 用于在不同功能模块之间进行快速切换，位于页面底部。 +

+
+
+
+

+ 01 组件类型 +

+

+ 纯文本标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 图标加文字标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 纯图标标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 双层级纯文本标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+

+ 01 组件类型 +

+

+ 弱选中标签栏 +

+
+
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+

+ 悬浮胶囊标签栏 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

+ 03 自定义 +

+

+ 自定义样式 +

+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/pure-icon.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/round.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/text.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`csr snapshot test > csr test src/tab-bar/_example/text-spread.tsx 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+
+`; + exports[`csr snapshot test > csr test src/tag/_example/checkable.tsx 1`] = `
ssr test src/sticky/_example/index.tsx 1`] = `"
ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 18d3c698..36095684 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -200,6 +200,22 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"
ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"
可关闭标签
文字标签文字标签
"`; From 6c14361e56227843cab94dc6f7f522f1715552aa Mon Sep 17 00:00:00 2001 From: tobytovi Date: Thu, 22 Aug 2024 10:48:35 +0800 Subject: [PATCH 12/22] =?UTF-8?q?feat(TabBar-API):=20=E5=90=8C=E6=AD=A5Tab?= =?UTF-8?q?Bar=E7=9A=84API=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/tab-bar.en-US.md | 47 ++++++++++++++++++++++++++++++++++++ src/tab-bar/tab-bar.md | 39 +++++++++++++++++++++++------- 2 files changed, 77 insertions(+), 9 deletions(-) create mode 100644 src/tab-bar/tab-bar.en-US.md diff --git a/src/tab-bar/tab-bar.en-US.md b/src/tab-bar/tab-bar.en-US.md new file mode 100644 index 00000000..00ea6cb7 --- /dev/null +++ b/src/tab-bar/tab-bar.en-US.md @@ -0,0 +1,47 @@ +:: BASE_DOC :: + +## API + +### TabBar Props + +name | type | default | description | required +-- | -- | -- | -- | -- +bordered | Boolean | true | \- | N +fixed | Boolean | true | \- | N +safeAreaInsetBottom | Boolean | true | \- | N +shape | String | 'normal' | options：normal/round | N +split | Boolean | true | \- | N +theme | String | 'normal' | options：normal/tag | N +value | String / Number / Array | undefined | The index of the currently selected tab.Typescript:`string | number | Array` | N +defaultValue | String / Number / Array | undefined | The default index of the selected tag. Uncontrolled property.Typescript:`string | number | Array` | N +onChange | Function | | Typescript:`(value: string \| number) => void`
Trigger when the label switch is selected | N +className | String | - | \- | N +style | Object | - | Typescript:`React.CSSProperties` | N + +### TabBarItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +badgeProps | Object | - | Typescript:`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +icon | TElement | - | Typescript:`TElement`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | Typescript:`SubTabBarItem[]` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +value | String / Number | - | \- | N +className | String | - | \- | N +style | Object | - | Typescript:`React.CSSProperties` | N + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. +Name | Default Value | Description +-- | -- | -- +--td-tab-bar-active-bg | @brand-color-light | - +--td-tab-bar-active-color | @brand-color | - +--td-tab-bar-bg-color | @bg-color-container | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-color | @font-gray-1 | - +--td-tab-bar-height | 40px | - +--td-tab-bar-hover-bg-color | rgba(0, 0, 0, .05) | - +--td-tab-bar-spread-border-color | @border-color | - +--td-tab-bar-spread-shadow | @shadow-3 | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-round-shadow | @shadow-3 | - diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md index acb6981d..5a288dd9 100644 --- a/src/tab-bar/tab-bar.md +++ b/src/tab-bar/tab-bar.md @@ -6,21 +6,42 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，TS 类型：`React.CSSProperties` | N bordered | Boolean | true | 是否显示外边框 | N fixed | Boolean | true | 是否固定在底部 | N -value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string | number | Array` | N -defaultValue | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string | number | Array` | N -onChange | Function | | TS 类型：`() => void`
选中标签切换时触发 | N +safeAreaInsetBottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N +shape | String | 'normal' | 标签栏的形状。可选项：normal/round | N +split | Boolean | true | 是否需要分割线 | N +theme | String | 'normal' | 选项风格。可选项：normal/tag | N +value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string \| number \| Array`| N +defaultValue | String / Number / Array | undefined | 默认选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N +onChange | Function | | TS 类型：`(value: string \| number) => void`
选中标签切换时触发 | N +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N ### TabBarItem Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -className | String | - | 类名 | N -style | Object | - | 样式，TS 类型：`React.CSSProperties` | N badgeProps | Object | - | 图标右上角提示信息。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -icon | TNode | - | 图标名称。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +icon | TNode | - | 图标。TS 类型：`TElement`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[]` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | 标识符 | N +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-tab-bar-active-bg | @brand-color-light | - +--td-tab-bar-active-color | @brand-color | - +--td-tab-bar-bg-color | @bg-color-container | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-color | @font-gray-1 | - +--td-tab-bar-height | 40px | - +--td-tab-bar-hover-bg-color | rgba(0, 0, 0, .05) | - +--td-tab-bar-spread-border-color | @border-color | - +--td-tab-bar-spread-shadow | @shadow-3 | - +--td-tab-bar-border-color | @border-color | - +--td-tab-bar-round-shadow | @shadow-3 | - From 4d321da97e17e92b870c3733f937758c8a08f7ac Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 23 Aug 2024 09:23:38 +0000 Subject: [PATCH 13/22] chore: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 77adc0f5..a520bc03 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 77adc0f57c1cc126f8f070e5baa72c7fad870564 +Subproject commit a520bc03623d3e728ccc0f9d9a7852e2fe5577f2 From e5e2474e7f5f0edb92e4041838c62974249a7218 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 10:03:21 +0800 Subject: [PATCH 14/22] chore(TabBar): update snap --- src/_common | 2 +- test/snap/__snapshots__/csr.test.jsx.snap | 212 ++++++++++++++-------- test/snap/__snapshots__/ssr.test.jsx.snap | 4 +- 3 files changed, 141 insertions(+), 77 deletions(-) diff --git a/src/_common b/src/_common index a520bc03..77adc0f5 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit a520bc03623d3e728ccc0f9d9a7852e2fe5577f2 +Subproject commit 77adc0f57c1cc126f8f070e5baa72c7fad870564 diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 69af3725..ae8387c1 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -23314,19 +23314,27 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] = class="t-badge" >
+ + + + + +
+
16
- - -
csr test src/tab-bar/_example/badge-props.tsx 1`] = class="t-badge" >
+ + + + + +
+
- - -
csr test src/tab-bar/_example/badge-props.tsx 1`] = class="t-badge" >
+ + + + + +
+
New
- - -
csr test src/tab-bar/_example/badge-props.tsx 1`] = class="t-badge" >
+ + + + + +
+
···
- - -
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="t-badge" >
+ + + + + +
+
16
- - -
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="t-badge" >
+ + + + + +
+
- - -
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="t-badge" >
+ + + + + +
+
New
- - -
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="t-badge" >
+ + + + + +
+
···
- - -
ssr test src/sticky/_example/index.tsx 1`] = `"
ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 9f1f1b01..6e515b47 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -228,13 +228,13 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"
ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; From 70e5eb35522da9643830877422acbf0cd16f8be3 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 10:03:49 +0800 Subject: [PATCH 15/22] chore(TabBar): sync common file --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 77adc0f5..a520bc03 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 77adc0f57c1cc126f8f070e5baa72c7fad870564 +Subproject commit a520bc03623d3e728ccc0f9d9a7852e2fe5577f2 From 59845130b9c12a1a5bcf085f3531be3b7f488942 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 20:34:45 +0800 Subject: [PATCH 16/22] =?UTF-8?q?chore:=20=E5=8F=98=E6=9B=B4common?= =?UTF-8?q?=E5=88=86=E6=94=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index a520bc03..3e51c011 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit a520bc03623d3e728ccc0f9d9a7852e2fe5577f2 +Subproject commit 3e51c01173a3a30cefe60dae7e802231c787d410 From c9a6b4141a698af353b0ee240095586aff2dae79 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 21:07:51 +0800 Subject: [PATCH 17/22] chore(TabBar): update tdesign-api --- src/tab-bar/defaultProps.ts | 15 +++++++++++++++ src/tab-bar/tab-bar.en-US.md | 29 ++++++++++++++++------------- src/tab-bar/tab-bar.md | 25 ++++++++++++++----------- src/tab-bar/type.ts | 26 +++++++++++++------------- 4 files changed, 58 insertions(+), 37 deletions(-) create mode 100644 src/tab-bar/defaultProps.ts diff --git a/src/tab-bar/defaultProps.ts b/src/tab-bar/defaultProps.ts new file mode 100644 index 00000000..af85cd59 --- /dev/null +++ b/src/tab-bar/defaultProps.ts @@ -0,0 +1,15 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdTabBarProps } from './type'; + +export const tabBarDefaultProps: TdTabBarProps = { + bordered: true, + fixed: true, + safeAreaInsetBottom: true, + shape: 'normal', + split: true, + theme: 'normal', + defaultValue: undefined, +}; diff --git a/src/tab-bar/tab-bar.en-US.md b/src/tab-bar/tab-bar.en-US.md index 00ea6cb7..e6ae4ab0 100644 --- a/src/tab-bar/tab-bar.en-US.md +++ b/src/tab-bar/tab-bar.en-US.md @@ -6,28 +6,31 @@ name | type | default | description | required -- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N bordered | Boolean | true | \- | N +children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N fixed | Boolean | true | \- | N safeAreaInsetBottom | Boolean | true | \- | N -shape | String | 'normal' | options：normal/round | N +shape | String | 'normal' | options: normal/round | N split | Boolean | true | \- | N -theme | String | 'normal' | options：normal/tag | N -value | String / Number / Array | undefined | The index of the currently selected tab.Typescript:`string | number | Array` | N -defaultValue | String / Number / Array | undefined | The default index of the selected tag. Uncontrolled property.Typescript:`string | number | Array` | N -onChange | Function | | Typescript:`(value: string \| number) => void`
Trigger when the label switch is selected | N -className | String | - | \- | N -style | Object | - | Typescript:`React.CSSProperties` | N +theme | String | 'normal' | options: normal/tag | N +value | String / Number / Array | undefined | Typescript：`string \| number \| Array` | N +defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript：`string \| number \| Array` | N +onChange | Function | | Typescript：`(value: string \| number) => void`
| N + ### TabBarItem Props name | type | default | description | required -- | -- | -- | -- | -- -badgeProps | Object | - | Typescript:`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -icon | TElement | - | Typescript:`TElement`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -subTabBar | Array | - | Typescript:`SubTabBarItem[]` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TNode | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | \- | N -className | String | - | \- | N -style | Object | - | Typescript:`React.CSSProperties` | N ### CSS Variables @@ -44,4 +47,4 @@ Name | Default Value | Description --td-tab-bar-spread-border-color | @border-color | - --td-tab-bar-spread-shadow | @shadow-3 | - --td-tab-bar-border-color | @border-color | - ---td-tab-bar-round-shadow | @shadow-3 | - +--td-tab-bar-round-shadow | @shadow-3 | - \ No newline at end of file diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md index 5a288dd9..4ed9a216 100644 --- a/src/tab-bar/tab-bar.md +++ b/src/tab-bar/tab-bar.md @@ -4,30 +4,33 @@ ### TabBar Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N bordered | Boolean | true | 是否显示外边框 | N +children | TNode | - | 标签栏内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N fixed | Boolean | true | 是否固定在底部 | N safeAreaInsetBottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N shape | String | 'normal' | 标签栏的形状。可选项：normal/round | N split | Boolean | true | 是否需要分割线 | N theme | String | 'normal' | 选项风格。可选项：normal/tag | N -value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string \| number \| Array`| N -defaultValue | String / Number / Array | undefined | 默认选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N +value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string \| number \| Array` | N +defaultValue | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N onChange | Function | | TS 类型：`(value: string \| number) => void`
选中标签切换时触发 | N -className | String | - | 类名 | N -style | Object | - | 样式，TS 类型：`React.CSSProperties` | N + ### TabBarItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -badgeProps | Object | - | 图标右上角提示信息。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -icon | TNode | - | 图标。TS 类型：`TElement`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[]` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -value | String / Number | - | 标识符 | N className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +badgeProps | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +children | TNode | - | 标签内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TNode | - | 图标名称。传入对象时透传至 Icon 组件。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +value | String / Number | - | 标识符 | N ### CSS Variables @@ -44,4 +47,4 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N --td-tab-bar-spread-border-color | @border-color | - --td-tab-bar-spread-shadow | @shadow-3 | - --td-tab-bar-border-color | @border-color | - ---td-tab-bar-round-shadow | @shadow-3 | - +--td-tab-bar-round-shadow | @shadow-3 | - \ No newline at end of file diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index 1286062a..a51df4d7 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -4,8 +4,8 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TdBadgeProps } from '../badge'; -import { TElement, TNode } from '../common'; +import { BadgeProps } from '../badge'; +import { TNode } from '../common'; export interface TdTabBarProps { /** @@ -13,6 +13,10 @@ export interface TdTabBarProps { * @default true */ bordered?: boolean; + /** + * 标签栏内容 + */ + children?: TNode; /** * 是否固定在底部 * @default true @@ -50,21 +54,21 @@ export interface TdTabBarProps { * 选中标签切换时触发 */ onChange?: (value: string | number) => void; - /** - * 标签栏内容 - */ - children?: TNode; } export interface TdTabBarItemProps { /** * 图标右上角提示信息 */ - badgeProps?: TdBadgeProps; + badgeProps?: BadgeProps; /** - * 图标名称 + * 标签内容 + */ + children?: TNode; + /** + * 图标名称。传入对象时透传至 Icon 组件 */ - icon?: TElement; + icon?: TNode; /** * 二级菜单 */ @@ -73,10 +77,6 @@ export interface TdTabBarItemProps { * 标识符 */ value?: string | number; - /** - * 标签内容 - */ - children?: TNode; } export interface SubTabBarItem { From 81e5772decdab534cbbf24fdd4d3ab67840f427e Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 21:09:45 +0800 Subject: [PATCH 18/22] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E6=97=A7?= =?UTF-8?q?=E7=9A=84=E9=BB=98=E8=AE=A4=E5=80=BC=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/TabBar.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/tab-bar/TabBar.tsx b/src/tab-bar/TabBar.tsx index af019f0d..a5d64708 100644 --- a/src/tab-bar/TabBar.tsx +++ b/src/tab-bar/TabBar.tsx @@ -51,13 +51,4 @@ const TabBar = forwardRef((props, ref) => { ); }); -TabBar.defaultProps = { - bordered: true, - fixed: true, - safeAreaInsetBottom: true, - shape: 'normal', - split: true, - theme: 'normal', -}; - export default memo(TabBar); From ce06565c3e8ac235f5bcb58e31db5d474929932c Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 21:24:50 +0800 Subject: [PATCH 19/22] =?UTF-8?q?refactor(TabBar):=20=E6=94=B9=E7=94=A8use?= =?UTF-8?q?PrefixClass=E3=80=81useDefaultProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_common | 2 +- src/tab-bar/TabBar.tsx | 35 +++++++++++++++++-------------- src/tab-bar/TabBarItem.tsx | 42 +++++++++++++++++++------------------- 3 files changed, 42 insertions(+), 37 deletions(-) diff --git a/src/_common b/src/_common index 3e51c011..77adc0f5 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 3e51c01173a3a30cefe60dae7e802231c787d410 +Subproject commit 77adc0f57c1cc126f8f070e5baa72c7fad870564 diff --git a/src/tab-bar/TabBar.tsx b/src/tab-bar/TabBar.tsx index a5d64708..348c7883 100644 --- a/src/tab-bar/TabBar.tsx +++ b/src/tab-bar/TabBar.tsx @@ -1,34 +1,27 @@ import React, { forwardRef, memo, useMemo, useRef } from 'react'; import cls from 'classnames'; -import useConfig from '../_util/useConfig'; import useDefault from '../_util/useDefault'; import type { StyledProps } from '../common'; import type { TdTabBarProps } from './type'; import { TabBarProvider } from './TabBarContext'; import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; +import { tabBarDefaultProps } from './defaultProps'; export interface TabBarProps extends TdTabBarProps, StyledProps {} -const TabBar = forwardRef((props, ref) => { +const TabBar = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, tabBarDefaultProps); const { bordered, fixed, onChange, value, defaultValue, safeAreaInsetBottom, shape, split, theme, children } = props; - const { classPrefix } = useConfig(); - const name = `${classPrefix}-tab-bar`; + + const tabBarClass = usePrefixClass('tab-bar'); const [activeValue, onToggleActiveValue] = useDefault(value, defaultValue, onChange); const defaultIndex = useRef(-1); const updateChild = onToggleActiveValue; - const tabBarClass = cls( - name, - { - [`${name}--bordered`]: bordered, - [`${name}--fixed`]: fixed, - [`${name}--safe`]: safeAreaInsetBottom, - }, - `${name}--${props.shape}`, - ); - const itemCount = React.Children.count(parseTNode(children)); const memoProviderValues = useMemo( @@ -45,7 +38,19 @@ const TabBar = forwardRef((props, ref) => { ); return ( -
+
{parseTNode(children)}
); diff --git a/src/tab-bar/TabBarItem.tsx b/src/tab-bar/TabBarItem.tsx index 3cc14d3f..76ea81e4 100644 --- a/src/tab-bar/TabBarItem.tsx +++ b/src/tab-bar/TabBarItem.tsx @@ -6,22 +6,24 @@ import type { StyledProps } from '../common'; import type { TdTabBarItemProps } from './type'; import { TabBarContext } from './TabBarContext'; import Badge from '../badge'; -import useConfig from '../_util/useConfig'; import useTabBarCssTransition from './useTabBarCssTransition'; import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { usePrefixClass } from '../hooks/useClass'; export interface TabBarItemProps extends TdTabBarItemProps, StyledProps {} const defaultBadgeOffset = [0, 0]; const defaultBadgeMaxCount = 99; -const TabBarItem = forwardRef((props, ref) => { +const TabBarItem = forwardRef((originProps, ref) => { + const props = useDefaultProps(originProps, {}); const { subTabBar, icon, badgeProps, value, children } = props; const hasSubTabBar = useMemo(() => !!subTabBar, [subTabBar]); const { defaultIndex, activeValue, updateChild, shape, split, theme, itemCount } = useContext(TabBarContext); - const { classPrefix } = useConfig(); + const tabBarItemClass = usePrefixClass('tab-bar-item'); const textNode = useRef(null); @@ -40,8 +42,6 @@ const TabBarItem = forwardRef((props, ref) => { setIconOnly(Number(height) === 0); }, [textNode]); - const componentName = `${classPrefix}-tab-bar-item`; - const [isSpread, setIsSpread] = useState(false); const isChecked = useMemo(() => { @@ -100,28 +100,28 @@ const TabBarItem = forwardRef((props, ref) => { const crowded = itemCount > 3; const tabItemCls = cls( - componentName, + tabBarItemClass, { - [`${componentName}--split`]: split, - [`${componentName}--text-only`]: !icon, - [`${componentName}--crowded`]: crowded, + [`${tabBarItemClass}--split`]: split, + [`${tabBarItemClass}--text-only`]: !icon, + [`${tabBarItemClass}--crowded`]: crowded, }, - `${componentName}--${shape}`, + `${tabBarItemClass}--${shape}`, ); const tabItemInnerCls = cls( - `${componentName}__content`, + `${tabBarItemClass}__content`, { - [`${componentName}__content--checked`]: isChecked, + [`${tabBarItemClass}__content--checked`]: isChecked, }, - `${componentName}__content--${theme}`, + `${tabBarItemClass}__content--${theme}`, ); - const tabItemIconCls = cls(`${componentName}__icon`); - const tabItemSpreadCls = cls(`${componentName}__spread`); - const tabItemSpreadItemCls = cls(`${componentName}__spread-item`); - const tabItemTextCls = cls(`${componentName}__text`, { - [`${componentName}__text--small`]: icon, + const tabItemIconCls = cls(`${tabBarItemClass}__icon`); + const tabItemSpreadCls = cls(`${tabBarItemClass}__spread`); + const tabItemSpreadItemCls = cls(`${tabBarItemClass}__spread-item`); + const tabItemTextCls = cls(`${tabBarItemClass}__text`, { + [`${tabBarItemClass}__text--small`]: icon, }); - const tabItemIconMenuCls = cls(`${componentName}__icon-menu`); + const tabItemIconMenuCls = cls(`${tabBarItemClass}__icon-menu`); const transitionClsNames = useTabBarCssTransition({ name: 'spread', @@ -180,8 +180,8 @@ const TabBarItem = forwardRef((props, ref) => { selectChild(child.value || index); }} > - {index !== 0 &&
} -
{child.label}
+ {index !== 0 &&
} +
{child.label}
))} From 87bcb2e758167eb6ccd7c1b6e3268edb295f8aec Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 21:27:18 +0800 Subject: [PATCH 20/22] chore(TabBar): update api --- src/tab-bar/tab-bar.en-US.md | 2 +- src/tab-bar/tab-bar.md | 2 +- src/tab-bar/type.ts | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/tab-bar/tab-bar.en-US.md b/src/tab-bar/tab-bar.en-US.md index e6ae4ab0..087a8848 100644 --- a/src/tab-bar/tab-bar.en-US.md +++ b/src/tab-bar/tab-bar.en-US.md @@ -28,7 +28,7 @@ className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -icon | TNode | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N subTabBar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | \- | N diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md index 4ed9a216..3b381250 100644 --- a/src/tab-bar/tab-bar.md +++ b/src/tab-bar/tab-bar.md @@ -28,7 +28,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N badgeProps | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N children | TNode | - | 标签内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -icon | TNode | - | 图标名称。传入对象时透传至 Icon 组件。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | 图标名称。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | 标识符 | N diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index a51df4d7..2dfbae2c 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -5,7 +5,7 @@ * */ import { BadgeProps } from '../badge'; -import { TNode } from '../common'; +import { TNode, TElement } from '../common'; export interface TdTabBarProps { /** @@ -66,9 +66,9 @@ export interface TdTabBarItemProps { */ children?: TNode; /** - * 图标名称。传入对象时透传至 Icon 组件 + * 图标名称 */ - icon?: TNode; + icon?: TElement; /** * 二级菜单 */ From 8af9a1c18c1859b331667fc1fd63f912e3c05131 Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 21:28:27 +0800 Subject: [PATCH 21/22] =?UTF-8?q?chore:=20=E6=9B=B4=E6=94=B9common?= =?UTF-8?q?=E5=88=B0develop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 77adc0f5..3e51c011 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 77adc0f57c1cc126f8f070e5baa72c7fad870564 +Subproject commit 3e51c01173a3a30cefe60dae7e802231c787d410 From 4b33e275879dd0b85612097bd8b08833777c2afe Mon Sep 17 00:00:00 2001 From: tobytovi Date: Mon, 26 Aug 2024 21:32:17 +0800 Subject: [PATCH 22/22] =?UTF-8?q?refactor(TabBar):=20=E7=AE=80=E5=8C=96?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tab-bar/TabBarItem.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/tab-bar/TabBarItem.tsx b/src/tab-bar/TabBarItem.tsx index 76ea81e4..a2a8dba1 100644 --- a/src/tab-bar/TabBarItem.tsx +++ b/src/tab-bar/TabBarItem.tsx @@ -115,13 +115,9 @@ const TabBarItem = forwardRef((originProps, ref }, `${tabBarItemClass}__content--${theme}`, ); - const tabItemIconCls = cls(`${tabBarItemClass}__icon`); - const tabItemSpreadCls = cls(`${tabBarItemClass}__spread`); - const tabItemSpreadItemCls = cls(`${tabBarItemClass}__spread-item`); const tabItemTextCls = cls(`${tabBarItemClass}__text`, { [`${tabBarItemClass}__text--small`]: icon, }); - const tabItemIconMenuCls = cls(`${tabBarItemClass}__icon-menu`); const transitionClsNames = useTabBarCssTransition({ name: 'spread', @@ -146,7 +142,7 @@ const TabBarItem = forwardRef((originProps, ref onClick={toggle} > {icon && ( -
+
{badgeProps && (badgeProps?.dot || badgeProps?.count) ? ( ) : ( @@ -159,7 +155,7 @@ const TabBarItem = forwardRef((originProps, ref {shouldShowSubTabBar && ( <> -
+
)} {parseTNode(children)} @@ -168,13 +164,13 @@ const TabBarItem = forwardRef((originProps, ref
-
    +
      {subTabBar?.map((child, index) => (
      { e.stopPropagation(); selectChild(child.value || index);