taro-uno-ui 1.0.0 → 1.0.2

package/src/components/navigation/Menu/Menu.tsx

@@ -1,352 +0,0 @@
-/**
- * Taro-Uno Menu Component
- * 导航菜单组件，支持多种模式、主题和交互功能
- */
-
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import type { ITouchEvent } from '@tarojs/components';
-import { menuStyles } from './Menu.styles';
-import { MenuUtils } from './Menu.utils';
-import { MenuItemComponent } from './MenuItem';
-import { SubMenuComponent } from './SubMenu';
-import type { MenuProps, MenuRef, MenuItem } from './Menu.types';
-
-/** Menu导航菜单组件 */
-export const MenuComponent = forwardRef<MenuRef, MenuProps>((props, ref) => {
-  const {
-    items = [],
-    selectedKeys: controlledSelectedKeys,
-    defaultSelectedKeys = [],
-    openKeys: controlledOpenKeys,
-    defaultOpenKeys = [],
-    mode = 'vertical',
-    theme = 'light',
-    size = 'medium',
-    trigger = 'click',
-    accordion = false,
-    inlineIndent = 24,
-    collapsible = false,
-    collapsed: controlledCollapsed = false,
-    _collapsedIcon,
-    expandIcon,
-    contextMenu = false,
-    onClick,
-    onSelect,
-    onOpenChange,
-    onCollapse,
-    onContextMenu,
-    itemRender,
-    subMenuTitleRender,
-    className,
-    style,
-    accessible = true,
-    accessibilityLabel,
-    accessibilityRole = 'navigation',
-    accessibilityState,
-    ...restProps
-  } = props;
-
-  const menuRef = useRef<any>(null);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(defaultSelectedKeys);
-  const [internalOpenKeys, setInternalOpenKeys] = useState<string[]>(defaultOpenKeys);
-  const [internalCollapsed, setInternalCollapsed] = useState(controlledCollapsed);
-
-  // 处理受控模式
-  const selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : internalSelectedKeys;
-  const openKeys = controlledOpenKeys !== undefined ? controlledOpenKeys : internalOpenKeys;
-  const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;
-
-  // 更新内部状态
-  useEffect(() => {
-    if (controlledSelectedKeys !== undefined) {
-      setInternalSelectedKeys(controlledSelectedKeys);
-    }
-  }, [controlledSelectedKeys]);
-
-  useEffect(() => {
-    if (controlledOpenKeys !== undefined) {
-      setInternalOpenKeys(controlledOpenKeys);
-    }
-  }, [controlledOpenKeys]);
-
-  useEffect(() => {
-    if (controlledCollapsed !== undefined) {
-      setInternalCollapsed(controlledCollapsed);
-    }
-  }, [controlledCollapsed]);
-
-  // 处理菜单项点击
-  const handleItemClick = useCallback(
-    (key: string, event: ITouchEvent) => {
-      const item = MenuUtils.findItem(items, key);
-      if (!item) return;
-
-      onClick?.(key, item, event);
-
-      // 如果是外部链接，使用Taro兼容的方式处理
-      if (item.href) {
-        MenuUtils.handleExternalLink(item);
-        return;
-      }
-
-      // 更新选中状态
-      const newSelectedKeys = [key];
-      if (controlledSelectedKeys === undefined) {
-        setInternalSelectedKeys(newSelectedKeys);
-      }
-      onSelect?.(newSelectedKeys, item);
-    },
-    [items, onClick, onSelect, controlledSelectedKeys],
-  );
-
-  // 处理子菜单展开/收起
-  const handleSubMenuToggle = useCallback(
-    (key: string) => {
-      if (accordion) {
-        // 手风琴模式：关闭其他展开的子菜单
-        const parentItem = MenuUtils.findParentItem(items, key);
-        if (parentItem) {
-          const siblings = parentItem.children?.filter((child) => child.key !== key && child.children) || [];
-          const siblingKeys = siblings.map((sibling) => sibling.key);
-          const newOpenKeys = openKeys.filter((k) => !siblingKeys.includes(k));
-
-          if (openKeys.includes(key)) {
-            const finalOpenKeys = newOpenKeys.filter((k) => k !== key);
-            if (controlledOpenKeys === undefined) {
-              setInternalOpenKeys(finalOpenKeys);
-            }
-            onOpenChange?.(finalOpenKeys);
-          } else {
-            const finalOpenKeys = [...newOpenKeys, key];
-            if (controlledOpenKeys === undefined) {
-              setInternalOpenKeys(finalOpenKeys);
-            }
-            onOpenChange?.(finalOpenKeys);
-          }
-        }
-      } else {
-        // 普通模式：切换当前子菜单
-        if (openKeys.includes(key)) {
-          const newOpenKeys = openKeys.filter((k) => k !== key);
-          if (controlledOpenKeys === undefined) {
-            setInternalOpenKeys(newOpenKeys);
-          }
-          onOpenChange?.(newOpenKeys);
-        } else {
-          const newOpenKeys = [...openKeys, key];
-          if (controlledOpenKeys === undefined) {
-            setInternalOpenKeys(newOpenKeys);
-          }
-          onOpenChange?.(newOpenKeys);
-        }
-      }
-    },
-    [items, openKeys, accordion, controlledOpenKeys, onOpenChange],
-  );
-
-  // 处理折叠
-  const handleCollapse = useCallback(() => {
-    const newCollapsed = !collapsed;
-    if (controlledCollapsed === undefined) {
-      setInternalCollapsed(newCollapsed);
-    }
-    onCollapse?.(newCollapsed);
-  }, [collapsed, controlledCollapsed, onCollapse]);
-
-  // 处理右键菜单
-  const handleContextMenu = useCallback(
-    (event: ITouchEvent) => {
-      if (!contextMenu) return;
-      // 在Taro环境中，event.preventDefault()可能不可用
-      // 这里可以根据实际需求处理
-
-      // 简化的右键菜单逻辑
-      onContextMenu?.('', undefined as any, event);
-    },
-    [contextMenu, onContextMenu],
-  );
-
-  // 渲染菜单项
-  const renderMenuItem = (item: MenuItem, level: number = 0) => {
-    const isSelected = selectedKeys.includes(item.key);
-    const isOpen = openKeys.includes(item.key);
-
-    if (item.children && item.children.length > 0) {
-      return (
-        <SubMenuComponent
-          key={item.key}
-          item={item}
-          level={level}
-          mode={mode}
-          theme={theme}
-          size={size}
-          open={isOpen}
-          trigger={trigger}
-          collapsed={collapsed}
-          inlineIndent={inlineIndent}
-          onToggle={handleSubMenuToggle}
-          onItemClick={handleItemClick}
-          expandIcon={expandIcon}
-          subMenuTitleRender={subMenuTitleRender}
-          itemRender={itemRender}
-        />
-      );
-    }
-
-    return (
-      <MenuItemComponent
-        key={item.key}
-        item={item}
-        level={level}
-        mode={mode}
-        theme={theme}
-        size={size}
-        selected={isSelected}
-        trigger={trigger}
-        collapsed={collapsed}
-        inlineIndent={inlineIndent}
-        onItemClick={handleItemClick}
-        itemRender={itemRender}
-      />
-    );
-  };
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: menuRef.current,
-      getSelectedKeys: () => selectedKeys,
-      setSelectedKeys: (keys: string[]) => {
-        if (controlledSelectedKeys === undefined) {
-          setInternalSelectedKeys(keys);
-        }
-        onSelect?.(keys, MenuUtils.findItem(items, keys[0] || ''));
-      },
-      getOpenKeys: () => openKeys,
-      setOpenKeys: (keys: string[]) => {
-        if (controlledOpenKeys === undefined) {
-          setInternalOpenKeys(keys);
-        }
-        onOpenChange?.(keys);
-      },
-      setCollapsed: (newCollapsed: boolean) => {
-        if (controlledCollapsed === undefined) {
-          setInternalCollapsed(newCollapsed);
-        }
-        onCollapse?.(newCollapsed);
-      },
-      getItem: (key: string) => MenuUtils.findItem(items, key),
-      addItem: (_item: MenuItem, _parentKey?: string) => {
-        // 静态方法，暂不实现
-      },
-      removeItem: (_key: string) => {
-        // 静态方法，暂不实现
-      },
-      updateItem: (_key: string, _newItem: Partial<MenuItem>) => {
-        // 静态方法，暂不实现
-      },
-      expandAll: () => {
-        const allKeys = MenuUtils.flattenItems(items)
-          .filter((item) => item.children && item.children.length > 0)
-          .map((item) => item.key);
-        if (controlledOpenKeys === undefined) {
-          setInternalOpenKeys(allKeys);
-        }
-        onOpenChange?.(allKeys);
-      },
-      collapseAll: () => {
-        if (controlledOpenKeys === undefined) {
-          setInternalOpenKeys([]);
-        }
-        onOpenChange?.([]);
-      },
-      focus: () => {
-        // 在Taro环境中，focus方法可能不可用
-        if (menuRef.current) {
-          // 这里可以根据实际需求实现
-        }
-      },
-      blur: () => {
-        // 在Taro环境中，blur方法可能不可用
-        if (menuRef.current) {
-          // 这里可以根据实际需求实现
-        }
-      },
-    }),
-    [
-      selectedKeys,
-      openKeys,
-      collapsed,
-      items,
-      controlledSelectedKeys,
-      controlledOpenKeys,
-      controlledCollapsed,
-      onSelect,
-      onOpenChange,
-      onCollapse,
-    ],
-  );
-
-  // 无障碍状态
-  const finalAccessibilityState = {
-    expanded: !collapsed,
-    ...accessibilityState,
-  };
-
-  // 生成类名
-  const classNames = [
-    'taro-uno-h5-menu',
-    `taro-uno-h5-menu--${mode}`,
-    `taro-uno-h5-menu--${theme}`,
-    `taro-uno-h5-menu--${size}`,
-    collapsed ? 'taro-uno-h5-menu--collapsed' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // 处理无障碍状态序列化
-  const serializedAccessibilityState = finalAccessibilityState ? JSON.stringify(finalAccessibilityState) : undefined;
-
-  return (
-    <View
-      ref={menuRef}
-      style={menuStyles.getContainerStyle({
-        mode,
-        theme,
-        size,
-        collapsed,
-        style,
-      })}
-      className={classNames}
-      accessible={accessible}
-      aria-label={accessibilityLabel}
-      aria-role={accessibilityRole}
-      aria-state={serializedAccessibilityState}
-      onLongPress={contextMenu ? handleContextMenu : undefined}
-      {...restProps}
-    >
-      {/* 折叠按钮 */}
-      {collapsible && (
-        <View
-          style={menuStyles.getCollapseButtonStyle({ size, theme, collapsed })}
-          onClick={handleCollapse}
-          data-testid="collapse-button"
-        >
-          <Text>{collapsed ? '»' : '«'}</Text>
-        </View>
-      )}
-
-      {/* 菜单项 */}
-      {items.map((item) => renderMenuItem(item))}
-    </View>
-  );
-});
-
-/** Menu组件显示名称 */
-MenuComponent.displayName = 'Menu';
-
-/** 导出Menu组件 */
-export const Menu = MenuComponent;

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

