@beppla/tapas-ui 1.3.0 → 1.4.0

package/components/LineChart/LineChart.tsx

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

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

package/components/ListItem/ListItem.tsx

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