@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/Navigation/Navigation.tsx

@@ -1,336 +0,0 @@
-import React, { useEffect, useState, useCallback } from "react";
-import {
-  View,
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  ImageSourcePropType,
-  Platform,
-} from "react-native";
-import { Image, withTheme, makeStyles, Theme } from "@rneui/themed";
-import Icon from "../Icons/TapasIcon";
-
-export interface Permissions {
-  resource: string;
-  action: string;
-}
-export interface NavItem {
-  name: string;
-  iconName: string;
-  url?: string;
-  permissions?: Permissions[];
-  /** Test ID for individual nav item (E2E testing) */
-  testID?: string;
-}
-
-export interface Props {
-  navItems?: NavItem[];
-  systemItems?: NavItem[];
-  expanded?: boolean;
-  onItemPress?: (item: NavItem) => void;
-  onLogoPress?: () => void;
-  logoImg?: ImageSourcePropType;
-  defaultSelectedItem?: SelectedItem;
-  visible?: boolean;
-  onMaskPress?: () => void;
-  selectedIndex?: number;
-  navigation?: {
-    navigate: (routeName: string, params?: any) => void;
-  };
-  /** Test ID for E2E testing */
-  testID?: string;
-}
-
-interface NavigationProps extends Props {
-  theme?: Theme;
-}
-
-export enum NavItemType {
-  Nav = "nav",
-  System = "system",
-}
-export interface SelectedItem {
-  type: NavItemType;
-  selectedItemIndex: number;
-}
-
-const useStyles = makeStyles((theme) => {
-  return {
-    menuContainer: {
-      backgroundColor: theme?.colors?.bg1,
-      display: "flex",
-      height: "100%",
-      overflow: "hidden",
-    },
-    navItem: {
-      flexDirection: "row",
-      alignItems: "center",
-      height: 40,
-      marginBottom: theme?.spacing?.tpSm,
-      borderRadius: theme?.radius?.full,
-      minWidth: 40,
-      minHeight: 40,
-      maxHeight: 40,
-      width: 40,
-    },
-    selectedNavItem: {
-      backgroundColor: theme?.colors?.secondary,
-    },
-    iconContainer: {
-      borderRadius: theme?.radius?.full,
-      padding: 10,
-    },
-    selectedIconContainer: {
-      backgroundColor: theme?.colors?.secondary,
-    },
-    navItemText: {
-      fontFamily: theme?.fonts?.fontFamily,
-      color: theme?.colors?.white,
-      fontSize: theme.fonts.sizeM,
-      fontWeight: theme.fonts.weightM,
-    },
-    logoContainer: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: 56,
-      backgroundColor: theme?.colors?.black,
-    },
-    navItemsContainer: {
-      marginTop: 10,
-      padding: theme?.spacing?.tpXs,
-    },
-    bottomContainer: {
-      position: "absolute",
-      bottom: 0,
-      left: 0,
-      right: 0,
-      borderTopWidth: 1,
-      borderTopColor: theme?.colors?.grey3,
-      padding: theme?.spacing?.tpXs,
-    },
-    mask: {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      width: "500%",
-      backgroundColor: "rgba(0,0,0,0.5)",
-    },
-  };
-});
-
-const defaultProps = {
-  expanded: false, // 统一默认收起状态
-};
-
-const Navigation: React.FC<NavigationProps> = ({
-  onLogoPress,
-  navItems,
-  systemItems,
-  logoImg,
-  expanded,
-  onItemPress,
-  defaultSelectedItem,
-  selectedIndex,
-  onMaskPress,
-  theme,
-  visible = true,
-  navigation,
-  testID,
-  ...props
-}) => {
-  const [isExpanded, setIsExpanded] = useState(
-    expanded || defaultProps.expanded
-  );
-  const [selectedItem, setSelectedItem] = useState<SelectedItem | undefined>(
-    defaultSelectedItem
-  );
-  const themeStyles = useStyles(props);
-  
-  const handleToggle = useCallback(() => {
-    setIsExpanded(prev => !prev);
-    onLogoPress?.();
-  }, [onLogoPress]);
-
-  useEffect(() => {
-    if (
-      typeof selectedIndex === "number" &&
-      navItems &&
-      navItems[selectedIndex]
-    ) {
-      setSelectedItem({
-        type: NavItemType.Nav,
-        selectedItemIndex: selectedIndex,
-      });
-    } else {
-      setSelectedItem(undefined);
-    }
-  }, [selectedIndex, navItems]);
-
-  const handleItemPress = useCallback((selectedItemIndex: number, type: NavItemType) => {
-    setSelectedItem({
-      type,
-      selectedItemIndex,
-    });
-    
-    const item = type === NavItemType.Nav
-      ? navItems?.[selectedItemIndex]
-      : systemItems?.[selectedItemIndex];
-    
-    if (item) {
-      onItemPress?.(item);
-
-      if (navigation && item.name) {
-        navigation.navigate(item.name, (item as unknown as Record<string, unknown>).params);
-      }
-    }
-  }, [navItems, systemItems, onItemPress, navigation]);
-
-  return (
-    visible && (
-      <View testID={testID} style={styles.container}>
-        <TouchableOpacity
-          onPress={Platform.OS === "web" ? handleToggle : onMaskPress}
-          style={isExpanded && themeStyles.mask}
-        >
-          <View />
-        </TouchableOpacity>
-        <View
-          style={[
-            styles.container,
-            !isExpanded ? styles.smallContainer : styles.expendedContainer,
-          ]}
-        >
-          <View style={themeStyles.menuContainer}>
-            <TouchableOpacity
-              onPress={handleToggle}
-              accessibilityRole="button"
-            >
-              <View style={themeStyles.logoContainer}>
-                <Image source={logoImg} style={{ width: 48, height: 48 }} />
-              </View>
-            </TouchableOpacity>
-            <View style={[themeStyles.navItemsContainer]}>
-              {navItems?.map((item, index) => (
-                <TouchableOpacity
-                  key={item.name}
-                  testID={item.testID}
-                  accessibilityLabel={item.testID || item.name}
-                  onPress={() => handleItemPress(index, NavItemType.Nav)}
-                  style={[
-                    themeStyles.navItem,
-                    !isExpanded && styles.smallMenusItemContainer,
-                    selectedItem?.selectedItemIndex === index &&
-                      selectedItem?.type === NavItemType.Nav &&
-                      isExpanded &&
-                      themeStyles.selectedNavItem,
-                  ]}
-                >
-                  {/*<Link to={ item.url || ''}>*/}
-                  <View
-                    style={[
-                      themeStyles.iconContainer,
-                      !isExpanded &&
-                        selectedItem?.selectedItemIndex === index &&
-                        selectedItem?.type === NavItemType.Nav &&
-                        themeStyles.selectedIconContainer,
-                    ]}
-                  >
-                    <Icon
-                      name={item.iconName}
-                      size={20}
-                      color={(theme as unknown as Record<string, Record<string, string>>)?.colors?.white}
-                    />
-                  </View>
-                  {isExpanded && (
-                    <Text
-                      style={[
-                        themeStyles.navItemText,
-                        selectedItem?.selectedItemIndex === index &&
-                          selectedItem?.type === NavItemType.Nav &&
-                          styles.selectedItemText,
-                      ]}
-                    >
-                      {item.name}
-                    </Text>
-                  )}
-                  {/*</Link>*/}
-                </TouchableOpacity>
-              ))}
-            </View>
-            <View style={themeStyles.bottomContainer}>
-              {systemItems?.map((item, index) => (
-                <TouchableOpacity
-                  key={item.name}
-                  testID={item.testID}
-                  accessibilityLabel={item.testID || item.name}
-                  onPress={() => handleItemPress(index, NavItemType.System)}
-                  style={[
-                    themeStyles.navItem,
-                    !isExpanded && styles.smallMenusItemContainer,
-                    selectedItem?.selectedItemIndex === index &&
-                      selectedItem?.type === NavItemType.System &&
-                      isExpanded &&
-                      themeStyles.selectedNavItem,
-                  ]}
-                >
-                  {/*<Link to={ item.url || ''}>*/}
-                  <View
-                    style={[
-                      themeStyles.iconContainer,
-                      selectedItem?.selectedItemIndex === index &&
-                        selectedItem?.type === NavItemType.System &&
-                        !isExpanded &&
-                        themeStyles.selectedIconContainer,
-                    ]}
-                  >
-                    <Icon
-                      name={item.iconName}
-                      size={20}
-                      color={(theme as unknown as Record<string, Record<string, string>>)?.colors?.white}
-                    />
-                  </View>
-                  {isExpanded && (
-                    <Text
-                      style={[
-                        themeStyles.navItemText,
-                        selectedItem?.selectedItemIndex === index &&
-                          selectedItem?.type === NavItemType.System &&
-                          styles.selectedItemText,
-                      ]}
-                    >
-                      {item.name}
-                    </Text>
-                  )}
-                  {/*</Link>*/}
-                </TouchableOpacity>
-              ))}
-            </View>
-          </View>
-        </View>
-      </View>
-    )
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-  },
-  smallMenusItemContainer: {
-    marginLeft: 0,
-  },
-  smallContainer: {
-    width: 56,
-  },
-  expendedContainer: {
-    width: 336,
-  },
-  selectedItemText: {
-    fontWeight: "bold",
-  },
-});
-
-export default withTheme(Navigation as React.FC<Props>);

