@beppla/tapas-ui 1.0.55 → 1.0.57

package/components/DataCell/DataCell.tsx

@@ -9,10 +9,12 @@ const globalDropdownState: {
   activeColumn: number | null;
   activeRow: number | null;
   closeAll: () => void;
+  onDropdownStateChange?: (columnIndex: number | null, rowIndex: number | null) => void;
 } = {
   activeColumn: null,
   activeRow: null,
   closeAll: () => {},
+  onDropdownStateChange: undefined,
 };
 
 // 注册和注销下拉菜单的函数
@@ -20,12 +22,16 @@ const registerDropdown = (columnIndex: number, rowIndex: number, closeCallback:
   globalDropdownState.activeColumn = columnIndex;
   globalDropdownState.activeRow = rowIndex;
   globalDropdownState.closeAll = closeCallback;
+  // 通知状态变化
+  globalDropdownState.onDropdownStateChange?.(columnIndex, rowIndex);
 };
 
 const unregisterDropdown = () => {
   globalDropdownState.activeColumn = null;
   globalDropdownState.activeRow = null;
   globalDropdownState.closeAll = () => {};
+  // 通知状态变化
+  globalDropdownState.onDropdownStateChange?.(null, null);
 };
 
 const closeAllDropdowns = () => {
@@ -34,6 +40,11 @@ const closeAllDropdowns = () => {
   }
 };
 
+// 设置下拉菜单状态变化监听器
+const setDropdownStateChangeListener = (callback: (columnIndex: number | null, rowIndex: number | null) => void) => {
+  globalDropdownState.onDropdownStateChange = callback;
+};
+
 export type DataType = 
   | "text" 
   | "number" 
@@ -120,6 +131,14 @@ export interface TapasDataCellProps extends ViewProps {
   minHeight?: number;
   /** 是否为空白单元格 */
   isBlank?: boolean;
+  /** 下拉菜单状态变化回调 */
+  onDropdownStateChange?: (isOpen: boolean) => void;
+  /** Grid 相关信息，用于计算下拉菜单位置 */
+  gridInfo?: {
+    totalRows?: number;
+    rowHeight?: number;
+    gridHeight?: number;
+  };
 }
 
 const TapasDataCell: React.FC<TapasDataCellProps> = ({
@@ -152,6 +171,8 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
   disabled = false,
   minHeight = 40,
   isBlank = false,
+  onDropdownStateChange,
+  gridInfo,
   style,
   ...otherProps
 }) => {
@@ -254,6 +275,73 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
   // 下拉菜单状态
   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]);
 
   // 全局下拉菜单管理
   useEffect(() => {
@@ -275,8 +363,20 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
     };
   }, [dropdownVisible, columnIndex, rowIndex]);
 
+  // 通知父组件下拉菜单状态变化
+  useEffect(() => {
+    onDropdownStateChange?.(dropdownVisible);
+  }, [dropdownVisible, onDropdownStateChange]);
+
   // 监听全局关闭事件
   useEffect(() => {
+    // const _handleGlobalClose = () => {
+    //   if (globalDropdownState.activeColumn !== columnIndex || 
+    //       globalDropdownState.activeRow !== rowIndex) {
+    //     setDropdownVisible(false);
+    //   }
+    // };
+
     // 这里可以添加全局事件监听器
     // 为了简化，我们在点击其他单元格时关闭当前下拉菜单
   }, [columnIndex, rowIndex]);
