@beppla/tapas-ui 1.0.46 → 1.0.48

package/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { withTheme, makeStyles, useTheme } from '@rneui/themed';
+import TapasIcon from '../Icons/TapasIcon';
+import TapasText from '../Text/Text';
+
+export interface CollapsibleProps extends PropsWithChildren {
+  title: string;
+  initialOpen?: boolean;
+  onToggle?: (isOpen: boolean) => void;
+  titleStyle?: any;
+  contentStyle?: any;
+  iconColor?: string;
+  iconSize?: number;
+  testID?: string;
+}
+
+const Collapsible: React.FC<CollapsibleProps> = ({ 
+  children, 
+  title,
+  initialOpen = false,
+  testID,
+  onToggle,
+  titleStyle,
+  contentStyle,
+  iconColor,
+  iconSize = 18,
+}) => {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const theme = useTheme();
+  const styles = useStyles();
+
+  const handleToggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    onToggle?.(newState);
+  };
+
+  return (
+    <View style={styles.container} testID={testID}>
+      <TouchableOpacity
+        style={styles.heading}
+        onPress={handleToggle}
+        activeOpacity={0.8}
+      >
+        <TapasIcon
+          name={isOpen ? 'expand_less' : 'expand_more'}
+          size={iconSize}
+          color={iconColor || theme.theme.colors.grey1}
+        />
+        <TapasText style={[styles.title, titleStyle]}>
+          {title}
+        </TapasText>
+      </TouchableOpacity>
+      {isOpen && (
+        <View style={[styles.content, contentStyle]}>
+          {children}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background,
+  },
+  heading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 4,
+  },
+  title: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.colors.primary,
+  },
+  content: {
+    marginTop: 6,
+    marginLeft: 24,
+    paddingBottom: 12,
+  },
+}));
+
+export default withTheme(Collapsible);

package/components/DashboardCard/DashboardCard.tsx

