@beppla/tapas-ui 1.2.35 → 1.3.0

package/components/StatisticCard/StatisticCard.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import Text from '../Text/Text';
-import Card from '../Card/Card';
-
-export interface StatisticCardProps {
-  title: string;
-  value: string | number;
-  prefix?: string;
-  suffix?: string;
-  trend?: {
-    value: number;
-    isPositive?: boolean;
-  };
-  description?: string;
-  icon?: React.ReactNode;
-  color?: string;
-  onPress?: () => void;
-  loading?: boolean;
-  style?: any;
-}
-
-export const StatisticCard: React.FC<StatisticCardProps> = ({
-  title,
-  value,
-  prefix = '',
-  suffix = '',
-  trend,
-  description,
-  icon,
-  color = '#FF6B00',
-  onPress,
-  loading = false,
-  style,
-}) => {
-  const Container: any = onPress ? TouchableOpacity : View;
-
-  const getTrendColor = () => {
-    if (!trend) return undefined;
-    return trend.isPositive !== false ? '#00B894' : '#D63031';
-  };
-
-  const getTrendSymbol = () => {
-    if (!trend) return '';
-    return trend.isPositive !== false ? '+' : '';
-  };
-
-  return (
-    <Container onPress={onPress} disabled={!onPress} activeOpacity={0.7}>
-      <Card cardId="statistic-card" style={[styles.container, style]}>
-        <View style={styles.header}>
-          <Text style={styles.title}>{title}</Text>
-          {icon && <View style={styles.iconContainer}>{icon}</View>}
-        </View>
-
-        <View style={styles.content}>
-          {loading ? (
-            <Text style={styles.loading}>Loading...</Text>
-          ) : (
-            <>
-              <Text style={[styles.value, { color }]}>
-                {prefix}{value}{suffix}
-              </Text>
-
-              {trend && (
-                <View style={styles.trendContainer}>
-                  <Text style={[styles.trend, { color: getTrendColor() }]}>
-                    {getTrendSymbol()}{trend.value.toFixed(1)}%
-                  </Text>
-                </View>
-              )}
-
-              {description && (
-                <Text style={styles.description}>{description}</Text>
-              )}
-            </>
-          )}
-        </View>
-      </Card>
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    minHeight: 120,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  title: {
-    fontSize: 14,
-    color: '#7F8C8D',
-    fontWeight: '500',
-  },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    flex: 1,
-  },
-  value: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    marginBottom: 4,
-  },
-  loading: {
-    fontSize: 16,
-    color: '#999',
-  },
-  trendContainer: {
-    marginTop: 4,
-    marginBottom: 8,
-  },
-  trend: {
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  description: {
-    fontSize: 12,
-    color: '#95A5A6',
-    marginTop: 4,
-  },
-});
-

package/components/StatisticCard/index.tsx

@@ -1,3 +0,0 @@
-export { StatisticCard } from './StatisticCard';
-export type { StatisticCardProps } from './StatisticCard';
-

package/components/StatisticsTable/StatisticsTable.tsx

