@beppla/tapas-ui 1.4.0 → 1.4.2

package/components/LineChart/LineChart.tsx

@@ -1,371 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import Text from '../Text/Text';
-
-// 动态导入依赖
-let RNLineChart: any, Grid: any, RNXAxis: any, Circle: any;
-let RechartsLine: any, Line: any, RechartsXAxis: any, RechartsYAxis: any, CartesianGrid: any, Tooltip: any, Legend: any, ResponsiveContainer: any;
-
-if (Platform.OS === 'web') {
-  // Web 环境使用 recharts
-  try {
-    const recharts = require('recharts');
-    RechartsLine = recharts.LineChart;
-    Line = recharts.Line;
-    RechartsXAxis = recharts.XAxis;
-    RechartsYAxis = recharts.YAxis;
-    CartesianGrid = recharts.CartesianGrid;
-    Tooltip = recharts.Tooltip;
-    Legend = recharts.Legend;
-    ResponsiveContainer = recharts.ResponsiveContainer;
-  } catch (e) {
-    console.warn('Recharts not available for Web');
-  }
-} else {
-  // 移动端使用 react-native-svg-charts
-  try {
-    const svgCharts = require('react-native-svg-charts');
-    const svg = require('react-native-svg');
-    RNLineChart = svgCharts.LineChart;
-    Grid = svgCharts.Grid;
-    RNXAxis = svgCharts.XAxis;
-    Circle = svg.Circle;
-  } catch (e) {
-    console.warn('react-native-svg-charts not available');
-  }
-}
-
-export interface LineChartDataPoint {
-  value: number;
-  label?: string;
-}
-
-export interface LineChartSeriesData {
-  data: LineChartDataPoint[];
-  color?: string;
-  label?: string;
-}
-
-export interface LineChartProps {
-  data: LineChartDataPoint[] | LineChartSeriesData[];
-  width?: number;
-  height?: number;
-  color?: string;
-  colors?: string[];
-  showGrid?: boolean;
-  showLabels?: boolean;
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  showLegend?: boolean;
-  legendPosition?: 'top' | 'bottom' | 'left' | 'right';
-  legendIconType?: 'circle' | 'rect' | 'square' | 'line';
-  legendIconSize?: { width: number; height: number };
-  legendTextStyle?: {
-    fontFamily?: string;
-    fontSize?: number;
-    fontWeight?: string | number;
-    letterSpacing?: number;
-  };
-  curveType?: 'monotone' | 'linear' | 'step' | 'natural' | 'basis';
-  showDots?: boolean;
-  showArea?: 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 LineChart: React.FC<LineChartProps> = ({
-  data,
-  width,
-  height = 300,
-  color = '#0066CC',
-  colors,
-  showGrid = true,
-  showLabels = true,
-  showXAxis = true,
-  showYAxis = true,
-  showLegend = true,
-  legendPosition = 'bottom',
-  legendIconType = 'rect',
-  legendIconSize = { width: 18, height: 8 },
-  legendTextStyle = {
-    fontFamily: 'Bricolage Grotesque, sans-serif',
-    fontSize: 10,
-    fontWeight: 400,
-    letterSpacing: 0.1,
-  },
-  curveType = 'monotone',
-  showDots = true,
-  yAxisFormat,
-  xAxisFormat,
-  contentInset = { top: 20, bottom: 20, left: 20, right: 20 },
-  style,
-  testID,
-}) => {
-  // 检查是否为多系列数据
-  const isMultiSeries = Array.isArray(data) && data.length > 0 && data[0] && 'data' in data[0];
-  
-  if (!isMultiSeries && (!Array.isArray(data) || data.length === 0)) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <Text style={styles.emptyText}>No data available</Text>
-      </View>
-    );
-  }
-
-  // Web 环境使用 Recharts
-  if (Platform.OS === 'web' && RechartsLine) {
-    let chartData: any[] = [];
-    let seriesKeys: string[] = [];
-
-    if (isMultiSeries) {
-      // 多系列数据
-      const series = data as LineChartSeriesData[];
-      seriesKeys = series.map((s, i) => s.label || `Series ${i + 1}`);
-      
-      // 转换为 recharts 格式
-      const maxLength = Math.max(...series.map(s => s.data?.length || 0));
-      for (let i = 0; i < maxLength; i++) {
-        const point: any = { name: series[0]?.data?.[i]?.label || `Point ${i + 1}` };
-        series.forEach((s, sIndex) => {
-          if (seriesKeys[sIndex]) {
-            point[seriesKeys[sIndex]] = s.data?.[i]?.value || 0;
-          }
-        });
-        chartData.push(point);
-      }
-    } else {
-      // 单系列数据
-      chartData = (data as LineChartDataPoint[]).map((item, index) => ({
-        name: item.label || `Point ${index + 1}`,
-        value: item.value,
-      }));
-      seriesKeys = ['value'];
-    }
-
-    const lineColors = colors || (isMultiSeries ? [
-      '#6C63FF', '#00BFA5', '#FF6B00', '#FFC107', '#E91E63', 
-      '#9C27B0', '#3F51B5', '#00BCD4', '#4CAF50', '#FF9800'
-    ] : [color]);
-
-    // 自定义图例渲染函数
-    const renderLegend = (props: any) => {
-      const { payload } = props;
-      if (!payload || payload.length === 0) return null;
-
-      return (
-        <div style={{ 
-          display: 'flex', 
-          flexWrap: 'wrap', 
-          gap: '12px',
-          justifyContent: legendPosition === 'left' || legendPosition === 'right' ? 'flex-start' : 'center',
-          padding: legendPosition === 'top' ? '0 0 10px 0' : '10px 0 0 0'
-        }}>
-          {payload.map((entry: any, index: number) => {
-            const iconStyle: React.CSSProperties = {
-              display: 'inline-block',
-              marginRight: '6px',
-              verticalAlign: 'middle',
-            };
-
-            // 根据 iconType 设置不同的图标
-            if (legendIconType === 'rect' || legendIconType === 'line') {
-              iconStyle.width = `${legendIconSize.width}px`;
-              iconStyle.height = `${legendIconSize.height}px`;
-              iconStyle.backgroundColor = entry.color;
-              iconStyle.borderRadius = legendIconType === 'rect' ? '2px' : '0';
-            } else if (legendIconType === 'square') {
-              const size = Math.max(legendIconSize.width, legendIconSize.height);
-              iconStyle.width = `${size}px`;
-              iconStyle.height = `${size}px`;
-              iconStyle.backgroundColor = entry.color;
-              iconStyle.borderRadius = '2px';
-            } else {
-              // circle
-              const size = Math.max(legendIconSize.width, legendIconSize.height);
-              iconStyle.width = `${size}px`;
-              iconStyle.height = `${size}px`;
-              iconStyle.backgroundColor = entry.color;
-              iconStyle.borderRadius = '50%';
-            }
-
-            return (
-              <div key={`legend-${index}`} style={{ display: 'flex', alignItems: 'center' }}>
-                <span style={iconStyle}></span>
-                <span style={{
-                  fontFamily: legendTextStyle.fontFamily,
-                  fontSize: `${legendTextStyle.fontSize}px`,
-                  fontWeight: legendTextStyle.fontWeight,
-                  letterSpacing: `${legendTextStyle.letterSpacing}px`,
-                  color: '#333',
-                  lineHeight: 'normal',
-                }}>
-                  {entry.value}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      );
-    };
-
-    const ChartComponent = (
-      <RechartsLine 
-        data={chartData}
-        margin={{ 
-          top: 20, 
-          right: 30, 
-          left: showYAxis ? 20 : 10, 
-          bottom: (showLabels && showXAxis) ? 20 : 10 
-        }}
-      >
-        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
-        
-        {(showLabels && showXAxis) && (
-          <RechartsXAxis 
-            dataKey="name"
-            style={{ fontSize: 10 }}
-          />
-        )}
-        
-        {showYAxis && (
-          <RechartsYAxis 
-            style={{ fontSize: 10 }}
-            tickFormatter={yAxisFormat}
-          />
-        )}
-        
-        <Tooltip 
-          contentStyle={{ 
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            border: '1px solid #E0E0E0',
-            borderRadius: 4,
-          }}
-        />
-        
-        {(isMultiSeries && showLegend) && (
-          <Legend 
-            verticalAlign={legendPosition === 'top' || legendPosition === 'bottom' ? legendPosition : 'top'}
-            align={legendPosition === 'left' || legendPosition === 'right' ? legendPosition : 'center'}
-            content={renderLegend}
-          />
-        )}
-        
-        {seriesKeys.map((key, index) => (
-          <Line
-            key={key}
-            type={curveType}
-            dataKey={key}
-            stroke={lineColors[index % lineColors.length]}
-            strokeWidth={2}
-            dot={showDots ? { fill: lineColors[index % lineColors.length], r: 4 } : false}
-            activeDot={showDots ? { r: 6 } : false}
-          />
-        ))}
-      </RechartsLine>
-    );
-
-    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 (!RNLineChart) {
-    return (
-      <View style={[styles.container, { height }, style]}>
-        <Text style={styles.emptyText}>Chart library not available</Text>
-      </View>
-    );
-  }
-
-  // 单系列数据
-  const chartData = isMultiSeries 
-    ? ((data as LineChartSeriesData[])[0]?.data || []).map(d => d.value)
-    : (data as LineChartDataPoint[]).map(d => d.value);
-
-  const Decorator = ({ x, y, data }: any) => {
-    if (!showDots || !Circle) return null;
-    
-    return data.map((value: any, index: number) => (
-      <Circle
-        key={index}
-        cx={x(index)}
-        cy={y(value)}
-        r={4}
-        stroke={color}
-        fill="white"
-        strokeWidth={2}
-      />
-    ));
-  };
-
-  return (
-    <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
-      <View style={styles.chartWrapper}>
-        <RNLineChart
-          style={{ flex: 1 }}
-          data={chartData}
-          svg={{ stroke: color, strokeWidth: 2 }}
-          contentInset={contentInset}
-          gridMin={0}
-        >
-          {showGrid && Grid && <Grid />}
-          <Decorator />
-        </RNLineChart>
-        
-        {(showLabels && showXAxis) && RNXAxis && (
-          <RNXAxis
-            style={styles.xAxis}
-            data={chartData}
-            formatLabel={(value: any, index: number) => {
-              if (xAxisFormat) {
-                return xAxisFormat(value, index);
-              }
-              if (isMultiSeries) {
-                return ((data as LineChartSeriesData[])[0]?.data || [])[index]?.label || index.toString();
-              }
-              return (data as LineChartDataPoint[])[index]?.label || index.toString();
-            }}
-            contentInset={{ left: 20, right: 20 }}
-            svg={{ fontSize: 10, fill: 'black' }}
-          />
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-  },
-  chartWrapper: {
-    flex: 1,
-  },
-  xAxis: {
-    marginHorizontal: -10,
-    height: 30,
-  },
-  emptyText: {
-    textAlign: 'center',
-    marginTop: 100,
-    color: '#999',
-  },
-});
-

package/components/LineChart/index.tsx

@@ -1,2 +0,0 @@
-export { LineChart } from './LineChart';
-export type { LineChartProps, LineChartDataPoint, LineChartSeriesData } from './LineChart';

package/components/ListItem/ListItem.tsx

@@ -1,307 +0,0 @@
-import React, { useState } from "react";
-import { ListItem, makeStyles, withTheme, ListItemProps } from "@rneui/themed";
-
-import Icon from "../Icons/TapasIcon";
-import {
-  LayoutChangeEvent,
-  Text,
-  TouchableOpacity,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-} from "react-native";
-import Hoverable from "../Hoverable/Hoverable";
-
-export interface ItemProps {
-  id?: string | number;
-  hide?: boolean;
-  name: string;
-  value: string | number;
-  desc?: string;
-  number?: number;
-}
-export interface Props extends ListItemProps {
-  selected: ItemProps;
-  item: ItemProps;
-  key: number | string;
-  onItemPress: (item: ItemProps) => void;
-  disabled?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-  itemContainerStyle?: StyleProp<ViewStyle>;
-  titleContainerStyle?: StyleProp<ViewStyle>;
-  searchHighlightStyle?: StyleProp<TextStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  descStyle?: StyleProp<TextStyle>;
-  /** 是否为第一个 item */
-  isFirst?: boolean;
-  /** 是否为最后一个 item */
-  isLast?: boolean;
-  search?: string;
-  testID?: string;
-}
-
-const useStyle = makeStyles((theme, ...props) => {
-  //@ts-ignore
-  const { disabled } = props[0];
-
-  return {
-    listItemContainer: {
-      backgroundColor: theme.colors.grey5,
-      padding: 0,
-      width: "100%",
-    },
-    itemContainer: {
-      backgroundColor: theme.colors.white,
-      display: "flex",
-      justifyContent: "space-between",
-      flexDirection: "row",
-      padding: 0,
-      paddingHorizontal: 16,
-      width: "100%",
-      height: 48,
-      alignItems: "center",
-      flex: 1,
-      overflow: "hidden",
-    },
-    selectedItem: {
-      backgroundColor: theme.colors.grey3,
-    },
-    title: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightR,
-      color: theme.colors.colorTextPrimary,
-      justifyContent: "center",
-    },
-    icon: {
-      color: disabled ? theme.colors.disabled : theme.colors.colorTextAccent,
-      fontSize: 20,
-    },
-    disabled: {
-      backgroundColor: theme.colors.white,
-    },
-    hovered: {
-      backgroundColor: theme.colors.grey4,
-    },
-    disabledTitle: {
-      color: theme.colors.disabled,
-    },
-    disabledSelectedContainer: {
-      backgroundColor: theme.colors.grey5,
-    },
-    main: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      overflow: "hidden",
-      justifyContent: "center",
-    },
-    text: {
-      flexDirection: "row",
-      justifyContent: "flex-start",
-      width: "100%",
-      overflow: "hidden",
-      // whiteSpace: "nowrap", // Not supported in React Native
-      // textOverflow: "ellipsis", // Not supported in React Native
-    },
-    desc: {
-      fontSize: theme.fonts.sizeS,
-      fontWeight: theme.fonts.weightR,
-      color: theme.colors.colorTextSecondary,
-    },
-    hoverWrap: {
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      flexGrow: 1,
-      padding: 0,
-    },
-    number: {
-      fontFamily: theme.fonts.fontFamily,
-      fontSize: theme.fonts.sizeS,
-      fontWeight: theme.fonts.weightL,
-      color: theme.colors.white,
-      height: 24,
-      width: 24,
-      lineHeight: 24,
-      textAlign: "center",
-      backgroundColor: theme.colors.colorTextAccent,
-      borderRadius: theme.radius.full,
-    },
-    highlightStyle: {
-      color: theme.colors.colorTextPrimary,
-    },
-  };
-});
-
-const CustomListItem: React.FC<Props> = ({
-  item,
-  key,
-  onItemPress,
-  containerStyle,
-  itemContainerStyle,
-  titleContainerStyle,
-  searchHighlightStyle,
-  titleStyle,
-  descStyle,
-  isFirst,
-  isLast,
-  testID,
-  ...props
-}) => {
-  const styles = useStyle(props);
-  const { selected, disabled } = props;
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-  const [innerConWidth, setInnerConWidth] = useState<number>(0);
-  // Inner Container Layout Event to set content width
-  const handleInnerConLayout = (event: LayoutChangeEvent) => {
-    const { width } = event.nativeEvent.layout;
-    if (innerConWidth === 0) {
-      setInnerConWidth(width - 32); // 32 is padding left and right
-    }
-  };
-  return (
-    <ListItem
-      testID={testID}
-      containerStyle={[
-        styles.listItemContainer,
-        disabled && styles.disabled,
-        containerStyle,
-        selected?.value === item?.value &&
-          disabled &&
-          styles.disabledSelectedContainer,
-      ]}
-      style={{ width: "100%" }}
-      key={key}
-    >
-      <ListItem.Content
-        onLayout={handleInnerConLayout}
-        style={[
-          styles.itemContainer,
-          itemContainerStyle,
-          selected?.value === item?.value
-            ? styles.selectedItem
-            : isHovered && styles.hovered,
-          // 第一个 item 添加左上和右上圆角
-          isFirst && {
-            borderTopLeftRadius: 12,
-            borderTopRightRadius: 12,
-          },
-          // 最后一个 item 添加左下和右下圆角
-          isLast && {
-            borderBottomLeftRadius: 12,
-            borderBottomRightRadius: 12,
-          },
-        ]}
-      >
-        <Hoverable
-          // @ts-ignore
-          onHoverIn={handleMouseEnter}
-          onHoverOut={handleMouseLeave}
-          style={styles.hoverWrap}
-        >
-          <TouchableOpacity
-            style={{
-              ...styles.main,
-              width:
-                innerConWidth -
-                (selected?.value === item?.value || item?.number ? 36 : 0),
-            }}
-            onPress={() => {
-              !disabled && onItemPress(item);
-            }}
-          >
-            {item?.name ? (
-              <ListItem.Title
-                style={[
-                  styles.title,
-                  styles.text,
-                  titleContainerStyle,
-                  disabled && styles.disabledTitle,
-                ]}
-              >
-                <Text style={titleStyle}>
-                  {props.search && item.name
-                    ? item.name
-                        .split(new RegExp(`(${props.search})`, "gi"))
-                        .map((part, i) =>
-                          part
-                            .toLowerCase()
-                            .includes(props.search?.toLowerCase() || "") ? (
-                            <Text
-                              key={i}
-                              style={[
-                                styles.highlightStyle,
-                                searchHighlightStyle,
-                              ]}
-                            >
-                              {part}
-                            </Text>
-                          ) : (
-                            part
-                          )
-                        )
-                    : item.name}
-                </Text>
-              </ListItem.Title>
-            ) : (
-              <></>
-            )}
-            {item?.desc ? (
-              <ListItem.Subtitle
-                style={[
-                  styles.text,
-                  styles.desc,
-                  disabled && styles.disabledTitle,
-                ]}
-              >
-                <Text style={descStyle}>
-                  {props.search && item.desc
-                    ? item.desc
-                        .split(new RegExp(`(${props.search})`, "gi"))
-                        .map((part, i) =>
-                          part
-                            .toLowerCase()
-                            .includes(props.search?.toLowerCase() || "") ? (
-                            <Text
-                              key={i}
-                              style={[
-                                styles.highlightStyle,
-                                searchHighlightStyle,
-                              ]}
-                            >
-                              {part}
-                            </Text>
-                          ) : (
-                            part
-                          )
-                        )
-                    : item.desc}
-                </Text>
-              </ListItem.Subtitle>
-            ) : (
-              <></>
-            )}
-          </TouchableOpacity>
-          {item?.number ? (
-            <Text style={styles.number}>{item?.number}</Text>
-          ) : (
-            selected?.value === item?.value && (
-              <Icon name="check" style={styles.icon} />
-            )
-          )}
-        </Hoverable>
-      </ListItem.Content>
-    </ListItem>
-  );
-};
-
-export default withTheme(CustomListItem);