taro-uno-ui 0.9.0-beta

package/src/components/display/Carousel/Carousel.tsx

@@ -0,0 +1,295 @@
+import { forwardRef, useImperativeHandle, useRef, useState, useEffect, useCallback, Children } from 'react';
+import { View, Text } from '@tarojs/components';
+import { carouselStyles } from './Carousel.styles';
+import type { CarouselProps, CarouselRef } from './Carousel.types';
+
+/** 轮播图组件 */
+export const CarouselComponent = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
+  const {
+    children,
+    autoplay = false,
+    interval = 3000,
+    showDots = true,
+    showArrows = true,
+    infinite = true,
+    effect = 'slide',
+    dotsPosition = 'bottom',
+    slidesToShow = 1,
+    slidesToScroll = 1,
+    vertical = false,
+    activeIndex,
+    defaultActiveIndex = 0,
+    beforeChange,
+    afterChange,
+    style,
+    className,
+    ...rest
+  } = props;
+
+  const [currentIndex, setCurrentIndex] = useState(activeIndex ?? defaultActiveIndex);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  // isHovered removed as mouse events are not supported in Taro.js
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const elementRef = useRef<any>(null);
+
+  const childrenArray = Children.toArray(children);
+  const totalSlides = childrenArray.length;
+
+  useImperativeHandle(ref, () => ({
+    element: elementRef.current,
+    getCurrentIndex: () => currentIndex,
+    goTo: (index: number) => goToSlide(index),
+    prev: () => goPrev(),
+    next: () => goNext(),
+    play: () => startAutoplay(),
+    pause: () => stopAutoplay(),
+    getTotal: () => totalSlides,
+  }));
+
+  const startAutoplay = useCallback(() => {
+    if (autoplay && totalSlides > 1) {
+      timerRef.current = setInterval(() => {
+        goNext();
+      }, interval);
+    }
+  }, [autoplay, totalSlides, interval]);
+
+  const stopAutoplay = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (activeIndex !== undefined) {
+      setCurrentIndex(activeIndex);
+    }
+  }, [activeIndex]);
+
+  useEffect(() => {
+    startAutoplay();
+    return () => stopAutoplay();
+  }, [startAutoplay, stopAutoplay]);
+
+  const goToSlide = useCallback((index: number) => {
+    if (isTransitioning || totalSlides <= 1) return;
+
+    const validIndex = Math.max(0, Math.min(index, totalSlides - 1));
+    
+    if (validIndex === currentIndex) return;
+
+    beforeChange?.(currentIndex, validIndex);
+    
+    setIsTransitioning(true);
+    setCurrentIndex(validIndex);
+    
+    setTimeout(() => {
+      setIsTransitioning(false);
+      afterChange?.(validIndex);
+    }, 300);
+  }, [currentIndex, totalSlides, isTransitioning, beforeChange, afterChange]);
+
+  const goPrev = useCallback(() => {
+    if (totalSlides <= 1) return;
+    
+    let newIndex;
+    if (infinite) {
+      newIndex = currentIndex <= 0 ? totalSlides - 1 : currentIndex - slidesToScroll;
+    } else {
+      newIndex = Math.max(0, currentIndex - slidesToScroll);
+    }
+    
+    goToSlide(newIndex);
+  }, [currentIndex, totalSlides, infinite, slidesToScroll, goToSlide]);
+
+  const goNext = useCallback(() => {
+    if (totalSlides <= 1) return;
+    
+    let newIndex;
+    if (infinite) {
+      newIndex = currentIndex >= totalSlides - 1 ? 0 : currentIndex + slidesToScroll;
+    } else {
+      newIndex = Math.min(totalSlides - 1, currentIndex + slidesToScroll);
+    }
+    
+    goToSlide(newIndex);
+  }, [currentIndex, totalSlides, infinite, slidesToScroll, goToSlide]);
+
+  // Mouse event handlers removed as they're not supported in Taro.js
+
+  const getTransform = () => {
+    if (effect === 'fade') return 'none';
+    
+    const translateValue = -(currentIndex * (100 / slidesToShow));
+    return vertical 
+      ? `translateY(${translateValue}%)`
+      : `translateX(${translateValue}%)`;
+  };
+
+  const getWrapperStyle = () => {
+    const baseStyle = {
+      ...carouselStyles['wrapper'],
+      transform: getTransform(),
+    };
+
+    if (vertical) {
+      Object.assign(baseStyle, carouselStyles['wrapperVertical']);
+    }
+
+    if (isTransitioning && effect === 'slide') {
+      // transition 已在基础样式中定义
+    } else if (effect === 'fade') {
+      Object.assign(baseStyle, carouselStyles['wrapperNoTransition']);
+    }
+
+    return baseStyle;
+  };
+
+  const getSlideStyle = (index: number) => {
+    const baseStyle = { ...carouselStyles['slide'] };
+
+    if (slidesToShow > 1) {
+      if (vertical) {
+        Object.assign(baseStyle, carouselStyles['slideVertical']);
+      } else {
+        Object.assign(baseStyle, carouselStyles['slideMultiple']);
+      }
+      // CSS variable assignment removed for Taro.js compatibility
+    }
+
+    if (effect === 'fade') {
+      Object.assign(baseStyle, carouselStyles['slideFade']);
+      if (index === currentIndex) {
+        Object.assign(baseStyle, carouselStyles['slideFadeActive']);
+      }
+    }
+
+    return baseStyle;
+  };
+
+  const renderDots = () => {
+    if (!showDots || totalSlides <= 1) return null;
+
+    const dotsStyle = {
+      ...carouselStyles['dots'],
+      ...carouselStyles[`dots${dotsPosition.charAt(0).toUpperCase() + dotsPosition.slice(1)}` as keyof typeof carouselStyles],
+    };
+
+    return (
+      <View style={dotsStyle}>
+        {Array.from({ length: totalSlides }, (_, index) => (
+          <View
+            key={index}
+            style={{
+              ...carouselStyles['dot'],
+              ...(index === currentIndex ? carouselStyles['dotActive'] : {}),
+            }}
+            onClick={() => goToSlide(index)}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  const renderArrows = () => {
+    if (!showArrows || totalSlides <= 1) return null;
+
+    const canGoPrev = infinite || currentIndex > 0;
+    const canGoNext = infinite || currentIndex < totalSlides - 1;
+
+    return (
+      <>
+        <View
+          style={{
+            ...carouselStyles['arrows'],
+            ...(vertical ? carouselStyles['arrowVertical'] : {}),
+            ...(vertical ? carouselStyles['arrowVerticalPrev'] : carouselStyles['arrowPrev']),
+          }}
+        >
+          <View
+            style={{
+              ...carouselStyles['arrowButton'],
+              ...(!canGoPrev ? carouselStyles['arrowButtonDisabled'] : {}),
+            }}
+            onClick={canGoPrev ? goPrev : undefined}
+          >
+            <Text>{vertical ? '↑' : '‹'}</Text>
+          </View>
+        </View>
+        
+        <View
+          style={{
+            ...carouselStyles['arrows'],
+            ...(vertical ? carouselStyles['arrowVertical'] : {}),
+            ...(vertical ? carouselStyles['arrowVerticalNext'] : carouselStyles['arrowNext']),
+          }}
+        >
+          <View
+            style={{
+              ...carouselStyles['arrowButton'],
+              ...(!canGoNext ? carouselStyles['arrowButtonDisabled'] : {}),
+            }}
+            onClick={canGoNext ? goNext : undefined}
+          >
+            <Text>{vertical ? '↓' : '›'}</Text>
+          </View>
+        </View>
+      </>
+    );
+  };
+
+  const getCarouselStyle = () => {
+    const baseStyle = {
+      ...carouselStyles['base'],
+      ...style,
+    };
+
+    if (vertical) {
+      Object.assign(baseStyle, carouselStyles['vertical']);
+    }
+
+    return baseStyle;
+  };
+
+  if (totalSlides === 0) {
+    return (
+      <View style={getCarouselStyle()} className={className}>
+        <View style={carouselStyles['loading']}>
+          <View style={carouselStyles['loadingIcon']} />
+          <Text>暂无内容</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      ref={elementRef}
+      style={getCarouselStyle()}
+      className={className}
+      {...rest}
+    >
+      <View style={carouselStyles['container']}>
+        <View style={getWrapperStyle()}>
+          {childrenArray.map((child, index) => (
+            <View
+              key={index}
+              style={getSlideStyle(index)}
+            >
+              {child}
+            </View>
+          ))}
+        </View>
+        
+        {renderDots()}
+        {renderArrows()}
+      </View>
+    </View>
+  );
+});
+
+CarouselComponent.displayName = 'Carousel';
+
+export const Carousel = CarouselComponent;
+export default Carousel;

package/src/components/display/Carousel/Carousel.types.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface CarouselProps {
+  /** 轮播项 */
+  children?: ReactNode;
+  /** 是否自动播放 */
+  autoplay?: boolean;
+  /** 自动播放间隔时间（毫秒） */
+  interval?: number;
+  /** 是否显示指示器 */
+  showDots?: boolean;
+  /** 是否显示箭头 */
+  showArrows?: boolean;
+  /** 是否无限循环 */
+  infinite?: boolean;
+  /** 切换效果 */
+  effect?: 'slide' | 'fade';
+  /** 指示器位置 */
+  dotsPosition?: 'bottom' | 'top' | 'left' | 'right';
+  /** 每次滚动的项目数 */
+  slidesToShow?: number;
+  /** 每次滚动移动的项目数 */
+  slidesToScroll?: number;
+  /** 垂直模式 */
+  vertical?: boolean;
+  /** 当前活动索引 */
+  activeIndex?: number;
+  /** 默认活动索引 */
+  defaultActiveIndex?: number;
+  /** 切换前回调 */
+  beforeChange?: (_from: number, to: number) => void;
+  /** 切换后回调 */
+  afterChange?: (_current: number) => void;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}
+
+export interface CarouselRef {
+  /** DOM 元素 */
+  element: any;
+  /** 获取当前索引 */
+  getCurrentIndex: () => number;
+  /** 跳转到指定索引 */
+  goTo: (_index: number) => void;
+  /** 上一张 */
+  prev: () => void;
+  /** 下一张 */
+  next: () => void;
+  /** 开始自动播放 */
+  play: () => void;
+  /** 停止自动播放 */
+  pause: () => void;
+  /** 获取总数 */
+  getTotal: () => number;
+}

package/src/components/display/Carousel/index.ts

@@ -0,0 +1,3 @@
+export { Carousel } from './Carousel';
+export { carouselStyles } from './Carousel.styles';
+export type { CarouselProps, CarouselRef } from './Carousel.types';

package/src/components/display/List/List.styles.ts

@@ -0,0 +1,79 @@
+import { createStyles } from '@/theme/styles';
+
+export const ListStyles = createStyles({
+  base: `
+    bg-white dark:bg-gray-800
+    rounded-lg
+    overflow-hidden
+  `,
+
+  size: {
+    small: 'text-sm',
+    default: 'text-base',
+    large: 'text-lg'
+  },
+
+  bordered: `
+    border border-gray-200 dark:border-gray-700
+  `,
+
+  header: `
+    px-4 py-3
+    border-b border-gray-200 dark:border-gray-700
+    bg-gray-50 dark:bg-gray-900
+    font-medium
+    text-gray-900 dark:text-white
+  `,
+
+  footer: `
+    px-4 py-3
+    border-t border-gray-200 dark:border-gray-700
+    bg-gray-50 dark:bg-gray-900
+    text-sm
+    text-gray-500 dark:text-gray-400
+  `,
+
+  content: `
+    divide-y divide-gray-200 dark:divide-gray-700
+  `,
+
+  loading: `
+    py-4
+  `,
+
+  loadingItem: `
+    h-16
+    bg-gray-200 dark:bg-gray-700
+    rounded
+    animate-pulse
+    mx-4
+    mb-3
+    last:mb-0
+  `,
+
+  item: `
+    px-4
+    transition-colors duration-200
+  `,
+
+  itemSize: {
+    small: 'py-2',
+    default: 'py-3',
+    large: 'py-4'
+  },
+
+  itemSplit: `
+    border-b border-gray-200 dark:border-gray-700
+  `,
+
+  itemDisabled: `
+    opacity-50
+    pointer-events-none
+  `,
+
+  itemClickable: `
+    cursor-pointer
+    hover:bg-gray-50 dark:hover:bg-gray-700
+    active:bg-gray-100 dark:active:bg-gray-600
+  `
+});

package/src/components/display/List/List.tsx

@@ -0,0 +1,115 @@
+import React, { forwardRef } from 'react';
+import { View } from '@tarojs/components';
+import { ListProps, ListItemProps, ListRef } from './List.types';
+import { cn } from '@/utils/index';
+import { ListStyles } from './List.styles';
+
+export const List = forwardRef<ListRef, ListProps>((props, ref) => {
+  const {
+    children,
+    dataSource,
+    renderItem,
+    header,
+    footer,
+    bordered = true,
+    split = true,
+    loading = false,
+    size = 'default',
+    className,
+    style,
+    ...rest
+  } = props;
+
+
+  const renderItems = () => {
+    if (dataSource && renderItem) {
+      return dataSource.map((item, index) => (
+        <ListItem key={item.key || index} index={index} size={size} split={split && index !== dataSource.length - 1}>
+          {renderItem(item, index)}
+        </ListItem>
+      ));
+    }
+
+    return React.Children.map(children, (child, index) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          index,
+          size,
+          split: split && index !== React.Children.count(children) - 1,
+        } as Partial<ListItemProps>);
+      }
+      return child;
+    });
+  };
+
+  const renderHeader = () => {
+    if (!header) return null;
+    return <View className={ListStyles['header']}>{header}</View>;
+  };
+
+  const renderFooter = () => {
+    if (!footer) return null;
+    return <View className={ListStyles['footer']}>{footer}</View>;
+  };
+
+  const listClasses = cn(ListStyles['base'], ListStyles['size'][size], bordered && ListStyles['bordered'], className);
+
+  return (
+    <View ref={ref} className={listClasses} style={style} {...rest}>
+      {renderHeader()}
+      <View className={ListStyles['content']}>
+        {loading ? (
+          <View className={ListStyles['loading']}>
+            <View className={ListStyles['loadingItem']} />
+            <View className={ListStyles['loadingItem']} />
+            <View className={ListStyles['loadingItem']} />
+          </View>
+        ) : (
+          renderItems()
+        )}
+      </View>
+      {renderFooter()}
+    </View>
+  );
+});
+
+List.displayName = 'List';
+
+export const ListItem = forwardRef<any, ListItemProps>((props, ref) => {
+  const {
+    children,
+    index,
+    size = 'default',
+    split = true,
+    disabled = false,
+    clickable = false,
+    className,
+    style,
+    onPress,
+    onLongPress,
+    ...rest
+  } = props;
+
+  const handlePress = (e: any) => {
+    if (!disabled && clickable && onPress) {
+      onPress(e);
+    }
+  };
+
+  const itemClasses = cn(
+    ListStyles['item'],
+    ListStyles['itemSize'][size],
+    split && ListStyles['itemSplit'],
+    disabled && ListStyles['itemDisabled'],
+    clickable && ListStyles['itemClickable'],
+    className,
+  );
+
+  return (
+    <View ref={ref} className={itemClasses} style={style} onClick={handlePress} onLongPress={onLongPress} {...rest}>
+      {children}
+    </View>
+  );
+});
+
+ListItem.displayName = 'ListItem';