@@ -323,26 +423,34 @@ const TapasDataCell: React.FC<TapasDataCellProps> = ({
 
     // 多个操作显示下拉菜单
     return (
-      <View style={styles.dropdownContainer}>
+      <View style={[
+        styles.dropdownContainer,
+        {
+          // 只有当前激活的下拉菜单容器才有高 z-index
+          zIndex: globalDropdownState.activeColumn === columnIndex && globalDropdownState.activeRow === rowIndex ? 2147483646 : 1,
+        }
+      ]}>
         <Pressable
           style={styles.actionButton}
           onPress={(event) => {
             // 阻止事件冒泡，避免触发外层的 attachCellPress
             event.stopPropagation();
             
-            // 关闭其他所有下拉菜单
-            closeAllDropdowns();
-            
-            if (!dropdownVisible) {
-              // 在 React Native 中，我们使用相对定位
-              // 由于 Grid 的 overflow: hidden 限制，我们使用更高的 z-index 和绝对定位
-              setDropdownPosition({
-                top: 32, // 按钮下方 32px
-                right: 0, // 从右边缘对齐
-              });
+            if (dropdownVisible) {
+              // 如果当前下拉菜单已经打开，直接关闭
+              setDropdownVisible(false);
+            } else {
+              // 如果当前下拉菜单关闭，先关闭其他所有下拉菜单，然后打开当前菜单
+              closeAllDropdowns();
+              
+              // 计算并设置下拉菜单位置
+              setDropdownPosition(calculateDropdownPosition());
+              
+              // 延迟打开当前下拉菜单，确保其他菜单已关闭
+              setTimeout(() => {
+                setDropdownVisible(true);
+              }, 0);
             }
-            
-            setDropdownVisible(!dropdownVisible);
           }}
           disabled={disabled}
         >
@@ -509,7 +617,10 @@ const useStyles = makeStyles((theme, props?: {
     },
     dropdownContainer: {
       position: "relative",
-      zIndex: 99999, // 更高的 z-index，确保容器也在最上层
+      // 默认使用较低的 z-index，只有激活的下拉菜单容器才有高 z-index
+      zIndex: 1,
+      // 确保容器本身不会创建新的 stacking context
+      isolation: "auto",
     },
     dropdownMenu: {
       position: "absolute", // 使用绝对定位
@@ -526,9 +637,11 @@ const useStyles = makeStyles((theme, props?: {
       shadowRadius: 3.84,
       elevation: 5,
       minWidth: 120,
-      zIndex: 99999, // 更高的 z-index，确保显示在所有元素之上
+      zIndex: 2147483647, // 更高的 z-index，确保显示在所有元素之上
       // 确保下拉菜单不被父容器的 overflow 隐藏
       overflow: "visible",
+      // 确保下拉菜单在正确的层级上
+      isolation: "isolate",
     },
     dropdownItem: {
       paddingHorizontal: 12,
@@ -554,4 +667,4 @@ export default withTheme(TapasDataCell);
 
 // Export aliases for compatibility
 export const DataCell = withTheme(TapasDataCell);
-export { TapasDataCell };
+export { TapasDataCell, setDropdownStateChangeListener };

package/components/Dropdown/Dropdown.tsx

@@ -136,8 +136,8 @@ const useStyles = makeStyles((theme) => ({
   // Modal 模式样式
   modalContainer: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: "flex-start", // 改为顶部对齐，与 CustomDropdown 保持一致
+    alignItems: "stretch", // 改为拉伸对齐，与 CustomDropdown 保持一致
   },
   modalIcon: {
     color: theme.colors.primary,
@@ -198,6 +198,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
+    alignItems: "center", // 确保垂直居中对齐
     minHeight: 40,
     width: "100%",
     overflow: "hidden",
@@ -212,6 +213,7 @@ const useStyles = makeStyles((theme) => ({
     paddingRight: 12,
     paddingTop: 9,
     paddingBottom: 9,
+    alignItems: "center", // 确保垂直居中对齐
   },
   alignCenter: {
     alignSelf: "center",
@@ -471,10 +473,13 @@ const Dropdown: React.FC<DropdownProps> = ({
             (showSelectedValue || (noLabelAnim && label)) ? styles.modalBtn : null,
             dropdownType === "solid" ? styles.modalSolidBtn : null,
             dropdownType === "solid" && radius ? { borderRadius: radius } : null,
+            // 统一主体容器的位置，无论是否使用 customPopoverContent
             label && !noLabelAnim ? { marginTop: 7 } : null,
             noLabelAnim && label && backgroundColor ? { backgroundColor } : null,
             state === "error" ? { borderColor: theme.theme.colors.error } : null,
             props.disabled ? { borderColor: theme.theme.colors.grey3 } : null,
+            // 确保主体容器始终有统一的垂直对齐
+            { alignItems: "center" },
           ]}
           disabled={props.disabled}
           onPress={openDropdown}
@@ -581,6 +586,16 @@ const Dropdown: React.FC<DropdownProps> = ({
                                 ? theme.theme.colors.grey4 || "#f0f0f0"
                                 : "transparent",
                             },
+                            // 第一个 item 添加左上和右上圆角
+                            index === 0 && {
+                              borderTopLeftRadius: 12,
+                              borderTopRightRadius: 12,
+                            },
+                            // 最后一个 item 添加左下和右下圆角
+                            index === dropdownItems.length - 1 && {
+                              borderBottomLeftRadius: 12,
+                              borderBottomRightRadius: 12,
+                            },
                             showCheckedStatusInList && selectedItemKey === item.key ? {
                                 backgroundColor: theme.theme.colors.grey4 || "#f0f0f0",
                               } : null,
@@ -758,6 +773,11 @@ const Dropdown: React.FC<DropdownProps> = ({
       </Pressable>
       <ScrollView style={{width: subWidth, height: subHeight}}>
         {options?.map((item, index) => {
+          const visibleItems = options.filter(item => !item.hide);
+          const currentVisibleIndex = visibleItems.findIndex(visibleItem => visibleItem === item);
+          const isFirst = currentVisibleIndex === 0;
+          const isLast = currentVisibleIndex === visibleItems.length - 1;
+          
           return (
             !item.hide && (
               <CustomListItem
@@ -773,6 +793,8 @@ const Dropdown: React.FC<DropdownProps> = ({
                 key={index}
                 item={item}
                 selected={selected_old}
+                isFirst={isFirst}
+                isLast={isLast}
               />
             )
           );

package/components/Dropdown/InputDropdown.tsx

@@ -152,6 +152,11 @@ const InputDropdown: React.FC<InputDropdownProps> = ({
       {Array.isArray(list) ? (
         <ScrollView style={{width: subWidth, maxHeight: subHeight}}>
           {list?.map((item, index) => {
+            const visibleItems = list.filter(item => !item.hide);
+            const currentVisibleIndex = visibleItems.findIndex(visibleItem => visibleItem === item);
+            const isFirst = currentVisibleIndex === 0;
+            const isLast = currentVisibleIndex === visibleItems.length - 1;
+            
             return (
               !item.hide && (
                 <CustomListItem
@@ -164,6 +169,8 @@ const InputDropdown: React.FC<InputDropdownProps> = ({
                   key={index}
                   item={item}
                   selected={selected}
+                  isFirst={isFirst}
+                  isLast={isLast}
                 />
               )
             );

package/components/Grid/StaticFixedSizeGrid.tsx

@@ -58,6 +58,7 @@ const ItemWrapper: React.FC<any> = ({ data, columnIndex, rowIndex, style }) => {
     columnHeaderHeight,
     border,
     theme,
+    hasActions,
   } = data;
 
   if (
@@ -68,13 +69,17 @@ const ItemWrapper: React.FC<any> = ({ data, columnIndex, rowIndex, style }) => {
     return null;
   }
   
+  // 检测当前列是否有 actions 按钮
+  const shouldShowActions = hasActions && hasActions(columnIndex ?? 0, rowIndex ?? 0);
+  
   // 确保传递正确的参数给children函数
   const childrenProps: ChildrenProps = {
     columnIndex: columnIndex ?? 0,
     rowIndex: rowIndex ?? 0,
     style: {
       ...style,
-      overflow: "visible",
+      // 根据 hasActions 决定是否允许 overflow: "visible"
+      overflow: shouldShowActions ? "visible" : "hidden",
       borderBottom: border
         ? `1px solid ${theme.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
         : "none",
@@ -210,6 +215,7 @@ const InnerElementType = forwardRef(
                 columnHeaderHeight,
               }}
               style={{
+                // 保持列头的 overflow: "hidden" 以确保正确的滚动行为
                 overflow: "hidden",
                 // borderTopLeftRadius: theme?.radius?.mini ?? 4,
                 backgroundColor:
@@ -223,7 +229,11 @@ const InnerElementType = forwardRef(
         )}
         <div ref={ref} {...rest} style={{
           ...style,
-          width: rest.width - stickyColumnsWidth // 使用正确的 grid 宽度减去 sticky 列宽度
+          width: totalWidth,
+          // width: rest.width, // 使用正确的 grid 宽度减去 sticky 列宽度
+          // width: rest.width - stickyColumnsWidth, // 使用正确的 grid 宽度减去 sticky 列宽度
+          // position: "sticky", // 固定容器位置，不随滚动移动
+          // left: 0, // 固定在左侧
         }}>
           {scrollLeft > 0 && (
             <StickyColumn
@@ -231,7 +241,7 @@ const InnerElementType = forwardRef(
                 backgroundColor: theme?.background ?? "#F9F2E8",
                 zIndex: 5,
                 top: 0,
-                width: stickyColumnsWidth,
+                width: 1, // 左侧阴影条宽度应该是 1
                 height: height,
                 left: 0,
                 marginTop: headersRender ? -1 * (columnHeaderHeight || 40) : 0,
@@ -268,7 +278,7 @@ const InnerElementType = forwardRef(
                 top: 0,
                 width: stickyColumnsWidth,
                 height: columnHeaderHeight || 40,
-                left: width - stickyColumnsWidth - (border ? 1 : 0),
+                left: width - stickyColumnsWidth - (border ? 1 : 0), // 使用总宽度计算位置
                 marginTop:
                   scrollLeft === 0
                     ? -1 * (columnHeaderHeight || 40)
@@ -278,7 +288,6 @@ const InnerElementType = forwardRef(
                 borderLeft: border
                   ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
                   : "none",
-                // borderTopRightRadius: theme?.radius?.mini ?? 4,
               }}
             >
               <VariableSizeGrid
@@ -292,8 +301,7 @@ const InnerElementType = forwardRef(
                 width={stickyColumnsWidth}
                 itemData={{ ItemRenderer: headersRender, stickyColumnIndices }}
                 style={{
-                  overflow: "visible",
-                  // borderTopRightRadius: theme?.radius?.mini ?? 4,
+                  overflow: "hidden",
                   backgroundColor:
                     columnHeaderBackgroundColor ||
                     (theme?.colors?.grey4 ?? "rgba(0, 0, 0, 0.08)"),
@@ -309,7 +317,7 @@ const InnerElementType = forwardRef(
                 backgroundColor: theme?.background ?? "#F9F2E8",
                 zIndex: 2,
                 top: headersRender ? columnHeaderHeight || 40 : 0,
-                left: `calc(100% - ${stickyColumnsWidth + (border ? 1 : 0)}px)`,
+                left: width - stickyColumnsWidth - (border ? 1 : 0), // 使用总宽度计算位置
                 width: stickyColumnsWidth,
                 height: "100%",
                 position: "sticky",
@@ -329,7 +337,9 @@ const InnerElementType = forwardRef(
                 rowHeight={rowHeight}
                 width={stickyColumnsWidth}
                 itemData={{ ItemRenderer, stickyColumnIndices, border, hasActions: hasActionsFn }}
-                style={{ overflow: "visible" }}
+                style={{ 
+                  overflow: hasActions ? "visible": "hidden" 
+                }}
               >
                 {StickyColumnCell}
               </VariableSizeGrid>
@@ -433,7 +443,8 @@ const StickyList = ({
             : rest.theme.radius.mini ?? 4,
           scrollbarWidth: "none",
           msOverflowStyle: "none",
-          overflow: "visible", // 允许下拉菜单显示
+          // 移除 overflow: "visible"，恢复 Grid 的正常滚动功能
+          // Modal 下拉菜单不需要这个设置
         }}
         itemData={{
           ItemRenderer: children,

package/components/ListItem/ListItem.tsx

@@ -32,6 +32,10 @@ export interface Props extends ListItemProps {
   searchHighlightStyle?: StyleProp<TextStyle>;
   titleStyle?: StyleProp<TextStyle>;
   descStyle?: StyleProp<TextStyle>;
+  /** 是否为第一个 item */
+  isFirst?: boolean;
+  /** 是否为最后一个 item */
+  isLast?: boolean;
   search?: string;
   testID?: string;
 }
@@ -140,6 +144,8 @@ const CustomListItem: React.FC<Props> = ({
   searchHighlightStyle,
   titleStyle,
   descStyle,
+  isFirst,
+  isLast,
   testID,
   ...props
 }) => {
@@ -184,6 +190,16 @@ const CustomListItem: React.FC<Props> = ({
           selected?.value === item?.value
             ? styles.selectedItem
             : isHovered && styles.hovered,
+          // 第一个 item 添加左上和右上圆角
+          isFirst && {
+            borderTopLeftRadius: 12,
+            borderTopRightRadius: 12,
+          },
+          // 最后一个 item 添加左下和右下圆角
+          isLast && {
+            borderBottomLeftRadius: 12,
+            borderBottomRightRadius: 12,
+          },
         ]}
       >
         <Hoverable