@beppla/tapas-ui 1.2.36 → 1.3.0

package/components/StatisticsTable/StatisticsTable.tsx

@@ -1,743 +0,0 @@
-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; // 动态列宽
-  minWidth?: number; // 最小列宽
-  maxWidth?: number; // 最大列宽
-  align?: CellAlignment;
-  dataType?: CellDataType;
-  isAction?: boolean; // 是否是 action 列
-  render?: (cell: StatisticsTableCell, rowData: any) => React.ReactNode;
-}
-
-export interface StatisticsTableCell {
-  rowKey: string;
-  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; data?: any; height?: number }>;
-  // 列标题（如门店）
-  columns: StatisticsTableColumn[];
-  // 单元格数据
-  cells: StatisticsTableCell[];
-  // 是否显示行统计（Sum/Mean 列）
-  showRowStats?: boolean;
-  // 是否显示列统计（Sum/Mean 行）
-  showColumnStats?: boolean;
-  // 分页配置
-  pagination?: {
-    current: number;
-    pageSize: number;
-    total: number;
-    onChange?: (page: number, pageSize: number) => void;
-  } | false;
-  loading?: boolean;
-  emptyText?: string;
-  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({
-  rows,
-  columns,
-  cells,
-  showRowStats = false,
-  showColumnStats = false,
-  pagination,
-  loading = false,
-  emptyText = 'No data',
-  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; data?: any }>> = {};
-    rows.forEach(row => {
-      if (!data[row.key]) {
-        data[row.key] = {};
-      }
-      columns.forEach(col => {
-        const cell = cells.find(c => c.rowKey === row.key && c.columnKey === col.key);
-        data[row.key]![col.key] = cell || { quantity: 0, amount: 0 };
-      });
-    });
-    return data;
-  }, [rows, columns, cells]);
-
-  // 计算行统计（每行的总和和平均值）
-  const rowStats = useMemo(() => {
-    if (!showRowStats) return null;
-    return rows.map(row => {
-      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;
-      const meanQuantity = sumQuantity / count;
-      const meanAmount = sumAmount / count;
-      return { sumQuantity, sumAmount, meanQuantity, meanAmount };
-    });
-  }, [rows, columns, matrix, showRowStats]);
-
-  // 计算列统计（每列的总和和平均值）
-  const columnStats = useMemo(() => {
-    if (!showColumnStats) return null;
-    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]}>
-        <View style={styles.loadingRow}>
-          <Text>Loading...</Text>
-        </View>
-      </View>
-    );
-  }
-
-  if (rows.length === 0 || columns.length === 0) {
-    return (
-      <View style={[styles.container, style]}>
-        <View style={styles.emptyRow}>
-          <Text style={styles.emptyText}>{emptyText}</Text>
-        </View>
-      </View>
-    );
-  }
-
-  // 虚拟滚动实现（简化版）
-  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) => {
-              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 }]}>
-                  <Text style={styles.headerText}>Sum</Text>
-                </View>
-                <View style={[styles.headerCell, { width: 120 }]}>
-                  <Text style={styles.headerText}>Mean</Text>
-                </View>
-              </>
-            )}
-          </View>
-
-          {/* Table Body */}
-          <ScrollView
-            ref={verticalScrollRef}
-            style={{ maxHeight }}
-            showsVerticalScrollIndicator={Platform.OS === 'web'}
-            removeClippedSubviews={enableVirtualization}
-            onScroll={handleVerticalScroll}
-            scrollEventThrottle={16}
-          >
-            {visibleRows.map((row, rowIndex) => {
-              const rowStat = rowStats?.[rowIndex];
-              const isClickable = !!onRowPress;
-              const currentRowHeight = getRowHeightValue(row);
-              
-              return (
-                <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, rowKey: row.key, columnKey: column.key };
-                    const align = getCellAlignment(column);
-                    const colWidth = getColWidth(column);
-                    
-                    return (
-                      <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, 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, 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>
-                    </>
-                  )}
-                </TouchableOpacity>
-              );
-            })}
-
-            {/* Column Statistics (Sum/Mean rows) */}
-            {showColumnStats && columnStats && (
-              <>
-                <View style={[styles.row, styles.statsRow]}>
-                  <View style={[styles.cell, { width: rowLabelWidth }]}>
-                    <Text style={styles.statsLabel}>Sum</Text>
-                  </View>
-                  {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: 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>
-                    );
-                  })}
-                  {showRowStats && (
-                    <>
-                      <View style={[styles.cell, { width: 120 }]} />
-                      <View style={[styles.cell, { width: 120 }]} />
-                    </>
-                  )}
-                </View>
-                <View style={[styles.row, styles.statsRow]}>
-                  <View style={[styles.cell, { width: rowLabelWidth }]}>
-                    <Text style={styles.statsLabel}>Mean</Text>
-                  </View>
-                  {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: 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>
-                    );
-                  })}
-                  {showRowStats && (
-                    <>
-                      <View style={[styles.cell, { width: 120 }]} />
-                      <View style={[styles.cell, { width: 120 }]} />
-                    </>
-                  )}
-                </View>
-              </>
-            )}
-          </ScrollView>
-
-          {/* 底部阴影 */}
-          {enableScrollShadow && !verticalScrollState.isAtEnd && (
-            <View style={[
-              styles.shadowBottom,
-              {
-                height: scrollShadowSize,
-                backgroundColor: 'transparent',
-                shadowColor: scrollShadowColor,
-              }
-            ]} />
-          )}
-        </View>
-      </ScrollView>
-
-      {/* Pagination */}
-      {pagination !== false && pagination && (
-        <View style={styles.paginationContainer}>
-          <Pagination
-            totalCount={`${pagination.total} items`}
-            pageParams={{
-              page: pagination.current,
-              pageSize: pagination.pageSize,
-              totalItems: pagination.total,
-              totalPage: Math.ceil(pagination.total / pagination.pageSize),
-            }}
-            onPageChange={(params) => {
-              pagination.onChange?.(params.page, params.pageSize);
-            }}
-          />
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 8,
-    overflow: 'hidden',
-  },
-  header: {
-    flexDirection: 'row',
-    backgroundColor: '#F5F5F5',
-    borderBottomWidth: 2,
-    borderBottomColor: '#E0E0E0',
-  },
-  headerCell: {
-    padding: 12,
-    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',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
-    backgroundColor: '#FFFFFF',
-  },
-  statsRow: {
-    backgroundColor: '#F9F9F9',
-  },
-  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',
-    color: '#2C3E50',
-  },
-  cellQuantity: {
-    fontSize: 14,
-    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',
-    alignItems: 'center',
-  },
-  emptyRow: {
-    padding: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  emptyText: {
-    fontSize: 14,
-    color: '#999',
-  },
-  paginationContainer: {
-    padding: 16,
-    borderTopWidth: 1,
-    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,
-  },
-});