taro-uno-ui 0.9.0 → 1.0.0

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

@@ -1,6 +1,5 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
 import { View } from '@tarojs/components';
-import type { ITouchEvent } from '@tarojs/components';
 import { gridStyles } from './Grid.styles';
 import type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid.types';
 
@@ -18,10 +17,6 @@ export const GridComponent = forwardRef<GridRef, GridProps>((props, ref) => {
     className,
     style,
     onClick,
-    onItemHover,
-    onItemClick,
-    responsive,
-    ...restProps
   } = props;
 
   const gridRef = useRef<any>(null);
@@ -59,48 +54,12 @@ export const GridComponent = forwardRef<GridRef, GridProps>((props, ref) => {
 
   // 处理点击事件
   const handleClick = useCallback(
-    (event: ITouchEvent) => {
+    (event: any) => {
       onClick?.(event);
     },
     [onClick],
   );
 
-  // 处理子元素点击事件
-  const handleItemClick = useCallback(
-    (index: number, event: ITouchEvent) => {
-      onItemClick?.(index, event);
-    },
-    [onItemClick],
-  );
-
-  // 处理子元素悬停事件
-  const handleItemHover = useCallback(
-    (index: number, event: ITouchEvent) => {
-      onItemHover?.(index, event);
-    },
-    [onItemHover],
-  );
-
-  // 渲染子元素
-  const renderChildren = () => {
-    if (!children) return null;
-
-    const childrenArray = React.Children.toArray(children);
-
-    return childrenArray.map((child, index) => (
-      <View
-        key={index}
-        className="taro-uno-grid__item"
-        style={gridStyles['getItemStyle'](index, childrenArray.length, internalCols)}
-        onClick={(e: ITouchEvent) => handleItemClick(index, e)}
-        onTouchStart={(event) => handleItemHover(index, event as ITouchEvent)}
-        onTouchEnd={(event) => handleItemHover(index, event as ITouchEvent)}
-      >
-        {child}
-      </View>
-    ));
-  };
-
   // 计算样式
   const gridStyle = gridStyles['getBaseStyle']({
     cols: internalCols,
@@ -113,9 +72,6 @@ export const GridComponent = forwardRef<GridRef, GridProps>((props, ref) => {
     style: style || {},
   });
 
-  // 计算响应式样式
-  const responsiveStyle = responsive ? gridStyles['getResponsiveStyle'](responsive) : {};
-
   // 计算类名
   const gridClassName = gridStyles['getClassName']({
     cols: internalCols,
@@ -154,14 +110,8 @@ export const GridComponent = forwardRef<GridRef, GridProps>((props, ref) => {
   );
 
   return (
-    <View
-      ref={gridRef}
-      className={gridClassName}
-      style={{ ...gridStyle, ...responsiveStyle }}
-      onClick={handleClick}
-      {...restProps}
-    >
-      {renderChildren()}
+    <View ref={gridRef} className={gridClassName} style={{ ...gridStyle, ...style }} onClick={handleClick}>
+      {children}
     </View>
   );
 });

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

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

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

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

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

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

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

@@ -48,37 +48,37 @@ export const layoutStyles = {
   siderExpanded: {
     width: 200,
   },
-}
+};
 
 export const getLayoutStyle = (hasSider?: boolean) => {
-  const style = { ...layoutStyles.layout }
+  const style = { ...layoutStyles.layout };
   if (hasSider) {
-    Object.assign(style, layoutStyles.layoutHasSider)
+    Object.assign(style, layoutStyles.layoutHasSider);
   }
-  return style
-}
+  return style;
+};
 
 export const getHeaderStyle = (customStyle?: React.CSSProperties) => {
-  return { ...layoutStyles.header, ...customStyle }
-}
+  return { ...layoutStyles.header, ...customStyle };
+};
 
 export const getContentStyle = (customStyle?: React.CSSProperties) => {
-  return { ...layoutStyles.content, ...customStyle }
-}
+  return { ...layoutStyles.content, ...customStyle };
+};
 
 export const getFooterStyle = (customStyle?: React.CSSProperties) => {
-  return { ...layoutStyles.footer, ...customStyle }
-}
+  return { ...layoutStyles.footer, ...customStyle };
+};
 
 export const getSiderStyle = (collapsed?: boolean, width?: number | string, customStyle?: React.CSSProperties) => {
-  const style: React.CSSProperties = { ...layoutStyles.sider }
+  const style: React.CSSProperties = { ...layoutStyles.sider };
   if (collapsed) {
-    Object.assign(style, layoutStyles.siderCollapsed)
+    Object.assign(style, layoutStyles.siderCollapsed);
   } else {
-    Object.assign(style, layoutStyles.siderExpanded)
+    Object.assign(style, layoutStyles.siderExpanded);
   }
   if (width) {
-    style.width = width
+    style.width = width;
   }
-  return { ...style, ...customStyle }
-}
+  return { ...style, ...customStyle };
+};

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

@@ -1,39 +1,28 @@
-import React, { forwardRef, useImperativeHandle } from 'react'
-import { View } from '@tarojs/components'
-import { LayoutProps, LayoutRef } from './Layout.types'
-import { getLayoutStyle } from './Layout.styles'
+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)
+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 layoutStyle = getLayoutStyle(hasSider);
   const finalStyle = {
     ...layoutStyle,
     ...style,
-  }
+  };
 
   return (
-    <View
-      ref={layoutRef}
-      className={className}
-      style={finalStyle}
-      {...props}
-    >
+    <View ref={layoutRef} className={className} style={finalStyle} {...props}>
       {children}
     </View>
-  )
-})
+  );
+});
 
