@beppla/tapas-ui 1.5.14 → 1.5.15

package/components/Alert/Alert.tsx

@@ -0,0 +1,83 @@
+import React, {Fragment} from 'react';
+import {View, StyleProp, ViewStyle, TouchableOpacity} from 'react-native';
+import {makeStyles, withTheme, Text as RNText} from '@rneui/themed';
+import Icon from '../Icons/TapasIcon';
+
+export interface AlertProps {
+  type: 'success' | 'info' | 'warning' | 'error';
+  closable?: boolean;
+  /** Content of Alert */
+  message: React.ReactNode;
+  icon?: string;
+  onClose?: Function;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = makeStyles((theme: any) => {
+  // const {type} = props[0] as AlertProps;
+  const color = theme.colors.colorTextBrand,
+    bgColor = '#EBDFB5';
+  return {
+    flx: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    flxStart: {
+      justifyContent: 'flex-start'
+    },
+    alertWrap: {
+      width: '100%',
+      paddingHorizontal: 24,
+      paddingVertical: 4,
+      backgroundColor: bgColor
+    },
+    textItem: {
+      color: color
+    },
+    statusIcon: {
+      marginRight: 4,
+      color: color
+    },
+    closeIcon: {
+      marginLeft: 4,
+      color: color
+    }
+  };
+});
+const Alert: React.FC<AlertProps> = ({
+  // @ts-expect-error theme injected by withTheme HOC
+  theme,
+  ...props
+}) => {
+  const styles = useStyles(props);
+  const {message, closable, icon} = props;
+
+  return (
+    <View style={[styles.flx, styles.alertWrap, props.style]} testID="alert">
+      <View style={[styles.flx, styles.flxStart]}>
+        <Icon name={icon ?? 'error'} size={20} style={styles.statusIcon} />
+        <RNText style={[styles.textItem]} numberOfLines={1}>
+          {message}
+        </RNText>
+      </View>
+      {closable && (
+        <Fragment>
+          {
+            <TouchableOpacity
+              onPress={(e) => {
+                e.stopPropagation();
+                props.onClose && props.onClose();
+              }}
+            >
+              <Icon name="close" size={20} style={styles.closeIcon} />
+            </TouchableOpacity>
+          }
+        </Fragment>
+      )}
+    </View>
+  );
+};
+
+export default withTheme(Alert);

package/components/AnimatedNavItem/AnimatedNavItem.tsx

@@ -0,0 +1,246 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import {
+  Text,
+  Animated,
+  Pressable,
+  ViewProps,
+  TextStyle,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+
+export interface TapasAnimatedNavItemProps extends Omit<ViewProps, 'id'> {
+  /** 唯一标识符 */
+  id?: number | string;
+  /** 图标名称 */
+  icon?: string;
+  /** 显示文本 */
+  text?: string;
+  /** 最小宽度 */
+  minWidth?: number;
+  /** 最大宽度（自动计算或手动指定） */
+  maxWidth?: number;
+  /** 是否展开状态 */
+  expanded?: boolean;
+  /** 是否被选中 */
+  selected?: boolean;
+  /** 图标大小 */
+  iconSize?: number;
+  /** 图标颜色（未展开时） */
+  iconColor?: string;
+  /** 图标颜色（展开时） */
+  expandedIconColor?: string;
+  /** 文本颜色 */
+  textColor?: string;
+  /** 背景颜色（未展开时） */
+  backgroundColor?: string;
+  /** 背景颜色（展开时） */
+  expandedBackgroundColor?: string;
+  /** 动画持续时间 */
+  animationDuration?: number;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 容器样式 */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** 点击回调 */
+  onPress?: (id?: number | string) => void;
+  /** 长按回调 */
+  onLongPress?: (id?: number | string) => void;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 高度 */
+  height?: number;
+  /** 边距配置 */
+  padding?: {
+    horizontal?: number;
+    vertical?: number;
+  };
+}
+
+const TapasAnimatedNavItem: React.FC<TapasAnimatedNavItemProps> = ({
+  id,
+  icon,
+  text,
+  minWidth = 40,
+  maxWidth,
+  expanded = false,
+  selected = false,
+  iconSize = 20,
+  iconColor,
+  expandedIconColor,
+  textColor,
+  backgroundColor,
+  expandedBackgroundColor,
+  animationDuration = 200,
+  textStyle,
+  containerStyle,
+  onPress,
+  onLongPress,
+  disabled = false,
+  height = 40,
+  padding = { horizontal: 12, vertical: 0 },
+  style,
+  ...otherProps
+}) => {
+  const styles = useStyles({ height, padding });
+  
+  // 自动计算最大宽度（如果未指定）
+  const [calculatedMaxWidth, setCalculatedMaxWidth] = useState(maxWidth || minWidth);
+  const widthAnim = useRef(new Animated.Value(expanded ? calculatedMaxWidth : minWidth)).current;
+  
+  // 计算文本宽度
+  useEffect(() => {
+    if (!maxWidth && text) {
+      // 简单的文本宽度估算：字符数 * 平均字符宽度 + 图标宽度 + 内边距
+      const estimatedTextWidth = text.length * 10;
+      const iconWidth = icon ? iconSize + 8 : 0; // 图标宽度 + 间距
+      const paddingWidth = (padding.horizontal || 12) * 2;
+      const totalWidth = estimatedTextWidth + iconWidth + paddingWidth;
+      setCalculatedMaxWidth(Math.max(totalWidth, minWidth));
+    }
+  }, [text, maxWidth, icon, iconSize, padding.horizontal, minWidth]);
+
+  // 动画效果
+  useEffect(() => {
+    const targetWidth = expanded ? calculatedMaxWidth : minWidth;
+    
+    Animated.timing(widthAnim, {
+      toValue: targetWidth,
+      duration: animationDuration,
+      useNativeDriver: false,
+    }).start();
+  }, [expanded, calculatedMaxWidth, minWidth, animationDuration]);
+
+  // 处理点击事件
+  const handlePress = useCallback(() => {
+    if (!disabled && onPress) {
+      onPress(id);
+    }
+  }, [disabled, onPress, id]);
+
+  // 处理长按事件
+  const handleLongPress = useCallback(() => {
+    if (!disabled && onLongPress) {
+      onLongPress(id);
+    }
+  }, [disabled, onLongPress, id]);
+
+  // 获取当前状态的颜色
+  const getCurrentIconColor = () => {
+    if (expanded) {
+      return expandedIconColor || styles.expandedIcon.color;
+    }
+    return iconColor || styles.defaultIcon.color;
+  };
+
+  const getCurrentTextColor = () => {
+    return textColor || styles.text.color;
+  };
+
+  const getCurrentBackgroundColor = () => {
+    if (expanded || selected) {
+      return expandedBackgroundColor || styles.expandedContainer.backgroundColor;
+    }
+    return backgroundColor || 'transparent';
+  };
+
+  return (
+    <Pressable
+      {...otherProps}
+      style={[
+        styles.container,
+        containerStyle,
+        style,
+        {
+          backgroundColor: getCurrentBackgroundColor(),
+          opacity: disabled ? 0.5 : 1,
+        },
+      ]}
+      onPress={handlePress}
+      onLongPress={handleLongPress}
+      disabled={disabled}
+    >
+      <Animated.View
+        style={[
+          styles.animatedContainer,
+          { width: widthAnim },
+        ]}
+      >
+        {icon && (
+          <TapasIcon
+            name={icon}
+            size={iconSize}
+            color={getCurrentIconColor()}
+          />
+        )}
+        {expanded && text && (
+          <Text
+            style={[
+              styles.text,
+              { color: getCurrentTextColor() },
+              textStyle,
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {text}
+          </Text>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const useStyles = makeStyles((theme, props?: { height?: number; padding?: { horizontal?: number; vertical?: number } }) => {
+  const height = props?.height || 40;
+  const paddingHorizontal = props?.padding?.horizontal || 12;
+  const paddingVertical = props?.padding?.vertical || 0;
+
+  return {
+    container: {
+      minWidth: 40,
+      width: "auto",
+      display: "flex",
+      flexDirection: "row",
+      height,
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: height / 2,
+      overflow: "hidden",
+    },
+    animatedContainer: {
+      height,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingHorizontal,
+      paddingVertical,
+      gap: 8,
+    },
+    text: {
+      fontSize: 14,
+      fontWeight: "600",
+      alignSelf: "center",
+      color: theme?.colors?.white || "#FFFFFF",
+      flexShrink: 1,
+    },
+    defaultIcon: {
+      color: theme?.colors?.primary || "#007AFF",
+    },
+    expandedIcon: {
+      color: theme?.colors?.white || "#FFFFFF",
+    },
+    expandedContainer: {
+      backgroundColor: theme?.colors?.primary || "#007AFF",
+    },
+  };
+});
+
+export default withTheme(TapasAnimatedNavItem);
+
+// Export aliases for compatibility
+export const AnimatedNavItem = withTheme(TapasAnimatedNavItem);
+export { TapasAnimatedNavItem };

package/components/AnimatedNavItem/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './AnimatedNavItem';
+export type { TapasAnimatedNavItemProps } from './AnimatedNavItem';
+export { AnimatedNavItem, TapasAnimatedNavItem } from './AnimatedNavItem';