@beppla/tapas-ui 1.0.46 → 1.0.47

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/ListItem/ListItem.tsx

@@ -0,0 +1,291 @@
+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>;
+  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,
+  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,
+        ]}
+      >
+        <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

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