taro-uno-ui 0.9.0-beta

package/src/components/layout/Space/Space.tsx

@@ -0,0 +1,211 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View } from '@tarojs/components';
+import type { ITouchEvent } from '@tarojs/components';
+import { spaceStyles } from './Space.styles';
+import type { SpaceProps, SpaceRef, SpaceDirection, SpaceAlign, SpaceWrap, SpaceSize, SpaceGap } from './Space.types';
+
+/** Space组件 */
+export const SpaceComponent = forwardRef<SpaceRef, SpaceProps>((props, ref) => {
+  const {
+    children,
+    direction = 'horizontal',
+    align = 'center',
+    wrap = 'nowrap',
+    size = 'default',
+    gap,
+    block = false,
+    separator,
+    compact = false,
+    split = false,
+    maxCount,
+    ellipsis,
+    className,
+    style,
+    onClick,
+    onItemHover,
+    onItemClick,
+    responsive,
+    ...restProps
+  } = props;
+
+  const spaceRef = useRef<any>(null);
+  const [internalDirection, setInternalDirection] = useState<SpaceDirection>(direction);
+  const [internalAlign, setInternalAlign] = useState<SpaceAlign>(align);
+  const [internalWrap, setInternalWrap] = useState<SpaceWrap>(wrap);
+  const [internalSize, setInternalSize] = useState<SpaceSize>(size);
+  const [internalGap, setInternalGap] = useState<SpaceGap>(gap || size);
+  const [visibleItems, setVisibleItems] = useState<number>(maxCount || Infinity);
+
+  // 更新内部状态
+  useEffect(() => {
+    setInternalDirection(direction);
+  }, [direction]);
+
+  useEffect(() => {
+    setInternalAlign(align);
+  }, [align]);
+
+  useEffect(() => {
+    setInternalWrap(wrap);
+  }, [wrap]);
+
+  useEffect(() => {
+    setInternalSize(size);
+  }, [size]);
+
+  useEffect(() => {
+    setInternalGap(gap || size);
+  }, [gap, size]);
+
+  useEffect(() => {
+    if (maxCount) {
+      setVisibleItems(maxCount);
+    }
+  }, [maxCount]);
+
+  // 处理点击事件
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      onClick?.(event);
+    },
+    [onClick],
+  );
+
+  // 处理子元素点击事件
+  const handleItemClick = useCallback(
+    (index: number, event: ITouchEvent) => {
+      onItemClick?.(index, event);
+    },
+    [onItemClick],
+  );
+
+  // 处理子元素悬停事件
+  
+  // 渲染子元素
+  const renderChildren = () => {
+    if (!children) return null;
+
+    const childrenArray = React.Children.toArray(children);
+    const visibleChildren = childrenArray.slice(0, visibleItems);
+
+    return visibleChildren.map((child, index) => {
+      const isLast = index === visibleChildren.length - 1;
+      const showSeparator = separator && !isLast && !compact;
+
+      return (
+        <React.Fragment key={index}>
+          <View
+            className="taro-uno-space__item"
+            style={spaceStyles['getItemStyle'](index, visibleChildren.length, split)}
+            onClick={(e: ITouchEvent) => handleItemClick(index, e)}
+          >
+            {child}
+          </View>
+          {showSeparator && (
+            <View className="taro-uno-space__separator" style={spaceStyles['getSeparatorStyle']()}>
+              {separator === true ? '|' : separator}
+            </View>
+          )}
+        </React.Fragment>
+      );
+    });
+  };
+
+  // 渲染省略内容
+  const renderEllipsis = () => {
+    if (!ellipsis || visibleItems >= React.Children.count(children)) return null;
+
+    return (
+      <View className="taro-uno-space__ellipsis" style={spaceStyles['getEllipsisStyle']()}>
+        {ellipsis}
+      </View>
+    );
+  };
+
+  // 计算样式
+  const spaceStyle = spaceStyles['getBaseStyle']({
+    direction: internalDirection,
+    align: internalAlign,
+    wrap: internalWrap,
+    size: internalSize,
+    gap: internalGap,
+    block,
+    compact,
+    split,
+    maxCount,
+    style: style || {},
+  });
+
+  // 计算响应式样式
+  const responsiveStyle = responsive ? spaceStyles['getResponsiveStyle'](responsive) : {};
+
+  // 计算类名
+  const spaceClassName = spaceStyles['getClassName']({
+    direction: internalDirection,
+    align: internalAlign,
+    wrap: internalWrap,
+    size: internalSize,
+    block,
+    compact,
+    split,
+    className: className || '',
+  });
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: spaceRef.current,
+      getDirection: () => internalDirection,
+      getAlign: () => internalAlign,
+      getWrap: () => internalWrap,
+      getGap: () => internalGap,
+      getSize: () => internalSize,
+      setDirection: (newDirection: SpaceDirection) => {
+        setInternalDirection(newDirection);
+      },
+      setAlign: (newAlign: SpaceAlign) => {
+        setInternalAlign(newAlign);
+      },
+      setWrap: (newWrap: SpaceWrap) => {
+        setInternalWrap(newWrap);
+      },
+      setGap: (newGap: SpaceGap) => {
+        setInternalGap(newGap);
+      },
+      setSize: (newSize: SpaceSize) => {
+        setInternalSize(newSize);
+      },
+      scrollIntoView: (options?: ScrollIntoViewOptions) => {
+        // Try to access DOM element if available
+        const element = spaceRef.current;
+        if (element && typeof element.scrollIntoView === 'function') {
+          element.scrollIntoView(options);
+        } else if (element && element.$el) {
+          // Handle Taro component ref
+          element.$el?.scrollIntoView?.(options);
+        }
+      },
+    }),
+    [internalDirection, internalAlign, internalWrap, internalGap, internalSize],
+  );
+
+  return (
+    <View
+      ref={spaceRef}
+      className={spaceClassName}
+      style={{ ...spaceStyle, ...responsiveStyle }}
+      onClick={handleClick}
+      {...restProps}
+    >
+      {renderChildren()}
+      {renderEllipsis()}
+    </View>
+  );
+});
+
+/** Space组件显示名称 */
+SpaceComponent.displayName = 'Space';
+
+/** 导出Space组件 */
+export const Space = SpaceComponent;

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

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+import { BaseComponentProps, Size, CSSUnit } from '../../../types';
+
+/** Space组件方向 */
+export type SpaceDirection = 'horizontal' | 'vertical';
+
+/** Space组件对齐方式 */
+export type SpaceAlign = 'start' | 'center' | 'end' | 'stretch';
+
+/** Space组件换行方式 */
+export type SpaceWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+/** Space组件尺寸 */
+export type SpaceSize = Size | number | `${number}${CSSUnit}`;
+
+/** Space组件间距 */
+export type SpaceGap = SpaceSize | [SpaceSize, SpaceSize];
+
+/** Space组件分隔符 */
+export type SpaceSeparator = ReactNode | boolean;
+
+/** Space组件引用 */
+export interface SpaceRef {
+  /** 获取元素引用 */
+  element: any | null;
+  /** 获取当前方向 */
+  getDirection: () => SpaceDirection;
+  /** 获取当前对齐方式 */
+  getAlign: () => SpaceAlign;
+  /** 获取当前换行方式 */
+  getWrap: () => SpaceWrap;
+  /** 获取当前间距 */
+  getGap: () => SpaceGap;
+  /** 获取当前尺寸 */
+  getSize: () => SpaceSize;
+  /** 设置方向 */
+  setDirection: (_direction: SpaceDirection) => void;
+  /** 设置对齐方式 */
+  setAlign: (_align: SpaceAlign) => void;
+  /** 设置换行方式 */
+  setWrap: (_wrap: SpaceWrap) => void;
+  /** 设置间距 */
+  setGap: (_gap: SpaceGap) => void;
+  /** 设置尺寸 */
+  setSize: (_size: SpaceSize) => void;
+  /** 滚动到视图 */
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+}
+
+/** Space组件属性 */
+export interface SpaceProps extends BaseComponentProps {
+  /** 子元素 */
+  children?: ReactNode;
+  /** 间距方向 */
+  direction?: SpaceDirection;
+  /** 对齐方式 */
+  align?: SpaceAlign;
+  /** 换行方式 */
+  wrap?: SpaceWrap;
+  /** 间距大小 */
+  size?: SpaceSize;
+  /** 间距 */
+  gap?: SpaceGap;
+  /** 是否自动换行 */
+  block?: boolean;
+  /** 分隔符 */
+  separator?: SpaceSeparator;
+  /** 是否紧凑 */
+  compact?: boolean;
+  /** 是否等分 */
+  split?: boolean;
+  /** 最大行数（垂直方向）或列数（水平方向） */
+  maxCount?: number;
+  /** 超出最大行数/列数时显示的省略内容 */
+  ellipsis?: ReactNode;
+  /** 点击事件 */
+  onClick?: (_event: React.MouseEvent) => void;
+  /** 子元素点击事件 */
+  onItemHover?: (_index: number, event: React.MouseEvent) => void;
+  /** 子元素点击事件 */
+  onItemClick?: (_index: number, event: ITouchEvent) => void;
+  /** 响应式断点 */
+  responsive?: {
+    xs?: Partial<SpaceProps>;
+    sm?: Partial<SpaceProps>;
+    md?: Partial<SpaceProps>;
+    lg?: Partial<SpaceProps>;
+    xl?: Partial<SpaceProps>;
+    xxl?: Partial<SpaceProps>;
+  };
+}

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

