@beppla/tapas-ui 1.2.0 → 1.2.2

package/components/AnimatedNavItem/AnimatedNavItem.tsx

@@ -1,246 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
-import {
-  Text,
-  Animated,
-  Pressable,
-  ViewProps,
-  TextStyle,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export interface TapasAnimatedNavItemProps extends Omit<ViewProps, 'id'> {
-  /** 唯一标识符 */
-  id?: number | string;
-  /** 图标名称 */
-  icon?: string;
-  /** 显示文本 */
-  text?: string;
-  /** 最小宽度 */
-  minWidth?: number;
-  /** 最大宽度（自动计算或手动指定） */
-  maxWidth?: number;
-  /** 是否展开状态 */
-  expanded?: boolean;
-  /** 是否被选中 */
-  selected?: boolean;
-  /** 图标大小 */
-  iconSize?: number;
-  /** 图标颜色（未展开时） */
-  iconColor?: string;
-  /** 图标颜色（展开时） */
-  expandedIconColor?: string;
-  /** 文本颜色 */
-  textColor?: string;
-  /** 背景颜色（未展开时） */
-  backgroundColor?: string;
-  /** 背景颜色（展开时） */
-  expandedBackgroundColor?: string;
-  /** 动画持续时间 */
-  animationDuration?: number;
-  /** 文本样式 */
-  textStyle?: StyleProp<TextStyle>;
-  /** 容器样式 */
-  containerStyle?: StyleProp<ViewStyle>;
-  /** 点击回调 */
-  onPress?: (id?: number | string) => void;
-  /** 长按回调 */
-  onLongPress?: (id?: number | string) => void;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 高度 */
-  height?: number;
-  /** 边距配置 */
-  padding?: {
-    horizontal?: number;
-    vertical?: number;
-  };
-}
-
-const TapasAnimatedNavItem: React.FC<TapasAnimatedNavItemProps> = ({
-  id,
-  icon,
-  text,
-  minWidth = 40,
-  maxWidth,
-  expanded = false,
-  selected = false,
-  iconSize = 20,
-  iconColor,
-  expandedIconColor,
-  textColor,
-  backgroundColor,
-  expandedBackgroundColor,
-  animationDuration = 200,
-  textStyle,
-  containerStyle,
-  onPress,
-  onLongPress,
-  disabled = false,
-  height = 40,
-  padding = { horizontal: 12, vertical: 0 },
-  style,
-  ...otherProps
-}) => {
-  const styles = useStyles({ height, padding });
-  
-  // 自动计算最大宽度（如果未指定）
-  const [calculatedMaxWidth, setCalculatedMaxWidth] = useState(maxWidth || minWidth);
-  const widthAnim = useRef(new Animated.Value(expanded ? calculatedMaxWidth : minWidth)).current;
-  
-  // 计算文本宽度
-  useEffect(() => {
-    if (!maxWidth && text) {
-      // 简单的文本宽度估算：字符数 * 平均字符宽度 + 图标宽度 + 内边距
-      const estimatedTextWidth = text.length * 10;
-      const iconWidth = icon ? iconSize + 8 : 0; // 图标宽度 + 间距
-      const paddingWidth = (padding.horizontal || 12) * 2;
-      const totalWidth = estimatedTextWidth + iconWidth + paddingWidth;
-      setCalculatedMaxWidth(Math.max(totalWidth, minWidth));
-    }
-  }, [text, maxWidth, icon, iconSize, padding.horizontal, minWidth]);
-
-  // 动画效果
-  useEffect(() => {
-    const targetWidth = expanded ? calculatedMaxWidth : minWidth;
-    
-    Animated.timing(widthAnim, {
-      toValue: targetWidth,
-      duration: animationDuration,
-      useNativeDriver: false,
-    }).start();
-  }, [expanded, calculatedMaxWidth, minWidth, animationDuration]);
-
-  // 处理点击事件
-  const handlePress = useCallback(() => {
-    if (!disabled && onPress) {
-      onPress(id);
-    }
-  }, [disabled, onPress, id]);
-
-  // 处理长按事件
-  const handleLongPress = useCallback(() => {
-    if (!disabled && onLongPress) {
-      onLongPress(id);
-    }
-  }, [disabled, onLongPress, id]);
-
-  // 获取当前状态的颜色
-  const getCurrentIconColor = () => {
-    if (expanded) {
-      return expandedIconColor || styles.expandedIcon.color;
-    }
-    return iconColor || styles.defaultIcon.color;
-  };
-
-  const getCurrentTextColor = () => {
-    return textColor || styles.text.color;
-  };
-
-  const getCurrentBackgroundColor = () => {
-    if (expanded || selected) {
-      return expandedBackgroundColor || styles.expandedContainer.backgroundColor;
-    }
-    return backgroundColor || 'transparent';
-  };
-
-  return (
-    <Pressable
-      {...otherProps}
-      style={[
-        styles.container,
-        containerStyle,
-        style,
-        {
-          backgroundColor: getCurrentBackgroundColor(),
-          opacity: disabled ? 0.5 : 1,
-        },
-      ]}
-      onPress={handlePress}
-      onLongPress={handleLongPress}
-      disabled={disabled}
-    >
-      <Animated.View
-        style={[
-          styles.animatedContainer,
-          { width: widthAnim },
-        ]}
-      >
-        {icon && (
-          <TapasIcon
-            name={icon}
-            size={iconSize}
-            color={getCurrentIconColor()}
-          />
-        )}
-        {expanded && text && (
-          <Text
-            style={[
-              styles.text,
-              { color: getCurrentTextColor() },
-              textStyle,
-            ]}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {text}
-          </Text>
-        )}
-      </Animated.View>
-    </Pressable>
-  );
-};
-
-const useStyles = makeStyles((theme, props?: { height?: number; padding?: { horizontal?: number; vertical?: number } }) => {
-  const height = props?.height || 40;
-  const paddingHorizontal = props?.padding?.horizontal || 12;
-  const paddingVertical = props?.padding?.vertical || 0;
-
-  return {
-    container: {
-      minWidth: 40,
-      width: "auto",
-      display: "flex",
-      flexDirection: "row",
-      height,
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: height / 2,
-      overflow: "hidden",
-    },
-    animatedContainer: {
-      height,
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingHorizontal,
-      paddingVertical,
-      gap: 8,
-    },
-    text: {
-      fontSize: 14,
-      fontWeight: "600",
-      alignSelf: "center",
-      color: theme?.colors?.white || "#FFFFFF",
-      flexShrink: 1,
-    },
-    defaultIcon: {
-      color: theme?.colors?.primary || "#007AFF",
-    },
-    expandedIcon: {
-      color: theme?.colors?.white || "#FFFFFF",
-    },
-    expandedContainer: {
-      backgroundColor: theme?.colors?.primary || "#007AFF",
-    },
-  };
-});
-
-export default withTheme(TapasAnimatedNavItem);
-
-// Export aliases for compatibility
-export const AnimatedNavItem = withTheme(TapasAnimatedNavItem);
-export { TapasAnimatedNavItem };

package/components/AnimatedNavItem/index.tsx

@@ -1,3 +0,0 @@
-export { default } from './AnimatedNavItem';
-export type { TapasAnimatedNavItemProps } from './AnimatedNavItem';
-export { AnimatedNavItem, TapasAnimatedNavItem } from './AnimatedNavItem';

package/components/BarChart/BarChart.tsx

@@ -1,405 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import Text from '../Text/Text';
-
-// 动态导入依赖
-let RNBarChart: any, Grid: any, RNXAxis: any, RNYAxis: any, SVGText: any;
-let RechartsBarChart: any, RechartsBar: any, RechartsXAxis: any, RechartsYAxis: any, CartesianGrid: any, Tooltip: any, Legend: any, ResponsiveContainer: any, Cell: any;
-
-if (Platform.OS === 'web') {
-  // Web 环境使用 recharts
-  try {
-    const recharts = require('recharts');
-    RechartsBarChart = recharts.BarChart;
-    RechartsBar = recharts.Bar;
-    RechartsXAxis = recharts.XAxis;
-    RechartsYAxis = recharts.YAxis;
-    CartesianGrid = recharts.CartesianGrid;
-    Tooltip = recharts.Tooltip;
-    Legend = recharts.Legend;
-    ResponsiveContainer = recharts.ResponsiveContainer;
-    Cell = recharts.Cell;
-  } 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');
-    RNBarChart = svgCharts.BarChart;
-    Grid = svgCharts.Grid;
-    RNXAxis = svgCharts.XAxis;
-    RNYAxis = svgCharts.YAxis;
-    SVGText = svg.Text;
-  } catch (e) {
-    console.warn('react-native-svg-charts not available');
-  }
-}
-
-export interface BarChartData {
-  value: number;
-  label?: string;
-  color?: string;
-}
-
-export interface BarChartSeriesData {
-  name: string;
-  data: number[];
-  color?: string;
-}
-
-export interface BarChartProps {
-  data: BarChartData[] | { categories: string[]; series: BarChartSeriesData[] };
-  width?: number;
-  height?: number;
-  color?: string;
-  colors?: string[];
-  showGrid?: boolean;
-  showLabels?: boolean;
-  showValues?: boolean;
-  horizontal?: boolean;
-  stacked?: boolean;
-  showLegend?: boolean;
-  contentInset?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
-  yAxisFormat?: (value: number) => string;
-  xAxisFormat?: (value: number, index: number) => string;
-  style?: any;
-  testID?: string;
-}
-
-export const BarChart: React.FC<BarChartProps> = ({
-  data,
-  width,
-  height = 300,
-  color = '#FF6B00',
-  colors,
-  showGrid = true,
-  showLabels = true,
-  showValues = false,
-  horizontal = false,
-  stacked = false,
-  showLegend = false,
-  contentInset = { top: 20, bottom: 20, left: 20, right: 20 },
-  yAxisFormat = (value) => value.toString(),
-  xAxisFormat,
-  style,
-  testID,
-}) => {
-  // 判断是否为堆叠数据格式
-  const isStackedData = !Array.isArray(data) && 'categories' in data && 'series' in data;
-  
-  if (Array.isArray(data) && data.length === 0) {
-    return (
-      <View style={[styles.container, { height }, style]} testID={testID}>
-        <Text style={styles.emptyText}>No data available</Text>
-      </View>
-    );
-  }
-
-  if (isStackedData && (!data.categories || data.categories.length === 0)) {
-    return (
-      <View style={[styles.container, { height }, style]} testID={testID}>
-        <Text style={styles.emptyText}>No data available</Text>
-      </View>
-    );
-  }
-
-  // Web 环境使用 Recharts（完全参考 ComboChart 的实现）
-  if (Platform.OS === 'web' && RechartsBarChart) {
-    let chartData: any[] = [];
-    let seriesKeys: string[] = [];
-    const defaultColors = colors || [
-      '#FF6B00', '#0066CC', '#00B894', '#6C5CE7', '#FFB800', '#D63031', 
-      '#FF9F43', '#0984E3', '#00CEC9', '#A29BFE'
-    ];
-
-    if (isStackedData) {
-      // 多系列数据（堆叠/分组）- 参考 ComboChart
-      const stackedData = data as { categories: string[]; series: BarChartSeriesData[] };
-      seriesKeys = stackedData.series.map(s => s.name);
-      
-      chartData = stackedData.categories.map((category, categoryIndex) => {
-        const point: any = { name: category };
-        stackedData.series.forEach((serie) => {
-          point[serie.name] = serie.data[categoryIndex] || 0;
-        });
-        return point;
-      });
-    } else {
-      // 单系列数据
-      const simpleData = data as BarChartData[];
-      chartData = simpleData.map((item, index) => ({
-        name: item.label || `Item ${index + 1}`,
-        value: item.value,
-      }));
-      seriesKeys = ['value'];
-    }
-
-    const ChartComponent = horizontal ? (
-      // 横向柱状图（条形图）：必须设置 layout="vertical"
-      <RechartsBarChart 
-        data={chartData}
-        layout="vertical"
-        margin={{ top: 20, right: 30, left: 20, bottom: showLabels ? 60 : 20 }}
-      >
-        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
-        <RechartsXAxis 
-          type="number"
-          tickFormatter={yAxisFormat} 
-          style={{ fontSize: 10 }} 
-        />
-        <RechartsYAxis 
-          dataKey="name"
-          type="category"
-          width={100}
-          style={{ fontSize: 10 }}
-        />
-        <Tooltip 
-          contentStyle={{ 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          }}
-        />
-        {(showLegend || isStackedData) && <Legend />}
-        {isStackedData ? (
-          seriesKeys.map((key, index) => {
-            const seriesData = (data as { categories: string[]; series: BarChartSeriesData[] }).series[index];
-            const seriesColor = seriesData?.color || defaultColors[index % defaultColors.length];
-            return (
-              <RechartsBar
-                key={key}
-                dataKey={key}
-                stackId={stacked ? "stack" : undefined}
-                fill={seriesColor}
-                label={showValues ? { position: 'top', fontSize: 12 } : false}
-              />
-            );
-          })
-        ) : (
-          (colors || (data as BarChartData[]).some(d => d.color)) ? (
-            <RechartsBar 
-              dataKey="value"
-              label={showValues ? { position: 'top', fontSize: 12 } : false}
-            >
-              {chartData.map((_entry: any, index: number) => {
-                const originalData = data as BarChartData[];
-                const itemColor = originalData[index]?.color || (colors ? colors[index % colors.length] : color);
-                return <Cell key={`cell-${index}`} fill={itemColor} />;
-              })}
-            </RechartsBar>
-          ) : (
-            <RechartsBar 
-              dataKey="value"
-              fill={color}
-              label={showValues ? { position: 'top', fontSize: 12 } : false}
-            />
-          )
-        )}
-      </RechartsBarChart>
-    ) : (
-      // 垂直柱状图：不设置 layout（默认就是垂直）
-      <RechartsBarChart 
-        data={chartData}
-        margin={{ top: 20, right: 30, left: 20, bottom: showLabels ? 60 : 20 }}
-      >
-        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
-        {showLabels && (
-          <RechartsXAxis 
-            dataKey="name"
-            style={{ fontSize: 10 }}
-          />
-        )}
-        <RechartsYAxis 
-          tickFormatter={yAxisFormat} 
-          style={{ fontSize: 10 }} 
-        />
-        <Tooltip 
-          contentStyle={{ 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          }}
-        />
-        {(showLegend || isStackedData) && <Legend />}
-        {isStackedData ? (
-          seriesKeys.map((key, index) => {
-            const seriesData = (data as { categories: string[]; series: BarChartSeriesData[] }).series[index];
-            const seriesColor = seriesData?.color || defaultColors[index % defaultColors.length];
-            return (
-              <RechartsBar
-                key={key}
-                dataKey={key}
-                stackId={stacked ? "stack" : undefined}
-                fill={seriesColor}
-                label={showValues ? { position: 'top', fontSize: 12 } : false}
-              />
-            );
-          })
-        ) : (
-          (colors || (data as BarChartData[]).some(d => d.color)) ? (
-            <RechartsBar 
-              dataKey="value"
-              label={showValues ? { position: 'top', fontSize: 12 } : false}
-            >
-              {chartData.map((_entry: any, index: number) => {
-                const originalData = data as BarChartData[];
-                const itemColor = originalData[index]?.color || (colors ? colors[index % colors.length] : color);
-                return <Cell key={`cell-${index}`} fill={itemColor} />;
-              })}
-            </RechartsBar>
-          ) : (
-            <RechartsBar 
-              dataKey="value"
-              fill={color}
-              label={showValues ? { position: 'top', fontSize: 12 } : false}
-            />
-          )
-        )}
-      </RechartsBarChart>
-    );
-
-    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 (!RNBarChart) {
-    return (
-      <View style={[styles.container, { height }, style]} testID={testID}>
-        <Text style={styles.emptyText}>Chart library not available</Text>
-      </View>
-    );
-  }
-
-  // 移动端只支持简单数据格式
-  if (isStackedData) {
-    return (
-      <View style={[styles.container, { height }, style]} testID={testID}>
-        <Text style={styles.emptyText}>Stacked charts are only available on Web platform</Text>
-      </View>
-    );
-  }
-
-  const simpleData = data as BarChartData[];
-  const chartData = simpleData.map((item: BarChartData, index: number) => ({
-    value: item.value,
-    svg: {
-      fill: colors ? colors[index % colors.length] : (item.color || color),
-    },
-  }));
-
-  const CUT_OFF = 0;
-  const Labels = ({ x, y, bandwidth, data: labelData }: any) => {
-    if (!showValues || !SVGText) return null;
-    
-    return labelData.map((value: any, index: number) => (
-      <SVGText
-        key={index}
-        x={x(index) + (bandwidth / 2)}
-        y={value < CUT_OFF ? y(value) - 10 : y(value) + 15}
-        fontSize={12}
-        fill={value >= CUT_OFF ? 'white' : 'black'}
-        alignmentBaseline={'middle'}
-        textAnchor={'middle'}
-      >
-        {value.toFixed(0)}
-      </SVGText>
-    ));
-  };
-
-  const defaultXAxisFormat = (_value: number, index: number) => {
-    return simpleData[index]?.label || index.toString();
-  };
-
-  return (
-    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-      {!horizontal ? (
-        <View style={styles.chartWrapper}>
-          <RNBarChart
-            style={{ flex: 1 }}
-            data={chartData}
-            contentInset={contentInset}
-            gridMin={0}
-          >
-            {showGrid && Grid && <Grid />}
-            {showValues && <Labels />}
-          </RNBarChart>
-          
-          {showLabels && RNXAxis && (
-            <RNXAxis
-              style={styles.xAxis}
-              data={simpleData}
-              formatLabel={xAxisFormat || defaultXAxisFormat}
-              contentInset={{ left: 20, right: 20 }}
-              svg={{ fontSize: 10, fill: 'black' }}
-            />
-          )}
-        </View>
-      ) : (
-        <View style={styles.horizontalWrapper}>
-          {showLabels && RNYAxis && (
-            <RNYAxis
-              data={simpleData.map((d: BarChartData) => d.value)}
-              contentInset={{ top: 10, bottom: 10 }}
-              formatLabel={yAxisFormat}
-              svg={{ fontSize: 10, fill: 'black' }}
-              style={styles.yAxis}
-            />
-          )}
-          
-          <RNBarChart
-            style={{ flex: 1 }}
-            data={chartData}
-            contentInset={{ top: 10, bottom: 10 }}
-            horizontal={true}
-            gridMin={0}
-          >
-            {showGrid && Grid && <Grid direction={Grid.Direction.VERTICAL} />}
-          </RNBarChart>
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-  },
-  chartWrapper: {
-    flex: 1,
-  },
-  horizontalWrapper: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  xAxis: {
-    marginHorizontal: -10,
-    height: 30,
-  },
-  yAxis: {
-    marginVertical: -4,
-    width: 60,
-  },
-  emptyText: {
-    textAlign: 'center',
-    marginTop: 100,
-    color: '#999',
-  },
-});

package/components/BarChart/index.tsx

@@ -1,2 +0,0 @@
-export { BarChart } from './BarChart';
-export type { BarChartProps, BarChartData } from './BarChart';