taro-uno-ui 0.9.0-beta

package/src/components/layout/Container/Container.tsx

@@ -0,0 +1,132 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View } from '@tarojs/components';
+import { containerStyles } from './Container.styles';
+import type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container.types';
+
+/** Container组件 */
+export const ContainerComponent = forwardRef<ContainerRef, ContainerProps>((props, ref) => {
+  const {
+    children,
+    size = 'default',
+    maxWidth,
+    padding = 'medium',
+    margin = 'medium',
+    align = 'stretch',
+    center = false,
+    scrollable = false,
+    scrollDirection = 'vertical',
+    className,
+    style,
+    onClick,
+    onScroll,
+    responsive,
+    ...restProps
+  } = props;
+
+  const containerRef = useRef<any>(null);
+  const [internalSize, setInternalSize] = useState<ContainerSize>(size);
+  const [internalAlign, setInternalAlign] = useState<ContainerAlign>(align);
+  const [internalCenter, setInternalCenter] = useState(center);
+  const [internalScrollable, setInternalScrollable] = useState(scrollable);
+  const [internalScrollDirection, setInternalScrollDirection] = useState(scrollDirection);
+
+  // 更新内部状态
+  useEffect(() => {
+    setInternalSize(size);
+  }, [size]);
+
+  useEffect(() => {
+    setInternalAlign(align);
+  }, [align]);
+
+  useEffect(() => {
+    setInternalCenter(center);
+  }, [center]);
+
+  useEffect(() => {
+    setInternalScrollable(scrollable);
+  }, [scrollable]);
+
+  useEffect(() => {
+    setInternalScrollDirection(scrollDirection);
+  }, [scrollDirection]);
+
+  // 处理点击事件
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      onClick?.(event);
+    },
+    [onClick],
+  );
+
+  
+  
+  // 计算样式
+  const containerStyle = containerStyles['getBaseStyle']({
+    size: internalSize,
+    maxWidth,
+    padding,
+    margin,
+    align: internalAlign,
+    center: internalCenter,
+    scrollable: internalScrollable,
+    scrollDirection: internalScrollDirection,
+    style: style || {},
+  });
+
+  // 计算响应式样式
+  const responsiveStyle = responsive ? containerStyles['getResponsiveStyle'](responsive) : {};
+
+  // 计算类名
+  const containerClassName = containerStyles['getClassName']({
+    size: internalSize,
+    align: internalAlign,
+    center: internalCenter,
+    scrollable: internalScrollable,
+    className: className || '',
+  });
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: containerRef.current,
+      getSize: () => internalSize,
+      getAlign: () => internalAlign,
+      getMaxWidth: () => maxWidth || containerStyles.SIZE_MAP[internalSize as keyof typeof containerStyles.SIZE_MAP],
+      setSize: (newSize: ContainerSize) => {
+        setInternalSize(newSize);
+      },
+      setAlign: (newAlign: ContainerAlign) => {
+        setInternalAlign(newAlign);
+      },
+      setMaxWidth: (newMaxWidth: number | string) => {
+        if (containerRef.current) {
+          containerRef.current.style.maxWidth = typeof newMaxWidth === 'number' ? `${newMaxWidth}px` : newMaxWidth;
+        }
+      },
+      scrollIntoView: (options?: ScrollIntoViewOptions) => {
+        containerRef.current?.scrollIntoView(options);
+      },
+    }),
+    [internalSize, internalAlign, maxWidth],
+  );
+
+  return (
+    <View
+      ref={containerRef}
+      className={containerClassName}
+      style={{ ...containerStyle, ...responsiveStyle }}
+      onClick={handleClick}
+      {...restProps}
+    >
+      {children}
+    </View>
+  );
+});
+
+/** Container组件显示名称 */
+ContainerComponent.displayName = 'Container';
+
+/** 导出Container组件 */
+export const Container = ContainerComponent;

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

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, Size, CSSUnit } from '../../../types';
+
+/** Container组件尺寸 */
+export type ContainerSize = Size | 'full' | 'fluid';
+
+/** Container组件对齐方式 */
+export type ContainerAlign = 'start' | 'center' | 'end' | 'stretch';
+
+/** Container组件引用 */
+export interface ContainerRef {
+  /** 获取元素引用 */
+  element: any;
+  /** 获取当前尺寸 */
+  getSize: () => ContainerSize;
+  /** 获取当前对齐方式 */
+  getAlign: () => ContainerAlign;
+  /** 获取当前最大宽度 */
+  getMaxWidth: () => number | string;
+  /** 设置尺寸 */
+  setSize: (_size: ContainerSize) => void;
+  /** 设置对齐方式 */
+  setAlign: (_align: ContainerAlign) => void;
+  /** 设置最大宽度 */
+  setMaxWidth: (_maxWidth: number | string) => void;
+  /** 滚动到视图 */
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+}
+
+/** Container组件属性 */
+export interface ContainerProps extends BaseComponentProps {
+  /** 子元素 */
+  children?: ReactNode;
+  /** 容器尺寸 */
+  size?: ContainerSize;
+  /** 最大宽度 */
+  maxWidth?: number | string;
+  /** 内边距 */
+  padding?: Size | number | `${number}${CSSUnit}`;
+  /** 外边距 */
+  margin?: Size | number | `${number}${CSSUnit}`;
+  /** 对齐方式 */
+  align?: ContainerAlign;
+  /** 是否居中 */
+  center?: boolean;
+  /** 是否可滚动 */
+  scrollable?: boolean;
+  /** 滚动方向 */
+  scrollDirection?: 'horizontal' | 'vertical' | 'both';
+  /** 点击事件 */
+  onClick?: (_event: React.MouseEvent) => void;
+  /** 滚动事件 */
+  onScroll?: (_event: React.UIEvent) => void;
+  /** 响应式断点 */
+  responsive?: {
+    xs?: Partial<ContainerProps>;
+    sm?: Partial<ContainerProps>;
+    md?: Partial<ContainerProps>;
+    lg?: Partial<ContainerProps>;
+    xl?: Partial<ContainerProps>;
+    xxl?: Partial<ContainerProps>;
+  };
+}

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

