@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/BarChart/BarChart.tsx

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

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

package/components/Button/Button.tsx

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