@beppla/tapas-ui 1.2.36 → 1.3.0

package/package/module/StatisticsTable/StatisticsTable.js

@@ -1,693 +0,0 @@
-"use strict";
-
-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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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
-}) {
-  // 滚动状态
-  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 = {};
-    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 => {
-    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],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.loadingRow,
-        children: /*#__PURE__*/_jsx(Text, {
-          children: "Loading..."
-        })
-      })
-    });
-  }
-  if (rows.length === 0 || columns.length === 0) {
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.container, style],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.emptyRow,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyText,
-          children: emptyText
-        })
-      })
-    });
-  }
-
-  // 虚拟滚动实现（简化版）
-  const visibleRows = enableVirtualization ? rows.slice(0, Math.ceil(maxHeight / virtualRowHeight)) : rows;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    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: [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, {
-              width: rowLabelWidth
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.headerText
-            })
-          }), 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
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.headerText,
-                children: "Sum"
-              })
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.headerCell, {
-                width: 120
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.headerText,
-                children: "Mean"
-              })
-            })]
-          })]
-        }), /*#__PURE__*/_jsxs(ScrollView, {
-          ref: verticalScrollRef,
-          style: {
-            maxHeight
-          },
-          showsVerticalScrollIndicator: Platform.OS === 'web',
-          removeClippedSubviews: enableVirtualization,
-          onScroll: handleVerticalScroll,
-          scrollEventThrottle: 16,
-          children: [visibleRows.map((row, rowIndex) => {
-            const rowStat = rowStats?.[rowIndex];
-            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,
-                  minHeight: currentRowHeight
-                }],
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.rowLabel,
-                  children: row.label
-                })
-              }), 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 /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    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__*/_jsx(View, {
-                  style: [styles.cell, styles.cellRight, {
-                    width: 120
-                  }],
-                  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__*/_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);
-          }), showColumnStats && columnStats && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: [styles.row, styles.statsRow],
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.cell, {
-                  width: rowLabelWidth
-                }],
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.statsLabel,
-                  children: "Sum"
-                })
-              }), 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: 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, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                })]
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: [styles.row, styles.statsRow],
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.cell, {
-                  width: rowLabelWidth
-                }],
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: styles.statsLabel,
-                  children: "Mean"
-                })
-              }), 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: 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, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.cell, {
-                    width: 120
-                  }]
-                })]
-              })]
-            })]
-          })]
-        }), enableScrollShadow && !verticalScrollState.isAtEnd && /*#__PURE__*/_jsx(View, {
-          style: [styles.shadowBottom, {
-            height: scrollShadowSize,
-            backgroundColor: 'transparent',
-            shadowColor: scrollShadowColor
-          }]
-        })]
-      })
-    }), pagination !== false && pagination && /*#__PURE__*/_jsx(View, {
-      style: styles.paginationContainer,
-      children: /*#__PURE__*/_jsx(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);
-        }
-      })
-    })]
-  });
-}
-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
-  }
-});
-//# sourceMappingURL=StatisticsTable.js.map