@beppla/tapas-ui 1.4.15 → 1.4.17

package/components/PieChart/PieChart.tsx

@@ -1,261 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import RNText from '../Text/Text';
-
-// 动态导入依赖
-let RNPieChart: any, SVGText: any;
-let RechartsPieChart: any, Pie: any, Cell: any, Tooltip: any, Legend: any, ResponsiveContainer: 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;
-    ResponsiveContainer = recharts.ResponsiveContainer;
-  } 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[];
-  innerRadius?: number | string;  // 设置innerRadius可以创建Donut图
-  padAngle?: number;
-  showLabels?: boolean;
-  showLegend?: boolean;
-  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,
-  innerRadius = 0,
-  padAngle = 0.02,
-  showLabels = false,
-  showLegend = true,
-  centerText,
-  style,
-  testID,
-}) => {
-  if (data.length === 0) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <RNText style={styles.emptyText}>No data available</RNText>
-      </View>
-    );
-  }
-
-  const total = data.reduce((sum, item) => sum + item.value, 0);
-
-  // 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 ChartComponent = (
-      <RechartsPieChart>
-        <Pie
-          data={chartData}
-          cx="50%"
-          cy="50%"
-          labelLine={false}
-          label={showLabels ? ({ name, percent }: any) => `${name} ${(percent * 100).toFixed(0)}%` : false}
-          outerRadius={height * 0.3}
-          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 />}
-      </RechartsPieChart>
-    );
-
-    return (
-      <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-        {ResponsiveContainer ? (
-          <ResponsiveContainer width="100%" height={height - 20}>
-            {ChartComponent}
-          </ResponsiveContainer>
-        ) : (
-          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>
-    );
-  };
-
-  return (
-    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-      <RNPieChart
-        style={{ height: height - (showLegend ? 80 : 20) }}
-        data={pieData}
-        innerRadius={innerRadius}
-        padAngle={padAngle}
-      >
-        <Labels />
-        <CenterLabel />
-      </RNPieChart>
-
-      {showLegend && (
-        <View style={styles.legend}>
-          {data.map((item, index) => {
-            const percentage = total > 0 ? ((item.value / total) * 100).toFixed(1) : '0.0';
-            return (
-              <View key={index} style={styles.legendItem}>
-                <View
-                  style={[
-                    styles.legendColor,
-                    { backgroundColor: item.color || colors[index % colors.length] },
-                  ]}
-                />
-                <RNText style={styles.legendLabel}>
-                  {item.label}: {item.value.toFixed(0)} ({percentage}%)
-                </RNText>
-              </View>
-            );
-          })}
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  legend: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    marginTop: 16,
-    paddingHorizontal: 16,
-  },
-  legendItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 16,
-    marginBottom: 8,
-  },
-  legendColor: {
-    width: 12,
-    height: 12,
-    borderRadius: 2,
-    marginRight: 6,
-  },
-  legendLabel: {
-    fontSize: 12,
-    color: '#2C3E50',
-  },
-  emptyText: {
-    textAlign: 'center',
-    color: '#999',
-  },
-});
-

package/components/PieChart/index.tsx

@@ -1,3 +0,0 @@
-export { PieChart } from './PieChart';
-export type { PieChartProps, PieChartData } from './PieChart';
-

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);

package/components/Progress/Progress.tsx