package/components/Notification/Notification.tsx

@@ -1,291 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import {
-  Animated,
-  Easing,
-  View,
-  Text,
-  ViewProps,
-  StyleProp,
-  TextStyle,
-  Pressable,
-} from 'react-native';
-import { ScrollView } from 'react-native';
-import { makeStyles, withTheme } from '@rneui/themed';
-import TapasIcon from '../Icons/TapasIcon';
-import TapasButton from '../Button/Button';
-
-export interface NotificationItem {
-  id: number | string;
-  title: string;
-  icon?: string;
-  [key: string]: any;
-}
-
-export interface NotificationProps extends ViewProps {
-  /** 是否展开 */
-  open?: boolean;
-  /** 标题 */
-  title?: string;
-  /** 空状态文本 */
-  emptyText?: string;
-  /** 标题样式 */
-  headerTitleStyle?: StyleProp<TextStyle>;
-  /** 是否隐藏头部按钮 */
-  hideHeaderButton?: boolean;
-  /** 通知项列表 */
-  items?: NotificationItem[];
-  /** 选中的项目ID */
-  selectedItem?: number | string;
-  /** 选择项目的回调 */
-  onSelectItem?: (item: NotificationItem) => void;
-  /** 头部按钮点击回调 */
-  onHeaderButtonPress?: () => void;
-  /** 展开动画时长 */
-  animationDuration?: number;
-  /** 展开宽度 */
-  expandedWidth?: number;
-}
-
-const useStyles = makeStyles((theme) => {
-  return {
-    container: {
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      backgroundColor: theme.colors.colorSurface2,
-    },
-    mainContent: {
-      display: 'flex',
-      flexGrow: 1,
-      flexDirection: 'column',
-      overflow: 'hidden',
-      flex: 1,
-      marginRight: 8,
-      marginLeft: 8,
-      marginTop: 24,
-      marginBottom: 24,
-    },
-    header: {
-      display: 'flex',
-      flexDirection: 'row',
-      height: 40,
-      marginBottom: 10,
-      overflow: 'hidden',
-      marginLeft: 8,
-    },
-    headerTitleContainer: {
-      marginRight: 8,
-      display: 'flex',
-      flexDirection: 'row',
-      flexGrow: 1,
-      overflow: 'hidden',
-      justifyContent: 'space-between',
-    },
-    headerTitle: {
-      fontSize: 16,
-      fontWeight: '700',
-      color: theme.colors.white,
-      flex: 1,
-      lineHeight: 40,
-    },
-    headerButton: {
-      width: 40,
-      height: 40,
-      display: 'flex',
-    },
-    iconButton: {
-      alignSelf: 'center',
-    },
-    list: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'flex-start',
-      overflow: 'hidden',
-      flex: 1,
-      marginTop: 12,
-      marginBottom: 12,
-    },
-    inner: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 12,
-    },
-    emptyContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      flexGrow: 1,
-      overflow: 'hidden',
-      gap: 10,
-    },
-    emptyIcon: {
-      width: 40,
-      height: 40,
-      opacity: 0.3,
-      alignSelf: 'center',
-    },
-    emptyText: {
-      textAlign: 'center',
-      fontSize: 14,
-      fontWeight: '500',
-      color: theme.colors.colorSurface11,
-    },
-    row: {
-      display: 'flex',
-      flexDirection: 'row',
-      height: 40,
-      paddingLeft: 12,
-      paddingRight: 16,
-      borderRadius: 20,
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-      gap: 8,
-    },
-    rowText: {
-      fontSize: 14,
-      fontWeight: '600',
-      color: theme.colors.colorTextInvert1,
-    },
-    selectedRow: {
-      backgroundColor: theme.colors.secondary,
-    },
-  };
-});
-
-const TapasNotification: React.FC<NotificationProps> = ({
-  open = false,
-  headerTitleStyle,
-  items = [],
-  title = 'Notification',
-  emptyText = 'No Data',
-  hideHeaderButton = false,
-  style,
-  selectedItem,
-  onSelectItem,
-  onHeaderButtonPress,
-  animationDuration = 500,
-  expandedWidth = 288,
-  testID,
-  ...otherProps
-}) => {
-  const styles = useStyles();
-
-  // 动画
-  const expandAnim = useRef(new Animated.Value(0)).current;
-  const mainContentAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    expandAnim.setValue(open ? 0 : expandedWidth);
-    mainContentAnim.setValue(open ? 0 : expandedWidth - 16);
-    
-    Animated.parallel([
-      Animated.timing(expandAnim, {
-        toValue: open ? expandedWidth : 0,
-        duration: animationDuration,
-        easing: Easing.inOut(Easing.ease),
-        useNativeDriver: false,
-      }),
-      Animated.timing(mainContentAnim, {
-        toValue: open ? expandedWidth - 16 : 0,
-        duration: animationDuration,
-        easing: Easing.inOut(Easing.ease),
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }, [open, expandedWidth, animationDuration]);
-
-  const handleItemPress = (item: NotificationItem) => {
-    onSelectItem?.(item);
-  };
-
-  const handleHeaderButtonPress = () => {
-    onHeaderButtonPress?.();
-  };
-
-  return (
-    <Animated.View
-      {...otherProps}
-      testID={testID}
-      style={[style, styles.container, { width: expandAnim }]}
-    >
-      <View style={styles.mainContent}>
-        <View style={styles.header}>
-          <View style={styles.headerTitleContainer}>
-            <Text
-              style={[styles.headerTitle, headerTitleStyle]}
-              numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {title}
-            </Text>
-          </View>
-          {!hideHeaderButton && (
-            <View style={styles.headerButton}>
-              <TapasButton type="clear" onPress={handleHeaderButtonPress}>
-                <TapasIcon
-                  size={20}
-                  color="#FFF"
-                  style={styles.iconButton}
-                  name="more_vert"
-                />
-              </TapasButton>
-            </View>
-          )}
-        </View>
-        <Animated.View style={[styles.list, { width: mainContentAnim }]}>
-          {items.length > 0 ? (
-            <ScrollView
-              showsHorizontalScrollIndicator={false}
-            >
-              <View style={styles.inner}>
-                {items.map((item, index) => (
-                  <Pressable
-                    onPress={() => handleItemPress(item)}
-                    key={`${item.id}-notify-${index}`}
-                    style={[
-                      styles.row,
-                      selectedItem === item.id && styles.selectedRow,
-                    ]}
-                  >
-                    {item.icon && (
-                      <TapasIcon
-                        size={20}
-                        color="#FFF"
-                        name={item.icon}
-                      />
-                    )}
-                    <Text
-                      style={styles.rowText}
-                      numberOfLines={1}
-                      ellipsizeMode="tail"
-                    >
-                      {item.title}
-                    </Text>
-                  </Pressable>
-                ))}
-              </View>
-            </ScrollView>
-          ) : (
-            <View style={styles.emptyContainer}>
-              <TapasIcon
-                name="notifications"
-                size={40}
-                color="#FFF"
-                style={styles.emptyIcon}
-              />
-              <Text
-                style={styles.emptyText}
-                numberOfLines={1}
-                ellipsizeMode="tail"
-              >
-                {emptyText}
-              </Text>
-            </View>
-          )}
-        </Animated.View>
-      </View>
-    </Animated.View>
-  );
-};
-
-export default withTheme(TapasNotification);

package/components/Notification/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './Notification';
-export type { NotificationProps, NotificationItem } from './Notification';