@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/BarChart/BarChart.tsx

@@ -1,559 +0,0 @@
-import React, { useMemo, useCallback } 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;
-let RechartsComposedChart: any, RechartsLine: 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;
-    RechartsComposedChart = recharts.ComposedChart;
-    RechartsLine = recharts.Line;
-  } 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');
-  }
-}
-
-const DEFAULT_CHART_COLORS = [
-  '#FF6B00', '#0066CC', '#00B894', '#6C5CE7', '#FFB800', '#D63031',
-  '#FF9F43', '#0984E3', '#00CEC9', '#A29BFE',
-];
-
-export interface BarChartData {
-  value: number;
-  label?: string;
-  color?: string;
-}
-
-export interface BarChartSeriesData {
-  name: string;
-  data: number[];
-  color?: string;
-}
-
-export interface BarChartLineSeriesData {
-  name: string;
-  data: number[];
-  color?: string;
-  strokeWidth?: number;
-  dotRadius?: number;
-  activeDotRadius?: number;
-  hideDot?: boolean;
-}
-
-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;
-  legendPosition?: 'top' | 'bottom' | 'left' | 'right'; // 图例位置，默认 bottom
-  lineSeries?: BarChartLineSeriesData[]; // 折线图数据系列，支持柱状图和折线图同时显示
-  xAxisAngle?: number; // X轴标签旋转角度，默认0（不旋转），负数表示逆时针旋转
-  xAxisInterval?: number | 'preserveStartEnd' | 'preserveStart' | 'preserveEnd'; // X轴标签显示间隔
-  contentInset?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
-  yAxisFormat?: (value: number) => string;
-  xAxisFormat?: (value: number, index: number) => string;
-  style?: any;
-  testID?: string;
-  onBarPress?: (data: BarChartData, index: number) => void;  // 柱条点击事件
-}
-
-export const BarChart: React.FC<BarChartProps> = ({
-  data,
-  width,
-  height = 300,
-  color = '#FF6B00',
-  colors,
-  onBarPress,
-  showGrid = true,
-  showLabels = true,
-  showValues = false,
-  horizontal = false,
-  stacked = false,
-  showLegend = false,
-  legendPosition = 'bottom',
-  lineSeries,
-  xAxisAngle = 0,
-  xAxisInterval,
-  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 的实现）
-  const defaultColors = colors || DEFAULT_CHART_COLORS;
-  const hasLineSeries = lineSeries && lineSeries.length > 0;
-
-  const { chartData, seriesKeys } = useMemo(() => {
-    let result: any[] = [];
-    let keys: string[] = [];
-
-    if (isStackedData) {
-      const stackedData = data as { categories: string[]; series: BarChartSeriesData[] };
-      keys = stackedData.series.map(s => s.name);
-
-      result = stackedData.categories.map((category, categoryIndex) => {
-        const point: any = { name: category };
-        stackedData.series.forEach((serie) => {
-          point[serie.name] = serie.data[categoryIndex] || 0;
-        });
-        if (hasLineSeries) {
-          lineSeries!.forEach((lineSerie) => {
-            point[lineSerie.name] = lineSerie.data[categoryIndex] || 0;
-          });
-        }
-        return point;
-      });
-    } else {
-      const simpleData = data as BarChartData[];
-
-      result = simpleData.map((item, index) => {
-        const point: any = {
-          name: item.label || `Item ${index + 1}`,
-          value: item.value,
-        };
-        if (hasLineSeries) {
-          lineSeries!.forEach((lineSerie) => {
-            point[lineSerie.name] = lineSerie.data[index] || 0;
-          });
-        }
-        return point;
-      });
-      keys = ['value'];
-    }
-
-    return { chartData: result, seriesKeys: keys };
-  }, [data, isStackedData, hasLineSeries, lineSeries]);
-
-  const handleBarPress = useCallback((clickedIndex: number) => {
-    if (!onBarPress) return;
-    if (isStackedData) {
-      const stackedData = data as { categories: string[]; series: BarChartSeriesData[] };
-      if (stackedData.categories && stackedData.categories[clickedIndex]) {
-        const categoryName = stackedData.categories[clickedIndex];
-        const totalValue = stackedData.series.reduce((sum, serie) => sum + (serie.data[clickedIndex] || 0), 0);
-        onBarPress({ label: categoryName, value: totalValue }, clickedIndex);
-      }
-    } else {
-      const originalData = data as BarChartData[];
-      if (originalData && originalData[clickedIndex] !== undefined) {
-        onBarPress(originalData[clickedIndex], clickedIndex);
-      }
-    }
-  }, [data, isStackedData, onBarPress]);
-
-  if (Platform.OS === 'web' && RechartsBarChart) {
-
-    // 根据 xAxisAngle 计算底部边距
-    const bottomMargin = showLabels 
-      ? (xAxisAngle !== 0 ? Math.max(60, Math.abs(xAxisAngle) * 0.5 + 40) : 60)
-      : 20;
-
-    // 如果有折线图系列，使用 ComposedChart
-    const ChartBase = hasLineSeries && RechartsComposedChart ? RechartsComposedChart : RechartsBarChart;
-
-    const ChartComponent = horizontal ? (
-      // 横向柱状图（条形图）：必须设置 layout="vertical"
-      <ChartBase 
-        data={chartData}
-        layout="vertical"
-        margin={{ top: 20, right: 30, left: 20, bottom: bottomMargin }}
-      >
-        {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 }}
-          angle={xAxisAngle}
-          textAnchor={xAxisAngle !== 0 ? (xAxisAngle < 0 ? 'end' : 'start') : 'middle'}
-          interval={xAxisInterval}
-        />
-        <Tooltip 
-          contentStyle={{ 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          }}
-        />
-        {(showLegend || isStackedData || hasLineSeries) && (
-          <Legend 
-            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'top'}
-            align={legendPosition === 'left' || legendPosition === 'right' ? legendPosition : 'center'}
-            layout={legendPosition === 'left' || legendPosition === 'right' ? 'vertical' : 'horizontal'}
-            wrapperStyle={{
-              paddingBottom: legendPosition === 'top' ? 24 : 0,
-            }}
-          />
-        )}
-        {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}
-                onClick={onBarPress ? (_clickedData: any, index: number) => handleBarPress(index) : undefined}
-              />
-            );
-          })
-        ) : (
-          <>
-            {(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}
-                      onClick={onBarPress ? () => handleBarPress(index) : undefined}
-                      style={{ cursor: onBarPress ? 'pointer' : 'default' }}
-                    />
-                  );
-                })}
-              </RechartsBar>
-            ) : (
-              <RechartsBar 
-                dataKey="value"
-                fill={color}
-                label={showValues ? { position: 'top', fontSize: 12 } : false}
-                onClick={onBarPress ? (_clickedData: any, index: number) => handleBarPress(index) : undefined}
-                style={{ cursor: onBarPress ? 'pointer' : 'default' }}
-              />
-            )}
-            {/* 渲染折线图系列 */}
-            {hasLineSeries && lineSeries.map((lineSerie, lineIndex) => {
-              const lineColor = lineSerie.color || defaultColors[(seriesKeys.length + lineIndex) % defaultColors.length];
-              return (
-                <RechartsLine
-                  key={lineSerie.name}
-                  type="monotone"
-                  dataKey={lineSerie.name}
-                  stroke={lineColor}
-                  strokeWidth={lineSerie.strokeWidth ?? 2}
-                  dot={lineSerie.hideDot ? false : { fill: lineColor, r: lineSerie.dotRadius ?? 4 }}
-                  activeDot={{ r: lineSerie.activeDotRadius ?? 6 }}
-                />
-              );
-            })}
-          </>
-        )}
-      </ChartBase>
-    ) : (
-      // 垂直柱状图：不设置 layout（默认就是垂直）
-      <ChartBase 
-        data={chartData}
-        margin={{ top: 20, right: 30, left: 20, bottom: bottomMargin }}
-      >
-        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
-        {showLabels && (
-          <RechartsXAxis 
-            dataKey="name"
-            style={{ fontSize: 10 }}
-            angle={xAxisAngle}
-            textAnchor={xAxisAngle !== 0 ? (xAxisAngle < 0 ? 'end' : 'start') : 'middle'}
-            height={xAxisAngle !== 0 ? Math.max(60, Math.abs(xAxisAngle) * 0.5 + 40) : undefined}
-            interval={xAxisInterval}
-          />
-        )}
-        <RechartsYAxis 
-          tickFormatter={yAxisFormat} 
-          style={{ fontSize: 10 }} 
-        />
-        <Tooltip 
-          contentStyle={{ 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          }}
-        />
-        {(showLegend || isStackedData || hasLineSeries) && (
-          <Legend 
-            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'top'}
-            align={legendPosition === 'left' || legendPosition === 'right' ? legendPosition : 'center'}
-            layout={legendPosition === 'left' || legendPosition === 'right' ? 'vertical' : 'horizontal'}
-            wrapperStyle={{
-              paddingBottom: legendPosition === 'top' ? 24 : 0,
-            }}
-          />
-        )}
-        {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}
-                onClick={onBarPress ? (_clickedData: any, index: number) => handleBarPress(index) : undefined}
-              />
-            );
-          })
-        ) : (
-          <>
-            {(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}
-                      onClick={onBarPress ? () => handleBarPress(index) : undefined}
-                      style={{ cursor: onBarPress ? 'pointer' : 'default' }}
-                    />
-                  );
-                })}
-              </RechartsBar>
-            ) : (
-              <RechartsBar 
-                dataKey="value"
-                fill={color}
-                label={showValues ? { position: 'top', fontSize: 12 } : false}
-                onClick={onBarPress ? (_clickedData: any, index: number) => handleBarPress(index) : undefined}
-                style={{ cursor: onBarPress ? 'pointer' : 'default' }}
-              />
-            )}
-            {/* 渲染折线图系列 */}
-            {hasLineSeries && lineSeries.map((lineSerie, lineIndex) => {
-              const lineColor = lineSerie.color || defaultColors[(seriesKeys.length + lineIndex) % defaultColors.length];
-              return (
-                <RechartsLine
-                  key={lineSerie.name}
-                  type="monotone"
-                  dataKey={lineSerie.name}
-                  stroke={lineColor}
-                  strokeWidth={lineSerie.strokeWidth ?? 2}
-                  dot={lineSerie.hideDot ? false : { fill: lineColor, r: lineSerie.dotRadius ?? 4 }}
-                  activeDot={{ r: lineSerie.activeDotRadius ?? 6 }}
-                />
-              );
-            })}
-          </>
-        )}
-      </ChartBase>
-    );
-
-    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 mobileChartData = simpleData.map((item: BarChartData, index: number) => ({
-    value: item.value,
-    svg: {
-      fill: colors ? colors[index % colors.length] : (item.color || color),
-      onPress: onBarPress ? () => {
-        // 移动端触摸事件：直接使用索引访问原始数据
-        if (simpleData && simpleData[index] !== undefined) {
-          onBarPress(simpleData[index], index);
-        }
-      } : undefined,
-    },
-  }));
-
-  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={mobileChartData}
-            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={mobileChartData}
-            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';