@@ -1,209 +0,0 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import { withTheme, makeStyles} from '@rneui/themed';
-import defaultTheme from "../Theme/defaultTheme";
-import {TapasIcon} from "../index";
-
-const useStyles = makeStyles((theme: typeof  defaultTheme, ...props) => {
-
-    const {data, type} = props[0] as Props;
-
-    const {progress} = data || {};
-
-    const width: any = `${progress}%`;
-    let fontSize;
-
-    switch (type) {
-        case 'image':
-            fontSize = theme.fonts.sizeS;
-            break;
-        case "file":
-            fontSize = theme.fonts.sizeXs;
-            break;
-    }
-
-    return {
-        container: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginVertical: 20,
-            width: '100%',
-        },
-        stepText: {
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            flexDirection: 'row',
-            minWidth: 52,
-        },
-        fileText: {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            flexDirection: 'row',
-            minWidth: 52,
-        },
-        hr: {
-            height: 2,
-            backgroundColor:theme.colors.grey4,
-            borderRadius: theme.radius.rounded,
-            flexGrow: 1,
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            zIndex: 0,
-        },
-        progress: {
-            backgroundColor:theme.colors.grey1,
-            zIndex: 1,
-            width: width,
-        },
-        done: {
-            backgroundColor: theme.colors.success,
-            width: '100%',
-        },
-        failed: {
-            backgroundColor: theme.colors.error,
-            width: '100%',
-        },
-        stepItem: {
-            display: "flex",
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: "flex-start",
-            flexGrow: 1,
-            flexShrink: 1,
-        },
-        progressText: {
-            fontSize: fontSize,
-            fontFamily: theme.fonts.fontFamily,
-            fontWeight: theme.fonts.weightR,
-            letterSpacing: 0.1,
-            color: theme.colors.secondary
-        },
-        success: {
-            color: theme.colors.success,
-            marginLeft: 2,
-        },
-        error: {
-            color: theme.colors.error,
-            marginLeft: 2,
-        },
-        reUpload: {
-            color: theme.colors.primary,
-            marginLeft: 12,
-        },
-        fileContainer: {
-            display: "flex",
-            flexDirection: 'row',
-            justifyContent: "space-between"
-        },
-        startContainer: {
-            marginRight: 8,
-        },
-        endContainer: {
-            marginLeft: 8,
-        }
-    }
-});
-
-export interface Props {
-    type: 'image' | 'file'
-    data: {
-        start: React.ReactNode |string;
-        end?: React.ReactNode| string;
-        status: 'progress' | 'done' | 'failed',
-        progress?: number;
-        file?: string;
-    };
-    testID?: string;
-}
-
-const Progress: React.FC<Props> = (props) => {
-    const styles = useStyles(props);
-    
-    // Add null check for data
-    if (!props?.data) {
-        return null;
-    }
-    
-    return (
-        <View style={styles.container} testID={props.testID}>
-            <View style={styles.stepItem}>
-                <View style={styles.startContainer}>
-                    {
-                        props.data.start
-                    }
-                </View>
-                {props.type === 'image' && (<>
-                    <View style={{flexGrow: 1, position: 'relative'}}>
-                        <View style={styles.hr}></View>
-                        <View style={[styles.hr, styles[props.data.status]]}></View>
-                    </View>
-                    <View style={styles.endContainer}>
-                        {
-                            props.data.status === 'progress' && <View style={styles.stepText}>
-                                <Text style={[styles.progressText]}>{props.data.end || `${props.data.progress}%`}</Text>
-                            </View>
-                        }
-                        {
-                            props.data.status === 'failed' &&(
-                                <View style={styles.stepText}>
-                                    <TapasIcon name="warning_filled" size={16} style={styles.error} />
-                                    <Text style={[styles.progressText, styles.error]}>{props.data.end || props.data.progress}</Text>
-                                    {/*<TapasIcon style={styles.reUpload} name="upload" onPress={data.reUpload} size={20} />*/}
-                                </View>
-                            )
-                        }
-                        {
-                            props.data.status === 'done' &&(
-                                <View style={styles.stepText}>
-                                    <TapasIcon name="check_circle_filled" size={16} style={styles.success} />
-                                    <Text style={[styles.progressText, styles.success]}>{props.data.end || props.data.progress}</Text>
-                                </View>
-                            )
-                        }
-                    </View>
-                </>)}
-                {props.type === 'file' && (<>
-                    <View style={{flexGrow: 1, position: 'relative'}}>
-                        <View style={styles.fileContainer}>
-                            <Text style={styles.progressText}>{props.data.file}</Text>
-                            <View>
-                                {
-                                    props.data.status === 'progress' && <View style={styles.fileText}>
-                                        <Text style={[styles.progressText]}>{props.data.end || `${props.data.progress}%`}</Text>
-                                    </View>
-                                }
-                                {
-                                    props.data.status === 'failed' &&(
-                                        <View style={styles.fileText}>
-                                            <TapasIcon name="warning_filled" size={12} style={styles.error} />
-                                            <Text style={[styles.progressText, styles.error]}>{props.data.end || props.data.progress}</Text>
-                                            {/*<TapasIcon style={styles.reUpload} name="upload" onPress={data.reUpload} size={20} />*/}
-                                        </View>
-                                    )
-                                }
-                                {
-                                    props.data.status === 'done' &&(
-                                        <View style={styles.fileText}>
-                                            <TapasIcon name="check_circle_filled" size={12} style={styles.success} />
-                                            <Text style={[styles.progressText, styles.success]}>{props.data.end || props.data.progress}</Text>
-                                        </View>
-                                    )
-                                }
-                            </View>
-                        </View>
-                        <View>
-                            <View style={styles.hr}></View>
-                            <View style={[styles.hr, styles[props.data.status]]}></View>
-                        </View>
-
-                    </View>
-                </>)}
-            </View>
-        </View>
-    );
-};
-
-export default withTheme(Progress);