taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,253 +0,0 @@
-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

@@ -1,115 +0,0 @@
-import { ReactNode } from 'react';
-// import { View } from '@tarojs/components'; // Commented out - unused
-import { Size } from '../../../types';
-import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
-
-/** 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 StandardBaseComponentProps {
-  /** 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 StandardBaseComponentProps {
-  /** Tab键值 */
-  tabKey: string;
-  /** Tab标题 */
-  tab: ReactNode;
-  /** Tab内容 */
-  children?: ReactNode;
-  /** 禁用状态 */
-  disabled?: boolean;
-  /** 图标 */
-  icon?: ReactNode;
-  /** 徽标 */
-  badge?: ReactNode;
-  /** 是否强制渲染 */
-  forceRender?: boolean;
-}

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

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

package/src/components/navigation/index.tsx

@@ -1,88 +0,0 @@
-/**
- * Taro-Uno 导航组件库
- * 提供用于页面导航的 UI 组件，包括菜单、标签页、分页、步骤条等
- */
-
-// 导出 Menu 组件
-export { Menu } from './Menu';
-export type { MenuProps, MenuRef, MenuItem, MenuMode, MenuTheme } from './Menu/Menu.types';
-export { menuStyles } from './Menu/Menu.styles';
-
-// 导出 Tabs 组件
-export { Tabs } from './Tabs';
-export type { TabsProps, TabsRef, TabPosition, TabType, TabSize, TabItem, TabPaneProps } from './Tabs/Tabs.types';
-export { tabsStyles } from './Tabs/Tabs.styles';
-
-// 导出 Pagination 组件
-export { Pagination } from './Pagination';
-export type {
-  PaginationProps,
-  PaginationRef,
-  PaginationSize,
-  PaginationPosition,
-  PaginationAlign,
-} from './Pagination/Pagination.types';
-export { paginationStyles } from './Pagination/Pagination.styles';
-
-// 导出 Steps 组件
-export { Steps } from './Steps';
-export type { StepsProps, StepsRef, StepProps, StepStatus, StepDirection } from './Steps/Steps.types';
-export { stepsStyles } from './Steps/Steps.styles';
-
-// 导出 NavBar 组件
-export { NavBar } from './NavBar';
-export type { NavBarProps, NavBarRef, NavBarPosition, NavBarTheme } from './NavBar/NavBar.types';
-export { navBarStyles } from './NavBar/NavBar.styles';
-
-// 导航组件工具函数
-export const NavigationUtils = {
-  /**
-   * 计算分页信息
-   */
-  calculatePagination: (total: number, pageSize: number, current: number) => {
-    const totalPages = Math.ceil(total / pageSize);
-    const start = (current - 1) * pageSize + 1;
-    const end = Math.min(current * pageSize, total);
-
-    return {
-      totalPages,
-      start,
-      end,
-      hasNext: current < totalPages,
-      hasPrev: current > 1,
-    };
-  },
-
-  /**
-   * 生成页码数组
-   */
-  generatePageNumbers: (current: number, totalPages: number, showCount = 7) => {
-    const pages: number[] = [];
-
-    if (totalPages <= showCount) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      const half = Math.floor(showCount / 2);
-      let start = current - half;
-      let end = current + half;
-
-      if (start < 1) {
-        start = 1;
-        end = showCount;
-      }
-
-      if (end > totalPages) {
-        end = totalPages;
-        start = totalPages - showCount + 1;
-      }
-
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-    }
-
-    return pages;
-  },
-};