-Layout.displayName = 'Layout'
+Layout.displayName = 'Layout';
 
-export default Layout
+export default Layout;

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

@@ -1,58 +1,58 @@
-import { ReactNode } from 'react'
-import { ViewProps } from '@tarojs/components'
+import { ReactNode } from 'react';
+import { ViewProps } from '@tarojs/components';
 
 export interface LayoutProps extends ViewProps {
-  className?: string
-  style?: React.CSSProperties
-  children?: ReactNode
-  hasSider?: boolean
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
+  hasSider?: boolean;
 }
 
 export interface LayoutHeaderProps extends ViewProps {
-  className?: string
-  style?: React.CSSProperties
-  children?: ReactNode
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
 }
 
 export interface LayoutContentProps extends ViewProps {
-  className?: string
-  style?: React.CSSProperties
-  children?: ReactNode
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
 }
 
 export interface LayoutFooterProps extends ViewProps {
-  className?: string
-  style?: React.CSSProperties
-  children?: ReactNode
+  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
+  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
+  getLayout: () => HTMLDivElement | null;
 }
 
 export interface LayoutHeaderRef {
-  getHeader: () => HTMLDivElement | null
+  getHeader: () => HTMLDivElement | null;
 }
 
 export interface LayoutContentRef {
-  getContent: () => HTMLDivElement | null
+  getContent: () => HTMLDivElement | null;
 }
 
 export interface LayoutFooterRef {
-  getFooter: () => HTMLDivElement | null
+  getFooter: () => HTMLDivElement | null;
 }
 
 export interface LayoutSiderRef {
-  getSider: () => HTMLDivElement | null
-  toggleCollapse: () => void
-}
+  getSider: () => HTMLDivElement | null;
+  toggleCollapse: () => void;
+}

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

@@ -1,56 +1,44 @@
-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
+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

@@ -3,6 +3,20 @@ 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 {
+  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';
+export {
+  layoutStyles,
+  getLayoutStyle,
+  getHeaderStyle,
+  getContentStyle,
+  getFooterStyle,
+  getSiderStyle,
+} from './Layout.styles';