taro-uno-ui 1.0.1 → 1.0.2

package/src/components/layout/Grid/Grid.tsx

@@ -1,123 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import { gridStyles } from './Grid.styles';
-import type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid.types';
-
-/** Grid组件 */
-export const GridComponent = forwardRef<GridRef, GridProps>((props, ref) => {
-  const {
-    children,
-    cols = 1,
-    rows,
-    gap = 'default',
-    rowGap,
-    columnGap,
-    align = 'stretch',
-    justify = 'start',
-    className,
-    style,
-    onClick,
-  } = props;
-
-  const gridRef = useRef<any>(null);
-  const [internalCols, setInternalCols] = useState<GridCols>(cols);
-  const [internalAlign, setInternalAlign] = useState<GridAlign>(align);
-  const [internalJustify, setInternalJustify] = useState<GridJustify>(justify);
-  const [internalGap, setInternalGap] = useState<GridGap>(gap);
-  const [internalRowGap, setInternalRowGap] = useState(rowGap);
-  const [internalColumnGap, setInternalColumnGap] = useState(columnGap);
-
-  // 更新内部状态
-  useEffect(() => {
-    setInternalCols(cols);
-  }, [cols]);
-
-  useEffect(() => {
-    setInternalAlign(align);
-  }, [align]);
-
-  useEffect(() => {
-    setInternalJustify(justify);
-  }, [justify]);
-
-  useEffect(() => {
-    setInternalGap(gap);
-  }, [gap]);
-
-  useEffect(() => {
-    setInternalRowGap(rowGap);
-  }, [rowGap]);
-
-  useEffect(() => {
-    setInternalColumnGap(columnGap);
-  }, [columnGap]);
-
-  // 处理点击事件
-  const handleClick = useCallback(
-    (event: any) => {
-      onClick?.(event);
-    },
-    [onClick],
-  );
-
-  // 计算样式
-  const gridStyle = gridStyles['getBaseStyle']({
-    cols: internalCols,
-    rows,
-    gap: internalGap,
-    rowGap: internalRowGap,
-    columnGap: internalColumnGap,
-    align: internalAlign,
-    justify: internalJustify,
-    style: style || {},
-  });
-
-  // 计算类名
-  const gridClassName = gridStyles['getClassName']({
-    cols: internalCols,
-    align: internalAlign,
-    justify: internalJustify,
-    gap: internalGap,
-    className: className || '',
-  });
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: gridRef.current,
-      getCols: () => internalCols,
-      getAlign: () => internalAlign,
-      getJustify: () => internalJustify,
-      getGap: () => internalGap,
-      setCols: (newCols: GridCols) => {
-        setInternalCols(newCols);
-      },
-      setAlign: (newAlign: GridAlign) => {
-        setInternalAlign(newAlign);
-      },
-      setJustify: (newJustify: GridJustify) => {
-        setInternalJustify(newJustify);
-      },
-      setGap: (newGap: GridGap) => {
-        setInternalGap(newGap);
-      },
-      scrollIntoView: (options?: ScrollIntoViewOptions) => {
-        gridRef.current?.scrollIntoView(options);
-      },
-    }),
-    [internalCols, internalAlign, internalJustify, internalGap],
-  );
-
-  return (
-    <View ref={gridRef} className={gridClassName} style={{ ...gridStyle, ...style }} onClick={handleClick}>
-      {children}
-    </View>
-  );
-});
-
-/** Grid组件显示名称 */
-GridComponent.displayName = 'Grid';
-
-/** 导出Grid组件 */
-export const Grid = GridComponent;

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

