@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/DataCell/DataCell.tsx

@@ -0,0 +1,658 @@
+import React, { useCallback, useMemo, useState, useEffect } from "react";
+import { View, Text, Pressable, ViewProps, TextStyle, StyleProp } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+// import { TapasDropdown } from "../Dropdown/Dropdown";
+
+// 全局下拉菜单状态管理 — Map-based registry with proper cleanup
+let nextDropdownId = 0;
+const dropdownRegistry = new Map<number, () => void>();
+
+// Track active dropdown position for z-index logic
+const activeDropdown: {
+  column: number | null;
+  row: number | null;
+  onStateChange?: (columnIndex: number | null, rowIndex: number | null) => void;
+} = {
+  column: null,
+  row: null,
+  onStateChange: undefined,
+};
+
+function registerDropdown(columnIndex: number, rowIndex: number, closeFn: () => void): number {
+  const id = nextDropdownId++;
+  dropdownRegistry.set(id, closeFn);
+  activeDropdown.column = columnIndex;
+  activeDropdown.row = rowIndex;
+  activeDropdown.onStateChange?.(columnIndex, rowIndex);
+  return id;
+}
+
+function unregisterDropdown(id: number): void {
+  dropdownRegistry.delete(id);
+  if (dropdownRegistry.size === 0) {
+    activeDropdown.column = null;
+    activeDropdown.row = null;
+    activeDropdown.onStateChange?.(null, null);
+  }
+}
+
+function closeAllDropdowns(exceptId?: number): void {
+  Array.from(dropdownRegistry.entries()).forEach(([id, closeFn]) => {
+    if (id !== exceptId) closeFn();
+  });
+}
+
+// 设置下拉菜单状态变化监听器
+const setDropdownStateChangeListener = (callback: (columnIndex: number | null, rowIndex: number | null) => void) => {
+  activeDropdown.onStateChange = callback;
+};
+
+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;
+  /** 更多操作点击回调 */
+  attachMoreAction?: (action: ActionItem) => void;
+  /** 长按回调 */
+  onLongPress?: (value: any, rowIndex?: number, columnIndex?: number, fieldName?: string) => void;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 最小高度 */
+  minHeight?: number;
+  /** 是否为空白单元格 */
+  isBlank?: boolean;
+  /** 下拉菜单状态变化回调 */
+  onDropdownStateChange?: (isOpen: boolean) => void;
+  /** Grid 相关信息，用于计算下拉菜单位置 */
+  gridInfo?: {
+    totalRows?: number;
+    rowHeight?: number;
+    gridHeight?: number;
+  };
+}
+
+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,
+  attachMoreAction,
+  onLongPress,
+  disabled = false,
+  minHeight = 40,
+  isBlank = false,
+  onDropdownStateChange,
+  gridInfo,
+  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 [dropdownVisible, setDropdownVisible] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 32, right: 0 });
+  
+  // 计算下拉菜单的最佳位置
+  const calculateDropdownPosition = useCallback(() => {
+    // 更准确地计算下拉菜单的实际高度
+    const itemHeight = 32; // 每个选项的高度
+    const borderWidth = 2; // 边框宽度
+    const padding = 8; // 内边距
+    const shadowHeight = 4; // 阴影高度
+    
+    // 考虑文本长度对高度的影响
+    const maxTextLength = Math.max(...actions.map(action => action.label.length));
+    const textHeightAdjustment = maxTextLength > 10 ? 4 : 0; // 长文本可能需要更多高度
+    
+    // 计算下拉菜单的宽度（考虑文本长度）
+    // const minWidth = 120; // 最小宽度
+    // const textWidth = maxTextLength * 8; // 估算文本宽度
+    // const _actualWidth = Math.max(minWidth, textWidth + 24); // 24px 为内边距和图标空间
+    
+    const actualHeight = actions.length * itemHeight + borderWidth + padding + shadowHeight + textHeightAdjustment;
+    
+    const buttonHeight = 32; // 按钮高度
+    const cellHeight = gridInfo?.rowHeight || 56; // 使用传入的 rowHeight 或默认值
+    const gridHeight = gridInfo?.gridHeight || 400; // 使用传入的 gridHeight 或默认值
+    
+    // 根据行索引估算当前单元格在 Grid 中的位置
+    const currentRowIndex = rowIndex || 0;
+    
+    // 计算当前单元格距离 Grid 底部的距离
+    const currentCellBottom = (currentRowIndex + 1) * cellHeight;
+    const spaceBelow = gridHeight - currentCellBottom;
+    
+    // 计算上方可用空间
+    const currentCellTop = currentRowIndex * cellHeight;
+    const spaceAbove = currentCellTop;
+    
+    // 添加安全边距，确保下拉菜单不会紧贴边界
+    const safetyMargin = 8;
+    const requiredSpace = actualHeight + safetyMargin;
+    
+    // 智能选择显示位置
+    if (requiredSpace > spaceBelow && requiredSpace <= spaceAbove) {
+      // 下方空间不够，但上方空间足够，显示在上方
+      return {
+        top: -actualHeight - 4, // 按钮上方，留 4px 间距
+        right: 0,
+      };
+    } else if (requiredSpace > spaceBelow && requiredSpace > spaceAbove) {
+      // 上下空间都不够，选择空间较大的一侧
+      if (spaceAbove > spaceBelow) {
+        return {
+          top: -actualHeight - 4, // 按钮上方
+          right: 0,
+        };
+      } else {
+        return {
+          top: buttonHeight + 4, // 按钮下方
+          right: 0,
+        };
+      }
+    } else {
+      // 下方空间足够，显示在下方
+      return {
+        top: buttonHeight + 4, // 按钮下方，留 4px 间距
+        right: 0,
+      };
+    }
+  }, [actions.length, rowIndex, gridInfo]);
+
+  // 全局下拉菜单管理
+  const dropdownIdRef = React.useRef<number | null>(null);
+
+  useEffect(() => {
+    if (dropdownVisible) {
+      const closeFn = () => setDropdownVisible(false);
+      const id = registerDropdown(columnIndex || 0, rowIndex || 0, closeFn);
+      dropdownIdRef.current = id;
+      return () => {
+        unregisterDropdown(id);
+        dropdownIdRef.current = null;
+      };
+    }
+    return undefined;
+  }, [dropdownVisible, columnIndex, rowIndex]);
+
+  // 通知父组件下拉菜单状态变化
+  useEffect(() => {
+    onDropdownStateChange?.(dropdownVisible);
+  }, [dropdownVisible, onDropdownStateChange]);
+
+
+
+  // 渲染操作按钮
+  const renderActions = () => {
+    if (!showActions || actions.length === 0 || isBlank) {
+      return null;
+    }
+
+    // 如果只有一个操作，直接显示图标按钮
+    if (actions.length === 1) {
+      const action = actions[0];
+      if (!action) return null;
+
+      // 检查是否有文本内容，如果没有文本内容，按钮应该居中
+      const hasTextContent = formattedValue && formattedValue.trim() !== '';
+      const buttonStyle = hasTextContent 
+        ? [styles.actionButton, { marginLeft: 8 }]
+        : styles.actionButton;
+
+      return (
+        <Pressable
+          style={buttonStyle}
+          onPress={(event) => {
+            // 阻止事件冒泡，避免触发外层的 attachCellPress
+            event.stopPropagation();
+            if (attachMoreAction) {
+              attachMoreAction(action);
+            } else {
+              handleActionPress(action);
+            }
+          }}
+          disabled={disabled || action.disabled}
+        >
+          <TapasIcon
+            name={action.icon || actionIcon}
+            size={16}
+            color={styles.actionIcon.color}
+          />
+        </Pressable>
+      );
+    }
+
+    // 多个操作显示下拉菜单
+    return (
+      <View style={[
+        styles.dropdownContainer,
+        {
+          // 只有当前激活的下拉菜单容器才有高 z-index
+          zIndex: activeDropdown.column === columnIndex && activeDropdown.row === rowIndex ? 2147483646 : 1,
+        }
+      ]}>
+        <Pressable
+          style={styles.actionButton}
+          onPress={(event) => {
+            // 阻止事件冒泡，避免触发外层的 attachCellPress
+            event.stopPropagation();
+            
+            if (dropdownVisible) {
+              // 如果当前下拉菜单已经打开，直接关闭
+              setDropdownVisible(false);
+            } else {
+              // 如果当前下拉菜单关闭，先关闭其他所有下拉菜单，然后打开当前菜单
+              closeAllDropdowns(dropdownIdRef.current ?? undefined);
+
+              // 计算并设置下拉菜单位置
+              setDropdownPosition(calculateDropdownPosition());
+              
+              // 延迟打开当前下拉菜单，确保其他菜单已关闭
+              setTimeout(() => {
+                setDropdownVisible(true);
+              }, 0);
+            }
+          }}
+          disabled={disabled}
+        >
+          <TapasIcon
+            name={actionIcon}
+            size={16}
+            color={styles.actionIcon.color}
+          />
+        </Pressable>
+        
+        {dropdownVisible && (
+          <View style={[styles.dropdownMenu, {
+            top: dropdownPosition.top,
+            right: dropdownPosition.right,
+          }]}>
+            {actions.map((action, index) => (
+              <Pressable
+                key={action.id}
+                style={[
+                  styles.dropdownItem,
+                  index === actions.length - 1 && styles.dropdownItemLast
+                ]}
+                onPress={(event) => {
+                  // 阻止事件冒泡，避免触发外层的 attachCellPress
+                  event.stopPropagation();
+                  if (attachMoreAction) {
+                    attachMoreAction(action);
+                  } else {
+                    handleActionPress(action);
+                  }
+                  setDropdownVisible(false);
+                }}
+                disabled={disabled || action.disabled}
+              >
+                <Text style={[
+                  styles.dropdownItemText,
+                  action.disabled && styles.dropdownItemDisabled
+                ]}>
+                  {action.label}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  // 渲染内容
+  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: 0, // 移除边框，让 Grid 处理边框
+      borderBottomColor: "transparent",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%",
+      // 确保下拉菜单不被截断
+      overflow: "visible",
+    },
+    content: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      height: "100%",
+      minHeight,
+    },
+    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: {
+      padding: 4,
+      borderRadius: 4,
+      backgroundColor: clickable ? "transparent" : theme?.colors?.grey5 || "#f8f9fa",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: 24,
+      minHeight: 24,
+    },
+    actionIcon: {
+      color: theme?.colors?.grey2 || "#999",
+    },
+    dropdownContainer: {
+      position: "relative",
+      // 默认使用较低的 z-index，只有激活的下拉菜单容器才有高 z-index
+      zIndex: 1,
+      // 确保容器本身不会创建新的 stacking context
+      isolation: "auto",
+    },
+    dropdownMenu: {
+      position: "absolute", // 使用绝对定位
+      backgroundColor: theme?.colors?.background || "#fff",
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: theme?.colors?.grey4 || "#e0e0e0",
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5,
+      minWidth: 120,
+      zIndex: 2147483647, // 更高的 z-index，确保显示在所有元素之上
+      // 确保下拉菜单不被父容器的 overflow 隐藏
+      overflow: "visible",
+      // 确保下拉菜单在正确的层级上
+      isolation: "isolate",
+    },
+    dropdownItem: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: theme?.colors?.grey4 || "#e0e0e0",
+    },
+    dropdownItemLast: {
+      borderBottomWidth: 0,
+    },
+    dropdownItemText: {
+      fontSize: 14,
+      color: theme?.colors?.colorTextPrimary || theme?.colors?.grey1 || "#333",
+    },
+    dropdownItemDisabled: {
+      color: theme?.colors?.grey3 || "#999",
+      opacity: 0.6,
+    },
+  };
+});
+
+export default withTheme(TapasDataCell);
+
+// Export aliases for compatibility
+export const DataCell = withTheme(TapasDataCell);
+export { TapasDataCell, setDropdownStateChangeListener };

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';