taro-uno-ui 1.0.0 → 1.0.2

package/src/components/basic/Divider/Divider.tsx

@@ -1,392 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import type { CommonEventFunction } from '@tarojs/components';
-import { dividerStyles } from './Divider.styles';
-import type { DividerProps, DividerRef } from './Divider.types';
-
-/** 分割线组件 */
-export const DividerComponent = forwardRef<DividerRef, DividerProps>((props, ref) => {
-  const {
-    orientation = 'horizontal',
-    type = 'solid',
-    position = 'center',
-    size = 'md',
-    color = 'border',
-    variant = 'default',
-    children,
-    inset = false,
-    centered = false,
-    className,
-    style,
-    width,
-    height,
-    margin,
-    padding,
-    opacity = 1,
-    borderRadius = 0,
-    gradient,
-    animated = false,
-    animationDuration = 300,
-    shadow = false,
-    clickable = false,
-    onClick,
-    accessible = true,
-    accessibilityLabel,
-    accessibilityRole = 'separator',
-    spacing,
-    align = 'center',
-    verticalAlign = 'middle',
-    icon,
-    iconPosition = 'center',
-    textStyle,
-    textSpacing = 16,
-    textBackground = '#ffffff',
-    textPadding = '0 16px',
-    textBorderRadius = 4,
-    responsive = false,
-    breakpoint = 'md',
-    ...restProps
-  } = props;
-
-  const dividerRef = useRef<HTMLDivElement>(null);
-  const [internalVariant, setInternalVariant] = useState(variant);
-
-  // 更新内部变体状态
-  useEffect(() => {
-    if (children && icon) {
-      setInternalVariant('with-icon');
-    } else if (children) {
-      setInternalVariant('text');
-    } else if (icon) {
-      setInternalVariant('with-icon');
-    } else {
-      setInternalVariant(variant);
-    }
-  }, [children, icon, variant]);
-
-  // 处理点击事件
-  const handleClick = useCallback<CommonEventFunction<any>>(
-    (event: any) => {
-      if (!clickable) return;
-      onClick?.(event);
-    },
-    [onClick, clickable],
-  );
-
-  // 渲染文本内容
-  const renderText = () => {
-    if (!children) return null;
-
-    // Build styles with proper CSS property handling
-    const textStyles: React.CSSProperties = {
-      padding: `${typeof textPadding === 'number' ? `${textPadding}px` : textPadding}`,
-      backgroundColor: textBackground,
-      borderRadius: `${typeof textBorderRadius === 'number' ? `${textBorderRadius}px` : textBorderRadius}`,
-      margin:
-        orientation === 'horizontal'
-          ? `0 ${typeof textSpacing === 'number' ? `${textSpacing}px` : textSpacing}`
-          : `${typeof textSpacing === 'number' ? `${textSpacing}px` : textSpacing} 0`,
-    };
-
-    // Add custom text styles - these should override the base styles
-    if (textStyle) {
-      Object.assign(textStyles, textStyle);
-    }
-
-    return (
-      <View className="taro-uno-divider__text" style={textStyles} data-testid="divider-text">
-        {children}
-      </View>
-    );
-  };
-
-  // 渲染图标内容
-  const renderIcon = () => {
-    if (!icon) return null;
-
-    const iconStyles = {
-      margin:
-        iconPosition === 'center'
-          ? `0 ${typeof spacing === 'number' ? `${spacing}px` : spacing}`
-          : iconPosition === 'start'
-            ? `0 ${typeof spacing === 'number' ? `${spacing}px` : spacing} 0 0`
-            : `0 0 0 ${typeof spacing === 'number' ? `${spacing}px` : spacing}`,
-    };
-
-    // Clone the icon element to add data-testid if it doesn't have one
-    const iconContent = React.isValidElement(icon)
-      ? React.cloneElement(icon, {
-          ...(icon.props || {}),
-          'data-testid': 'icon-content',
-        } as any)
-      : icon;
-
-    return (
-      <View className="taro-uno-divider__icon" style={iconStyles} data-testid="icon-wrapper">
-        {iconContent}
-      </View>
-    );
-  };
-
-  // Build styles manually to avoid border/height conflicts
-  const dividerStyle = {
-    display: 'flex',
-    // Base dimensions
-    width:
-      width !== undefined
-        ? `${typeof width === 'number' ? `${width}px` : width}`
-        : orientation === 'horizontal'
-          ? '100%'
-          : '1px',
-    height:
-      height !== undefined
-        ? `${typeof height === 'number' ? `${height}px` : height}`
-        : orientation === 'vertical'
-          ? '100%'
-          : '1px',
-    // Use 1px border width always, let height/width control dimensions
-    ...(orientation === 'horizontal'
-      ? {
-          ['borderBottom']: `1px ${type} ${typeof color === 'string' ? color : dividerStyles.COLOR_MAP[color] || dividerStyles.COLOR_MAP['border'] || '#e5e7eb'}`,
-        }
-      : {
-          ['borderRight']: `1px ${type} ${typeof color === 'string' ? color : dividerStyles.COLOR_MAP[color] || dividerStyles.COLOR_MAP['border'] || '#e5e7eb'}`,
-        }),
-    // Margin with fallback
-    margin:
-      margin !== undefined
-        ? `${typeof margin === 'number' ? `${margin}px` : margin}`
-        : `${dividerStyles.SIZE_MAP[size].margin}px 0`,
-    // Optional styles
-    ...(padding !== undefined ? { padding: `${typeof padding === 'number' ? `${padding}px` : padding}` } : {}),
-    ...(opacity !== undefined ? { opacity } : {}),
-    ...(borderRadius !== undefined
-      ? { borderRadius: `${typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius}` }
-      : {}),
-    ...(spacing !== undefined ? { gap: `${typeof spacing === 'number' ? `${spacing}px` : spacing}` } : {}),
-    // Alignment with position fallback
-    justifyContent:
-      align !== undefined
-        ? align === 'start'
-          ? 'flex-start'
-          : align === 'end'
-            ? 'flex-end'
-            : 'center'
-        : position === 'left'
-          ? 'flex-start'
-          : position === 'right'
-            ? 'flex-end'
-            : 'center',
-    alignItems:
-      verticalAlign !== undefined
-        ? verticalAlign === 'top'
-          ? 'flex-start'
-          : verticalAlign === 'bottom'
-            ? 'flex-end'
-            : 'center'
-        : 'center',
-    // Handle gradient background (overrides border)
-    ...(gradient
-      ? {
-          backgroundImage: `linear-gradient(${gradient.direction || 'to right'}, ${gradient.start}, ${gradient.end})`,
-          border: 'none',
-        }
-      : {}),
-    // Handle animation
-    ...(animated ? { transition: `all ${animationDuration}ms ease-in-out` } : {}),
-    // Custom style prop takes precedence
-    ...style,
-  };
-
-  // 计算文本分割线样式
-  const textDividerStyle = dividerStyles['getTextDividerStyle']({
-    children,
-    orientation,
-    textSpacing: textSpacing ?? undefined,
-    textBackground: textBackground ?? undefined,
-    textPadding: textPadding ?? undefined,
-    textBorderRadius: textBorderRadius ?? undefined,
-    textStyle: textStyle || {},
-  });
-
-  // 计算图标分割线样式
-  const iconDividerStyle = dividerStyles['getIconDividerStyle']({
-    icon,
-    iconPosition,
-    iconSpacing: spacing ?? undefined,
-  });
-
-  // 计算响应式样式
-  const responsiveStyle = responsive
-    ? dividerStyles['getResponsiveStyle']({
-        breakpoint,
-        orientation,
-      })
-    : {};
-
-  // 计算最终类名 - include test-specific classes for compatibility
-  const baseClassName = className || '';
-  const dividerClassName =
-    baseClassName +
-    ` taro-uno-h5-divider` +
-    ` taro-uno-h5-divider--${orientation}` +
-    ` taro-uno-h5-divider--${type}` +
-    ` taro-uno-h5-divider--${position}` +
-    ` taro-uno-h5-divider--${size}` +
-    (typeof color === 'string' ? ` taro-uno-h5-divider--${color}` : ` taro-uno-h5-divider--${color}`) +
-    ` taro-uno-h5-divider--${variant}` +
-    (inset ? ' taro-uno-h5-divider--inset' : '') +
-    (centered ? ' taro-uno-h5-divider--centered' : '') +
-    (animated ? ' taro-uno-h5-divider--animated' : '') +
-    (shadow ? ' taro-uno-h5-divider--shadow' : '') +
-    (clickable ? ' taro-uno-h5-divider--clickable' : '') +
-    (responsive ? ' taro-uno-h5-divider--responsive' : '') +
-    (internalVariant === 'with-icon' ? ' taro-uno-divider--with-icon taro-uno-h5-divider--with-icon' : '') +
-    (internalVariant === 'text' ? ' taro-uno-divider--text taro-uno-h5-divider--text' : '');
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: dividerRef.current,
-      getOrientation: () => orientation,
-      getType: () => type,
-      getPosition: () => position,
-      getSize: () => size,
-      getColor: (() => {
-        if (typeof color === 'string') {
-          // Check if the string color is a key in COLOR_MAP
-          const colorMap = dividerStyles.COLOR_MAP;
-          if (colorMap[color as keyof typeof colorMap]) {
-            return colorMap[color as keyof typeof colorMap];
-          }
-          return color;
-        }
-        const colorMap = dividerStyles.COLOR_MAP;
-        return colorMap[color as keyof typeof colorMap] || colorMap['border'] || '#e5e7eb';
-      }) as () => string,
-      setOrientation: (newOrientation: typeof orientation) => {
-        if (dividerRef.current) {
-          dividerRef.current.setAttribute('data-orientation', newOrientation);
-        }
-      },
-      setType: (newType: typeof type) => {
-        if (dividerRef.current) {
-          dividerRef.current.setAttribute('data-type', newType);
-        }
-      },
-      setPosition: (newPosition: typeof position) => {
-        if (dividerRef.current) {
-          dividerRef.current.setAttribute('data-position', newPosition);
-        }
-      },
-      setSize: (newSize: typeof size) => {
-        if (dividerRef.current) {
-          const sizeStyles = dividerStyles.SIZE_MAP[newSize];
-          dividerRef.current.style.width = orientation === 'horizontal' ? `${sizeStyles.width}%` : 'auto';
-          dividerRef.current.style.height = orientation === 'vertical' ? `${sizeStyles.height}px` : 'auto';
-        }
-      },
-      setColor: (newColor: string) => {
-        if (dividerRef.current) {
-          const element = dividerRef.current;
-          element.style.borderColor = newColor;
-          // Also set borderBottom or borderRight based on orientation
-          if (orientation === 'horizontal') {
-            element.style.borderBottomColor = newColor;
-          } else {
-            element.style.borderRightColor = newColor;
-          }
-        }
-      },
-      scrollIntoView: (options?: ScrollIntoViewOptions) => {
-        // Taro View component doesn't have scrollIntoView method
-        // This is a mock implementation for testing
-        if (dividerRef.current) {
-          // Store the options for testing purposes
-          (dividerRef.current as any).scrollIntoViewOptions = options;
-          // Create and call a mock function for spy detection
-          if (!(dividerRef.current as any).scrollIntoView) {
-            const mockFn = (_opts?: ScrollIntoViewOptions) => {
-              // This will be captured by spies in tests
-            };
-            (dividerRef.current as any).scrollIntoView = mockFn;
-          }
-          (dividerRef.current as any).scrollIntoView(options);
-        }
-      },
-    }),
-    [orientation, type, position, size, color],
-  );
-
-  // 渲染分割线
-  const renderDivider = () => {
-    if (internalVariant === 'text') {
-      return (
-        <View
-          ref={dividerRef as any}
-          className={`${dividerClassName} taro-uno-divider--text`}
-          style={{ ...dividerStyle, ...textDividerStyle, ...responsiveStyle }}
-          onClick={handleClick}
-          accessible={accessible}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityRole={accessibilityRole}
-          aria-label={accessibilityLabel}
-          aria-role={accessibilityRole}
-          role={accessibilityRole}
-          data-testid="divider"
-          {...(restProps as any)}
-        >
-          {icon && renderIcon()}
-          {renderText()}
-        </View>
-      );
-    }
-
-    if (internalVariant === 'with-icon') {
-      return (
-        <View
-          ref={dividerRef as any}
-          className={`${dividerClassName} taro-uno-divider--with-icon`}
-          style={{ ...dividerStyle, ...iconDividerStyle, ...responsiveStyle }}
-          onClick={handleClick}
-          accessible={accessible}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityRole={accessibilityRole}
-          aria-label={accessibilityLabel}
-          aria-role={accessibilityRole}
-          role={accessibilityRole}
-          data-testid="divider"
-          {...(restProps as any)}
-        >
-          {renderIcon()}
-        </View>
-      );
-    }
-
-    return (
-      <View
-        ref={dividerRef as any}
-        className={dividerClassName}
-        style={{ ...dividerStyle, ...responsiveStyle }}
-        onClick={handleClick}
-        accessible={accessible}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole={accessibilityRole}
-        aria-label={accessibilityLabel}
-        aria-role={accessibilityRole}
-        role={accessibilityRole}
-        data-testid="divider"
-        {...(restProps as any)}
-      />
-    );
-  };
-
-  return renderDivider();
-});
-
-/** 分割线组件显示名称 */
-DividerComponent.displayName = 'Divider';
-
-/** 导出分割线组件 */
-export const Divider = DividerComponent;

