@beppla/tapas-ui 1.0.65 → 1.0.66

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/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);

package/components/Loading/Loading.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { View, Modal, Image, Animated, Easing, ImageSourcePropType } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-
-export interface LoadingProps {
-  visible: boolean;
-  logo?: ImageSourcePropType;
-  backgroundColor?: string;
-  defaultLogo?: ImageSourcePropType;
-  size?: number;
-}
-
-const Loading: React.FC<LoadingProps> = ({
-  visible,
-  logo,
-  backgroundColor,
-  defaultLogo,
-  size = 200,
-}) => {
-  const styles = useStyles();
-  const opacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (!visible) return;
-    
-    opacity.setValue(0);
-    const animation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 0.3,
-          duration: 800,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacity, {
-          toValue: 0.05,
-          duration: 1000,
-          easing: Easing.inOut(Easing.ease),
-          useNativeDriver: true,
-        }),
-      ])
-    );
-    animation.start();
-    
-    return () => animation.stop();
-  }, [visible, opacity]);
-
-  if (!visible) return null;
-
-  // 图片优先级：1. 传入的 logo 2. 传入的 defaultLogo 3. 内置默认图片
-  // 使用 try-catch 来安全地引用图片，避免打包后的路径问题
-  let imageSource: ImageSourcePropType;
-  try {
-    if (logo) {
-      imageSource = logo;
-    } else if (defaultLogo) {
-      imageSource = defaultLogo;
-    } else {
-      // 直接使用占位符，避免路径问题
-      imageSource = { uri: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjVGNUY1Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTAwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5UYXBhcyBVSTwvdGV4dD4KPC9zdmc+' };
-    }
-  } catch (error) {
-    // 如果出现任何错误，使用占位符
-    imageSource = { uri: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjVGNUY1Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTAwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5UYXBhcyBVSTwvdGV4dD4KPC9zdmc+' };
-  }
-
-  return (
-    <Modal statusBarTranslucent={true} transparent visible={visible} testID="loading">
-      <View style={[styles.bg, backgroundColor ? { backgroundColor } : undefined]}>
-        <Animated.View style={[{ opacity, width: size, height: size }]}>
-          <Image
-            style={{ width: size, height: size }}
-            source={imageSource}
-            resizeMode="contain"
-          />
-        </Animated.View>
-      </View>
-    </Modal>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  bg: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignContent: "center",
-    alignItems: "center",
-    flex: 1,
-    backgroundColor: theme?.colors?.grey1,
-  },
-}));
-
-export default withTheme(Loading);