taro-uno-ui 1.0.0 → 1.0.2

package/src/components/layout/Row/Row.tsx

@@ -1,111 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import { rowStyles } from './Row.styles';
-import type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row.types';
-
-/** Row组件 */
-export const RowComponent = forwardRef<RowRef, RowProps>((props, ref) => {
-  const { children, gutter = 0, align = 'top', justify = 'start', wrap = true, className, style, onClick } = props;
-
-  const rowRef = useRef<any>(null);
-  const [internalAlign, setInternalAlign] = useState<RowAlign>(align);
-  const [internalJustify, setInternalJustify] = useState<RowJustify>(justify);
-  const [internalGutter, setInternalGutter] = useState<RowGutter>(gutter);
-  const [internalWrap, setInternalWrap] = useState(wrap);
-
-  // 更新内部状态
-  useEffect(() => {
-    setInternalAlign(align);
-  }, [align]);
-
-  useEffect(() => {
-    setInternalJustify(justify);
-  }, [justify]);
-
-  useEffect(() => {
-    setInternalGutter(gutter);
-  }, [gutter]);
-
-  useEffect(() => {
-    setInternalWrap(wrap);
-  }, [wrap]);
-
-  // 处理点击事件
-  const handleClick = useCallback(
-    (event: any) => {
-      onClick?.(event);
-    },
-    [onClick],
-  );
-
-  // 计算样式
-  const rowStyle = rowStyles['getBaseStyle']({
-    gutter: internalGutter,
-    align: internalAlign,
-    justify: internalJustify,
-    wrap: internalWrap,
-    style: style || {},
-  });
-
-  // 计算类名
-  const rowClassName = rowStyles['getClassName']({
-    align: internalAlign,
-    justify: internalJustify,
-    wrap: internalWrap,
-    className: className || '',
-  });
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: rowRef.current,
-      getAlign: () => internalAlign,
-      getJustify: () => internalJustify,
-      getGutter: () => internalGutter,
-      setAlign: (newAlign: RowAlign) => {
-        setInternalAlign(newAlign);
-      },
-      setJustify: (newJustify: RowJustify) => {
-        setInternalJustify(newJustify);
-      },
-      setGutter: (newGutter: RowGutter) => {
-        setInternalGutter(newGutter);
-      },
-      scrollIntoView: (options?: ScrollIntoViewOptions) => {
-        // Try to access DOM element if available
-        const element = rowRef.current;
-        if (element && typeof element.scrollIntoView === 'function') {
-          element.scrollIntoView(options);
-        } else if (element && element.$el) {
-          // Handle Taro component ref
-          element.$el?.scrollIntoView?.(options);
-        }
-      },
-    }),
-    [internalAlign, internalJustify, internalGutter],
-  );
-
-  // 渲染子元素，为每个Col组件传递gutter属性
-  const renderedChildren = React.Children.map(children, (child, index) => {
-    if (React.isValidElement(child) && (child.type as any)?.displayName === 'Col') {
-      return React.cloneElement(child, {
-        key: index,
-        gutter: internalGutter,
-      } as any);
-    }
-    return child;
-  });
-
-  return (
-    <View ref={rowRef} className={rowClassName} style={{ ...rowStyle, ...style }} onClick={handleClick}>
-      {renderedChildren}
-    </View>
-  );
-});
-
-/** Row组件显示名称 */
-RowComponent.displayName = 'Row';
-
-/** 导出Row组件 */
-export const Row = RowComponent;

package/src/components/layout/Row/Row.types.ts