@@ -1,337 +0,0 @@
-import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, Platform } from 'react-native';
-import Text from '../Text/Text';
-import Pagination from '../Pagination/Pagination';
-
-export interface StatisticsTableColumn {
-  key: string;
-  title: string;
-  width?: number;
-}
-
-export interface StatisticsTableCell {
-  rowKey: string;
-  columnKey: string;
-  quantity: number;
-  amount: number;
-}
-
-export interface StatisticsTableProps {
-  // 行标题（如日期）
-  rows: Array<{ key: string; label: string }>;
-  // 列标题（如门店）
-  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;
-}
-
-export function StatisticsTable({
-  rows,
-  columns,
-  cells,
-  showRowStats = false,
-  showColumnStats = false,
-  pagination,
-  loading = false,
-  emptyText = 'No data',
-  maxHeight = 500,
-  rowLabelWidth = 150,
-  style,
-}: StatisticsTableProps) {
-  
-  // 构建矩阵数据
-  const matrix = useMemo(() => {
-    const data: Record<string, Record<string, { quantity: number; amount: number }>> = {};
-    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.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.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]);
-
-  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>
-    );
-  }
-
-  return (
-    <View style={[styles.container, style]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={Platform.OS === 'web'}
-      >
-        <View>
-          {/* 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>
-            ))}
-            {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
-            style={{ maxHeight }}
-            showsVerticalScrollIndicator={Platform.OS === 'web'}
-          >
-            {rows.map((row, rowIndex) => {
-              const rowStat = rowStats?.[rowIndex];
-              
-              return (
-                <View key={row.key} style={styles.row}>
-                  <View style={[styles.cell, { width: rowLabelWidth }]}>
-                    <Text style={styles.rowLabel}>{row.label}</Text>
-                  </View>
-                  {columns.map((column) => {
-                    const cell = matrix[row.key]?.[column.key] || { quantity: 0, amount: 0 };
-                    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>
-                    );
-                  })}
-                  {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>
-                      <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>
-                    </>
-                  )}
-                </View>
-              );
-            })}
-
-            {/* 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, colIndex) => {
-                    const stat = columnStats[colIndex];
-                    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>
-                    );
-                  })}
-                  {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, colIndex) => {
-                    const stat = columnStats[colIndex];
-                    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>
-                    );
-                  })}
-                  {showRowStats && (
-                    <>
-                      <View style={[styles.cell, { width: 120 }]} />
-                      <View style={[styles.cell, { width: 120 }]} />
-                    </>
-                  )}
-                </View>
-              </>
-            )}
-          </ScrollView>
-        </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',
-  },
-  headerText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#2C3E50',
-  },
-  row: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#F0F0F0',
-    backgroundColor: '#FFFFFF',
-  },
-  statsRow: {
-    backgroundColor: '#F9F9F9',
-  },
-  cell: {
-    padding: 12,
-    justifyContent: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#F0F0F0',
-  },
-  rowLabel: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#2C3E50',
-  },
-  cellQuantity: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#2C3E50',
-    marginBottom: 4,
-  },
-  cellAmount: {
-    fontSize: 12,
-    color: '#7F8C8D',
-  },
-  statsLabel: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#2C3E50',
-  },
-  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',
-  },
-});
-

package/components/StatisticsTable/index.tsx

@@ -1,7 +0,0 @@
-export { StatisticsTable } from './StatisticsTable';
-export type { 
-  StatisticsTableProps, 
-  StatisticsTableColumn, 
-  StatisticsTableCell 
-} from './StatisticsTable';
-

package/components/Status/Status.tsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import {View, Text, StyleProp, ViewStyle} from 'react-native';
-import {withTheme, makeStyles} from "@rneui/themed";
-import defaultTheme from "../Theme/defaultTheme";
-import {capitalizeFirstLetter} from '../common';
-
-export type STATUS_TYPE = 'success' | 'error' | 'warning' | 'waiting' | 'unavailable' | 'disabled';
-
-export interface Props {
-  mode?: 'point' | 'solid';
-  tag: string;
-  type: STATUS_TYPE;
-  testID?: string;
-  styles?: StyleProp<ViewStyle>;
-}
-const useStyles = makeStyles((theme: typeof  defaultTheme) => {
-  return {
-    statusWrap: {
-      height: 24,
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      alignItems: 'center'
-    },
-    base: {
-      width: 'auto',
-      fontFamily: theme?.fonts?.fontFamily,
-      fontSize: theme?.fonts.sizeM,
-      fontWeight: theme?.fonts.weightR,
-      paddingHorizontal: 6,
-      alignItems: 'center',
-      display: 'flex',
-      height: 24,
-      borderRadius: 4,
-      color: theme.colors.colorTextSecondary
-    },
-    unavailable: {
-      color: theme.colors.colorTextSecondary
-    },
-    disabled: {
-      backgroundColor: theme.colors.grey5
-    },
-    warning: {
-      backgroundColor: theme.colors.warning2
-    },
-    reserved: {
-      backgroundColor: theme.colors.colorStatusReserved
-    },
-    error: {
-      backgroundColor: theme.colors.colorStatusError
-    },
-    success: {
-      backgroundColor: theme.colors.colorStatusAvailable
-    },
-    waiting: {
-      borderColor: theme.colors.colorStatusAwaiting,
-      borderWidth: 1,
-      color: theme.colors.colorStatusAwaiting
-    },
-    point: {
-      borderRadius: 4,
-      height: 8,
-      width: 8
-    },
-    solid_disabled: {
-      borderColor: theme.colors.grey5,
-      borderWidth: 1,
-      color: theme.colors.grey5
-    },
-    solid_warning: {
-      borderColor: theme.colors.warning2,
-      borderWidth: 1,
-      color: theme.colors.warning2
-    },
-    solid_error: {
-      borderColor: theme.colors.colorStatusError,
-      borderWidth: 1,
-      color: theme.colors.colorStatusError
-    },
-    solid_success: {
-      borderColor: theme.colors.colorStatusAvailable,
-      borderWidth: 1,
-      color: theme.colors.colorStatusAvailable
-    },
-    solid_unavailable: {
-      color: theme.colors.colorTextSecondary,
-      borderColor: theme.colors.grey3,
-      borderWidth: 1
-    },
-    solid_waiting: {
-      color: theme.colors.colorStatusAwaiting,
-      borderColor: theme.colors.colorStatusAwaiting,
-      borderWidth: 1
-    },
-    solid_reserved: {
-      color: theme.colors.warning2,
-      borderColor: theme.colors.warning2,
-      borderWidth: 1
-    }
-  };
-});
-export const StatusTag: React.FC<Props> = ({tag, type, mode = 'point', ...props}) => {
-  const styles = useStyles(props);
-  const formattedTag = capitalizeFirstLetter(tag);
-  if (!tag) {
-    return null;
-  }
-  return (
-    <View testID={props?.testID} style={[styles.statusWrap, props.styles]}>
-      {mode === 'point' ? (
-        <>
-          <Text style={[styles.point, styles[type]]} />
-          <Text style={[styles.base]}>{formattedTag}</Text>
-        </>
-      ) : (
-        <Text style={[styles.base, styles[`solid_${type}`]]}>
-          {formattedTag}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-export default withTheme(StatusTag);