@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/DataCell/DataCell.tsx

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

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