package/components/Button/Button.tsx

@@ -1,98 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Button as RneButton, ButtonProps, makeStyles} from '@rneui/themed';
-import {Platform} from 'react-native';
-import Hoverable from '../Hoverable/Hoverable';
-export interface  Props extends  ButtonProps {
-    hoverStyle?: any;
-    buttonStyle?: any;
-    titleStyle?: any;
-    selectedTitleStyle?: any;
-    width?: number;
-}
-
-const useStyles = makeStyles((theme) => ({
-    buttonHovered: {
-        backgroundColor: theme?.colors?.colorSurface2,
-    },
-    outlineButtonHovered: {
-        backgroundColor: theme?.colors?.grey4,
-        borderColor: theme?.colors?.grey4,
-        borderWidth: 1, // 固定边框宽度，防止 hover 时尺寸变化
-    },
-    button: {
-        backgroundColor: theme?.colors?.primary,
-    },
-    baseButton: {
-        fontFamily: theme?.fonts?.fontFamily,
-        fontSize: theme?.fonts.sizeM,
-        fontWeight: theme?.fonts.weightM,
-    },
-    outlineButton: {
-        borderColor: theme?.colors?.grey4,
-        backgroundColor: theme?.colors?.white || '#ffffff',
-        borderWidth: 1, // 固定边框宽度，防止 hover 时尺寸变化
-    }
-}));
-export const Button: React.FC<Props> = ({hoverStyle, buttonStyle, width, testID, ...props}) => {
-
-    const [isHovered, setIsHovered] = useState(false);
-    const styles = useStyles(props);
-    
-    const handleMouseEnter = useCallback(() => {
-        setIsHovered(true);
-    }, []);
-
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-
-    const { primaryStyle, hoveredStyle } = useMemo(() => ({
-        primaryStyle: props.type === 'solid' ? styles.button : props.type === 'outline' ? styles.outlineButton : {},
-        hoveredStyle: props.type === 'solid' ? styles.buttonHovered : props.type === 'outline' ? styles.outlineButtonHovered : {}
-    }), [props.type, styles]);
-
-    const newButtonStyle = useMemo(() => {
-        if (isHovered && props.type !== 'clear') {
-            // 合并样式：primaryStyle < hoveredStyle < buttonStyle < hoverStyle
-            // 这样用户自定义的 buttonStyle（如 borderWidth）不会被 hoveredStyle 覆盖
-            const merged = {...primaryStyle, ...hoveredStyle, ...buttonStyle, ...hoverStyle};
-            // 如果用户自定义了 borderWidth，保持用户的值
-            if (buttonStyle?.borderWidth !== undefined) {
-                merged.borderWidth = buttonStyle.borderWidth;
-            }
-            return merged;
-        }
-        return { ...primaryStyle, ...buttonStyle};
-    }, [isHovered, props.type, hoveredStyle, hoverStyle, primaryStyle, buttonStyle]);
-
-    const containerStyle = useMemo(() => ({ width }), [width]);
-    const titleStyleMemo = useMemo(() => [styles.baseButton, props.titleStyle], [styles.baseButton, props.titleStyle]);
-
-    return Platform.OS === 'web' && props.type !== 'clear' ? (
-        <Hoverable
-            onHoverIn={handleMouseEnter}
-            onHoverOut={handleMouseLeave}
-        >
-            {(isHovered: boolean) => (
-                <RneButton
-                    testID={testID}
-                    containerStyle={containerStyle}
-                    buttonStyle={newButtonStyle}
-                    titleStyle={isHovered ? [titleStyleMemo, props.selectedTitleStyle].filter(Boolean) : titleStyleMemo}
-                    {...props}
-                />
-            )}
-        </Hoverable>
-        ) : (
-            <RneButton
-                testID={testID}
-                containerStyle={containerStyle}
-                buttonStyle={newButtonStyle}
-                titleStyle={titleStyleMemo}
-                {...props}
-            />
-        );
-};
-
-
-export default Button;