@@ -1,78 +0,0 @@
-import { ReactNode } from 'react';
-import type { ITouchEvent } from '@tarojs/components';
-import { BaseComponentProps, Size, CSSUnit } from '../../../types';
-
-/** Grid组件对齐方式 */
-export type GridAlign = 'start' | 'center' | 'end' | 'stretch';
-
-/** Grid组件对齐方式 */
-export type GridJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-
-/** Grid组件间距 */
-export type GridGap =
-  | Size
-  | number
-  | `${number}${CSSUnit}`
-  | [Size | number | `${number}${CSSUnit}`, Size | number | `${number}${CSSUnit}`];
-
-/** Grid组件列数 */
-export type GridCols = string | number | `${number}`;
-
-/** Grid组件引用 */
-export interface GridRef {
-  /** 获取元素引用 */
-  element: any;
-  /** 获取当前列数 */
-  getCols: () => GridCols;
-  /** 获取当前对齐方式 */
-  getAlign: () => GridAlign;
-  /** 获取当前对齐方式 */
-  getJustify: () => GridJustify;
-  /** 获取当前间距 */
-  getGap: () => GridGap;
-  /** 设置列数 */
-  setCols: (_cols: GridCols) => void;
-  /** 设置对齐方式 */
-  setAlign: (_align: GridAlign) => void;
-  /** 设置对齐方式 */
-  setJustify: (_justify: GridJustify) => void;
-  /** 设置间距 */
-  setGap: (_gap: GridGap) => void;
-  /** 滚动到视图 */
-  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
-}
-
-/** Grid组件属性 */
-export interface GridProps extends BaseComponentProps {
-  /** 子元素 */
-  children?: ReactNode;
-  /** 列数 */
-  cols?: GridCols;
-  /** 行数 */
-  rows?: number | undefined;
-  /** 间距 */
-  gap?: GridGap;
-  /** 垂直间距 */
-  rowGap?: Size | number | `${number}${CSSUnit}` | undefined;
-  /** 水平间距 */
-  columnGap?: Size | number | `${number}${CSSUnit}` | undefined;
-  /** 对齐方式 */
-  align?: GridAlign;
-  /** 对齐方式 */
-  justify?: GridJustify;
-  /** 点击事件 */
-  onClick?: (_event: ITouchEvent) => void;
-  /** 子元素悬停事件 */
-  onItemHover?: (_index: number, event: ITouchEvent) => void;
-  /** 子元素点击事件 */
-  onItemClick?: (_index: number, event: ITouchEvent) => void;
-  /** 响应式断点 */
-  responsive?: {
-    xs?: Partial<GridProps>;
-    sm?: Partial<GridProps>;
-    md?: Partial<GridProps>;
-    lg?: Partial<GridProps>;
-    xl?: Partial<GridProps>;
-    xxl?: Partial<GridProps>;
-  };
-}

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

@@ -1,3 +0,0 @@
-export { Grid, GridComponent } from './Grid';
-export type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid.types';
-export { gridStyles } from './Grid.styles';

package/src/components/layout/Layout/Content.tsx

@@ -1,30 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View } from '@tarojs/components';
-import { LayoutContentProps, LayoutContentRef } from './Layout.types';
-import { getContentStyle } from './Layout.styles';
-
-export const LayoutContent = forwardRef<LayoutContentRef, LayoutContentProps>(
-  ({ className, style, children, ...props }, ref) => {
-    const contentRef = React.useRef<any>(null);
-
-    useImperativeHandle(ref, () => ({
-      getContent: () => contentRef.current,
-    }));
-
-    const contentStyle = getContentStyle(style);
-    const finalStyle = {
-      ...contentStyle,
-      ...style,
-    };
-
-    return (
-      <View ref={contentRef} className={className} style={finalStyle} {...props}>
-        {children}
-      </View>
-    );
-  },
-);
-
-LayoutContent.displayName = 'LayoutContent';
-
-export default LayoutContent;

package/src/components/layout/Layout/Footer.tsx

@@ -1,30 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View } from '@tarojs/components';
-import { LayoutFooterProps, LayoutFooterRef } from './Layout.types';
-import { getFooterStyle } from './Layout.styles';
-
-export const LayoutFooter = forwardRef<LayoutFooterRef, LayoutFooterProps>(
-  ({ className, style, children, ...props }, ref) => {
-    const footerRef = React.useRef<any>(null);
-
-    useImperativeHandle(ref, () => ({
-      getFooter: () => footerRef.current,
-    }));
-
-    const footerStyle = getFooterStyle(style);
-    const finalStyle = {
-      ...footerStyle,
-      ...style,
-    };
-
-    return (
-      <View ref={footerRef} className={className} style={finalStyle} {...props}>
-        {children}
-      </View>
-    );
-  },
-);
-
-LayoutFooter.displayName = 'LayoutFooter';
-
-export default LayoutFooter;