@@ -1,231 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ITouchEvent } from '@tarojs/components';
-
-/** 菜单项类型 */
-export interface MenuItem {
-  /** 菜单项唯一标识 */
-  key: string;
-  /** 菜单项标题 */
-  label: ReactNode;
-  /** 菜单项图标 */
-  icon?: ReactNode;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 子菜单 */
-  children?: MenuItem[];
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-  /** 路由路径 */
-  path?: string;
-  /** 外部链接 */
-  href?: string;
-  /** 目标窗口 */
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  /** 是否危险操作 */
-  danger?: boolean;
-  /** 是否分组标题 */
-  isGroup?: boolean;
-  /** 工具提示 */
-  tooltip?: string;
-  /** 额外信息 */
-  extra?: ReactNode;
-  /** 徽章 */
-  badge?: number | string;
-  /** 是否选中 */
-  selected?: boolean;
-  /** 是否展开 */
-  expanded?: boolean;
-}
-
-/** 菜单模式 */
-export type MenuMode = 'vertical' | 'horizontal' | 'inline';
-
-/** 菜单主题 */
-export type MenuTheme = 'light' | 'dark';
-
-/** 菜单尺寸 */
-export type MenuSize = 'small' | 'medium' | 'large';
-
-/** 触发方式 */
-export type MenuTrigger = 'hover' | 'click';
-
-/** 菜单组件属性 */
-export interface MenuProps {
-  /** 菜单项数据 */
-  items: MenuItem[];
-  /** 当前选中的菜单项 */
-  selectedKeys?: string[];
-  /** 默认选中的菜单项 */
-  defaultSelectedKeys?: string[];
-  /** 展开的子菜单 */
-  openKeys?: string[];
-  /** 默认展开的子菜单 */
-  defaultOpenKeys?: string[];
-  /** 菜单模式 */
-  mode?: MenuMode;
-  /** 菜单主题 */
-  theme?: MenuTheme;
-  /** 菜单尺寸 */
-  size?: MenuSize;
-  /** 子菜单触发方式 */
-  trigger?: MenuTrigger;
-  /** 是否只展开一个父级菜单 */
-  accordion?: boolean;
-  /** 是否内联缩进 */
-  inlineIndent?: number;
-  /** 是否可折叠 */
-  collapsible?: boolean;
-  /** 是否折叠 */
-  collapsed?: boolean;
-  /** 折叠图标 */
-  _collapsedIcon?: ReactNode;
-  /** 展开图标 */
-  expandIcon?: ReactNode | ((_props: { isOpen: boolean; isSubMenu: boolean }) => ReactNode);
-  /** 是否显示右键菜单 */
-  contextMenu?: boolean;
-  /** 菜单项点击事件 */
-  onClick?: (_key: string, item: MenuItem, event: ITouchEvent) => void;
-  /** 菜单项选中变化事件 */
-  onSelect?: (_selectedKeys: string[], item: MenuItem | null) => void;
-  /** 子菜单展开/收起事件 */
-  onOpenChange?: (_openKeys: string[]) => void;
-  /** 折叠状态变化事件 */
-  onCollapse?: (_collapsed: boolean) => void;
-  /** 右键菜单事件 */
-  onContextMenu?: (_key: string, item: MenuItem, event: ITouchEvent) => void;
-  /** 自定义渲染菜单项 */
-  itemRender?: (_item: MenuItem) => ReactNode;
-  /** 自定义渲染子菜单标题 */
-  subMenuTitleRender?: (_item: MenuItem) => ReactNode;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 自定义类名 */
-  className?: string;
-  /** 无障碍支持 */
-  accessible?: boolean;
-  /** 无障碍标签 */
-  accessibilityLabel?: string;
-  /** 无障碍角色 */
-  accessibilityRole?: 'navigation' | 'menu' | 'menubar';
-  /** 无障碍状态 */
-  accessibilityState?: {
-    disabled?: boolean;
-    selected?: boolean;
-    expanded?: boolean;
-    busy?: boolean;
-    checked?: boolean;
-  };
-}
-
-/** 菜单引用接口 */
-export interface MenuRef {
-  /** 获取当前选中的菜单项 */
-  getSelectedKeys: () => string[];
-  /** 设置选中的菜单项 */
-  setSelectedKeys: (_keys: string[]) => void;
-  /** 获取展开的子菜单 */
-  getOpenKeys: () => string[];
-  /** 设置展开的子菜单 */
-  setOpenKeys: (_keys: string[]) => void;
-  /** 折叠/展开菜单 */
-  setCollapsed: (_collapsed: boolean) => void;
-  /** 获取菜单项数据 */
-  getItem: (_key: string) => MenuItem | null;
-  /** 添加菜单项 */
-  addItem: (_item: MenuItem, parentKey?: string) => void;
-  /** 删除菜单项 */
-  removeItem: (_key: string) => void;
-  /** 更新菜单项 */
-  updateItem: (_key: string, newItem: Partial<MenuItem>) => void;
-  /** 展开所有 */
-  expandAll: () => void;
-  /** 折叠所有 */
-  collapseAll: () => void;
-  /** 获取菜单元素 */
-  element: any;
-  /** 聚焦菜单 */
-  focus: () => void;
-  /** 失焦菜单 */
-  blur: () => void;
-}
-
-/** 菜单配置接口 */
-export interface MenuConfig {
-  /** 默认菜单模式 */
-  defaultMode?: MenuMode;
-  /** 默认菜单主题 */
-  defaultTheme?: MenuTheme;
-  /** 默认菜单尺寸 */
-  defaultSize?: MenuSize;
-  /** 默认触发方式 */
-  defaultTrigger?: MenuTrigger;
-  /** 默认内联缩进 */
-  defaultInlineIndent?: number;
-  /** 是否默认可折叠 */
-  defaultCollapsible?: boolean;
-  /** 是否默认手风琴模式 */
-  defaultAccordion?: boolean;
-  /** 动画持续时间 */
-  animationDuration?: number;
-  /** 响应式断点 */
-  responsiveBreakpoint?: number;
-  /** 最大展开深度 */
-  maxExpandDepth?: number;
-}
-
-/** 默认菜单配置 */
-export const DEFAULT_MENU_CONFIG: MenuConfig = {
-  defaultMode: 'vertical',
-  defaultTheme: 'light',
-  defaultSize: 'medium',
-  defaultTrigger: 'click',
-  defaultInlineIndent: 24,
-  defaultCollapsible: false,
-  defaultAccordion: false,
-  animationDuration: 300,
-  responsiveBreakpoint: 768,
-  maxExpandDepth: 3,
-};
-
-/** 菜单项样式类型 */
-export interface MenuItemStyles {
-  /** 容器样式 */
-  container: React.CSSProperties;
-  /** 菜单项样式 */
-  item: React.CSSProperties;
-  /** 选中样式 */
-  selected: React.CSSProperties;
-  /** 禁用样式 */
-  disabled: React.CSSProperties;
-  /** 悬停样式 */
-  hover: React.CSSProperties;
-  /** 危险样式 */
-  danger: React.CSSProperties;
-  /** 子菜单样式 */
-  subMenu: React.CSSProperties;
-  /** 分组标题样式 */
-  groupTitle: React.CSSProperties;
-  /** 图标样式 */
-  icon: React.CSSProperties;
-  /** 标签样式 */
-  label: React.CSSProperties;
-  /** 额外信息样式 */
-  extra: React.CSSProperties;
-  /** 徽章样式 */
-  badge: React.CSSProperties;
-  /** 折叠按钮样式 */
-  collapseButton: React.CSSProperties;
-  /** 响应式样式 */
-  responsive: React.CSSProperties;
-}
-
-/** 菜单尺寸样式映射 */
-export type MenuSizeStyles = Record<MenuSize, Partial<MenuItemStyles>>;
-
-/** 菜单主题样式映射 */
-export type MenuThemeStyles = Record<MenuTheme, Partial<MenuItemStyles>>;
-
-/** 菜单模式样式映射 */
-export type MenuModeStyles = Record<MenuMode, Partial<MenuItemStyles>>;