@beppla/tapas-ui 1.2.34 → 1.2.36

package/components/StatisticsTable/StatisticsTable.tsx

@@ -1,12 +1,21 @@
-import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, Platform } from 'react-native';
+import React, { useMemo, useCallback, useState, useRef } from 'react';
+import { View, ScrollView, StyleSheet, Platform, TouchableOpacity, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import Text from '../Text/Text';
 import Pagination from '../Pagination/Pagination';
 
+export type CellAlignment = 'left' | 'center' | 'right';
+export type CellDataType = 'text' | 'number' | 'currency' | 'custom';
+
 export interface StatisticsTableColumn {
   key: string;
   title: string;
-  width?: number;
+  width?: number; // 动态列宽
+  minWidth?: number; // 最小列宽
+  maxWidth?: number; // 最大列宽
+  align?: CellAlignment;
+  dataType?: CellDataType;
+  isAction?: boolean; // 是否是 action 列
+  render?: (cell: StatisticsTableCell, rowData: any) => React.ReactNode;
 }
 
 export interface StatisticsTableCell {
@@ -14,11 +23,18 @@ export interface StatisticsTableCell {
   columnKey: string;
   quantity: number;
   amount: number;
+  data?: any; // 额外数据，用于 render 函数
+}
+
+export interface StatisticsTableAction {
+  label: string;
+  onPress: (rowKey: string, data?: any) => void;
+  icon?: string;
 }
 
 export interface StatisticsTableProps {
   // 行标题（如日期）
-  rows: Array<{ key: string; label: string }>;
+  rows: Array<{ key: string; label: string; data?: any; height?: number }>;
   // 列标题（如门店）
   columns: StatisticsTableColumn[];
   // 单元格数据
@@ -39,6 +55,25 @@ export interface StatisticsTableProps {
   maxHeight?: number;
   rowLabelWidth?: number;
   style?: any;
+  // 格式化函数
+  formatQuantity?: (quantity: number) => string;
+  formatAmount?: (amount: number) => string;
+  // 虚拟滚动（性能优化）
+  enableVirtualization?: boolean;
+  virtualRowHeight?: number;
+  // 行点击事件
+  onRowPress?: (rowKey: string, data?: any) => void;
+  // Action 列配置
+  rowActions?: StatisticsTableAction[];
+  // 动态行高
+  rowHeight?: number; // 默认行高
+  getRowHeight?: (rowKey: string, rowData?: any) => number; // 自定义每行高度
+  // 动态列宽
+  getColumnWidth?: (columnKey: string, column: StatisticsTableColumn) => number; // 自定义列宽
+  // 滚动阴影效果
+  enableScrollShadow?: boolean; // 启用滚动阴影
+  scrollShadowColor?: string; // 阴影颜色
+  scrollShadowSize?: number; // 阴影大小
 }
 
 export function StatisticsTable({
@@ -53,11 +88,36 @@ export function StatisticsTable({
   maxHeight = 500,
   rowLabelWidth = 150,
   style,
+  formatQuantity = (q) => q.toLocaleString(),
+  formatAmount = (a) => `€${a.toFixed(2)}`,
+  enableVirtualization = false,
+  virtualRowHeight = 60,
+  onRowPress,
+  rowActions,
+  rowHeight = 60,
+  getRowHeight,
+  getColumnWidth,
+  enableScrollShadow = true,
+  scrollShadowColor = 'rgba(0, 0, 0, 0.1)',
+  scrollShadowSize = 8,
 }: StatisticsTableProps) {
   
+  // 滚动状态
+  const [horizontalScrollState, setHorizontalScrollState] = useState({
+    isAtStart: true,
+    isAtEnd: false,
+  });
+  const [verticalScrollState, setVerticalScrollState] = useState({
+    isAtStart: true,
+    isAtEnd: false,
+  });
+  
+  const horizontalScrollRef = useRef<ScrollView>(null);
+  const verticalScrollRef = useRef<ScrollView>(null);
+  
   // 构建矩阵数据
   const matrix = useMemo(() => {
-    const data: Record<string, Record<string, { quantity: number; amount: number }>> = {};
+    const data: Record<string, Record<string, { quantity: number; amount: number; data?: any }>> = {};
     rows.forEach(row => {
       if (!data[row.key]) {
         data[row.key] = {};
@@ -74,7 +134,9 @@ export function StatisticsTable({
   const rowStats = useMemo(() => {
     if (!showRowStats) return null;
     return rows.map(row => {
-      const rowCells = columns.map(col => matrix[row.key]?.[col.key] || { quantity: 0, amount: 0 });
+      const rowCells = columns
+        .filter(col => !col.isAction) // 排除 action 列
+        .map(col => matrix[row.key]?.[col.key] || { quantity: 0, amount: 0 });
       const sumQuantity = rowCells.reduce((sum, cell) => sum + cell.quantity, 0);
       const sumAmount = rowCells.reduce((sum, cell) => sum + cell.amount, 0);
       const count = rowCells.length || 1;
@@ -87,17 +149,104 @@ export function StatisticsTable({
   // 计算列统计（每列的总和和平均值）
   const columnStats = useMemo(() => {
     if (!showColumnStats) return null;
-    return columns.map(col => {
-      const colCells = rows.map(row => matrix[row.key]?.[col.key] || { quantity: 0, amount: 0 });
-      const sumQuantity = colCells.reduce((sum, cell) => sum + cell.quantity, 0);
-      const sumAmount = colCells.reduce((sum, cell) => sum + cell.amount, 0);
-      const count = colCells.length || 1;
-      const meanQuantity = sumQuantity / count;
-      const meanAmount = sumAmount / count;
-      return { sumQuantity, sumAmount, meanQuantity, meanAmount };
-    });
+    return columns
+      .filter(col => !col.isAction) // 排除 action 列
+      .map(col => {
+        const colCells = rows.map(row => matrix[row.key]?.[col.key] || { quantity: 0, amount: 0 });
+        const sumQuantity = colCells.reduce((sum, cell) => sum + cell.quantity, 0);
+        const sumAmount = colCells.reduce((sum, cell) => sum + cell.amount, 0);
+        const count = colCells.length || 1;
+        const meanQuantity = sumQuantity / count;
+        const meanAmount = sumAmount / count;
+        return { sumQuantity, sumAmount, meanQuantity, meanAmount };
+      });
   }, [rows, columns, matrix, showColumnStats]);
 
+  // 获取列宽
+  const getColWidth = useCallback((column: StatisticsTableColumn) => {
+    if (getColumnWidth) {
+      return getColumnWidth(column.key, column);
+    }
+    return column.width || 150;
+  }, [getColumnWidth]);
+
+  // 获取行高
+  const getRowHeightValue = useCallback((row: { key: string; label: string; data?: any; height?: number }) => {
+    if (row.height) return row.height;
+    if (getRowHeight) {
+      return getRowHeight(row.key, row.data);
+    }
+    return rowHeight;
+  }, [rowHeight, getRowHeight]);
+
+  // 处理水平滚动
+  const handleHorizontalScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    const isAtStart = contentOffset.x <= 0;
+    const isAtEnd = contentOffset.x + layoutMeasurement.width >= contentSize.width - 1;
+    
+    setHorizontalScrollState({ isAtStart, isAtEnd });
+  }, []);
+
+  // 处理垂直滚动
+  const handleVerticalScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    const isAtStart = contentOffset.y <= 0;
+    const isAtEnd = contentOffset.y + layoutMeasurement.height >= contentSize.height - 1;
+    
+    setVerticalScrollState({ isAtStart, isAtEnd });
+  }, []);
+
+  // 获取单元格对齐方式
+  const getCellAlignment = useCallback((column: StatisticsTableColumn, isHeader: boolean = false) => {
+    if (column.align) return column.align;
+    if (isHeader) return 'center';
+    // 默认：数字右对齐，文本左对齐
+    if (column.dataType === 'number' || column.dataType === 'currency') {
+      return 'right';
+    }
+    return 'left';
+  }, []);
+
+  // 渲染单元格内容
+  const renderCellContent = useCallback((column: StatisticsTableColumn, cell: any, rowData?: any) => {
+    // 自定义渲染
+    if (column.render) {
+      return column.render(cell, rowData);
+    }
+
+    // Action 列
+    if (column.isAction && rowActions) {
+      return (
+        <View style={styles.actionContainer}>
+          {rowActions.map((action, index) => (
+            <TouchableOpacity
+              key={index}
+              style={styles.actionButton}
+              onPress={() => action.onPress(cell.rowKey, rowData)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.actionButtonText}>{action.label}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      );
+    }
+
+    // 默认渲染
+    const align = getCellAlignment(column);
+    return (
+      <View style={[styles.cellContentContainer, { alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center' }]}>
+        <Text style={[styles.cellQuantity, align === 'right' && styles.cellQuantityRight]}>
+          {formatQuantity(cell.quantity)}
+        </Text>
+        <Text style={[styles.cellAmount, align === 'right' && styles.cellAmountRight]}>
+          {formatAmount(cell.amount)}
+        </Text>
+      </View>
+    );
+  }, [rowActions, getCellAlignment, formatQuantity, formatAmount]);
+
   if (loading) {
     return (
       <View style={[styles.container, style]}>
@@ -118,23 +267,89 @@ export function StatisticsTable({
     );
   }
 
+  // 虚拟滚动实现（简化版）
+  const visibleRows = enableVirtualization 
+    ? rows.slice(0, Math.ceil(maxHeight / virtualRowHeight))
+    : rows;
+
   return (
     <View style={[styles.container, style]}>
+      {/* 左边阴影 */}
+      {enableScrollShadow && !horizontalScrollState.isAtStart && (
+        <View style={[
+          styles.shadowLeft,
+          {
+            width: scrollShadowSize,
+            backgroundColor: 'transparent',
+            shadowColor: scrollShadowColor,
+          }
+        ]} />
+      )}
+      
+      {/* 右边阴影 */}
+      {enableScrollShadow && !horizontalScrollState.isAtEnd && (
+        <View style={[
+          styles.shadowRight,
+          {
+            width: scrollShadowSize,
+            backgroundColor: 'transparent',
+            shadowColor: scrollShadowColor,
+          }
+        ]} />
+      )}
+
       <ScrollView
+        ref={horizontalScrollRef}
         horizontal
         showsHorizontalScrollIndicator={Platform.OS === 'web'}
+        onScroll={handleHorizontalScroll}
+        scrollEventThrottle={16}
       >
         <View>
+          {/* 顶部阴影 */}
+          {enableScrollShadow && !verticalScrollState.isAtStart && (
+            <View style={[
+              styles.shadowTop,
+              {
+                height: scrollShadowSize,
+                backgroundColor: 'transparent',
+                shadowColor: scrollShadowColor,
+              }
+            ]} />
+          )}
+
           {/* Table Header */}
           <View style={styles.header}>
             <View style={[styles.headerCell, { width: rowLabelWidth }]}>
               <Text style={styles.headerText}></Text>
             </View>
-            {columns.map((column) => (
-              <View key={column.key} style={[styles.headerCell, { width: column.width || 150 }]}>
-                <Text style={styles.headerText}>{column.title}</Text>
-              </View>
-            ))}
+            {columns.map((column) => {
+              const align = getCellAlignment(column, true);
+              const colWidth = getColWidth(column);
+              return (
+                <View 
+                  key={column.key} 
+                  style={[
+                    styles.headerCell, 
+                    { 
+                      width: colWidth,
+                      minWidth: column.minWidth,
+                      maxWidth: column.maxWidth,
+                    },
+                    align === 'right' && styles.headerCellRight,
+                    align === 'left' && styles.headerCellLeft,
+                  ]}
+                >
+                  <Text style={[
+                    styles.headerText,
+                    align === 'right' && styles.headerTextRight,
+                    align === 'left' && styles.headerTextLeft,
+                  ]}>
+                    {column.title}
+                  </Text>
+                </View>
+              );
+            })}
             {showRowStats && (
               <>
                 <View style={[styles.headerCell, { width: 120 }]}>
@@ -149,39 +364,78 @@ export function StatisticsTable({
 
           {/* Table Body */}
           <ScrollView
+            ref={verticalScrollRef}
             style={{ maxHeight }}
             showsVerticalScrollIndicator={Platform.OS === 'web'}
+            removeClippedSubviews={enableVirtualization}
+            onScroll={handleVerticalScroll}
+            scrollEventThrottle={16}
           >
-            {rows.map((row, rowIndex) => {
+            {visibleRows.map((row, rowIndex) => {
               const rowStat = rowStats?.[rowIndex];
+              const isClickable = !!onRowPress;
+              const currentRowHeight = getRowHeightValue(row);
               
               return (
-                <View key={row.key} style={styles.row}>
-                  <View style={[styles.cell, { width: rowLabelWidth }]}>
+                <TouchableOpacity
+                  key={row.key}
+                  style={[styles.row, { minHeight: currentRowHeight }]}
+                  onPress={isClickable ? () => onRowPress(row.key, row.data) : undefined}
+                  activeOpacity={isClickable ? 0.7 : 1}
+                  disabled={!isClickable}
+                >
+                  <View style={[styles.cell, { width: rowLabelWidth, minHeight: currentRowHeight }]}>
                     <Text style={styles.rowLabel}>{row.label}</Text>
                   </View>
                   {columns.map((column) => {
-                    const cell = matrix[row.key]?.[column.key] || { quantity: 0, amount: 0 };
+                    const cell = matrix[row.key]?.[column.key] || { quantity: 0, amount: 0, rowKey: row.key, columnKey: column.key };
+                    const align = getCellAlignment(column);
+                    const colWidth = getColWidth(column);
+                    
                     return (
-                      <View key={column.key} style={[styles.cell, { width: column.width || 150 }]}>
-                        <Text style={styles.cellQuantity}>{cell.quantity}</Text>
-                        <Text style={styles.cellAmount}>€{cell.amount.toFixed(2)}</Text>
+                      <View 
+                        key={column.key} 
+                        style={[
+                          styles.cell, 
+                          { 
+                            width: colWidth,
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                            minHeight: currentRowHeight,
+                          },
+                          align === 'right' && styles.cellRight,
+                          align === 'left' && styles.cellLeft,
+                        ]}
+                      >
+                        {renderCellContent(column, cell, row.data)}
                       </View>
                     );
                   })}
                   {showRowStats && rowStat && (
                     <>
-                      <View style={[styles.cell, { width: 120 }]}>
-                        <Text style={styles.cellQuantity}>{rowStat.sumQuantity}</Text>
-                        <Text style={styles.cellAmount}>€{rowStat.sumAmount.toFixed(2)}</Text>
+                      <View style={[styles.cell, styles.cellRight, { width: 120 }]}>
+                        <View style={styles.cellContentContainer}>
+                          <Text style={[styles.cellQuantity, styles.cellQuantityRight]}>
+                            {formatQuantity(rowStat.sumQuantity)}
+                          </Text>
+                          <Text style={[styles.cellAmount, styles.cellAmountRight]}>
+                            {formatAmount(rowStat.sumAmount)}
+                          </Text>
+                        </View>
                       </View>
-                      <View style={[styles.cell, { width: 120 }]}>
-                        <Text style={styles.cellQuantity}>{rowStat.meanQuantity.toFixed(1)}</Text>
-                        <Text style={styles.cellAmount}>€{rowStat.meanAmount.toFixed(2)}</Text>
+                      <View style={[styles.cell, styles.cellRight, { width: 120 }]}>
+                        <View style={styles.cellContentContainer}>
+                          <Text style={[styles.cellQuantity, styles.cellQuantityRight]}>
+                            {formatQuantity(Math.round(rowStat.meanQuantity * 10) / 10)}
+                          </Text>
+                          <Text style={[styles.cellAmount, styles.cellAmountRight]}>
+                            {formatAmount(rowStat.meanAmount)}
+                          </Text>
+                        </View>
                       </View>
                     </>
                   )}
-                </View>
+                </TouchableOpacity>
               );
             })}
 
@@ -192,12 +446,36 @@ export function StatisticsTable({
                   <View style={[styles.cell, { width: rowLabelWidth }]}>
                     <Text style={styles.statsLabel}>Sum</Text>
                   </View>
-                  {columns.map((column, colIndex) => {
-                    const stat = columnStats[colIndex];
+                  {columns.map((column) => {
+                    const colWidth = getColWidth(column);
+                    if (column.isAction) {
+                      return <View key={column.key} style={[styles.cell, { width: colWidth, minWidth: column.minWidth, maxWidth: column.maxWidth }]} />;
+                    }
+                    const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
+                    const align = getCellAlignment(column);
+                    
                     return (
-                      <View key={column.key} style={[styles.cell, { width: column.width || 150 }]}>
-                        <Text style={styles.cellQuantity}>{stat?.sumQuantity || 0}</Text>
-                        <Text style={styles.cellAmount}>€{stat?.sumAmount.toFixed(2) || '0.00'}</Text>
+                      <View 
+                        key={column.key} 
+                        style={[
+                          styles.cell, 
+                          { 
+                            width: colWidth,
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                          },
+                          align === 'right' && styles.cellRight,
+                          align === 'left' && styles.cellLeft,
+                        ]}
+                      >
+                        <View style={styles.cellContentContainer}>
+                          <Text style={[styles.cellQuantity, align === 'right' && styles.cellQuantityRight]}>
+                            {formatQuantity(stat?.sumQuantity || 0)}
+                          </Text>
+                          <Text style={[styles.cellAmount, align === 'right' && styles.cellAmountRight]}>
+                            {formatAmount(stat?.sumAmount || 0)}
+                          </Text>
+                        </View>
                       </View>
                     );
                   })}
@@ -212,12 +490,36 @@ export function StatisticsTable({
                   <View style={[styles.cell, { width: rowLabelWidth }]}>
                     <Text style={styles.statsLabel}>Mean</Text>
                   </View>
-                  {columns.map((column, colIndex) => {
-                    const stat = columnStats[colIndex];
+                  {columns.map((column) => {
+                    const colWidth = getColWidth(column);
+                    if (column.isAction) {
+                      return <View key={column.key} style={[styles.cell, { width: colWidth, minWidth: column.minWidth, maxWidth: column.maxWidth }]} />;
+                    }
+                    const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
+                    const align = getCellAlignment(column);
+                    
                     return (
-                      <View key={column.key} style={[styles.cell, { width: column.width || 150 }]}>
-                        <Text style={styles.cellQuantity}>{stat?.meanQuantity.toFixed(1) || '0.0'}</Text>
-                        <Text style={styles.cellAmount}>€{stat?.meanAmount.toFixed(2) || '0.00'}</Text>
+                      <View 
+                        key={column.key} 
+                        style={[
+                          styles.cell, 
+                          { 
+                            width: colWidth,
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                          },
+                          align === 'right' && styles.cellRight,
+                          align === 'left' && styles.cellLeft,
+                        ]}
+                      >
+                        <View style={styles.cellContentContainer}>
+                          <Text style={[styles.cellQuantity, align === 'right' && styles.cellQuantityRight]}>
+                            {formatQuantity(Math.round((stat?.meanQuantity || 0) * 10) / 10)}
+                          </Text>
+                          <Text style={[styles.cellAmount, align === 'right' && styles.cellAmountRight]}>
+                            {formatAmount(stat?.meanAmount || 0)}
+                          </Text>
+                        </View>
                       </View>
                     );
                   })}
@@ -231,6 +533,18 @@ export function StatisticsTable({
               </>
             )}
           </ScrollView>
+
+          {/* 底部阴影 */}
+          {enableScrollShadow && !verticalScrollState.isAtEnd && (
+            <View style={[
+              styles.shadowBottom,
+              {
+                height: scrollShadowSize,
+                backgroundColor: 'transparent',
+                shadowColor: scrollShadowColor,
+              }
+            ]} />
+          )}
         </View>
       </ScrollView>
 
@@ -272,11 +586,25 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     borderRightColor: '#E0E0E0',
     justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerCellLeft: {
+    alignItems: 'flex-start',
+  },
+  headerCellRight: {
+    alignItems: 'flex-end',
   },
   headerText: {
     fontSize: 14,
     fontWeight: '600',
     color: '#2C3E50',
+    textAlign: 'center',
+  },
+  headerTextLeft: {
+    textAlign: 'left',
+  },
+  headerTextRight: {
+    textAlign: 'right',
   },
   row: {
     flexDirection: 'row',
@@ -290,9 +618,19 @@ const styles = StyleSheet.create({
   cell: {
     padding: 12,
     justifyContent: 'center',
+    alignItems: 'center',
     borderRightWidth: 1,
     borderRightColor: '#F0F0F0',
   },
+  cellLeft: {
+    alignItems: 'flex-start',
+  },
+  cellRight: {
+    alignItems: 'flex-end',
+  },
+  cellContentContainer: {
+    width: '100%',
+  },
   rowLabel: {
     fontSize: 14,
     fontWeight: '500',
@@ -303,16 +641,40 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#2C3E50',
     marginBottom: 4,
+    textAlign: 'left',
+  },
+  cellQuantityRight: {
+    textAlign: 'right',
   },
   cellAmount: {
     fontSize: 12,
     color: '#7F8C8D',
+    textAlign: 'left',
+  },
+  cellAmountRight: {
+    textAlign: 'right',
   },
   statsLabel: {
     fontSize: 14,
     fontWeight: '600',
     color: '#2C3E50',
   },
+  actionContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'center',
+  },
+  actionButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: '#FF6B00',
+    borderRadius: 4,
+  },
+  actionButtonText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
   loadingRow: {
     padding: 40,
     justifyContent: 'center',
@@ -333,5 +695,49 @@ const styles = StyleSheet.create({
     borderTopColor: '#E0E0E0',
     backgroundColor: '#FAFAFA',
   },
+  // 滚动阴影
+  shadowLeft: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 10,
+    shadowOffset: { width: 2, height: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  shadowRight: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 10,
+    shadowOffset: { width: -2, height: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  shadowTop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: 10,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  shadowBottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 10,
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
+  },
 });
-

package/components/StatisticsTable/index.tsx

@@ -2,6 +2,9 @@ export { StatisticsTable } from './StatisticsTable';
 export type { 
   StatisticsTableProps, 
   StatisticsTableColumn, 
-  StatisticsTableCell 
+  StatisticsTableCell,
+  StatisticsTableAction,
+  CellAlignment,
+  CellDataType,
 } from './StatisticsTable';