package/src/components/display/List/List.types.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+
+export interface ListProps {
+  /** 列表内容 */
+  children?: React.ReactNode;
+  /** 数据源 */
+  dataSource?: Array<{
+    key?: string | number;
+    [key: string]: any;
+  }>;
+  /** 渲染函数 */
+  renderItem?: (_item: any, index: number) => React.ReactNode;
+  /** 列表头部 */
+  header?: React.ReactNode;
+  /** 列表底部 */
+  footer?: React.ReactNode;
+  /** 是否显示边框 */
+  bordered?: boolean;
+  /** 是否显示分割线 */
+  split?: boolean;
+  /** 加载状态 */
+  loading?: boolean;
+  /** 列表尺寸 */
+  size?: 'small' | 'default' | 'large';
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+export interface ListItemProps {
+  /** 列表项内容 */
+  children: React.ReactNode;
+  /** 索引 */
+  index?: number;
+  /** 列表项尺寸 */
+  size?: 'small' | 'default' | 'large';
+  /** 是否显示分割线 */
+  split?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否可点击 */
+  clickable?: boolean;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 点击事件 */
+  onPress?: (_event: any) => void;
+  /** 长按事件 */
+  onLongPress?: (_event: any) => void;
+}
+
+export interface ListRef {
+  /** 获取列表项 */
+  getItem: (_index: number) => HTMLElement | null;
+  /** 滚动到指定项 */
+  scrollToItem: (_index: number) => void;
+  /** 获取列表项数量 */
+  getItemCount: () => number;
+}
+
+export interface ListItemRef {
+  /** 获取列表项元素 */
+  getElement: () => HTMLElement | null;
+  /** 获取索引 */
+  getIndex: () => number;
+}

package/src/components/display/List/index.ts

@@ -0,0 +1,3 @@
+export { List, ListItem } from './List';
+export { ListStyles as listStyles } from './List.styles';
+export type { ListProps, ListRef, ListItemProps } from './List.types';