feat(TabBar): TabBar组件对齐 mobile-vue

site/mobile/mobile.config.js

@@ -210,7 +210,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 悬浮按钮',

src/tab-bar/TabBar.tsx

@@ -1,47 +1,59 @@
 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<HTMLDivElement, TabBarProps>((props, ref) => {
-  const { bordered, fixed, onChange, value, defaultValue } = props;
-  const { classPrefix } = useConfig();
-  const name = `${classPrefix}-tab-bar`;
+const TabBar = forwardRef<HTMLDivElement, TabBarProps>((originProps, ref) => {
+  const props = useDefaultProps(originProps, tabBarDefaultProps);
+  const { bordered, fixed, onChange, value, defaultValue, safeAreaInsetBottom, shape, split, theme, children } = props;
+
+  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,
-  });
+  const itemCount = React.Children.count(parseTNode(children));
 
   const memoProviderValues = useMemo(
     () => ({
       defaultIndex,
       activeValue,
       updateChild,
+      shape,
+      split,
+      theme,
+      itemCount,
     }),
-    [defaultIndex, activeValue, updateChild],
+    [defaultIndex, activeValue, updateChild, shape, split, theme, itemCount],
   );
 
   return (
-    <div className={tabBarClass} ref={ref}>
-      <TabBarProvider value={memoProviderValues}>{props.children}</TabBarProvider>
+    <div
+      className={cls(
+        tabBarClass,
+        {
+          [`${tabBarClass}--bordered`]: bordered,
+          [`${tabBarClass}--fixed`]: fixed,
+          [`${tabBarClass}--safe`]: safeAreaInsetBottom,
+        },
+        `${tabBarClass}--${props.shape}`,
+      )}
+      ref={ref}
+      role="tablist"
+    >
+      <TabBarProvider value={memoProviderValues}>{parseTNode(children)}</TabBarProvider>
     </div>
   );
 });
 
-TabBar.defaultProps = {
-  bordered: true,
-  fixed: true,
-};
-
 export default memo(TabBar);

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<number>;
-  activeValue: number | string | (number | string)[];
-  updateChild: ChangeHandler<number | string | (number | string)[], any[]>;
-}>(null);
+export const TabBarContext = createContext<
+  {
+    defaultIndex: MutableRefObject<number>;
+    activeValue: number | string | (number | string)[];
+    updateChild: ChangeHandler<number | string | (number | string)[], any[]>;
+    itemCount: number;
+  } & Pick<TdTabBarProps, 'shape' | 'split' | 'theme'>
+>(null);
 
 export function TabBarProvider({ children, value }) {
   const memoValue = useMemo(() => value, [value]);

src/tab-bar/TabBarItem.tsx

@@ -1,24 +1,34 @@
 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';
 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, 5];
+const defaultBadgeOffset = [0, 0];
 const defaultBadgeMaxCount = 99;
 
