@beppla/tapas-ui 1.0.77 → 1.0.78

package/components/Layout/DrawerContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useState } from "react";
+import { Props as DrawerProps } from "../Drawer/Drawer";
+
+//@ts-ignore
+export const DrawerContext = createContext();
+
+export const DrawerProvider = ({ children }: any) => {
+    const [drawerInfo, setDrawerInfo] = useState<DrawerProps>({} as DrawerProps);
+
+    const open = (drawerInfo: DrawerProps ) => {
+        setDrawerInfo({
+            ...drawerInfo,
+            visible: true,
+        });
+    };
+
+    const close = () => {
+        setDrawerInfo({
+            visible: false,
+            title: '',
+            component: null,
+            showFooter: false
+        })
+    }
+
+    return (
+        <DrawerContext.Provider value={{ drawerInfo, setDrawerInfo, open, close } }>
+            {children}
+        </DrawerContext.Provider>
+    );
+};

package/components/Layout/Layout.tsx

@@ -0,0 +1,115 @@
+import React, { useContext, useState } from "react";
+import {View, Platform, ScrollView } from "react-native";
+import Navigation, {Props as NavigationProps} from "../Navigation/Navigation";
+import Drawer  from '../Drawer/Drawer'
+import Header, {Props as HeaderProps } from "../Header/Header";
+import { makeStyles, withTheme } from "@rneui/themed";
+import { Toast } from "../Toast/Toast";
+import {  ToastContext } from "./ToastContext";
+import {  DrawerContext } from "./DrawerContext";
+
+// 移除错误的导出语句，这些类型已经在 index.tsx 中正确导出
+
+
+const useStyles = makeStyles((theme) => ({
+    container: {
+        flex: 1,
+        height: '100%',
+        overflow: 'hidden',
+        backgroundColor: theme.colors.background,
+        position: 'relative',
+    },
+    smallContainer: {
+        marginTop: 70,
+        height: '90%',
+    },
+    navContainer:{
+        position: 'absolute',
+        zIndex: 9999,
+        top: 0,
+        bottom: 0,
+        left: 0,
+    },
+    bodyContainer: {
+        flex:1,
+        flexDirection: 'column',
+    },
+    bodyWebContainer: {
+        marginLeft: 56,
+    },
+    toastWebContainer: {
+        right: 24,
+        top: 24,
+        position: 'absolute'
+    },
+    toastContainer: {
+        top: 4,
+        backgroundColor: 'red'
+    },
+}));
+
+export type Props = {
+    children: React.ReactNode;
+    headerComponent?: React.ReactNode;
+    headerProps?: HeaderProps,
+    navigationComponent?: React.ReactNode,
+    navigationProps?: NavigationProps,
+    showNavigation?: boolean;
+    testID?: string;
+};
+
+const isWeb = Platform.OS === 'web';
+const Layout: React.FC<Props> = ({ children, headerProps, navigationProps,navigationComponent, headerComponent, showNavigation = true, testID, ...props }: any) => {
+    const styles = useStyles(props);
+    //@ts-ignore
+    const { toastInfo } = useContext (ToastContext) || {};
+    //@ts-ignore
+    const { drawerInfo } = useContext (DrawerContext) || {};
+    const [navVisible, setNavVisible] = useState(!isWeb ? false : true);
+
+    return (
+        <View style={styles.container} testID={testID}>
+            {
+                toastInfo && (<Toast {...toastInfo}  style={ isWeb ? styles.toastWebContainer : styles.toastContainer} />)
+            }
+            {
+                drawerInfo && (
+                    <Drawer {...drawerInfo} />
+                )
+            }
+            <View style={{ flexDirection: 'row', height: '100%' }}>
+                {
+                    showNavigation && (
+                        navigationComponent ? (<View>
+                            {navigationComponent}
+                        </View>) : (<View style={styles.navContainer}>
+                            <Navigation
+                                {...navigationProps}
+                                onMaskPress={() => {
+                                    if(Platform.OS !== 'web') {
+                                        setNavVisible(!navVisible)
+                                    }
+                                }}
+                                visible={navVisible}
+                            />
+                        </View>)
+                    )
+                }
+                <View style={[styles.bodyContainer, (showNavigation && isWeb) ? styles.bodyWebContainer : {}]}>
+                    {
+                        headerComponent ? (
+                            <View>
+                                {headerComponent}
+                            </View>
+                        ) : (<Header {...headerProps} showLeftIcon={showNavigation && !isWeb } onLeftIconPress={() => { setNavVisible(!navVisible) }} />)
+                    }
+                    <ScrollView style={[{ height: '100%'}, Platform.OS !== 'web' ? styles.smallContainer : {}]}>
+                        {children}
+                    </ScrollView>
+                </View>
+            </View>
+        </View>
+  );
+};
+
+export default withTheme(Layout);

package/components/Layout/ToastContext.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useState } from "react";
+import { Props as ToastProps } from "../Toast/Toast";
+
+//@ts-ignore
+export const ToastContext = createContext();
+
+export const ToastProvider = ({ children }: any) => {
+    const [toastInfo, setToastInfo] = useState<ToastProps>({} as ToastProps);
+
+    const open = (props: ToastProps) => {
+        setToastInfo({
+            ...props,
+            visible: true
+        })
+
+    }
+    const close = () => {
+        setToastInfo({
+            visible: false,
+            message: "",
+        })
+    }
+
+    return (
+        <ToastContext.Provider value={{ toastInfo, setToastInfo, open, close } }>
+            {children}
+        </ToastContext.Provider>
+    );
+};

package/components/Layout/index.tsx

@@ -0,0 +1,24 @@
+import { ToastProvider } from "./ToastContext";
+import { DrawerProvider } from "./DrawerContext";
+import React from "react";
+import Layout, { Props } from "./Layout";
+import {View} from "react-native";
+
+export { Props } from "./Layout";
+export { NavItem, NavItemType, SelectedItem } from "../Navigation/Navigation";
+
+const Index: React.FC<Props> = ({children, ...props}) => {
+    return (
+        <ToastProvider>
+            <DrawerProvider>
+                <Layout {...props} >
+                <View>
+                    {children}
+                </View>
+                </Layout>
+            </DrawerProvider>
+        </ToastProvider>
+    )
+}
+
+export default Index;

package/components/LineChart/LineChart.tsx

@@ -0,0 +1,270 @@
+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;
+  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,
+  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 ChartComponent = (
+      <RechartsLine 
+        data={chartData}
+        margin={{ top: 20, right: 30, left: 20, bottom: showLabels ? 20 : 10 }}
+      >
+        {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />}
+        
+        {showLabels && (
+          <RechartsXAxis 
+            dataKey="name"
+            style={{ fontSize: 10 }}
+          />
+        )}
+        <RechartsYAxis 
+          style={{ fontSize: 10 }}
+          tickFormatter={yAxisFormat}
+        />
+        
+        <Tooltip 
+          contentStyle={{ 
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            border: '1px solid #E0E0E0',
+            borderRadius: 4,
+          }}
+        />
+        
+        {isMultiSeries && <Legend />}
+        
+        {seriesKeys.map((key, index) => (
+          <Line
+            key={key}
+            type="monotone"
+            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 && 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';