@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/PieChart/PieChart.tsx

@@ -0,0 +1,261 @@
+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

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

package/components/Popover/Popover.tsx

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,209 @@
+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);