@beppla/tapas-ui 1.4.32 → 1.4.34

package/components/Navigation/Navigation.tsx

@@ -0,0 +1,327 @@
+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[];
+}
+
+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;
+  };
+}
+
+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,
+  ...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 any).params);
+      }
+    }
+  }, [navItems, systemItems, onItemPress, navigation]);
+
+  return (
+    visible && (
+      <View 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}
+                  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 any)?.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}
+                  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 any)?.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

@@ -0,0 +1,289 @@
+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,
+  ...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}
+      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

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