@@ -0,0 +1,3 @@
+export { Container, ContainerComponent } from './Container';
+export type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container.types';
+export { containerStyles } from './Container.styles';

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

@@ -0,0 +1,183 @@
+import type { GridProps, GridGap, GridCols } from './Grid.types';
+import type { Size, CSSUnit } from '../../../types';
+
+/** Grid组件样式管理器 */
+export const gridStyles = {
+  /** 尺寸映射表 */
+  SIZE_MAP: {
+    small: 8,
+    medium: 16,
+    large: 24,
+    default: 16,
+  } as const,
+
+  /** 对齐方式映射表 */
+  ALIGN_MAP: {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+  } as const,
+
+  /** 对齐方式映射表 */
+  JUSTIFY_MAP: {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+  } as const,
+
+  /**
+   * 解析尺寸值
+   */
+  parseSize: (size: Size | number | `${number}${CSSUnit}`): string => {
+    if (typeof size === 'number') {
+      return `${size}px`;
+    }
+
+    if (typeof size === 'string') {
+      if (size in gridStyles.SIZE_MAP) {
+        return `${gridStyles.SIZE_MAP[size as keyof typeof gridStyles.SIZE_MAP]}px`;
+      }
+      return size;
+    }
+
+    return `${gridStyles.SIZE_MAP.default}px`;
+  },
+
+  /**
+   * 解析间距值
+   */
+  parseGap: (gap: GridGap): string => {
+    if (Array.isArray(gap)) {
+      const [rowGap, columnGap] = gap;
+      return `${gridStyles['parseSize'](rowGap)} ${gridStyles['parseSize'](columnGap)}`;
+    }
+    return gridStyles['parseSize'](gap);
+  },
+
+  /**
+   * 解析列数
+   */
+  parseCols: (cols: GridCols): string => {
+    if (typeof cols === 'number') {
+      return `repeat(${cols}, 1fr)`;
+    }
+    return `repeat(${parseInt(cols)}, 1fr)`;
+  },
+
+  /**
+   * 获取基础样式
+   */
+  getBaseStyle: (props: GridProps): React.CSSProperties => {
+    const {
+      cols = 1,
+      rows,
+      gap = 'default',
+      rowGap,
+      columnGap,
+      align = 'stretch',
+      justify = 'start',
+      style = {},
+    } = props;
+
+    // 计算网格模板列
+    const gridTemplateColumns = gridStyles['parseCols'](cols);
+
+    // 计算网格模板行
+    const gridTemplateRows = rows ? `repeat(${rows}, 1fr)` : undefined;
+
+    // 计算间距
+    const gapValue =
+      rowGap || columnGap
+        ? `${rowGap ? gridStyles['parseSize'](rowGap) : gridStyles['parseSize'](Array.isArray(gap) ? gap[0] : gap)} ${
+            columnGap ? gridStyles['parseSize'](columnGap) : gridStyles['parseSize'](Array.isArray(gap) ? gap[1] : gap)
+          }`
+        : gridStyles['parseGap'](gap);
+
+    // 计算对齐方式
+    const alignItems = gridStyles['ALIGN_MAP'][align];
+    const justifyContent = gridStyles['JUSTIFY_MAP'][justify];
+
+    return {
+      display: 'grid',
+      gridTemplateColumns,
+      gridTemplateRows,
+      gap: gapValue,
+      alignItems,
+      justifyContent,
+      ...style,
+    };
+  },
+
+  /**
+   * 获取类名
+   */
+  getClassName: (props: GridProps): string => {
+    const { cols = 1, align = 'stretch', justify = 'start', gap = 'default', className = '' } = props;
+
+    const baseClass = 'taro-uno-grid';
+    const colsClass = `${baseClass}--cols-${cols}`;
+    const alignClass = `${baseClass}--${align}`;
+    const justifyClass = `${baseClass}--${justify}`;
+    const gapClass = `${baseClass}--gap-${gap}`;
+
+    return [baseClass, colsClass, alignClass, justifyClass, gapClass, className].filter(Boolean).join(' ');
+  },
+
+  /**
+   * 获取子元素样式
+   */
+  getItemStyle: (index: number, _total: number, cols: GridCols): React.CSSProperties => {
+    const style: React.CSSProperties = {
+      position: 'relative',
+      minWidth: 0,
+      minHeight: 0,
+    };
+
+    // 计算网格位置
+    const colCount = typeof cols === 'number' ? cols : parseInt(cols);
+    const row = Math.floor(index / colCount);
+    const col = index % colCount;
+
+    style.gridColumn = `${col + 1} / span 1`;
+    style.gridRow = `${row + 1} / span 1`;
+
+    return style;
+  },
+
+  /**
+   * 获取响应式样式
+   */
+  getResponsiveStyle: (responsive: GridProps['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;
+  },
+};