@@ -1,60 +0,0 @@
-import { ReactNode } from 'react';
-import { BaseComponentProps, Size, CSSUnit } from '../../../types';
-
-/** Row组件对齐方式 */
-export type RowAlign = 'top' | 'middle' | 'bottom' | 'stretch';
-
-/** Row组件对齐方式 */
-export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
-
-/** Row组件间距 */
-export type RowGutter =
-  | Size
-  | number
-  | `${number}${CSSUnit}`
-  | [Size | number | `${number}${CSSUnit}`, Size | number | `${number}${CSSUnit}`];
-
-/** Row组件引用 */
-export interface RowRef {
-  /** 获取元素引用 */
-  element: any | null;
-  /** 获取当前对齐方式 */
-  getAlign: () => RowAlign;
-  /** 获取当前对齐方式 */
-  getJustify: () => RowJustify;
-  /** 获取当前间距 */
-  getGutter: () => RowGutter;
-  /** 设置对齐方式 */
-  setAlign: (_align: RowAlign) => void;
-  /** 设置对齐方式 */
-  setJustify: (_justify: RowJustify) => void;
-  /** 设置间距 */
-  setGutter: (_gutter: RowGutter) => void;
-  /** 滚动到视图 */
-  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
-}
-
-/** Row组件属性 */
-export interface RowProps extends BaseComponentProps {
-  /** 子元素 */
-  children?: ReactNode;
-  /** 间距 */
-  gutter?: RowGutter;
-  /** 垂直对齐方式 */
-  align?: RowAlign;
-  /** 水平对齐方式 */
-  justify?: RowJustify;
-  /** 是否换行 */
-  wrap?: boolean;
-  /** 点击事件 */
-  onClick?: (_event: React.MouseEvent) => void;
-  /** 响应式断点 */
-  responsive?: {
-    xs?: Partial<RowProps>;
-    sm?: Partial<RowProps>;
-    md?: Partial<RowProps>;
-    lg?: Partial<RowProps>;
-    xl?: Partial<RowProps>;
-    xxl?: Partial<RowProps>;
-  };
-}

package/src/components/layout/Row/index.tsx

@@ -1,3 +0,0 @@
-export { Row, RowComponent } from './Row';
-export type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row.types';
-export { rowStyles } from './Row.styles';

package/src/components/layout/Space/Space.styles.ts

