@beppla/tapas-ui 1.2.0 → 1.2.2

package/components/Layout/DrawerContext.tsx

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

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

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

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

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

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