package/src/components/layout/Layout/Header.tsx

@@ -1,30 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View } from '@tarojs/components';
-import { LayoutHeaderProps, LayoutHeaderRef } from './Layout.types';
-import { getHeaderStyle } from './Layout.styles';
-
-export const LayoutHeader = forwardRef<LayoutHeaderRef, LayoutHeaderProps>(
-  ({ className, style, children, ...props }, ref) => {
-    const headerRef = React.useRef<any>(null);
-
-    useImperativeHandle(ref, () => ({
-      getHeader: () => headerRef.current,
-    }));
-
-    const headerStyle = getHeaderStyle(style);
-    const finalStyle = {
-      ...headerStyle,
-      ...style,
-    };
-
-    return (
-      <View ref={headerRef} className={className} style={finalStyle} {...props}>
-        {children}
-      </View>
-    );
-  },
-);
-
-LayoutHeader.displayName = 'LayoutHeader';
-
-export default LayoutHeader;

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

@@ -1,84 +0,0 @@
-export const layoutStyles = {
-  layout: {
-    display: 'flex' as const,
-    flexDirection: 'column' as const,
-    flex: 1,
-    minHeight: '100vh',
-    backgroundColor: '#f0f2f5',
-  },
-  layoutHasSider: {
-    flexDirection: 'row' as const,
-  },
-  header: {
-    height: 64,
-    padding: '0 50px',
-    lineHeight: '64px',
-    background: '#001529',
-    color: '#fff',
-    position: 'relative' as const,
-    zIndex: 10,
-  },
-  content: {
-    flex: 1,
-    padding: 24,
-    minHeight: 280,
-    background: '#fff',
-    margin: '24px',
-    borderRadius: 2,
-  },
-  footer: {
-    padding: '24px 50px',
-    color: 'rgba(0, 0, 0, 0.45)',
-    textAlign: 'center' as const,
-    background: '#f0f2f5',
-  },
-  sider: {
-    background: '#001529',
-    transition: 'all 0.2s',
-    overflow: 'auto' as const,
-    height: '100vh',
-    position: 'fixed' as const,
-    left: 0,
-    top: 0,
-    bottom: 0,
-  },
-  siderCollapsed: {
-    width: 80,
-  },
-  siderExpanded: {
-    width: 200,
-  },
-};
-
-export const getLayoutStyle = (hasSider?: boolean) => {
-  const style = { ...layoutStyles.layout };
-  if (hasSider) {
-    Object.assign(style, layoutStyles.layoutHasSider);
-  }
-  return style;
-};
-
-export const getHeaderStyle = (customStyle?: React.CSSProperties) => {
-  return { ...layoutStyles.header, ...customStyle };
-};
-
-export const getContentStyle = (customStyle?: React.CSSProperties) => {
-  return { ...layoutStyles.content, ...customStyle };
-};
-
-export const getFooterStyle = (customStyle?: React.CSSProperties) => {
-  return { ...layoutStyles.footer, ...customStyle };
-};
-
-export const getSiderStyle = (collapsed?: boolean, width?: number | string, customStyle?: React.CSSProperties) => {
-  const style: React.CSSProperties = { ...layoutStyles.sider };
-  if (collapsed) {
-    Object.assign(style, layoutStyles.siderCollapsed);
-  } else {
-    Object.assign(style, layoutStyles.siderExpanded);
-  }
-  if (width) {
-    style.width = width;
-  }
-  return { ...style, ...customStyle };
-};

package/src/components/layout/Layout/Layout.test.tsx

@@ -1,10 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-import { Layout } from './Layout'
-
-describe('Layout', () => {
-  it('renders children', () => {
-    render(<Layout><div>内容区域</div></Layout>)
-    expect(screen.getByText('内容区域')).toBeInTheDocument()
-  })
-})

