@beppla/tapas-ui 1.0.64 → 1.0.66

package/components/AnimatedNavItem/AnimatedNavItem.tsx

@@ -1,246 +0,0 @@
-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

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

package/components/Button/Button.tsx

@@ -1,86 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Button as RneButton, ButtonProps, makeStyles} from '@rneui/themed';
-import {Platform} from 'react-native';
-import Hoverable from '../Hoverable/Hoverable';
-export interface  Props extends  ButtonProps {
-    hoverStyle?: any;
-    buttonStyle?: any;
-    titleStyle?: any;
-    selectedTitleStyle?: any;
-    width?: number;
-}
-
-const useStyles = makeStyles((theme) => ({
-    buttonHovered: {
-        backgroundColor: theme?.colors?.colorSurface2,
-    },
-    outlineButtonHovered: {
-        backgroundColor: theme?.colors?.grey4,
-        borderColor: theme?.colors?.grey4,
-    },
-    button: {
-        backgroundColor: theme?.colors?.primary,
-    },
-    baseButton: {
-        fontFamily: theme?.fonts?.fontFamily,
-        fontSize: theme?.fonts.sizeM,
-        fontWeight: theme?.fonts.weightM,
-    },
-    outlineButton: {
-        borderColor: theme?.colors?.grey4,
-        backgroundColor: theme?.colors?.white || '#ffffff',
-    }
-}));
-export const Button: React.FC<Props> = ({hoverStyle, buttonStyle, width, ...props}) => {
-
-    const [isHovered, setIsHovered] = useState(false);
-    const styles = useStyles(props);
-    
-    const handleMouseEnter = useCallback(() => {
-        setIsHovered(true);
-    }, []);
-
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-
-    const { primaryStyle, hoveredStyle } = useMemo(() => ({
-        primaryStyle: props.type === 'solid' ? styles.button : props.type === 'outline' ? styles.outlineButton : {},
-        hoveredStyle: props.type === 'solid' ? styles.buttonHovered : props.type === 'outline' ? styles.outlineButtonHovered : {}
-    }), [props.type, styles]);
-
-    const newButtonStyle = useMemo(() => 
-        (isHovered && props.type !== 'clear') 
-            ? {...hoveredStyle, ...hoverStyle} 
-            : { ...primaryStyle, ...buttonStyle}
-    , [isHovered, props.type, hoveredStyle, hoverStyle, primaryStyle, buttonStyle]);
-
-    const containerStyle = useMemo(() => ({ width }), [width]);
-    const titleStyleMemo = useMemo(() => [styles.baseButton, props.titleStyle], [styles.baseButton, props.titleStyle]);
-
-    return Platform.OS === 'web' && props.type !== 'clear' ? (
-        <Hoverable
-            onHoverIn={handleMouseEnter}
-            onHoverOut={handleMouseLeave}
-        >
-            {(isHovered: boolean) => (
-                <RneButton 
-                    containerStyle={containerStyle} 
-                    buttonStyle={isHovered ? [newButtonStyle, hoverStyle].filter(Boolean) : newButtonStyle} 
-                    titleStyle={isHovered ? [titleStyleMemo, props.selectedTitleStyle] : titleStyleMemo} 
-                    {...props} 
-                />
-            )}
-        </Hoverable>
-        ) : (
-            <RneButton 
-                containerStyle={containerStyle} 
-                buttonStyle={newButtonStyle} 
-                titleStyle={titleStyleMemo} 
-                {...props}
-            />
-        );
-};
-
-
-export default Button;

package/components/Button/ButtonGroup.tsx

