taro-uno-ui 0.9.0-beta

package/src/components/navigation/Tabs/Tabs.tsx

@@ -0,0 +1,253 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import { tabsStyles } from './Tabs.styles';
+import type { TabsProps, TabsRef, TabPosition, TabType, TabSize, TabItem } from './Tabs.types';
+
+/** Tabs组件 */
+export const TabsComponent = forwardRef<TabsRef, TabsProps>((props, ref) => {
+  const {
+    items,
+    activeKey: controlledActiveKey,
+    defaultActiveKey,
+    position = 'top',
+    type = 'line',
+    size = 'default',
+    editable = false,
+    addable = false,
+    animated = true,
+    centered = false,
+    forceRender = false,
+    destroyInactiveTabPane = false,
+    onTabClick,
+    onChange,
+    onAdd,
+    onRemove,
+    onEdit,
+    renderTabBar,
+    renderTab,
+    renderContent,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const tabsRef = useRef<any>(null);
+  const [internalItems, setInternalItems] = useState<TabItem[]>(items || []);
+  const [activeKey, setActiveKey] = useState<string>(defaultActiveKey || items?.[0]?.key || '');
+  const [internalPosition, setInternalPosition] = useState<TabPosition>(position);
+  const [internalType, setInternalType] = useState<TabType>(type);
+  const [internalSize, setInternalSize] = useState<TabSize>(size);
+
+  // 处理受控模式
+  useEffect(() => {
+    if (controlledActiveKey !== undefined) {
+      setActiveKey(controlledActiveKey);
+    }
+  }, [controlledActiveKey]);
+
+  useEffect(() => {
+    setInternalItems(items || []);
+  }, [items]);
+
+  useEffect(() => {
+    setInternalPosition(position);
+  }, [position]);
+
+  useEffect(() => {
+    setInternalType(type);
+  }, [type]);
+
+  useEffect(() => {
+    setInternalSize(size);
+  }, [size]);
+
+  // 处理Tab点击
+  const handleTabClick = useCallback(
+    (key: string, event: React.MouseEvent) => {
+      if (controlledActiveKey === undefined) {
+        setActiveKey(key);
+      }
+      onTabClick?.(key, event);
+      onChange?.(key);
+    },
+    [controlledActiveKey, onTabClick, onChange],
+  );
+
+  // 处理添加Tab
+  const handleAdd = useCallback(() => {
+    onAdd?.();
+    onEdit?.('', 'add');
+  }, [onAdd, onEdit]);
+
+  // 处理删除Tab
+  const handleRemove = useCallback(
+    (key: string, event: React.MouseEvent) => {
+      event.stopPropagation();
+      onRemove?.(key);
+      onEdit?.(key, 'remove');
+    },
+    [onRemove, onEdit],
+  );
+
+  // 渲染Tab栏
+  const renderTabBarInternal = () => {
+    if (renderTabBar) {
+      return renderTabBar(props);
+    }
+
+    return (
+      <View className="taro-uno-tabs__tab-bar" style={tabsStyles['getTabBarStyle'](internalPosition, internalType)}>
+        {internalItems.map((item, index) => {
+          const isActive = activeKey === item.key;
+          const isDisabled = item.disabled;
+
+          return (
+            <View
+              key={item.key}
+              className={`taro-uno-tabs__tab-item ${isActive ? 'taro-uno-tabs__tab-item--active' : ''} ${
+                isDisabled ? 'taro-uno-tabs__tab-item--disabled' : ''
+              }`}
+              style={tabsStyles['getTabItemStyle']({
+                active: isActive,
+                disabled: isDisabled || false,
+                type: internalType,
+                size: internalSize,
+                position: internalPosition,
+              })}
+              onClick={(e) => !isDisabled && handleTabClick(item.key, e)}
+            >
+              {renderTab ? (
+                renderTab(item, index)
+              ) : (
+                <>
+                  {item.icon && <View className="taro-uno-tabs__tab-icon">{item.icon}</View>}
+                  <Text className="taro-uno-tabs__tab-title">{item.title}</Text>
+                  {item.badge && (
+                    <View className="taro-uno-tabs__tab-badge" style={tabsStyles['getBadgeStyle']()}>
+                      {item.badge}
+                    </View>
+                  )}
+                  {editable && internalItems.length > 1 && (
+                    <View
+                      className="taro-uno-tabs__tab-remove"
+                      style={tabsStyles['getRemoveButtonStyle']()}
+                      onClick={(e) => handleRemove(item.key, e)}
+                    >
+                      ×
+                    </View>
+                  )}
+                </>
+              )}
+            </View>
+          );
+        })}
+        {addable && (
+          <View
+            className="taro-uno-tabs__tab-add"
+            style={tabsStyles['getAddButtonStyle'](internalSize)}
+            onClick={handleAdd}
+          >
+            +
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  // 渲染内容区域
+  const renderContentInternal = () => {
+    return (
+      <View className="taro-uno-tabs__content" style={tabsStyles['getContentStyle'](internalPosition, animated)}>
+        {internalItems.map((item, index) => {
+          const isActive = activeKey === item.key;
+
+          // 如果销毁隐藏的Tab且不活跃，则不渲染
+          if (destroyInactiveTabPane && !isActive && !forceRender) {
+            return null;
+          }
+
+          return (
+            <View
+              key={item.key}
+              className={`taro-uno-tabs__tab-pane ${isActive ? 'taro-uno-tabs__tab-pane--active' : ''}`}
+              style={tabsStyles['getTabContentStyle'](isActive, animated)}
+            >
+              {renderContent ? renderContent(item, index) : item.content}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  // 计算样式
+  const tabsStyle = tabsStyles['getBaseStyle']({
+    position: internalPosition,
+    type: internalType,
+    size: internalSize,
+    centered,
+    style: style || {},
+  } as any);
+
+  // 计算类名
+  const tabsClassName = tabsStyles['getClassName']({
+    position: internalPosition,
+    type: internalType,
+    size: internalSize,
+    centered,
+    className: className || '',
+  } as any);
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: tabsRef.current,
+      getActiveKey: () => activeKey,
+      getItems: () => internalItems,
+      setActiveKey: (key) => {
+        if (controlledActiveKey === undefined) {
+          setActiveKey(key);
+        }
+      },
+      addItem: (item, index) => {
+        const newItems = [...internalItems];
+        if (index !== undefined) {
+          newItems.splice(index, 0, item);
+        } else {
+          newItems.push(item);
+        }
+        setInternalItems(newItems);
+      },
+      removeItem: (key) => {
+        const newItems = internalItems.filter((item) => item.key !== key);
+        setInternalItems(newItems);
+        if (activeKey === key && newItems.length > 0) {
+          setActiveKey(newItems[0]?.key || '');
+        }
+      },
+      updateItem: (key, newItem) => {
+        const newItems = internalItems.map((item) => (item.key === key ? { ...item, ...newItem } : item));
+        setInternalItems(newItems);
+      },
+      scrollToTab: (_key) => {
+        // 这里需要实现滚动到指定Tab的逻辑
+        // 可以使用scrollIntoView或其他滚动方法
+      },
+    }),
+    [activeKey, internalItems, controlledActiveKey],
+  );
+
+  return (
+    <View ref={tabsRef} className={tabsClassName} style={tabsStyle} {...restProps}>
+      {renderTabBarInternal()}
+      {renderContentInternal()}
+    </View>
+  );
+});
+
+/** Tabs组件显示名称 */
+TabsComponent.displayName = 'Tabs';
+
+/** 导出Tabs组件 */
+export const Tabs = TabsComponent;

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -0,0 +1,114 @@
+import { ReactNode } from 'react';
+// import { View } from '@tarojs/components'; // Commented out - unused
+import { BaseComponentProps, Size } from '../../../types';
+
+/** Tab位置 */
+export type TabPosition = 'top' | 'right' | 'bottom' | 'left';
+
+/** Tab类型 */
+export type TabType = 'line' | 'card' | 'segment';
+
+/** Tab尺寸 */
+export type TabSize = Size | 'small' | 'medium' | 'large';
+
+/** Tab项接口 */
+export interface TabItem {
+  /** 键值 */
+  key: string;
+  /** 标题 */
+  title: ReactNode;
+  /** 内容 */
+  content?: ReactNode;
+  /** 禁用状态 */
+  disabled?: boolean;
+  /** 图标 */
+  icon?: ReactNode;
+  /** 徽标 */
+  badge?: ReactNode;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}
+
+/** Tabs组件引用 */
+export interface TabsRef {
+  /** 获取元素引用 */
+  element: any | null;
+  /** 获取当前激活的键值 */
+  getActiveKey: () => string;
+  /** 获取所有Tab项 */
+  getItems: () => TabItem[];
+  /** 设置激活的键值 */
+  setActiveKey: (_key: string) => void;
+  /** 添加Tab项 */
+  addItem: (_item: TabItem, index?: number) => void;
+  /** 移除Tab项 */
+  removeItem: (_key: string) => void;
+  /** 更新Tab项 */
+  updateItem: (_key: string, newItem: Partial<TabItem>) => void;
+  /** 滚动到Tab项 */
+  scrollToTab: (_key: string) => void;
+}
+
+/** Tabs组件属性 */
+export interface TabsProps extends BaseComponentProps {
+  /** Tab项列表 */
+  items: TabItem[];
+  /** 激活的键值 */
+  activeKey?: string;
+  /** 默认激活的键值 */
+  defaultActiveKey?: string;
+  /** Tab位置 */
+  position?: TabPosition;
+  /** Tab类型 */
+  type?: TabType;
+  /** Tab尺寸 */
+  size?: TabSize;
+  /** 是否可编辑 */
+  editable?: boolean;
+  /** 是否可添加 */
+  addable?: boolean;
+  /** 是否动画效果 */
+  animated?: boolean;
+  /** 是否居中显示 */
+  centered?: boolean;
+  /** 是否强制渲染 */
+  forceRender?: boolean;
+  /** 是否销毁隐藏的Tab */
+  destroyInactiveTabPane?: boolean;
+  /** 点击Tab事件 */
+  onTabClick?: (_key: string, event: React.MouseEvent) => void;
+  /** 切换Tab事件 */
+  onChange?: (_key: string) => void;
+  /** 添加Tab事件 */
+  onAdd?: () => void;
+  /** 删除Tab事件 */
+  onRemove?: (_key: string) => void;
+  /** 编辑Tab事件 */
+  onEdit?: (_key: string, action: 'add' | 'remove') => void;
+  /** 自定义Tab渲染 */
+  renderTabBar?: (_props: TabsProps) => ReactNode;
+  /** 自定义Tab项渲染 */
+  renderTab?: (_item: TabItem, index: number) => ReactNode;
+  /** 自定义内容渲染 */
+  renderContent?: (_item: TabItem, index: number) => ReactNode;
+}
+
+/** TabPane组件属性 */
+export interface TabPaneProps extends BaseComponentProps {
+  /** Tab键值 */
+  tabKey: string;
+  /** Tab标题 */
+  tab: ReactNode;
+  /** Tab内容 */
+  children?: ReactNode;
+  /** 禁用状态 */
+  disabled?: boolean;
+  /** 图标 */
+  icon?: ReactNode;
+  /** 徽标 */
+  badge?: ReactNode;
+  /** 是否强制渲染 */
+  forceRender?: boolean;
+}

package/src/components/navigation/Tabs/index.tsx

@@ -0,0 +1,3 @@
+export { Tabs, TabsComponent } from './Tabs';
+export type { TabsProps, TabsRef, TabPosition, TabType, TabSize, TabItem, TabPaneProps } from './Tabs.types';
+export { tabsStyles } from './Tabs.styles';