@@ -0,0 +1,12 @@
+export { Space, SpaceComponent } from './Space';
+export type {
+  SpaceProps,
+  SpaceRef,
+  SpaceDirection,
+  SpaceAlign,
+  SpaceWrap,
+  SpaceSize,
+  SpaceGap,
+  SpaceSeparator,
+} from './Space.types';
+export { spaceStyles } from './Space.styles';

package/src/components/layout/index.tsx

@@ -0,0 +1,68 @@
+// 导出布局组件
+export * from './Grid';
+export * from './Layout';
+export * from './Space';
+export * from './Affix';
+export * from './Row';
+export * from './Col';
+export * from './Container';
+
+// 导出类型
+export type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid/Grid.types';
+
+export type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container/Container.types';
+
+export type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row/Row.types';
+
+export type { ColProps, ColRef, ColSpan, ColOffset, ColOrder } from './Col/Col.types';
+
+export type {
+  SpaceProps,
+  SpaceRef,
+  SpaceDirection,
+  SpaceAlign,
+  SpaceWrap,
+  SpaceSize,
+  SpaceGap,
+  SpaceSeparator,
+} from './Space/Space.types';
+
+export type { AffixProps, AffixRef, AffixOffset, AffixTarget } from './Affix/Affix.types';
+
+// 导出样式
+export { gridStyles } from './Grid/Grid.styles';
+export { containerStyles } from './Container/Container.styles';
+export { rowStyles } from './Row/Row.styles';
+export { colStyles } from './Col/Col.styles';
+export { spaceStyles } from './Space/Space.styles';
+export { affixStyles } from './Affix/Affix.styles';
+
+// 布局组件工具函数
+export const LayoutUtils = {
+  /**
+   * 计算响应式断点
+   */
+  getBreakpoint: (width: number): string => {
+    if (width < 640) return 'xs';
+    if (width < 768) return 'sm';
+    if (width < 1024) return 'md';
+    if (width < 1280) return 'lg';
+    if (width < 1536) return 'xl';
+    return 'xxl';
+  },
+
+  /**
+   * 计算网格列数
+   */
+  calculateGridCols: (containerWidth: number, itemWidth: number): number => {
+    return Math.floor(containerWidth / itemWidth);
+  },
+
+  /**
+   * 计算间距
+   */
+  calculateSpacing: (size: string | number): string => {
+    if (typeof size === 'number') return `${size}px`;
+    return size;
+  },
+};