-const TabBarItem = forwardRef<HTMLDivElement, TabBarItemProps>((props, ref) => {
+const TabBarItem = forwardRef<HTMLDivElement, TabBarItemProps>((originProps, ref) => {
+  const props = useDefaultProps(originProps, {});
   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 tabBarItemClass = usePrefixClass('tab-bar-item');
+
+  const textNode = useRef<HTMLDivElement>(null);
+
+  const [iconOnly, setIconOnly] = useState(false);
+
   // 组件每次 render 生成一个临时的当前组件唯一值
   const [currentName] = useState<undefined | number | string>(() => {
     if (value) {
@@ -27,9 +37,10 @@ const TabBarItem = forwardRef<HTMLDivElement, TabBarItemProps>((props, ref) => {
     return (defaultIndex.current += 1);
   });
 
-  const { classPrefix } = useConfig();
-
-  const componentName = `${classPrefix}-tab-bar-item`;
+  useEffect(() => {
+    const height = textNode?.current?.clientHeight;
+    setIconOnly(Number(height) === 0);
+  }, [textNode]);
 
   const [isSpread, setIsSpread] = useState(false);
 
@@ -42,6 +53,8 @@ const TabBarItem = forwardRef<HTMLDivElement, TabBarItemProps>((props, ref) => {
 
   const mergedBadgeProps = useMemo(
     () => ({
+      count: 0,
+      dot: false,
       offset: defaultBadgeOffset,
       maxCount: defaultBadgeMaxCount,
       ...badgeProps,
@@ -83,68 +96,92 @@ const TabBarItem = forwardRef<HTMLDivElement, TabBarItemProps>((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(
+    tabBarItemClass,
+    {
+      [`${tabBarItemClass}--split`]: split,
+      [`${tabBarItemClass}--text-only`]: !icon,
+      [`${tabBarItemClass}--crowded`]: crowded,
+    },
+    `${tabBarItemClass}--${shape}`,
+  );
+  const tabItemInnerCls = cls(
+    `${tabBarItemClass}__content`,
+    {
+      [`${tabBarItemClass}__content--checked`]: isChecked,
+    },
+    `${tabBarItemClass}__content--${theme}`,
+  );
+  const tabItemTextCls = cls(`${tabBarItemClass}__text`, {
+    [`${tabBarItemClass}__text--small`]: icon,
   });
-  const tabItemIconCls = cls(`${componentName}__icon`);
-  const tabItemSpreadCls = cls(`${componentName}__spread`);
-  const tabItemSpreadItemCls = cls(`${componentName}__spread-item`);
-  const tabItemTextCls = cls(`${componentName}__text`);
-  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 (
-    <div
-      role="tab"
-      aria-label="TabBar"
-      aria-selected={isChecked}
-      aria-haspopup={shouldShowSubTabBar}
-      className={tabItemCls}
-      ref={ref}
-    >
-      <div className={tabItemInnerCls} onClick={toggle}>
+    <div className={tabItemCls} ref={ref}>
+      <div
+        role="tab"
+        aria-label="TabBar"
+        aria-selected={isChecked}
+        aria-haspopup={shouldShowSubTabBar}
+        className={tabItemInnerCls}
+        onClick={toggle}
+      >
         {icon && (
-          <div className={tabItemIconCls}>
+          <div className={`${tabBarItemClass}__icon`} style={{ height: iconSize }}>
             {badgeProps && (badgeProps?.dot || badgeProps?.count) ? (
-              <Badge content={icon} {...mergedBadgeProps} />
+              <Badge content={iconContent} {...mergedBadgeProps} />
             ) : (
-              icon
+              iconContent
             )}
           </div>
         )}
         {children && (
-          <div className={tabItemTextCls}>
-            {shouldShowSubTabBar && <div className={tabItemIconMenuCls} />}
-            {children}
+          <div ref={textNode} className={tabItemTextCls}>
+            {shouldShowSubTabBar && (
+              <>
+                <Icon name="view-list" size="16" />
+                <div className={`${tabBarItemClass}__icon-menu`} />
+              </>
+            )}
+            {parseTNode(children)}
           </div>
         )}
-
-        <CSSTransition timeout={200} in={showSubTabBar} classNames={transitionClsNames} mountOnEnter unmountOnExit>
-          <ul role="menu" className={tabItemSpreadCls}>
-            {subTabBar?.map((child, index) => (
-              <li
-                key={child.value || index}
-                role="menuitem"
-                aria-label={child.label}
-                className={tabItemSpreadItemCls}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  selectChild(child.value || index);
-                }}
-              >
-                {child.label}
-              </li>
-            ))}
-          </ul>
-        </CSSTransition>
       </div>
+
+      <CSSTransition timeout={200} in={showSubTabBar} classNames={transitionClsNames} mountOnEnter unmountOnExit>
+        <ul role="menu" className={`${tabBarItemClass}__spread`}>
+          {subTabBar?.map((child, index) => (
+            <div
+              key={child.value || index}
+              role="menuitem"
+              aria-label={child.label}
+              className={`${tabBarItemClass}__spread-item`}
+              onClick={(e) => {
+                e.stopPropagation();
+                selectChild(child.value || index);
+              }}
+            >
+              {index !== 0 && <div className={`${tabBarItemClass}__spread-item-split`} />}
+              <div className={`${tabBarItemClass}__spread-item-text`}>{child.label}</div>
+            </div>
+          ))}
+        </ul>
+      </CSSTransition>
     </div>
   );
 });

src/tab-bar/_example/badge-props.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import { TabBar, TabBarItem } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+
+function TabBarBaseDemo() {
+  const list = [
+    { 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');
+
+  const change = (changeValue) => {
+    setValue(changeValue);
+    console.log('TabBar 值改变为：', changeValue);
+  };
+
+  useEffect(() => {
+    console.log('当前值：', value);
+  }, [value]);
+
+  return (
+    <div className="demo-tab-bar">
+      <TabBar value={value} onChange={change} split={false}>
+        {list.map((item, i) => (
+          <TabBarItem
+            key={item.name || i}
+            icon={<Icon name={item.icon} />}
+            value={item.name}
+            badgeProps={item.badgeProps}
+          >
+            {item.text}
+          </TabBarItem>
+        ))}
+      </TabBar>
+    </div>
+  );
+}
+
+export default TabBarBaseDemo;

src/tab-bar/_example/badge-props.jsx → 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: <AppIcon />, badgeProps: { count: 16 } },
-    { name: 'label_2', text: '文字', icon: <AppIcon />, badgeProps: { dot: true } },
-    { name: 'label_3', text: '文字', icon: <AppIcon />, badgeProps: { count: 'New' } },
-    { name: 'label_4', text: '文字', icon: <AppIcon />, badgeProps: { count: '···' } },
+    { 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 (
     <div className="demo-tab-bar">
-      <TabBar value={value} onChange={change}>
+      <TabBar value={value} onChange={change} theme="tag" split={false}>
         {list.map((item, i) => (
-          <TabBarItem key={item.name || i} icon={item.icon} value={item.name} badgeProps={item.badgeProps}>
-            {item.text}
+          <TabBarItem key={item.value || i} icon={<Icon name={item.icon} />} value={item.value}>
+            {item.label}
           </TabBarItem>
         ))}
       </TabBar>