@beppla/tapas-ui 1.4.34 → 1.5.0

package/components/PieChart/PieChart.tsx

@@ -1,452 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Platform, ScrollView } from 'react-native';
-import RNText from '../Text/Text';
-
-// 动态导入依赖
-let RNPieChart: any, SVGText: any;
-let RechartsPieChart: any, Pie: any, Cell: any, Tooltip: any, Legend: any;
-
-if (Platform.OS === 'web') {
-  // Web 环境使用 recharts
-  try {
-    const recharts = require('recharts');
-    RechartsPieChart = recharts.PieChart;
-    Pie = recharts.Pie;
-    Cell = recharts.Cell;
-    Tooltip = recharts.Tooltip;
-    Legend = recharts.Legend;
-  } catch (e) {
-    console.warn('Recharts not available for Web', e);
-  }
-} else {
-  // 移动端使用 react-native-svg-charts
-  try {
-    const svgCharts = require('react-native-svg-charts');
-    const svg = require('react-native-svg');
-    RNPieChart = svgCharts.PieChart;
-    SVGText = svg.Text;
-  } catch (e) {
-    console.warn('react-native-svg-charts not available', e);
-  }
-}
-
-export interface PieChartData {
-  value: number;
-  label?: string;
-  color?: string;
-  key?: string | number;
-}
-
-export interface PieChartProps {
-  data: PieChartData[];
-  width?: number;
-  height?: number;
-  colors?: string[];
-  outerRadius?: number | string; // 设置外圆半径/直径，可以是数字（像素）或字符串（百分比如'80%'）。默认为 height * 0.3
-  innerRadius?: number | string;  // 设置innerRadius可以创建Donut图
-  padAngle?: number;
-  showLabels?: boolean;
-  showLegend?: boolean;
-  legendPosition?: 'top' | 'bottom' | 'left' | 'right'; // 图例位置
-  showLegendValues?: boolean; // 是否在图例中显示数值
-  legendValueAlign?: 'left' | 'right'; // 图例数值对齐方式
-  legendItemGap?: number; // 图例项之间的行间距，默认 8
-  legendLabelValueGap?: number; // 图例中 label 与 value 之间的间距，默认 12
-  legendLabelMinWidth?: number; // 图例 label 的最小宽度，确保对齐整齐，默认不设置
-  legendChartGap?: number; // 饼图和图例之间的间距，默认 30（仅左右图例位置生效）
-  centerText?: string;
-  style?: any;
-  testID?: string;
-}
-
-const DEFAULT_COLORS = [
-  '#FF6B00',
-  '#0066CC',
-  '#00B894',
-  '#6C5CE7',
-  '#FFB800',
-  '#D63031',
-];
-
-export const PieChart: React.FC<PieChartProps> = ({
-  data,
-  width,
-  height = 300,
-  colors = DEFAULT_COLORS,
-  outerRadius,
-  innerRadius = 0,
-  padAngle = 0.02,
-  showLabels = false,
-  showLegend = true,
-  legendPosition = 'right',
-  showLegendValues = true,
-  legendValueAlign = 'right',
-  legendItemGap = 8,
-  legendLabelValueGap = 12,
-  legendLabelMinWidth,
-  legendChartGap = 30,
-  centerText,
-  style,
-  testID,
-}) => {
-  if (data.length === 0) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <RNText style={styles.emptyText}>No data available</RNText>
-      </View>
-    );
-  }
-
-  // Web 环境使用 Recharts
-  if (Platform.OS === 'web' && RechartsPieChart) {
-    const chartData = data.map((item, index) => ({
-      name: item.label || `Item ${index + 1}`,
-      value: item.value,
-      fill: item.color || colors[index % colors.length],
-    }));
-
-    // 计算外圆半径
-    // 如果有右侧/左侧图例，默认使用更大的半径以充分利用空间
-    const defaultOuterRadius = (showLegend && (legendPosition === 'left' || legendPosition === 'right'))
-      ? Math.min(height * 0.4, 150)  // 有左右图例时，半径为 height * 0.4，最大 150
-      : height * 0.35;  // 无图例或上下图例时，半径为 height * 0.35
-    
-    const calculatedOuterRadius = outerRadius !== undefined 
-      ? (typeof outerRadius === 'string' ? outerRadius : outerRadius)
-      : defaultOuterRadius;
-
-    // 自定义 Legend 渲染函数（Web 端）
-    const renderCustomLegend = (props: any) => {
-      const { payload } = props;
-      if (!payload || payload.length === 0) return null;
-
-      const isVertical = legendPosition === 'left' || legendPosition === 'right';
-
-      return (
-        <div style={{
-          display: 'flex',
-          flexDirection: isVertical ? 'column' : 'row',
-          flexWrap: isVertical ? 'nowrap' : 'wrap',
-          justifyContent: isVertical ? 'center' : 'center',
-          alignItems: isVertical ? 'flex-start' : 'center',
-        }}>
-          {payload.map((entry: any, index: number) => {
-            const dataItem = data.find(d => (d.label || '') === entry.payload.name);
-            const isLastItem = index === payload.length - 1;
-            return (
-              <div key={`legend-${index}`} style={{
-                display: 'flex',
-                alignItems: 'center',
-                marginBottom: !isLastItem ? `${legendItemGap}px` : '0',
-                paddingBottom: '0', // 确保没有额外的 padding
-              }}>
-                <div style={{
-                  width: '12px',
-                  height: '12px',
-                  borderRadius: '6px',
-                  backgroundColor: entry.color,
-                  flexShrink: 0,
-                  marginRight: '8px',
-                }}></div>
-                <span style={{
-                  fontSize: '12px',
-                  color: '#2C3E50',
-                  minWidth: legendLabelMinWidth ? `${legendLabelMinWidth}px` : 'auto',
-                  display: 'inline-block',
-                }}>
-                  {entry.value}
-                </span>
-                {showLegendValues && dataItem && (
-                  <span style={{
-                    fontSize: '12px',
-                    color: '#2C3E50',
-                    fontWeight: 600,
-                    textAlign: legendValueAlign === 'right' ? 'right' : 'left',
-                    minWidth: '40px',
-                    display: 'inline-block',
-                    marginLeft: `${legendLabelValueGap}px`,
-                  }}>
-                    {dataItem.value}
-                  </span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      );
-    };
-
-    // 计算实际的饼图宽度（包括 Legend 空间）
-    const pieRadius = typeof calculatedOuterRadius === 'number' 
-      ? calculatedOuterRadius 
-      : parseInt(String(calculatedOuterRadius)) || defaultOuterRadius;
-    const pieWidth = pieRadius * 2 + 60; // 直径 + 左右边距
-    
-    // 为 Legend 预留空间
-    const isVerticalLegend = legendPosition === 'left' || legendPosition === 'right';
-    // 计算图例实际需要的宽度：颜色圆点(12) + 边距(8) + Label最小宽度 + 间距 + Value(40) + 额外空间(40)
-    const calculatedLegendWidth = legendLabelMinWidth 
-      ? 12 + 8 + legendLabelMinWidth + legendLabelValueGap + 40 + 40
-      : 250;
-    const legendWidth = isVerticalLegend && showLegend ? calculatedLegendWidth + legendChartGap : 0; // 图例宽度 + 间距
-    
-    // PieChart 的宽度设置
-    const chartWidth = isVerticalLegend && showLegend
-      ? pieWidth + legendWidth  // 饼图宽度 + 图例宽度（含间距）
-      : pieWidth;
-
-    const ChartComponent = (
-      <RechartsPieChart width={chartWidth} height={height}>
-        <Pie
-          data={chartData}
-          cx={isVerticalLegend && showLegend ? pieRadius + 30 : "50%"}
-          cy="50%"
-          labelLine={false}
-          label={showLabels ? ({ name, percent }: any) => `${name} ${(percent * 100).toFixed(0)}%` : false}
-          outerRadius={calculatedOuterRadius}
-          innerRadius={typeof innerRadius === 'number' ? innerRadius : 0}
-          paddingAngle={padAngle * 50}
-          dataKey="value"
-        >
-          {chartData.map((entry: any, index: number) => (
-            <Cell key={`cell-${index}`} fill={entry.fill} />
-          ))}
-        </Pie>
-        <Tooltip />
-        {showLegend && (
-          <Legend 
-            content={renderCustomLegend}
-            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'middle'}
-            align={legendPosition === 'right' ? 'right' : legendPosition === 'left' ? 'left' : 'center'}
-            layout={legendPosition === 'left' || legendPosition === 'right' ? 'vertical' : 'horizontal'}
-            wrapperStyle={{
-              paddingTop: '0',
-              paddingBottom: legendPosition === 'top' ? '24px' : '0',
-              paddingLeft: legendPosition === 'right' ? `${legendChartGap}px` : '0',
-              paddingRight: legendPosition === 'left' ? `${legendChartGap}px` : '0',
-              margin: '0',
-            }}
-          />
-        )}
-      </RechartsPieChart>
-    );
-
-    return (
-      <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-        {ChartComponent}
-      </View>
-    );
-  }
-
-  // 移动端使用 react-native-svg-charts
-  if (!RNPieChart) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <RNText style={styles.emptyText}>Chart library not available</RNText>
-      </View>
-    );
-  }
-
-  const pieData = data.map((item, index) => ({
-    ...item,
-    svg: {
-      fill: item.color || colors[index % colors.length],
-    },
-    key: item.key || `pie-slice-${index}`,
-  }));
-
-  const Labels = ({ slices }: any) => {
-    if (!showLabels || !SVGText) return null;
-    
-    return slices.map((slice: any, index: number) => {
-      const { labelCentroid, data } = slice;
-      return (
-        <SVGText
-          key={index}
-          x={labelCentroid[0]}
-          y={labelCentroid[1]}
-          fill={'black'}
-          textAnchor={'middle'}
-          alignmentBaseline={'middle'}
-          fontSize={12}
-          fontWeight="bold"
-        >
-          {`${data.value.toFixed(0)}`}
-        </SVGText>
-      );
-    });
-  };
-
-  const CenterLabel = ({ slices }: any) => {
-    if (!centerText || !SVGText) return null;
-    
-    // 计算饼图中心点
-    const centerX = slices[0]?.pieCentroid[0] || 0;
-    const centerY = slices[0]?.pieCentroid[1] || 0;
-    
-    return (
-      <SVGText
-        x={centerX}
-        y={centerY}
-        fill={'#2C3E50'}
-        textAnchor={'middle'}
-        alignmentBaseline={'middle'}
-        fontSize={18}
-        fontWeight="bold"
-      >
-        {centerText}
-      </SVGText>
-    );
-  };
-
-  // 计算饼图容器的样式
-  const chartContainerStyle: any = legendPosition === 'right' || legendPosition === 'left'
-    ? { flex: 1, marginRight: legendPosition === 'right' ? 100 : 0, marginLeft: legendPosition === 'left' ? 100 : 0 }
-    : { width: '100%' };
-
-  return (
-    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-      <View style={chartContainerStyle}>
-        <RNPieChart
-          style={{ height: height - (showLegend && (legendPosition === 'top' || legendPosition === 'bottom') ? 80 : 20) }}
-          data={pieData}
-          innerRadius={innerRadius}
-          padAngle={padAngle}
-        >
-          <Labels />
-          <CenterLabel />
-        </RNPieChart>
-      </View>
-
-      {showLegend && (
-        <ScrollView
-          style={[
-            styles.legendContainer,
-            legendPosition === 'right' && styles.legendRight,
-            legendPosition === 'left' && styles.legendLeft,
-            legendPosition === 'top' && styles.legendTop,
-            legendPosition === 'bottom' && styles.legendBottom,
-          ]}
-          contentContainerStyle={[
-            styles.legend,
-            legendPosition === 'right' || legendPosition === 'left' ? styles.legendVertical : styles.legendHorizontal,
-          ]}
-          showsVerticalScrollIndicator={false}
-          showsHorizontalScrollIndicator={false}
-        >
-          {data.map((item, index) => {
-            return (
-              <View key={index} style={[styles.legendItem, { marginBottom: legendItemGap }]}>
-                <View
-                  style={[
-                    styles.legendColor,
-                    { backgroundColor: item.color || colors[index % colors.length] },
-                  ]}
-                />
-                <RNText style={[
-                  styles.legendLabel, 
-                  !showLegendValues && styles.legendLabelOnly,
-                  legendLabelMinWidth ? { minWidth: legendLabelMinWidth } : null
-                ]}>
-                  {item.label || `Item ${index + 1}`}
-                </RNText>
-                {showLegendValues && (
-                  <RNText style={[styles.legendValue, legendValueAlign === 'right' && styles.legendValueRight, { marginLeft: legendLabelValueGap }]}>
-                    {item.value}
-                  </RNText>
-                )}
-              </View>
-            );
-          })}
-        </ScrollView>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-  },
-  legendContainer: {
-    maxHeight: '100%',
-  },
-  legend: {
-    paddingHorizontal: 16,
-    flexGrow: 0,
-  },
-  legendVertical: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  legendHorizontal: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-  },
-  legendRight: {
-    paddingLeft: 16,
-    paddingRight: 0,
-  },
-  legendLeft: {
-    paddingRight: 16,
-    paddingLeft: 0,
-  },
-  legendTop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    marginTop: 0,
-    marginBottom: 16,
-  },
-  legendBottom: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    marginTop: 16,
-    marginBottom: 0,
-  },
-  legendItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 0,
-    justifyContent: 'space-between',
-    minWidth: 120,
-  },
-  legendColor: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    marginRight: 8,
-    flexShrink: 0,
-  },
-  legendLabel: {
-    fontSize: 12,
-    color: '#2C3E50',
-    flex: 1,
-  },
-  legendLabelOnly: {
-    flex: 0,
-  },
-  legendValue: {
-    fontSize: 12,
-    color: '#2C3E50',
-    fontWeight: '600',
-  },
-  legendValueRight: {
-    textAlign: 'right',
-    minWidth: 40,
-  },
-  emptyText: {
-    textAlign: 'center',
-    color: '#999',
-  },
-});
-

