@beppla/tapas-ui 1.2.35 → 1.2.36

package/package/module/StatisticsTable/StatisticsTable.js

@@ -1,10 +1,10 @@
 "use strict";
 
-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 } from 'react-native';
 import Text from '../Text/Text';
 import Pagination from '../Pagination/Pagination';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function StatisticsTable({
   rows,
   columns,
@@ -16,8 +16,32 @@ export function StatisticsTable({
   emptyText = 'No data',
   maxHeight = 500,
   rowLabelWidth = 150,
-  style
+  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
 }) {
+  // 滚动状态
+  const [horizontalScrollState, setHorizontalScrollState] = useState({
+    isAtStart: true,
+    isAtEnd: false
+  });
+  const [verticalScrollState, setVerticalScrollState] = useState({
+    isAtStart: true,
+    isAtEnd: false
+  });
+  const horizontalScrollRef = useRef(null);
+  const verticalScrollRef = useRef(null);
+
   // 构建矩阵数据
   const matrix = useMemo(() => {
     const data = {};
@@ -40,7 +64,8 @@ export function StatisticsTable({
   const rowStats = useMemo(() => {
     if (!showRowStats) return null;
     return rows.map(row => {
-      const rowCells = columns.map(col => matrix[row.key]?.[col.key] || {
+      const rowCells = columns.filter(col => !col.isAction) // 排除 action 列
+      .map(col => matrix[row.key]?.[col.key] || {
         quantity: 0,
         amount: 0
       });
@@ -61,7 +86,8 @@ export function StatisticsTable({
   // 计算列统计（每列的总和和平均值）
   const columnStats = useMemo(() => {
     if (!showColumnStats) return null;
-    return columns.map(col => {
+    return columns.filter(col => !col.isAction) // 排除 action 列
+    .map(col => {
       const colCells = rows.map(row => matrix[row.key]?.[col.key] || {
         quantity: 0,
         amount: 0
@@ -79,6 +105,103 @@ export function StatisticsTable({
       };
     });
   }, [rows, columns, matrix, showColumnStats]);
+
+  // 获取列宽
+  const getColWidth = useCallback(column => {
+    if (getColumnWidth) {
+      return getColumnWidth(column.key, column);
+    }
+    return column.width || 150;
+  }, [getColumnWidth]);
+
+  // 获取行高
+  const getRowHeightValue = useCallback(row => {
+    if (row.height) return row.height;
+    if (getRowHeight) {
+      return getRowHeight(row.key, row.data);
+    }
+    return rowHeight;
+  }, [rowHeight, getRowHeight]);
+
+  // 处理水平滚动
+  const handleHorizontalScroll = useCallback(event => {
+    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 => {
+    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, isHeader = 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, cell, rowData) => {
+    // 自定义渲染
+    if (column.render) {
+      return column.render(cell, rowData);
+    }
+
+    // Action 列
+    if (column.isAction && rowActions) {
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.actionContainer,
+        children: rowActions.map((action, index) => /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.actionButton,
+          onPress: () => action.onPress(cell.rowKey, rowData),
+          activeOpacity: 0.7,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.actionButtonText,
+            children: action.label
+          })
+        }, index))
+      });
+    }
+
+    // 默认渲染
+    const align = getCellAlignment(column);
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.cellContentContainer, {
+        alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center'
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.cellQuantity, align === 'right' && styles.cellQuantityRight],
+        children: formatQuantity(cell.quantity)
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.cellAmount, align === 'right' && styles.cellAmountRight],
+        children: formatAmount(cell.amount)
+      })]
+    });
+  }, [rowActions, getCellAlignment, formatQuantity, formatAmount]);
   if (loading) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, style],
@@ -102,13 +225,37 @@ export function StatisticsTable({
       })
     });
   }
+
+  // 虚拟滚动实现（简化版）
+  const visibleRows = enableVirtualization ? rows.slice(0, Math.ceil(maxHeight / virtualRowHeight)) : rows;
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, style],
-    children: [/*#__PURE__*/_jsx(ScrollView, {
+    children: [enableScrollShadow && !horizontalScrollState.isAtStart && /*#__PURE__*/_jsx(View, {
+      style: [styles.shadowLeft, {
+        width: scrollShadowSize,
+        backgroundColor: 'transparent',
+        shadowColor: scrollShadowColor
+      }]
+    }), enableScrollShadow && !horizontalScrollState.isAtEnd && /*#__PURE__*/_jsx(View, {
+      style: [styles.shadowRight, {
+        width: scrollShadowSize,
+        backgroundColor: 'transparent',
+        shadowColor: scrollShadowColor
+      }]
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      ref: horizontalScrollRef,
       horizontal: true,
       showsHorizontalScrollIndicator: Platform.OS === 'web',
+      onScroll: handleHorizontalScroll,
+      scrollEventThrottle: 16,
       children: /*#__PURE__*/_jsxs(View, {
-        children: [/*#__PURE__*/_jsxs(View, {
+        children: [enableScrollShadow && !verticalScrollState.isAtStart && /*#__PURE__*/_jsx(View, {
+          style: [styles.shadowTop, {
+            height: scrollShadowSize,
+            backgroundColor: 'transparent',
+            shadowColor: scrollShadowColor
+          }]
+        }), /*#__PURE__*/_jsxs(View, {
           style: styles.header,
           children: [/*#__PURE__*/_jsx(View, {
             style: [styles.headerCell, {
@@ -117,15 +264,21 @@ export function StatisticsTable({
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.headerText
             })
-          }), columns.map(column => /*#__PURE__*/_jsx(View, {
-            style: [styles.headerCell, {
-              width: column.width || 150
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.headerText,
-              children: column.title
-            })
-          }, column.key)), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
+          }), columns.map(column => {
+            const align = getCellAlignment(column, true);
+            const colWidth = getColWidth(column);
+            return /*#__PURE__*/_jsx(View, {
+              style: [styles.headerCell, {
+                width: colWidth,
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth
+              }, align === 'right' && styles.headerCellRight, align === 'left' && styles.headerCellLeft],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.headerText, align === 'right' && styles.headerTextRight, align === 'left' && styles.headerTextLeft],
+                children: column.title
+              })
+            }, column.key);
+          }), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(View, {
               style: [styles.headerCell, {
                 width: 120
@@ -145,17 +298,29 @@ export function StatisticsTable({
             })]
           })]
         }), /*#__PURE__*/_jsxs(ScrollView, {
+          ref: verticalScrollRef,
           style: {
             maxHeight
           },
           showsVerticalScrollIndicator: Platform.OS === 'web',
-          children: [rows.map((row, rowIndex) => {
+          removeClippedSubviews: enableVirtualization,
+          onScroll: handleVerticalScroll,
+          scrollEventThrottle: 16,
+          children: [visibleRows.map((row, rowIndex) => {
             const rowStat = rowStats?.[rowIndex];
-            return /*#__PURE__*/_jsxs(View, {
-              style: styles.row,
+            const isClickable = !!onRowPress;
+            const currentRowHeight = getRowHeightValue(row);
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.row, {
+                minHeight: currentRowHeight
+              }],
+              onPress: isClickable ? () => onRowPress(row.key, row.data) : undefined,
+              activeOpacity: isClickable ? 0.7 : 1,
+              disabled: !isClickable,
               children: [/*#__PURE__*/_jsx(View, {
                 style: [styles.cell, {
-                  width: rowLabelWidth
+                  width: rowLabelWidth,
+                  minHeight: currentRowHeight
                 }],
                 children: /*#__PURE__*/_jsx(Text, {
                   style: styles.rowLabel,
@@ -164,43 +329,50 @@ export function StatisticsTable({
               }), columns.map(column => {
                 const cell = matrix[row.key]?.[column.key] || {
                   quantity: 0,
-                  amount: 0
+                  amount: 0,
+                  rowKey: row.key,
+                  columnKey: column.key
                 };
-                return /*#__PURE__*/_jsxs(View, {
+                const align = getCellAlignment(column);
+                const colWidth = getColWidth(column);
+                return /*#__PURE__*/_jsx(View, {
                   style: [styles.cell, {
-                    width: column.width || 150
-                  }],
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.cellQuantity,
-                    children: cell.quantity
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.cellAmount,
-                    children: ["\u20AC", cell.amount.toFixed(2)]
-                  })]
+                    width: colWidth,
+                    minWidth: column.minWidth,
+                    maxWidth: column.maxWidth,
+                    minHeight: currentRowHeight
+                  }, align === 'right' && styles.cellRight, align === 'left' && styles.cellLeft],
+                  children: renderCellContent(column, cell, row.data)
                 }, column.key);
               }), showRowStats && rowStat && /*#__PURE__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsxs(View, {
-                  style: [styles.cell, {
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.cell, styles.cellRight, {
                     width: 120
                   }],
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.cellQuantity,
-                    children: rowStat.sumQuantity
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.cellAmount,
-                    children: ["\u20AC", rowStat.sumAmount.toFixed(2)]
-                  })]
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: [styles.cell, {
+                  children: /*#__PURE__*/_jsxs(View, {
+                    style: styles.cellContentContainer,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellQuantity, styles.cellQuantityRight],
+                      children: formatQuantity(rowStat.sumQuantity)
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellAmount, styles.cellAmountRight],
+                      children: formatAmount(rowStat.sumAmount)
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(View, {
+                  style: [styles.cell, styles.cellRight, {
                     width: 120
                   }],
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.cellQuantity,
-                    children: rowStat.meanQuantity.toFixed(1)
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.cellAmount,
-                    children: ["\u20AC", rowStat.meanAmount.toFixed(2)]
-                  })]
+                  children: /*#__PURE__*/_jsxs(View, {
+                    style: styles.cellContentContainer,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellQuantity, styles.cellQuantityRight],
+                      children: formatQuantity(Math.round(rowStat.meanQuantity * 10) / 10)
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellAmount, styles.cellAmountRight],
+                      children: formatAmount(rowStat.meanAmount)
+                    })]
+                  })
                 })]
               })]
             }, row.key);
@@ -215,19 +387,35 @@ export function StatisticsTable({
                   style: styles.statsLabel,
                   children: "Sum"
                 })
-              }), columns.map((column, colIndex) => {
-                const stat = columnStats[colIndex];
-                return /*#__PURE__*/_jsxs(View, {
+              }), columns.map(column => {
+                const colWidth = getColWidth(column);
+                if (column.isAction) {
+                  return /*#__PURE__*/_jsx(View, {
+                    style: [styles.cell, {
+                      width: colWidth,
+                      minWidth: column.minWidth,
+                      maxWidth: column.maxWidth
+                    }]
+                  }, column.key);
+                }
+                const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
+                const align = getCellAlignment(column);
+                return /*#__PURE__*/_jsx(View, {
                   style: [styles.cell, {
-                    width: column.width || 150
-                  }],
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.cellQuantity,
-                    children: stat?.sumQuantity || 0
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.cellAmount,
-                    children: ["\u20AC", stat?.sumAmount.toFixed(2) || '0.00']
-                  })]
+                    width: colWidth,
+                    minWidth: column.minWidth,
+                    maxWidth: column.maxWidth
+                  }, align === 'right' && styles.cellRight, align === 'left' && styles.cellLeft],
+                  children: /*#__PURE__*/_jsxs(View, {
+                    style: styles.cellContentContainer,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellQuantity, align === 'right' && styles.cellQuantityRight],
+                      children: formatQuantity(stat?.sumQuantity || 0)
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellAmount, align === 'right' && styles.cellAmountRight],
+                      children: formatAmount(stat?.sumAmount || 0)
+                    })]
+                  })
                 }, column.key);
               }), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
                 children: [/*#__PURE__*/_jsx(View, {
@@ -250,19 +438,35 @@ export function StatisticsTable({
                   style: styles.statsLabel,
                   children: "Mean"
                 })
-              }), columns.map((column, colIndex) => {
-                const stat = columnStats[colIndex];
-                return /*#__PURE__*/_jsxs(View, {
+              }), columns.map(column => {
+                const colWidth = getColWidth(column);
+                if (column.isAction) {
+                  return /*#__PURE__*/_jsx(View, {
+                    style: [styles.cell, {
+                      width: colWidth,
+                      minWidth: column.minWidth,
+                      maxWidth: column.maxWidth
+                    }]
+                  }, column.key);
+                }
+                const stat = columnStats[columns.filter(c => !c.isAction).indexOf(column)];
+                const align = getCellAlignment(column);
+                return /*#__PURE__*/_jsx(View, {
                   style: [styles.cell, {
-                    width: column.width || 150
-                  }],
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.cellQuantity,
-                    children: stat?.meanQuantity.toFixed(1) || '0.0'
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.cellAmount,
-                    children: ["\u20AC", stat?.meanAmount.toFixed(2) || '0.00']
-                  })]
+                    width: colWidth,
+                    minWidth: column.minWidth,
+                    maxWidth: column.maxWidth
+                  }, align === 'right' && styles.cellRight, align === 'left' && styles.cellLeft],
+                  children: /*#__PURE__*/_jsxs(View, {
+                    style: styles.cellContentContainer,
+                    children: [/*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellQuantity, align === 'right' && styles.cellQuantityRight],
+                      children: formatQuantity(Math.round((stat?.meanQuantity || 0) * 10) / 10)
+                    }), /*#__PURE__*/_jsx(Text, {
+                      style: [styles.cellAmount, align === 'right' && styles.cellAmountRight],
+                      children: formatAmount(stat?.meanAmount || 0)
+                    })]
+                  })
                 }, column.key);
               }), showRowStats && /*#__PURE__*/_jsxs(_Fragment, {
                 children: [/*#__PURE__*/_jsx(View, {
@@ -277,6 +481,12 @@ export function StatisticsTable({
               })]
             })]
           })]