@@ -0,0 +1,222 @@
+import React, {useState} from 'react';
+import TapasIcon from  '../Icons/TapasIcon';
+import {View, Text, TouchableOpacity, StyleProp, ViewStyle} from 'react-native';
+import {makeStyles} from "@rneui/themed";
+import Hoverable from "../Hoverable/Hoverable";
+export interface Props {
+    cardContainerStyle?: StyleProp<ViewStyle>;
+    cardStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    headerStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<ViewStyle>;
+    disabled?: boolean;
+    testID?: string;
+    header?: {
+        icon?: string;
+        title?: string;
+        description?: string[];
+        action?: React.ReactNode;
+        onPressAction?: (value: any) => void;
+        actionStyle?: StyleProp<ViewStyle>;
+    }
+    content?: string;
+    footer?: {
+        title?: string;
+        description?: string;
+        onPress?: () => void;
+        icon?: string;
+    };
+    onCardPress?: () => void;
+}
+const useStyles = makeStyles((theme, ...props) => {
+    const {disabled} = props[0] as any;
+    return {
+        cardWrap: {
+            display: "flex",
+            backgroundColor: disabled ? theme.colors.grey5 : theme.colors.white,
+            borderRadius: theme.radius.rounded,
+            borderColor: theme.colors.grey5,
+            flex: 1,
+        },
+        cardWrapHover: {
+            shadowColor: theme.colors.grey5,
+            shadowOffset: { width: 0, height: 8 }, // 第一部分的 offset
+            shadowRadius: 24,
+        },
+        headerWrap: {
+            display: "flex",
+            flexDirection: "row",
+            paddingLeft: 16,
+            paddingRight: 10,
+            paddingTop: 10,
+            paddingBottom:8,
+            justifyContent: "space-between",
+        },
+        titleWrap: {
+            display: "flex",
+            flexDirection: "column",
+            maxWidth: "100%",
+        },
+        title: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            flexGrow: 1,
+        },
+        titleText: {
+            marginLeft: 8,
+            fontFamily: theme.fonts.fontFamily,
+            fontSize: theme.fonts.sizeL,
+            fontWeight: theme.fonts.weightL,
+            color: disabled ? theme.colors.grey2 : theme.colors.primary,
+            overflow: "hidden",
+            maxWidth: '100%',
+        },
+        icon: {},
+        descriptionWrap: {
+            marginTop: 4,
+            display: "flex",
+            flexDirection: "row",
+        },
+        description: {
+            fontFamily: theme.fonts.fontFamily,
+            fontSize: theme.fonts.sizeS,
+            fontWeight: theme.fonts.weightR,
+            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
+            backgroundColor: theme.colors.grey5,
+            padding: 4,
+            marginRight: 4,
+        },
+        actionStyle: {
+            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
+        },
+        footerWrap: {
+            display: "flex",
+            flexDirection: "row",
+            padding: 16,
+            justifyContent: "space-between"
+        },
+        footerTitleWrap: {
+
+        },
+        footerDescriptionText:{
+            fontFamily: theme.fonts.fontFamily,
+            fontSize: theme.fonts.sizeL,
+            fontWeight: theme.fonts.weightR,
+            color: disabled ? theme.colors.grey2 : theme.colors.primary,
+        },
+        footerTitleText: {
+            fontFamily: theme.fonts.fontFamily,
+            fontSize: theme.fonts.sizeXs,
+            fontWeight: theme.fonts.weightL,
+            color: disabled ? theme.colors.grey2 : theme.colors.secondary,
+        },
+        footerIcon: {
+            borderRadius: 14,
+            borderWidth: 1,
+            borderColor: disabled ? theme.colors.grey2 : theme.colors.grey3,
+            height: 28,
+            width: 28,
+            transform: "rotate(180deg)",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        footerIconStyle: {
+            color: disabled ? theme.colors.grey2 : theme.colors.primary,
+        },
+        titleIcon: {
+            color: disabled ? theme.colors.grey2 : theme.colors.primary,
+        },
+        contentTextStyle: {
+            color: disabled ? theme.colors.grey2 : theme.colors.primary,
+        },
+        disabled: {
+            backgroundColor: theme.colors.grey5,
+        }
+    }
+});
+const DashboardCard: React.FC<Props> = ({header, content, footer, onCardPress, testID, ...props}) => {
+    const styles = useStyles(props);
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+    return <Hoverable
+        onHoverIn={handleMouseEnter}
+        onHoverOut={handleMouseLeave}
+        style={props.cardContainerStyle}
+        testID={testID}
+    >
+        <TouchableOpacity 
+            testID={testID}
+            onPress={() => {
+                if (props?.disabled) return;
+                onCardPress && onCardPress();
+            }}
+        >
+            <View
+                style={[styles.cardWrap,  isHovered && !props?.disabled && styles.cardWrapHover ,props.cardStyle]}
+            >
+                <View style={[styles.headerWrap, props.headerStyle]}>
+                    <View style={[styles.titleWrap, props.titleStyle]}>
+                        <View style={styles.title}>
+                            {
+                                header?.icon && <TapasIcon name={header?.icon} size={24} style={styles.titleIcon} />
+                            }
+                            {
+                                header?.title &&  <Text style={styles.titleText} numberOfLines={1} ellipsizeMode="tail">{header?.title}</Text>
+                            }
+                        </View>
+                        {
+                            header?.description && header?.description?.length > 0 && <View style={styles.descriptionWrap}>
+                                {
+                                    header?.description?.map((desc, index) => {
+                                        return desc && <Text style={styles.description}  key={index}>{desc}</Text>
+                                    })
+                                }
+                            </View>
+                        }
+                    </View>
+                    {
+                        header?.action && <TouchableOpacity style={header?.actionStyle} onPress={() => {header?.onPressAction && header?.onPressAction(header)}}>
+                            {
+                                header?.action
+                            }
+                        </TouchableOpacity>
+                    }
+                </View>
+                <View style={props.contentStyle}>{
+                    content && typeof content === 'string' ? <Text style={styles.contentTextStyle}>{content}</Text> : content
+                }</View>
+               <View style={styles.footerWrap}>
+                   <View style={styles.footerTitleWrap}>
+                       {
+                           footer?.title && <View>
+                               <Text style={styles.footerTitleText}>{footer?.title}</Text>
+                           </View>
+                       }
+                       {
+                           footer?.description && <View>
+                               <Text style={styles.footerDescriptionText}>{footer?.description}</Text>
+                           </View>
+                       }
+                   </View>
+                   {
+                       footer?.icon && <TouchableOpacity style={styles.footerIcon} onPress={() => {
+                           if(props?.disabled) return;
+                         footer?.onPress && footer?.onPress();
+                     }}>
+                           <TapasIcon name={footer?.icon || ''} size={20} style={styles.footerIconStyle} />
+                       </TouchableOpacity>
+                   }
+               </View>
+            </View>
+        </TouchableOpacity>
+    </Hoverable>
+};
+
+export  default  DashboardCard;