package/components/PieChart/index.tsx

@@ -1,19 +0,0 @@
-export { PieChart } from './PieChart';
-export type { PieChartProps, PieChartData } from './PieChart';
-
-export { default as NestedPieChart } from './NestedPieChart';
-export type {
-  NestedPieChartProps,
-  NestedPieChartNode,
-  NestedPieChartFlatData,
-  LegendMode,
-  LegendContent,
-  LegendSortStrategy,
-  ColorStrategy,
-  ValueFormatter,
-  PercentFormatter,
-  SliceClickEvent,
-  LegendClickEvent,
-  ProcessedSliceData,
-  LegendGroupData,
-} from './NestedPieChart.types';

package/components/Popover/Popover.tsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import { View,  StyleProp, ViewStyle } from 'react-native';
-import { makeStyles, withTheme } from '@rneui/themed';
-import Icon from '../Icons/TapasIcon';
-
-export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
-export type ArrowPosition = 'start' | 'center' | 'end';
-
-export interface Props {
-  isVisible: boolean;
-  children?: React.ReactNode;
-  position?: PopoverPosition;
-  arrowPosition?: ArrowPosition;
-  width?: number;
-  height?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  contentStyle?: StyleProp<ViewStyle>;
-}
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    position: 'absolute',
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.radius.rounded,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: 0,
-      height: 12,
-    },
-    shadowOpacity: 0.58,
-    shadowRadius: 24,
-    elevation: 8,
-    zIndex: 9999,
-  },
-  arrow: {
-    position: 'absolute',
-    color: theme.colors.white,
-    width: 12,
-    height: 27,
-  },
-  arrowTop: {
-    top: -6,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: 0,
-      height: -2,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  arrowBottom: {
-    bottom: -6,
-    shadowColor: theme.colors.grey4, 
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  arrowLeft: {
-    left: -6,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: -2,
-      height: 0,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  arrowRight: {
-    right: -6,
-    shadowColor: theme.colors.grey4,
-    shadowOffset: {
-      width: 2,
-      height: 0,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  content: {
-    flex: 1,
-    borderRadius: theme.radius.rounded,
-    overflow: 'hidden',
-  },
-}));
-
-const Popover: React.FC<Props> = ({
-  isVisible,
-  children,
-  position = 'bottom',
-  arrowPosition = 'center',
-  width = 392,
-  height = 696,
-  containerStyle,
-  contentStyle,
-  ...props
-}) => {
-  const styles = useStyles(props);
-
-  if (!isVisible) return null;
-
-  const getArrowStyle = () => {
-    let arrowPositionStyle = {};
-    
-    switch (position) {
-      case 'top':
-        arrowPositionStyle = styles.arrowTop;
-        break;
-      case 'bottom':
-        arrowPositionStyle = styles.arrowBottom;
-        break;
-      case 'left':
-        arrowPositionStyle = styles.arrowLeft;
-        break;
-      case 'right':
-        arrowPositionStyle = styles.arrowRight;
-        break;
-    }
-
-    // 根据箭头位置调整left/top值
-    const positionStyle: any = {};
-    if (position === 'top' || position === 'bottom') {
-      switch (arrowPosition) {
-        case 'start':
-          positionStyle.left = 20;
-          break;
-        case 'center':
-          positionStyle.left = width / 2 - 6;
-          break;
-        case 'end':
-          positionStyle.right = 20;
-          break;
-      }
-    } else {
-      switch (arrowPosition) {
-        case 'start':
-          positionStyle.top = 20;
-          break;
-        case 'center':
-          positionStyle.top = height / 2 - 6;
-          break;
-        case 'end':
-          positionStyle.bottom = 20;
-          break;
-      }
-    }
-
-    return {
-      ...styles.arrow,
-      ...arrowPositionStyle,
-      ...positionStyle,
-    };
-  };
-
-  return (
-    <View style={[styles.container, { width, height }, containerStyle]} testID="popover">
-      {/* 箭头 */}
-      <Icon name="left_arrow" size={17} style={getArrowStyle()} />
-      {/* 内容区域 */}
-      <View style={[styles.content, contentStyle]}>
-        {children}
-      </View>
-    </View>
-  );
-};
-
-export default withTheme(Popover);