package/src/components/layout/Layout/Layout.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View } from '@tarojs/components';
-import { LayoutProps, LayoutRef } from './Layout.types';
-import { getLayoutStyle } from './Layout.styles';
-
-export const Layout = forwardRef<LayoutRef, LayoutProps>(({ className, style, children, hasSider, ...props }, ref) => {
-  const layoutRef = React.useRef<any>(null);
-
-  useImperativeHandle(ref, () => ({
-    getLayout: () => layoutRef.current,
-  }));
-
-  const layoutStyle = getLayoutStyle(hasSider);
-  const finalStyle = {
-    ...layoutStyle,
-    ...style,
-  };
-
-  return (
-    <View ref={layoutRef} className={className} style={finalStyle} {...props}>
-      {children}
-    </View>
-  );
-});
-
-Layout.displayName = 'Layout';
-
-export default Layout;

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

@@ -1,58 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewProps } from '@tarojs/components';
-
-export interface LayoutProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-  hasSider?: boolean;
-}
-
-export interface LayoutHeaderProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-}
-
-export interface LayoutContentProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-}
-
-export interface LayoutFooterProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-}
-
-export interface LayoutSiderProps extends ViewProps {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: ReactNode;
-  width?: number | string;
-  collapsed?: boolean;
-  collapsedWidth?: number | string;
-  onCollapse?: (_collapsed: boolean) => void;
-}
-
-export interface LayoutRef {
-  getLayout: () => HTMLDivElement | null;
-}
-
-export interface LayoutHeaderRef {
-  getHeader: () => HTMLDivElement | null;
-}
-
-export interface LayoutContentRef {
-  getContent: () => HTMLDivElement | null;
-}
-
-export interface LayoutFooterRef {
-  getFooter: () => HTMLDivElement | null;
-}
-
-export interface LayoutSiderRef {
-  getSider: () => HTMLDivElement | null;
-  toggleCollapse: () => void;
-}

package/src/components/layout/Layout/Sider.tsx

@@ -1,44 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import { LayoutSiderProps, LayoutSiderRef } from './Layout.types';
-import { getSiderStyle } from './Layout.styles';
-
-export const LayoutSider = forwardRef<LayoutSiderRef, LayoutSiderProps>(
-  ({ className, style, children, width = 200, collapsed = false, collapsedWidth = 80, onCollapse, ...props }, ref) => {
-    const [isCollapsed, setIsCollapsed] = useState(collapsed);
-    const siderRef = React.useRef<any>(null);
-
-    const toggleCollapse = useCallback(() => {
-      const newCollapsed = !isCollapsed;
-      setIsCollapsed(newCollapsed);
-      onCollapse?.(newCollapsed);
-    }, [isCollapsed, onCollapse]);
-
-    useImperativeHandle(ref, () => ({
-      getSider: () => siderRef.current,
-      toggleCollapse,
-    }));
-
-    React.useEffect(() => {
-      setIsCollapsed(collapsed);
-    }, [collapsed]);
-
-    const currentWidth = isCollapsed ? collapsedWidth : width;
-
-    const siderStyle = getSiderStyle(isCollapsed, currentWidth, style);
-    const finalStyle = {
-      ...siderStyle,
-      ...style,
-    };
-
-    return (
-      <View ref={siderRef} className={className} style={finalStyle} {...props}>
-        {children}
-      </View>
-    );
-  },
-);
-
-LayoutSider.displayName = 'LayoutSider';
-
-export default LayoutSider;

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

@@ -1,22 +0,0 @@
-export { Layout } from './Layout';
-export { LayoutHeader } from './Header';
-export { LayoutContent } from './Content';
-export { LayoutFooter } from './Footer';
-export { LayoutSider } from './Sider';
-export type {
-  LayoutProps,
-  LayoutRef,
-  LayoutHeaderProps,
-  LayoutContentProps,
-  LayoutFooterProps,
-  LayoutSiderProps,
-} from './Layout.types';
-export type { LayoutHeaderRef, LayoutContentRef, LayoutFooterRef, LayoutSiderRef } from './Layout.types';
-export {
-  layoutStyles,
-  getLayoutStyle,
-  getHeaderStyle,
-  getContentStyle,
-  getFooterStyle,
-  getSiderStyle,
-} from './Layout.styles';