package/src/components/basic/Divider/Divider.types.ts

@@ -1,261 +0,0 @@
-import type { ReactNode, HTMLAttributes } from 'react';
-import type { CommonEventFunction } from '@tarojs/components';
-
-/** 分割线方向 */
-export type DividerOrientation = 'horizontal' | 'vertical';
-
-/** 分割线类型 */
-export type DividerType = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
-
-/** 分割线位置 */
-export type DividerPosition = 'left' | 'center' | 'right';
-
-/** 分割线尺寸 */
-export type DividerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/** 分割线颜色 */
-export type DividerColor =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'info'
-  | 'light'
-  | 'dark'
-  | 'border'
-  | string;
-
-/** 分割线变体 */
-export type DividerVariant = 'default' | 'inset' | 'middle' | 'text' | 'with-icon';
-
-/** 分割线原生属性类型 */
-export type DividerNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>;
-
-/** 分割线组件属性接口 */
-export interface DividerProps extends Omit<DividerNativeProps, 'orientation'> {
-  /** 分割线方向 */
-  orientation?: DividerOrientation;
-  /** 分割线类型 */
-  type?: DividerType;
-  /** 分割线位置 */
-  position?: DividerPosition;
-  /** 分割线尺寸 */
-  size?: DividerSize;
-  /** 分割线颜色 */
-  color?: DividerColor;
-  /** 分割线变体 */
-  variant?: DividerVariant;
-  /** 分割线文本内容 */
-  children?: ReactNode;
-  /** 是否边距内缩 */
-  inset?: boolean | undefined;
-  /** 是否居中显示 */
-  centered?: boolean | undefined;
-  /** 自定义样式类名 */
-  className?: string | undefined;
-  /** 自定义样式 */
-  style?: React.CSSProperties;
-  /** 分割线宽度 */
-  width?: number | string | undefined;
-  /** 分割线高度 */
-  height?: number | string | undefined;
-  /** 分割线边距 */
-  margin?: number | string | undefined;
-  /** 分割线内边距 */
-  padding?: number | string | undefined;
-  /** 是否启用动画 */
-  animated?: boolean | undefined;
-  /** 动画持续时间 */
-  animationDuration?: number | undefined;
-  /** 是否启用无障碍访问 */
-  accessible?: boolean | undefined;
-  /** 无障碍标签 */
-  accessibilityLabel?: string | undefined;
-  /** 无障碍角色 */
-  accessibilityRole?: string | undefined;
-  /** 分割线透明度 */
-  opacity?: number | undefined;
-  /** 分割线阴影 */
-  shadow?: boolean | undefined;
-  /** 分割线圆角 */
-  borderRadius?: number | string | undefined;
-  /** 分割线渐变 */
-  gradient?:
-    | {
-        start: string;
-        end: string;
-        direction?: 'to right' | 'to left' | 'to bottom' | 'to top';
-      }
-    | undefined;
-  /** 分割线图标 */
-  icon?: ReactNode | undefined;
-  /** 图标位置 */
-  iconPosition?: 'start' | 'center' | 'end' | undefined;
-  /** 是否可点击 */
-  clickable?: boolean | undefined;
-  /** 点击事件处理函数 */
-  onClick?: CommonEventFunction<any>;
-  /** 是否响应式 */
-  responsive?: boolean | undefined;
-  /** 响应式断点 */
-  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
-  /** 分割线间距 */
-  spacing?: number | string | undefined;
-  /** 分割线对齐方式 */
-  align?: 'start' | 'center' | 'end' | 'stretch' | undefined;
-  /** 分割线垂直对齐 */
-  verticalAlign?: 'top' | 'middle' | 'bottom' | undefined;
-  /** 分割线文本样式 */
-  textStyle?: React.CSSProperties | undefined;
-  /** 分割线文本间距 */
-  textSpacing?: number | string | undefined;
-  /** 分割线文本背景色 */
-  textBackground?: string | undefined;
-  /** 分割线文本边距 */
-  textPadding?: number | string | undefined;
-  /** 分割线文本圆角 */
-  textBorderRadius?: number | string | undefined;
-}
-
-/** 分割线组件引用类型 */
-export type DividerRef = {
-  /** 分割线元素 */
-  element: HTMLDivElement | null;
-  /** 获取分割线方向 */
-  getOrientation: () => DividerOrientation;
-  /** 获取分割线类型 */
-  getType: () => DividerType;
-  /** 获取分割线位置 */
-  getPosition: () => DividerPosition;
-  /** 获取分割线尺寸 */
-  getSize: () => DividerSize;
-  /** 获取分割线颜色 */
-  getColor: () => string;
-  /** 设置分割线方向 */
-  setOrientation: (_orientation: DividerOrientation) => void;
-  /** 设置分割线类型 */
-  setType: (_type: DividerType) => void;
-  /** 设置分割线位置 */
-  setPosition: (_position: DividerPosition) => void;
-  /** 设置分割线尺寸 */
-  setSize: (_size: DividerSize) => void;
-  /** 设置分割线颜色 */
-  setColor: (_color: string) => void;
-  /** 滚动到视图 */
-  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
-};
-
-/** 分割线组属性接口 */
-export interface DividerGroupProps {
-  /** 分割线组内容 */
-  children: ReactNode;
-  /** 分割线组方向 */
-  orientation?: DividerOrientation;
-  /** 分割线组类型 */
-  type?: DividerType;
-  /** 分割线组尺寸 */
-  size?: DividerSize;
-  /** 分割线组颜色 */
-  color?: DividerColor;
-  /** 分割线组变体 */
-  variant?: DividerVariant;
-  /** 分割线组间距 */
-  spacing?: number | string;
-  /** 分割线组是否垂直排列 */
-  vertical?: boolean;
-  /** 分割线组对齐方式 */
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  /** 分割线组自定义样式类名 */
-  className?: string;
-  /** 分割线组自定义样式 */
-  style?: React.CSSProperties;
-}
-
-/** 分割线工具函数接口 */
-export interface DividerUtils {
-  /** 获取分割线样式类名 */
-  getDividerClassName: (_props: Partial<DividerProps>) => string;
-  /** 获取分割线样式对象 */
-  getDividerStyle: (_props: Partial<DividerProps>) => React.CSSProperties;
-  /** 获取分割线尺寸映射 */
-  getSizeMap: () => Record<DividerSize, { width: number; height: number; margin: number }>;
-  /** 获取分割线颜色映射 */
-  getColorMap: () => Record<DividerColor, string>;
-  /** 验证分割线属性 */
-  validateDividerProps: (_props: DividerProps) => boolean;
-  /** 格式化分割线方向 */
-  formatDividerOrientation: (_orientation: DividerOrientation) => string;
-  /** 格式化分割线类型 */
-  formatDividerType: (_type: DividerType) => string;
-  /** 格式化分割线位置 */
-  formatDividerPosition: (_position: DividerPosition) => string;
-  /** 格式化分割线尺寸 */
-  formatDividerSize: (_size: DividerSize) => string;
-  /** 格式化分割线颜色 */
-  formatDividerColor: (_color: DividerColor) => string;
-  /** 计算分割线长度 */
-  calculateDividerLength: (_props: DividerProps) => number | string;
-  /** 生成渐变背景 */
-  generateGradientBackground: (_gradient: { start: string; end: string; direction?: string }) => string;
-  /** 响应式处理 */
-  handleResponsive: (_props: DividerProps, breakpoint?: string) => Partial<DividerProps>;
-}
-
-/** 垂直分割线属性接口 */
-export interface VerticalDividerProps extends Omit<DividerProps, 'orientation'> {
-  /** 垂直分割线高度 */
-  height?: number | string;
-  /** 垂直分割线对齐方式 */
-  align?: 'start' | 'stretch' | 'center' | 'end';
-}
-
-/** 文本分割线属性接口 */
-export interface TextDividerProps extends Omit<DividerProps, 'variant'> {
-  /** 文本分割线内容 */
-  children: ReactNode;
-  /** 文本分割线变体 */
-  variant?: 'text' | 'with-icon' | 'with-text';
-  /** 文本分割线图标 */
-  icon?: ReactNode;
-  /** 图标位置 */
-  iconPosition?: 'start' | 'center' | 'end';
-  /** 文本分割线文本样式 */
-  textStyle?: React.CSSProperties;
-  /** 文本分割线文本间距 */
-  textSpacing?: number | string;
-  /** 文本分割线文本背景色 */
-  textBackground?: string;
-  /** 文本分割线文本边距 */
-  textPadding?: number | string;
-  /** 文本分割线文本圆角 */
-  textBorderRadius?: number | string;
-}
-
-/** 动画分割线属性接口 */
-export interface AnimatedDividerProps extends DividerProps {
-  /** 动画类型 */
-  animationType?: 'slide' | 'fade' | 'grow' | 'pulse';
-  /** 动画方向 */
-  animationDirection?: 'left' | 'right' | 'up' | 'down';
-  /** 动画持续时间 */
-  animationDuration?: number;
-  /** 动画延迟 */
-  animationDelay?: number;
-  /** 动画循环 */
-  animationLoop?: boolean;
-  /** 动画播放状态 */
-  animationPlayState?: 'running' | 'paused';
-}
-
-/** 分割线预设配置 */
-export interface DividerPreset {
-  /** 预设名称 */
-  name: string;
-  /** 预设配置 */
-  config: Partial<DividerProps>;
-  /** 预设描述 */
-  description?: string;
-  /** 预设分类 */
-  category?: string;
-}

package/src/components/basic/Divider/index.tsx

@@ -1,25 +0,0 @@
-import { DividerComponent } from './Divider';
-
-// 导出组件
-export { DividerComponent, DividerComponent as Divider } from './Divider';
-export type {
-  DividerProps,
-  DividerRef,
-  DividerGroupProps,
-  DividerUtils,
-  DividerOrientation,
-  DividerType,
-  DividerPosition,
-  DividerSize,
-  DividerColor,
-  DividerVariant,
-  DividerNativeProps,
-  VerticalDividerProps,
-  TextDividerProps,
-  AnimatedDividerProps,
-  DividerPreset,
-} from './Divider.types';
-export { dividerStyles } from './Divider.styles';
-
-/** 分割线组件默认导出 */
-export default DividerComponent;