@@ -1,148 +0,0 @@
-import React, {useState} from 'react';
-import {makeStyles} from '@rneui/themed';
-import {View, Text, StyleProp, ViewStyle, TouchableOpacity} from 'react-native';
-import Hoverable from '../Hoverable/Hoverable';
-import Icon from '../Icons/TapasIcon';
-
-type buttonType = {
-    icon?: string;
-    title?: string;
-    disabled?: boolean;
-    onPress?: (index: number) => void;
-}
-
-export interface  Props {
-    buttons: buttonType[],
-    hoveredStyle?: StyleProp<ViewStyle>;
-    selectedStyle?: StyleProp<ViewStyle>;
-}
-
-const useStyles = makeStyles((theme) => ({
-    buttonContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-    },
-    buttonWrap: {
-        display: 'flex',
-        flexDirection: 'row',
-        height: 56,
-        paddingVertical: 8,
-        backgroundColor: theme.colors.grey5,
-        justifyContent: 'center',
-        alignItems: 'center',
-        cursor: 'pointer',
-    },
-    title: {
-        fontFamily: theme.fonts.fontFamily,
-        fontSize: theme.fonts.sizeM,
-        fontWeight: theme.fonts.weightM,
-        color: theme.colors.colorTextPrimary,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        minWidth: 40,
-        marginLeft: 4,
-        marginRight: 12,
-    },
-    first: {
-        borderTopLeftRadius: theme.radius.full,
-        borderBottomLeftRadius: theme.radius.full,
-        paddingLeft: 8,
-        paddingRight: 12,
-    },
-    last: {
-        borderTopRightRadius: theme.radius.full,
-        borderBottomRightRadius: theme.radius.full,
-        borderLeftWidth: 1,
-        borderLeftColor: theme.colors.grey3,
-        paddingLeft: 12,
-        paddingRight: 8,
-    },
-    middle: {
-        borderLeftWidth: 1,
-        borderLeftColor: theme.colors.grey3,
-        paddingHorizontal: 12,
-    },
-    buttonHovered: {
-        backgroundColor: theme?.colors?.grey3,
-    },
-    selectedStyle: {
-        backgroundColor: theme?.colors?.grey3,
-    },
-    disabledStyle: {
-        backgroundColor: theme?.colors?.grey3,
-    },
-    baseButton: {
-        fontFamily: theme?.fonts?.fontFamily,
-        fontSize: theme?.fonts.sizeM,
-        fontWeight: theme?.fonts.weightM,
-        minWidth: 80,
-    },
-    icon: {
-        marginLeft: 8,
-    },
-    disabledIcon: {
-        marginLeft: 8,
-        color: theme.colors.disabled,
-    },
-    disabledTitle: {
-        color: theme.colors.disabled,
-    }
-}));
-const ButtonGroup: React.FC<Props > = ({buttons, hoveredStyle = {}, selectedStyle = {}, ...props}) => {
-
-    const [isHovered, setIsHovered] = useState(false);
-    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-    const [selected, setSelected] = useState<number | null>(null);
-
-    const styles = useStyles(props);
-    const handleMouseEnter = (index:number) => {
-        setIsHovered(true);
-        setHoveredIndex(index);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-        setHoveredIndex(null);
-    };
-
-    const handlePress = (index: number, button: buttonType) => {
-        setSelected(index);
-        button.onPress && button.onPress(index);
-    }
-
-    const getButtonStyle = (index: number) => {
-        const base = [index == 0 && styles.first, index === buttons.length-1 && styles.last, index !== 0 && index !== buttons.length-1 && styles.middle];
-        const style = (isHovered && hoveredIndex === index) ? [...base, styles.buttonHovered, hoveredStyle] : base;
-        return selected === index ? [...style, styles.selectedStyle, selectedStyle] : style;
-    }
-
-    return <View style={styles.buttonContainer}>
-        {
-            buttons.map((button, index) => {
-                return !button.disabled ? (
-                  <Hoverable
-                    onHoverIn={() => handleMouseEnter(index)}
-                    onHoverOut={handleMouseLeave}
-                  >
-                      <TouchableOpacity onPress={() => {
-                          handlePress(index, button)
-                      }}>
-                          <View style={[styles.buttonWrap, ...getButtonStyle(index)]}>
-                              <Icon size={20} name={button.icon || ''} style={styles.icon} />
-                              <Text style={styles.title}>{button.title}</Text>
-                          </View>
-                      </TouchableOpacity>
-                  </Hoverable>
-                ) : (
-                  <View style={[styles.buttonWrap, index == 0 && styles.first, index === buttons.length-1 && styles.last, index !== 0 && index !== buttons.length-1 && styles.middle, styles.disabledStyle ]}>
-                      <Icon size={20} name={button.icon || ''} style={styles.disabledIcon} />
-                      <Text style={[styles.title, styles.disabledTitle]}>{button.title}</Text>
-                  </View>
-                )
-            })
-        }
-    </View>
-};
-
-
-export default ButtonGroup;

package/components/Button/react-native-hoverable.d.ts

@@ -1,14 +0,0 @@
-declare module 'react-native-hoverable' {
-    import { ComponentClass, ReactNode } from 'react';
-    import { ViewProps } from 'react-native';
-
-    interface HoverableProps extends ViewProps {
-        children: ReactNode;
-        onHoverIn?: () => void;
-        onHoverOut?: () => void;
-    }
-
-    const Hoverable: ComponentClass<HoverableProps>;
-
-    export default Hoverable;
-}