package/components/DataCell/DataCell.tsx

@@ -0,0 +1,374 @@
+import React, { useCallback, useMemo } from "react";
+import { View, Text, Pressable, ViewProps, TextStyle, StyleProp } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+
+export type DataType = 
+  | "text" 
+  | "number" 
+  | "currency" 
+  | "date" 
+  | "status" 
+  | "boolean" 
+  | "custom";
+
+export type CellAlignment = "left" | "center" | "right";
+
+export interface StatusConfig {
+  color: string;
+  backgroundColor?: string;
+  borderColor?: string;
+}
+
+export interface ActionItem {
+  id: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface TapasDataCellProps extends ViewProps {
+  /** 显示的值 */
+  value?: any;
+  /** 数据类型 */
+  dataType?: DataType;
+  /** 文本对齐方式 */
+  alignment?: CellAlignment;
+  /** 列索引 */
+  columnIndex?: number;
+  /** 行索引 */
+  rowIndex?: number;
+  /** 字段名称 */
+  fieldName?: string;
+  /** 是否可点击 */
+  clickable?: boolean;
+  /** 是否显示省略号 */
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+  /** 最大行数 */
+  numberOfLines?: number;
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+  /** 容器内边距 */
+  padding?: {
+    horizontal?: number;
+    vertical?: number;
+  };
+  /** 状态配置映射 */
+  statusConfig?: Record<string, StatusConfig>;
+  /** 操作项列表 */
+  actions?: ActionItem[];
+  /** 是否显示操作按钮 */
+  showActions?: boolean;
+  /** 操作按钮图标 */
+  actionIcon?: string;
+  /** 自定义格式化函数 */
+  formatter?: (value: any, dataType: DataType) => string;
+  /** 货币符号 */
+  currencySymbol?: string;
+  /** 货币精度 */
+  currencyPrecision?: number;
+  /** 日期格式 */
+  dateFormat?: string;
+  /** 布尔值真值文本 */
+  booleanTrueText?: string;
+  /** 布尔值假值文本 */
+  booleanFalseText?: string;
+  /** 空值显示文本 */
+  emptyText?: string;
+  /** 单元格点击回调 */
+  onCellPress?: (value: any, rowIndex?: number, columnIndex?: number, fieldName?: string) => void;
+  /** 操作项点击回调 */
+  onActionPress?: (action: ActionItem, value: any, rowIndex?: number, columnIndex?: number) => void;
+  /** 长按回调 */
+  onLongPress?: (value: any, rowIndex?: number, columnIndex?: number, fieldName?: string) => void;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 最小高度 */
+  minHeight?: number;
+  /** 是否为空白单元格 */
+  isBlank?: boolean;
+}
+
+const TapasDataCell: React.FC<TapasDataCellProps> = ({
+  value,
+  dataType = "text",
+  alignment = "left",
+  columnIndex,
+  rowIndex,
+  fieldName,
+  clickable = false,
+  ellipsizeMode = "tail",
+  numberOfLines = 1,
+  textStyle,
+  padding = { horizontal: 16, vertical: 8 },
+  statusConfig = {},
+  actions = [],
+  showActions = false,
+  actionIcon = "more_vert",
+  formatter,
+  currencySymbol = "$",
+  currencyPrecision = 2,
+  dateFormat = "YYYY-MM-DD",
+  booleanTrueText = "Yes",
+  booleanFalseText = "No",
+  emptyText = "-",
+  onCellPress,
+  onActionPress,
+  onLongPress,
+  disabled = false,
+  minHeight = 40,
+  isBlank = false,
+  style,
+  ...otherProps
+}) => {
+  const styles = useStyles({ 
+    alignment, 
+    padding, 
+    minHeight, 
+    disabled,
+    clickable: clickable || !!onCellPress
+  });
+
+  // 格式化显示值
+  const formattedValue = useMemo(() => {
+    if (isBlank || value === null || value === undefined) {
+      return emptyText;
+    }
+
+    // 使用自定义格式化函数
+    if (formatter) {
+      return formatter(value, dataType);
+    }
+
+    // 内置格式化逻辑
+    switch (dataType) {
+      case "number":
+        return typeof value === "number" ? value.toLocaleString() : String(value);
+      
+      case "currency":
+        const numValue = typeof value === "number" ? value : parseFloat(value);
+        if (isNaN(numValue)) return emptyText;
+        return `${currencySymbol}${numValue.toFixed(currencyPrecision)}`;
+      
+      case "date":
+        if (!value) return emptyText;
+        const date = new Date(value);
+        if (isNaN(date.getTime())) return emptyText;
+        
+        // 简单的日期格式化
+        if (dateFormat === "YYYY-MM-DD") {
+          return date.toISOString().split('T')[0];
+        } else if (dateFormat === "MM/DD/YYYY") {
+          return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()}`;
+        } else {
+          return date.toLocaleDateString();
+        }
+      
+      case "boolean":
+        return value ? booleanTrueText : booleanFalseText;
+      
+      case "status":
+        return String(value);
+      
+      case "custom":
+        return String(value);
+      
+      default:
+        return String(value || emptyText);
+    }
+  }, [value, dataType, formatter, currencySymbol, currencyPrecision, dateFormat, booleanTrueText, booleanFalseText, emptyText, isBlank]);
+
+  // 获取状态样式
+  const getStatusStyle = useCallback(() => {
+    if (dataType !== "status" || !value || !statusConfig[value]) {
+      return {};
+    }
+
+    const config = statusConfig[value];
+    return {
+      color: config.color,
+      backgroundColor: config.backgroundColor,
+      borderColor: config.borderColor,
+      borderWidth: config.borderColor ? 1 : 0,
+      borderRadius: 4,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      overflow: "hidden" as const,
+    };
+  }, [dataType, value, statusConfig]);
+
+  // 处理单元格点击
+  const handleCellPress = useCallback(() => {
+    if (disabled || isBlank) return;
+    onCellPress?.(value, rowIndex, columnIndex, fieldName);
+  }, [disabled, isBlank, onCellPress, value, rowIndex, columnIndex, fieldName]);
+
+  // 处理长按
+  const handleLongPress = useCallback(() => {
+    if (disabled || isBlank) return;
+    onLongPress?.(value, rowIndex, columnIndex, fieldName);
+  }, [disabled, isBlank, onLongPress, value, rowIndex, columnIndex, fieldName]);
+
+  // 处理操作按钮点击
+  const handleActionPress = useCallback((action: ActionItem) => {
+    if (disabled || action.disabled) return;
+    onActionPress?.(action, value, rowIndex, columnIndex);
+  }, [disabled, onActionPress, value, rowIndex, columnIndex]);
+
+  // 渲染操作按钮
+  const renderActions = () => {
+    if (!showActions || actions.length === 0 || isBlank) {
+      return null;
+    }
+
+    // 如果只有一个操作，直接显示图标按钮
+    if (actions.length === 1) {
+      const action = actions[0];
+      if (!action) return null;
+      
+      return (
+        <Pressable
+          style={styles.actionButton}
+          onPress={() => handleActionPress(action)}
+          disabled={disabled || action.disabled}
+        >
+          <TapasIcon
+            name={action.icon || actionIcon}
+            size={16}
+            color={styles.actionIcon.color}
+          />
+        </Pressable>
+      );
+    }
+
+    // 多个操作显示更多按钮（这里简化处理，实际可能需要下拉菜单）
+    return (
+      <Pressable
+        style={styles.actionButton}
+        onPress={() => {
+          // 这里可以展开下拉菜单，暂时只触发第一个操作
+          if (actions[0]) {
+            handleActionPress(actions[0]);
+          }
+        }}
+        disabled={disabled}
+      >
+        <TapasIcon
+          name={actionIcon}
+          size={16}
+          color={styles.actionIcon.color}
+        />
+      </Pressable>
+    );
+  };
+
+  // 渲染内容
+  const renderContent = () => {
+    if (isBlank) {
+      return null;
+    }
+
+    const statusStyle = getStatusStyle();
+    const hasStatusStyle = Object.keys(statusStyle).length > 0;
+
+    return (
+      <View style={styles.content}>
+        <Text
+          style={[
+            styles.text,
+            hasStatusStyle && statusStyle,
+            textStyle,
+          ]}
+          numberOfLines={numberOfLines}
+          ellipsizeMode={ellipsizeMode}
+        >
+          {formattedValue}
+        </Text>
+        {renderActions()}
+      </View>
+    );
+  };
+
+  // 如果可点击，使用 Pressable
+  if (clickable || onCellPress || onLongPress) {
+    return (
+      <Pressable
+        {...otherProps}
+        style={[styles.container, style]}
+        onPress={handleCellPress}
+        onLongPress={handleLongPress}
+        disabled={disabled}
+      >
+        {renderContent()}
+      </Pressable>
+    );
+  }
+
+  // 否则使用普通 View
+  return (
+    <View {...otherProps} style={[styles.container, style]}>
+      {renderContent()}
+    </View>
+  );
+};
+
+const useStyles = makeStyles((theme, props?: { 
+  alignment?: CellAlignment;
+  padding?: { horizontal?: number; vertical?: number };
+  minHeight?: number;
+  disabled?: boolean;
+  clickable?: boolean;
+}) => {
+  const alignment = props?.alignment || "left";
+  const paddingHorizontal = props?.padding?.horizontal || 16;
+  const paddingVertical = props?.padding?.vertical || 8;
+  const minHeight = props?.minHeight || 40;
+  const disabled = props?.disabled || false;
+  const clickable = props?.clickable || false;
+
+  const justifyContent = 
+    alignment === "left" ? "flex-start" : 
+    alignment === "right" ? "flex-end" : "center";
+
+  return {
+    container: {
+      minHeight,
+      paddingHorizontal,
+      paddingVertical,
+      backgroundColor: disabled ? theme?.colors?.grey5 || "#f8f9fa" : "transparent",
+      opacity: disabled ? 0.6 : 1,
+      borderBottomWidth: 1,
+      borderBottomColor: theme?.colors?.grey4 || "#e0e0e0",
+    },
+    content: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+    },
+    text: {
+      flex: 1,
+      fontSize: theme?.fonts?.sizeM || 14,
+      fontWeight: "400",
+      color: theme?.colors?.colorTextPrimary || theme?.colors?.grey1 || "#333",
+      textAlign: alignment,
+      alignSelf: justifyContent === "flex-start" ? "flex-start" : 
+                 justifyContent === "flex-end" ? "flex-end" : "center",
+    },
+    actionButton: {
+      marginLeft: 8,
+      padding: 4,
+      borderRadius: 4,
+      backgroundColor: clickable ? "transparent" : theme?.colors?.grey5 || "#f8f9fa",
+    },
+    actionIcon: {
+      color: theme?.colors?.grey2 || "#999",
+    },
+  };
+});
+
+export default withTheme(TapasDataCell);
+
+// Export aliases for compatibility
+export const DataCell = withTheme(TapasDataCell);
+export { TapasDataCell };

package/components/DataCell/index.tsx

@@ -0,0 +1,9 @@
+export { default } from './DataCell';
+export type { 
+  TapasDataCellProps, 
+  DataType, 
+  CellAlignment, 
+  StatusConfig, 
+  ActionItem 
+} from './DataCell';
+export { DataCell, TapasDataCell } from './DataCell';