taro-uno-ui 1.0.0 → 1.0.2

package/src/components/navigation/NavBar/NavBar.test.tsx

@@ -1,287 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent, act } from '@testing-library/react'
-import { vi } from 'vitest'
-import { NavBar } from './NavBar'
-import type { NavBarProps, NavBarRef } from './NavBar.types'
-
-describe('NavBar Component', () => {
-  const defaultProps: NavBarProps = {
-    title: '页面标题',
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders navbar with default props', () => {
-      render(<NavBar {...defaultProps} />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('renders navbar with custom title as React node', () => {
-      const customTitle = <span>自定义标题</span>
-      render(<NavBar {...defaultProps} title={customTitle} />)
-
-      expect(screen.getByText('自定义标题')).toBeInTheDocument()
-    })
-
-    it('renders navbar with left content', () => {
-      render(<NavBar {...defaultProps} left={<span>左侧</span>} />)
-
-      expect(screen.getByText('左侧')).toBeInTheDocument()
-    })
-
-    it('renders navbar with right content', () => {
-      render(<NavBar {...defaultProps} right={<span>右侧</span>} />)
-
-      expect(screen.getByText('右侧')).toBeInTheDocument()
-    })
-
-    it('renders navbar with back arrow', () => {
-      render(<NavBar {...defaultProps} backArrow={true} />)
-
-      expect(screen.getByText('←')).toBeInTheDocument()
-    })
-
-    it('renders navbar with custom back icon', () => {
-      const customBackIcon = <span>返回</span>
-      render(<NavBar {...defaultProps} backArrow={true} backIcon={customBackIcon} />)
-
-      expect(screen.getByText('返回')).toBeInTheDocument()
-    })
-
-    it('renders navbar without border', () => {
-      render(<NavBar {...defaultProps} border={false} />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('renders navbar with transparent background', () => {
-      render(<NavBar {...defaultProps} transparent={true} />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('renders navbar with dark theme', () => {
-      render(<NavBar {...defaultProps} theme="dark" />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('renders navbar without placeholder', () => {
-      render(<NavBar {...defaultProps} placeholder={false} />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('handles back button click with custom handler', () => {
-      const onBack = vi.fn()
-      render(<NavBar {...defaultProps} backArrow={true} onBack={onBack} />)
-
-      fireEvent.click(screen.getByText('←'))
-
-      expect(onBack).toHaveBeenCalled()
-    })
-
-    it('handles left content click', () => {
-      const LeftComponent = () => <button onClick={() => {}}>左侧按钮</button>
-      render(<NavBar {...defaultProps} left={<LeftComponent />} />)
-
-      fireEvent.click(screen.getByText('左侧按钮'))
-    })
-
-    it('handles right content click', () => {
-      const RightComponent = () => <button onClick={() => {}}>右侧按钮</button>
-      render(<NavBar {...defaultProps} right={<RightComponent />} />)
-
-      fireEvent.click(screen.getByText('右侧按钮'))
-    })
-  })
-
-  describe('Ref Methods', () => {
-    it('provides ref methods', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} ref={ref} />)
-
-      expect(ref.current).toBeTruthy()
-      expect(ref.current?.setTitle).toBeDefined()
-      expect(ref.current?.setLeft).toBeDefined()
-      expect(ref.current?.setRight).toBeDefined()
-      expect(ref.current?.showBackArrow).toBeDefined()
-      expect(ref.current?.hideBackArrow).toBeDefined()
-    })
-
-    it('setTitle updates the title', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} ref={ref} />)
-
-      act(() => {
-        ref.current?.setTitle('新标题')
-      })
-
-      expect(screen.getByText('新标题')).toBeInTheDocument()
-    })
-
-    it('setLeft updates the left content', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} ref={ref} />)
-
-      act(() => {
-        ref.current?.setLeft(<span>新的左侧</span>)
-      })
-
-      expect(screen.getByText('新的左侧')).toBeInTheDocument()
-    })
-
-    it('setRight updates the right content', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} ref={ref} />)
-
-      act(() => {
-        ref.current?.setRight(<span>新的右侧</span>)
-      })
-
-      expect(screen.getByText('新的右侧')).toBeInTheDocument()
-    })
-
-    it('showBackArrow displays back arrow', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} ref={ref} />)
-
-      act(() => {
-        ref.current?.showBackArrow()
-      })
-
-      expect(screen.getByText('←')).toBeInTheDocument()
-    })
-
-    it('hideBackArrow hides back arrow', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} backArrow={true} ref={ref} />)
-
-      expect(screen.getByText('←')).toBeInTheDocument()
-
-      act(() => {
-        ref.current?.hideBackArrow()
-      })
-
-      expect(screen.queryByText('←')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Responsive Design', () => {
-    it('handles safe area inset top', () => {
-      render(<NavBar {...defaultProps} safeAreaInsetTop={true} />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('handles fixed positioning', () => {
-      render(<NavBar {...defaultProps} position="fixed" />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('handles static positioning', () => {
-      render(<NavBar {...defaultProps} position="static" />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-
-    it('handles different themes', () => {
-      const { rerender } = render(<NavBar {...defaultProps} theme="light" />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-
-      rerender(<NavBar {...defaultProps} theme="dark" />)
-
-      expect(screen.getByText('页面标题')).toBeInTheDocument()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('handles empty title', () => {
-      render(<NavBar title={undefined} />)
-
-      const navbar = screen.queryByText('页面标题')
-      expect(navbar).not.toBeInTheDocument()
-    })
-
-    it('handles very long title', () => {
-      const longTitle = '这是一个非常非常长的页面标题，用于测试标题截断功能'
-      render(<NavBar title={longTitle} />)
-
-      expect(screen.getByText(longTitle)).toBeInTheDocument()
-    })
-
-    it('handles complex left content', () => {
-      const complexLeft = (
-        <div>
-          <span>图标</span>
-          <span>文字</span>
-          <button>按钮</button>
-        </div>
-      )
-      render(<NavBar {...defaultProps} left={complexLeft} />)
-
-      expect(screen.getByText('图标')).toBeInTheDocument()
-      expect(screen.getByText('文字')).toBeInTheDocument()
-      expect(screen.getByText('按钮')).toBeInTheDocument()
-    })
-
-    it('handles complex right content', () => {
-      const complexRight = (
-        <div>
-          <button>设置</button>
-          <button>分享</button>
-        </div>
-      )
-      render(<NavBar {...defaultProps} right={complexRight} />)
-
-      expect(screen.getByText('设置')).toBeInTheDocument()
-      expect(screen.getByText('分享')).toBeInTheDocument()
-    })
-  })
-
-  describe('Performance', () => {
-    it('renders efficiently with multiple navbars', () => {
-      const { rerender } = render(
-        <div>
-          {[1, 2, 3].map(i => (
-            <NavBar key={i} title={`页面${i}`} />
-          ))}
-        </div>
-      )
-
-      expect(screen.getAllByText(/页面\d/)).toHaveLength(3)
-
-      rerender(
-        <div>
-          {[1, 2, 3, 4].map(i => (
-            <NavBar key={i} title={`页面${i}`} />
-          ))}
-        </div>
-      )
-
-      expect(screen.getAllByText(/页面\d/)).toHaveLength(4)
-    })
-
-    it('handles rapid state changes efficiently', () => {
-      const ref = React.createRef<NavBarRef>()
-      render(<NavBar {...defaultProps} ref={ref} />)
-
-      // 快速更改标题
-      act(() => {
-        for (let i = 0; i < 10; i++) {
-          ref.current?.setTitle(`标题${i}`)
-        }
-      })
-
-      expect(screen.getByText('标题9')).toBeInTheDocument()
-    })
-  })
-})

package/src/components/navigation/NavBar/NavBar.tsx

@@ -1,228 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { navBarStyles } from './NavBar.styles';
-import type { NavBarProps, NavBarRef } from './NavBar.types';
-
-/** NavBar组件 */
-export const NavBarComponent = forwardRef<NavBarRef, NavBarProps>((props, ref) => {
-  const {
-    title,
-    left,
-    right,
-    backArrow = false,
-    backIcon,
-    onBack,
-    position = 'fixed',
-    theme = 'light',
-    backgroundColor,
-    transparent = false,
-    border = true,
-    placeholder = true,
-    safeAreaInsetTop = true,
-    className,
-    style,
-    ...restProps
-  } = props;
-
-  const [internalTitle, setInternalTitle] = useState(title);
-  const [internalLeft, setInternalLeft] = useState(left);
-  const [internalRight, setInternalRight] = useState(right);
-  const [internalBackArrow, setInternalBackArrow] = useState(backArrow);
-
-  const navBarRef = useRef<any>(null);
-
-  // 同步外部状态
-  useEffect(() => {
-    setInternalTitle(title);
-  }, [title]);
-
-  useEffect(() => {
-    setInternalLeft(left);
-  }, [left]);
-
-  useEffect(() => {
-    setInternalRight(right);
-  }, [right]);
-
-  useEffect(() => {
-    setInternalBackArrow(backArrow);
-  }, [backArrow]);
-
-  // 处理返回按钮点击
-  const handleBack = useCallback(() => {
-    onBack?.();
-    // 如果没有提供onBack，默认执行页面返回
-    if (!onBack && typeof window !== 'undefined' && window.history) {
-      window.history.back();
-    }
-  }, [onBack]);
-
-  // 渲染返回按钮
-  const renderBackArrow = () => {
-    if (!internalBackArrow) return null;
-
-    return (
-      <View
-        className="taro-uno-navbar__back-arrow"
-        onClick={handleBack}
-        style={{
-          padding: '8px 12px',
-          backgroundColor: 'transparent',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          transition: 'background-color 0.3s ease',
-        }}
-      >
-        <Text
-          className="taro-uno-navbar__back-icon"
-          style={{
-            fontSize: '16px',
-            color: theme === 'dark' ? '#ffffff' : '#000000',
-          }}
-        >
-          {backIcon || '←'}
-        </Text>
-      </View>
-    );
-  };
-
-  // 计算容器样式
-  const getContainerStyle = () => {
-    const baseStyle = {
-      ...navBarStyles.container,
-      backgroundColor: backgroundColor || (transparent ? 'transparent' : theme === 'dark' ? '#1a1a1a' : '#ffffff'),
-      ...(border && !transparent ? navBarStyles.border : {}),
-      ...(position === 'fixed' ? navBarStyles.fixed : {}),
-      ...style,
-    };
-
-    if (position === 'fixed' && safeAreaInsetTop) {
-      return {
-        ...baseStyle,
-        paddingTop: '44px',
-      };
-    }
-
-    return baseStyle;
-  };
-
-  // 计算内容区域样式
-  const getContentStyle = () => {
-    const baseStyle = {
-      height: '44px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: '0 16px',
-      boxSizing: 'border-box' as const,
-    };
-
-    if (position === 'fixed' && safeAreaInsetTop) {
-      return {
-        ...baseStyle,
-        height: '88px',
-        paddingTop: '44px',
-      };
-    }
-
-    return baseStyle;
-  };
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: navBarRef.current,
-      setTitle: (newTitle) => {
-        setInternalTitle(newTitle);
-      },
-      setLeft: (newLeft) => {
-        setInternalLeft(newLeft);
-      },
-      setRight: (newRight) => {
-        setInternalRight(newRight);
-      },
-      showBackArrow: () => {
-        setInternalBackArrow(true);
-      },
-      hideBackArrow: () => {
-        setInternalBackArrow(false);
-      },
-    }),
-    [],
-  );
-
-  // 计算类名
-  const containerClassName = [
-    'taro-uno-navbar',
-    `taro-uno-navbar--${position}`,
-    `taro-uno-navbar--${theme}`,
-    transparent ? 'taro-uno-navbar--transparent' : '',
-    border ? 'taro-uno-navbar--border' : '',
-    className || '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <>
-      {/* 固定定位时的占位元素 */}
-      {position === 'fixed' && placeholder && (
-        <View
-          className="taro-uno-navbar__placeholder"
-          style={{
-            height: safeAreaInsetTop ? '88px' : '44px',
-            backgroundColor: 'transparent',
-          }}
-        />
-      )}
-
-      {/* NavBar容器 */}
-      <View ref={navBarRef} className={containerClassName} style={getContainerStyle()} {...restProps}>
-        {/* 内容区域 */}
-        <View className="taro-uno-navbar__content" style={getContentStyle()}>
-          {/* 左侧区域 */}
-          <View className="taro-uno-navbar__left" style={navBarStyles.left}>
-            {internalLeft}
-            {!internalLeft && renderBackArrow()}
-          </View>
-
-          {/* 中间区域 */}
-          <View className="taro-uno-navbar__center" style={navBarStyles.center}>
-            <Text
-              className="taro-uno-navbar__title"
-              style={{
-                fontSize: '17px',
-                fontWeight: '600',
-                color: theme === 'dark' ? '#ffffff' : '#000000',
-                textAlign: 'center',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-              numberOfLines={1}
-            >
-              {internalTitle}
-            </Text>
-          </View>
-
-          {/* 右侧区域 */}
-          <View className="taro-uno-navbar__right" style={navBarStyles.right}>
-            {internalRight}
-          </View>
-        </View>
-      </View>
-    </>
-  );
-});
-
-/** NavBar组件显示名称 */
-NavBarComponent.displayName = 'NavBar';
-
-/** 导出NavBar组件 */
-export const NavBar = NavBarComponent;
-export default NavBarComponent;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
-
-/** NavBar位置 */
-export type NavBarPosition = 'top' | 'fixed' | 'static';
-
-/** NavBar主题 */
-export type NavBarTheme = 'light' | 'dark';
-
-/** NavBar引用 */
-export interface NavBarRef {
-  /** 获取元素引用 */
-  element: any | null;
-  /** 设置标题 */
-  setTitle: (_title: React.ReactNode) => void;
-  /** 设置左侧内容 */
-  setLeft: (_left: React.ReactNode) => void;
-  /** 设置右侧内容 */
-  setRight: (_right: React.ReactNode) => void;
-  /** 显示返回按钮 */
-  showBackArrow: () => void;
-  /** 隐藏返回按钮 */
-  hideBackArrow: () => void;
-}
-
-/** NavBar组件属性 */
-export interface NavBarProps extends StandardBaseComponentProps {
-  /** 标题 */
-  title?: React.ReactNode;
-  /** 左侧内容 */
-  left?: React.ReactNode;
-  /** 右侧内容 */
-  right?: React.ReactNode;
-  /** 是否显示返回按钮 */
-  backArrow?: boolean;
-  /** 自定义返回按钮 */
-  backIcon?: React.ReactNode;
-  /** 返回按钮点击事件 */
-  onBack?: () => void;
-  /** 位置 */
-  position?: NavBarPosition;
-  /** 主题 */
-  theme?: NavBarTheme;
-  /** 背景色 */
-  backgroundColor?: string;
-  /** 是否透明背景 */
-  transparent?: boolean;
-  /** 是否显示边框 */
-  border?: boolean;
-  /** 固定定位时的占位高度 */
-  placeholder?: boolean;
-  /** 安全区域适配 */
-  safeAreaInsetTop?: boolean;
-}

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

@@ -1,3 +0,0 @@
-export { NavBar } from './NavBar';
-export type { NavBarProps, NavBarRef, NavBarPosition, NavBarTheme } from './NavBar.types';
-export { default } from './NavBar';