@@ -1,255 +0,0 @@
-import type { SpaceProps, SpaceDirection, SpaceSize, SpaceGap } from './Space.types';
-
-/** Space组件样式管理器 */
-export const spaceStyles = {
-  /** 尺寸映射表 */
-  SIZE_MAP: {
-    small: 8,
-    medium: 16,
-    large: 24,
-    default: 16,
-  } as const,
-
-  /** 方向映射表 */
-  DIRECTION_MAP: {
-    horizontal: 'row',
-    vertical: 'column',
-  } as const,
-
-  /** 对齐方式映射表 */
-  ALIGN_MAP: {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-  } as const,
-
-  /** 换行方式映射表 */
-  WRAP_MAP: {
-    nowrap: 'nowrap',
-    wrap: 'wrap',
-    'wrap-reverse': 'wrap-reverse',
-  } as const,
-
-  /**
-   * 解析尺寸值
-   */
-  parseSize: (size: SpaceSize): string => {
-    if (typeof size === 'number') {
-      return `${size}px`;
-    }
-
-    if (typeof size === 'string') {
-      if (size in spaceStyles.SIZE_MAP) {
-        return `${spaceStyles.SIZE_MAP[size as keyof typeof spaceStyles.SIZE_MAP]}px`;
-      }
-      return size;
-    }
-
-    return `${spaceStyles.SIZE_MAP.default}px`;
-  },
-
-  /**
-   * 解析间距值
-   */
-  parseGap: (gap: SpaceGap): string => {
-    if (Array.isArray(gap)) {
-      const [rowGap, columnGap] = gap;
-      return `${spaceStyles['parseSize'](rowGap)} ${spaceStyles['parseSize'](columnGap)}`;
-    }
-    return spaceStyles['parseSize'](gap);
-  },
-
-  /**
-   * 获取基础样式
-   */
-  getBaseStyle: (props: SpaceProps): React.CSSProperties => {
-    const {
-      direction = 'horizontal',
-      align = 'center',
-      wrap = 'nowrap',
-      size = 'default',
-      gap,
-      block = false,
-      compact = false,
-      split = false,
-      maxCount,
-      style = {},
-    } = props;
-
-    // 计算间距
-    const gapValue = gap ? spaceStyles['parseGap'](gap) : spaceStyles['parseSize'](size);
-
-    // 计算显示方式
-    const display = block ? 'flex' : 'inline-flex';
-
-    // 计算方向
-    const flexDirection = spaceStyles['DIRECTION_MAP'][direction];
-
-    // 计算对齐方式
-    const alignItems = spaceStyles['ALIGN_MAP'][align];
-
-    // 计算换行方式
-    const flexWrap = maxCount ? 'wrap' : spaceStyles['WRAP_MAP'][wrap];
-
-    // 计算紧凑模式
-    const compactStyle = compact
-      ? {
-          gap: gapValue,
-          '& > *': {
-            margin: 0,
-          },
-        }
-      : {};
-
-    // 计算等分模式
-    const splitStyle = split
-      ? {
-          flex: 1,
-          minWidth: 0,
-        }
-      : {};
-
-    return {
-      display,
-      flexDirection,
-      alignItems,
-      flexWrap,
-      gap: gapValue,
-      ...compactStyle,
-      ...splitStyle,
-      ...style,
-    };
-  },
-
-  /**
-   * 获取类名
-   */
-  getClassName: (props: SpaceProps): string => {
-    const {
-      direction = 'horizontal',
-      align = 'center',
-      wrap = 'nowrap',
-      size = 'default',
-      block = false,
-      compact = false,
-      split = false,
-      className = '',
-    } = props;
-
-    const baseClass = 'taro-uno-space';
-    const directionClass = `${baseClass}--${direction}`;
-    const alignClass = `${baseClass}--${align}`;
-    const wrapClass = `${baseClass}--${wrap}`;
-    const sizeClass = `${baseClass}--${size}`;
-    const blockClass = block ? `${baseClass}--block` : '';
-    const compactClass = compact ? `${baseClass}--compact` : '';
-    const splitClass = split ? `${baseClass}--split` : '';
-
-    return [
-      baseClass,
-      directionClass,
-      alignClass,
-      wrapClass,
-      sizeClass,
-      blockClass,
-      compactClass,
-      splitClass,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-  },
-
-  /**
-   * 获取分隔符样式
-   */
-  getSeparatorStyle: (): React.CSSProperties => {
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '0 8px',
-      color: 'var(--text-color-secondary)',
-      fontSize: '14px',
-    };
-  },
-
-  /**
-   * 获取子元素样式
-   */
-  getItemStyle: (index: number, total: number, split: boolean): React.CSSProperties => {
-    const style: React.CSSProperties = {
-      flexShrink: 0,
-    };
-
-    if (split && index < total - 1) {
-      style.marginRight = '8px';
-    }
-
-    return style;
-  },
-
-  /**
-   * 获取响应式样式
-   */
-  getResponsiveStyle: (responsive: SpaceProps['responsive']): React.CSSProperties => {
-    if (!responsive) return {};
-
-    const responsiveStyle: React.CSSProperties = {};
-
-    Object.entries(responsive).forEach(([_breakpoint, props]) => {
-      if (props) {
-        // 这里需要配合CSS-in-JS库来处理响应式样式
-        // 暂时返回空对象
-      }
-    });
-
-    return responsiveStyle;
-  },
-
-  /**
-   * 获取断点值
-   */
-  getBreakpointValue: (breakpoint: string): number => {
-    const breakpoints = {
-      xs: 0,
-      sm: 640,
-      md: 768,
-      lg: 1024,
-      xl: 1280,
-      xxl: 1536,
-    };
-    return breakpoints[breakpoint as keyof typeof breakpoints] || 0;
-  },
-
-  /**
-   * 获取省略样式
-   */
-  getEllipsisStyle: (): React.CSSProperties => {
-    return {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '0 8px',
-      color: 'var(--text-color-secondary)',
-      fontSize: '14px',
-      cursor: 'pointer',
-    };
-  },
-
-  /**
-   * 获取最大计数样式
-   */
-  getMaxCountStyle: (maxCount: number, direction: SpaceDirection): React.CSSProperties => {
-    const style: React.CSSProperties = {};
-
-    if (direction === 'horizontal') {
-      style.maxWidth = `${maxCount * 100}px`;
-    } else {
-      style.maxHeight = `${maxCount * 40}px`;
-    }
-
-    return style;
-  },
-};