+        }), enableScrollShadow && !verticalScrollState.isAtEnd && /*#__PURE__*/_jsx(View, {
+          style: [styles.shadowBottom, {
+            height: scrollShadowSize,
+            backgroundColor: 'transparent',
+            shadowColor: scrollShadowColor
+          }]
         })]
       })
     }), pagination !== false && pagination && /*#__PURE__*/_jsx(View, {
@@ -312,12 +522,26 @@ const styles = StyleSheet.create({
     padding: 12,
     borderRightWidth: 1,
     borderRightColor: '#E0E0E0',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  headerCellLeft: {
+    alignItems: 'flex-start'
+  },
+  headerCellRight: {
+    alignItems: 'flex-end'
   },
   headerText: {
     fontSize: 14,
     fontWeight: '600',
-    color: '#2C3E50'
+    color: '#2C3E50',
+    textAlign: 'center'
+  },
+  headerTextLeft: {
+    textAlign: 'left'
+  },
+  headerTextRight: {
+    textAlign: 'right'
   },
   row: {
     flexDirection: 'row',
@@ -331,9 +555,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',
@@ -343,17 +577,41 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '500',
     color: '#2C3E50',
-    marginBottom: 4
+    marginBottom: 4,
+    textAlign: 'left'
+  },
+  cellQuantityRight: {
+    textAlign: 'right'
   },
   cellAmount: {
     fontSize: 12,
-    color: '#7F8C8D'
+    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',
@@ -373,6 +631,63 @@ const styles = StyleSheet.create({
     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
   }
 });
 //# sourceMappingURL=StatisticsTable.js.map