@beppla/tapas-ui 1.2.0 → 1.2.2

package/components/Steps/Steps.tsx

@@ -1,177 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
-import { withTheme, makeStyles} from '@rneui/themed';
-import defaultTheme from "../Theme/defaultTheme";
-import Icon from '../Icons/TapasIcon';
-
-interface StepProps {
-    title: string;
-    description?: string;
-    active: boolean;
-    completed: boolean;
-    index?: number;
-    onItemPress?: (step: number) => void;
-}
-
-const useStyles = makeStyles((theme: typeof  defaultTheme) => {
-    return {
-        container: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginVertical: 20,
-        },
-        step: {
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingVertical: 10,
-        },
-        activeStep: {
-            backgroundColor: theme.colors.colorTextBrand,
-            color: theme.colors.white,
-        },
-        completedStep: {
-            // add any styles for the completed step
-            backgroundColor: theme.colors.colorTextBrand,
-        },
-        iconContainer: {
-            marginRight: 10,
-        },
-        stepNumber: {
-            fontSize: 20,
-            fontWeight: 'bold',
-        },
-        textContainer: {
-            flex: 1,
-        },
-        title: {
-            fontSize: 16,
-            fontWeight: 'bold',
-        },
-        activeTitle: {
-            // add any styles for the active title
-        },
-        completedTitle: {
-            // add any styles for the completed title
-        },
-        description: {
-            fontSize: 14,
-            color: '#666',
-        },
-        activeDescription: {
-            // add any styles for the active description
-        },
-        completedDescription: {
-            // add any styles for the completed description
-        },
-        stepText: {
-            fontSize: theme.fonts.sizeM,
-            fontFamily: theme.fonts.fontFamily,
-            fontWeight: theme.fonts.weightR,
-            height: 28,
-            width: 28,
-            borderRadius: theme.radius.full,
-            backgroundColor: theme.colors.grey3,
-            color: theme.colors.grey2,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: 10,
-        },
-        hr: {
-            height: 2,
-            width: 76,
-            backgroundColor:theme.colors.grey4,
-            marginHorizontal: 4,
-            borderRadius: theme.radius.rounded,
-        },
-        completedHr: {
-            backgroundColor:theme.colors.colorTextBrand,
-        },
-        stepItem: {
-            display: "flex",
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: "flex-start",
-        }
-    }
-});
-
-const Step: React.FC<StepProps> = ({ index,  active, completed, onItemPress}) => {
-   const styles = useStyles();
-   const handleItemPress = () => {
-       if (completed || active) {
-        onItemPress && onItemPress(index as number);
-       }
-    }
-    return (
-       <>
-            <TouchableOpacity onPress={handleItemPress}>
-                <View style={styles.stepItem}>
-                    {index !== 1 && <View style={[styles.hr, (completed || active) && styles.completedHr]}></View>}
-                    {
-                        completed? (
-                            <Text style={[styles.stepText, active && styles.activeStep, completed && styles.completedStep]} ><Icon name="check" size={16} color="white" /></Text>
-                        ) : (
-                            <Text style={[styles.stepText, active && styles.activeStep, completed && styles.completedStep]} >{index}</Text>
-                        )
-                    }
-                </View>
-           </TouchableOpacity>
-           {/* <View style={[styles.step, completed && styles.completedStep]}>
-              <View style={styles.stepItem}>
-                  {index !== 1 && <View style={styles.hr}></View>}
-                  <Text style={[styles.stepText, active && styles.activeStep,]} >{index}</Text>
-              </View>
-              <View style={styles.iconContainer}>
-                  {completed ? (
-                     <Icon name="check" type="font-awesome" size={20} color="#fff" />
-                   ) : (
-                     <Text style={styles.stepNumber}>{active ? '●' : '○'}</Text>
-                   )}
-               </View>
-               <View style={styles.textContainer}>
-                   <Text style={[styles.title, active && styles.activeTitle, completed && styles.completedTitle]}>
-                       {title}
-                   </Text>
-                   {description && (
-                     <Text style={[styles.description, active && styles.activeDescription, completed && styles.completedDescription]}>
-                         {description}
-                     </Text>
-                   )}
-               </View>
-           </View> */}
-       </>
-    );
-};
-
-interface StepsProps {
-    steps: { title: string; description?: string }[];
-    currentStep: number;
-    onPressStep: (step: number) => void;
-    testID?: string;
-}
-
-const Steps: React.FC<StepsProps> = ({ steps = [], currentStep, onPressStep, testID }) => {
-    const styles = useStyles()
-    return (
-        <View style={styles.container} testID={testID}>
-            {steps.map((step, index: number) => (
-                <View>
-                    <Step
-                        key={index}
-                        index={Number.parseInt(`${index + 1}`)}
-                        title={step.title}
-                        description={step.description}
-                        active={index === currentStep}
-                        completed={index < currentStep}
-                        onItemPress={onPressStep}
-                    />
-                </View>
-            ))}
-        </View>
-    );
-};
-
-
-export default withTheme(Steps);

package/components/Tab/TapasTab.tsx

@@ -1,122 +0,0 @@
-/**
- * TapasTab - Tab组件包装器
- * 扩展@rneui Tab组件，支持根据内容宽度而非平分宽度
- */
-import React from 'react';
-import { Tab as RNETab, TabProps, TabItemProps } from '@rneui/themed';
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-
-export interface TapasTabProps extends Omit<TabProps, 'value' | 'onChange'> {
-  value: number;
-  onChange: (value: number) => void;
-  /**
-   * Tab宽度模式
-   * 'fill': 平分容器宽度（默认）
-   * 'content': 根据内容宽度自适应
-   */
-  widthMode?: 'fill' | 'content';
-  /**
-   * 内容模式下的最小宽度（可选）
-   */
-  minTabWidth?: number;
-  /**
-   * 内容模式下的最大宽度（可选）
-   */
-  maxTabWidth?: number;
-  /**
-   * 内容模式下的水平内边距（可选）
-   */
-  contentPadding?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  buttonStyle?: StyleProp<ViewStyle>;
-  indicatorStyle?: StyleProp<ViewStyle>;
-  titleStyle?: StyleProp<TextStyle>;
-  children?: React.ReactElement<TabItemProps> | React.ReactElement<TabItemProps>[];
-}
-
-/**
- * TapasTab组件
- * 
- * @example
- * // 内容宽度模式 - 根据文本内容自适应宽度
- * <TapasTab widthMode="content" value={index} onChange={setIndex}>
- *   <TapasTab.Item title="短标签" />
- *   <TapasTab.Item title="这是一个较长的标签" />
- * </TapasTab>
- * 
- * // 内容宽度模式 - 带最小/最大宽度和内边距控制
- * <TapasTab 
- *   widthMode="content" 
- *   minTabWidth={80}
- *   maxTabWidth={200}
- *   contentPadding={20}
- *   value={index} 
- *   onChange={setIndex}
- * >
- *   <TapasTab.Item title="Tab 1" />
- *   <TapasTab.Item title="Tab 2" />
- * </TapasTab>
- * 
- * // 平分宽度模式（默认）
- * <TapasTab value={index} onChange={setIndex}>
- *   <TapasTab.Item title="Tab 1" />
- *   <TapasTab.Item title="Tab 2" />
- * </TapasTab>
- */
-export const TapasTab: React.FC<TapasTabProps> & { Item: typeof RNETab.Item } = ({
-  widthMode = 'fill',
-  minTabWidth,
-  maxTabWidth,
-  contentPadding = 16,
-  containerStyle,
-  buttonStyle,
-  titleStyle,
-  ...props
-}) => {
-  // 根据widthMode调整容器样式
-  const adjustedContainerStyle = React.useMemo(() => {
-    if (widthMode === 'content') {
-      return [
-        { flexDirection: 'row' as const, flex: 0 },
-        containerStyle,
-      ];
-    }
-    return containerStyle;
-  }, [widthMode, containerStyle]);
-
-  // 根据widthMode调整按钮样式
-  const adjustedButtonStyle = React.useMemo(() => {
-    if (widthMode === 'content') {
-      const contentStyle: ViewStyle = {
-        flex: 0,
-        paddingHorizontal: contentPadding,
-      };
-      
-      if (minTabWidth !== undefined) {
-        contentStyle.minWidth = minTabWidth;
-      }
-      
-      if (maxTabWidth !== undefined) {
-        contentStyle.maxWidth = maxTabWidth;
-      }
-      
-      return [buttonStyle, contentStyle];
-    }
-    return buttonStyle;
-  }, [widthMode, buttonStyle, minTabWidth, maxTabWidth, contentPadding]);
-
-  return (
-    <RNETab
-      {...props}
-      containerStyle={adjustedContainerStyle}
-      buttonStyle={adjustedButtonStyle}
-      titleStyle={titleStyle}
-    />
-  );
-};
-
-// 复用@rneui Tab.Item
-TapasTab.Item = RNETab.Item;
-
-export default TapasTab;
-

package/components/Tab/index.tsx

@@ -1,3 +0,0 @@
-export { TapasTab } from './TapasTab';
-export type { TapasTabProps } from './TapasTab';
-

package/components/TabTitle/TabTitle.tsx

@@ -1,89 +0,0 @@
-import React from "react";
-import { Text, View, ViewProps, TextStyle, StyleProp, TextProps } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-
-export interface TapasTabTitleProps extends ViewProps {
-  /** 显示的文本内容 */
-  text?: string;
-  /** 是否显示红色通知点 */
-  showIndicator?: boolean;
-  /** 指示器颜色 */
-  indicatorColor?: string;
-  /** 指示器大小 */
-  indicatorSize?: number;
-  /** 文本样式 */
-  textStyle?: StyleProp<TextStyle>;
-  /** 文本属性 */
-  textProps?: Partial<TextProps>;
-  /** 指示器相对文本的偏移位置 */
-  indicatorOffset?: {
-    top?: number;
-    right?: number;
-  };
-}
-
-const TapasTabTitle: React.FC<TapasTabTitleProps> = ({
-  text,
-  showIndicator = false,
-  indicatorColor = "#FF4444",
-  indicatorSize = 5,
-  textStyle,
-  textProps,
-  indicatorOffset = { top: 0, right: -8 },
-  style,
-  ...otherProps
-}) => {
-  const styles = useStyles();
-
-  return (
-    <View style={[styles.container, style]} {...otherProps}>
-      <Text
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        style={[styles.text, textStyle]}
-        {...textProps}
-      >
-        {text}
-        {showIndicator && (
-          <View
-            style={[
-              styles.indicator,
-              {
-                width: indicatorSize,
-                height: indicatorSize,
-                borderRadius: indicatorSize / 2,
-                backgroundColor: indicatorColor,
-                top: indicatorOffset.top,
-                right: indicatorOffset.right,
-              },
-            ]}
-          />
-        )}
-      </Text>
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    alignItems: "flex-start",
-    justifyContent: "center",
-  },
-  text: {
-    fontSize: theme?.fonts?.sizeM || 16,
-    fontWeight: "600",
-    color: theme?.colors?.colorTextPrimary || theme?.colors?.primary || "#000",
-    position: "relative",
-    overflow: "visible",
-  },
-  indicator: {
-    position: "absolute",
-    zIndex: 1,
-  },
-}));
-
-export default withTheme(TapasTabTitle);
-
-// Export aliases for compatibility
-export const TabTitle = withTheme(TapasTabTitle);
-export { TapasTabTitle };

package/components/TabTitle/index.tsx

@@ -1,3 +0,0 @@
-export { default } from './TabTitle';
-export type { TapasTabTitleProps } from './TabTitle';
-export { TabTitle, TapasTabTitle } from './TabTitle';

package/components/TableColumnHeader/TableColumnHeader.tsx

@@ -1,273 +0,0 @@
-import React, { useCallback } from "react";
-import { View, Text, Pressable, ViewProps, TextStyle, StyleProp, ViewStyle } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export type SortDirection = "ASC" | "DESC" | null;
-
-export interface SortState {
-  field: string;
-  direction: SortDirection;
-}
-
-export interface TapasTableColumnHeaderProps extends ViewProps {
-  /** 列标题文本 */
-  title: string;
-  /** 列索引 */
-  columnIndex?: number;
-  /** 字段名称（用于排序标识） */
-  fieldName?: string;
-  /** 是否支持排序 */
-  sortable?: boolean;
-  /** 当前排序状态 */
-  sortDirection?: SortDirection;
-  /** 文本对齐方式 */
-  textAlign?: "left" | "center" | "right";
-  /** 标题文本样式 */
-  titleStyle?: StyleProp<TextStyle>;
-  /** 排序按钮样式 */
-  sortButtonStyle?: StyleProp<ViewStyle>;
-  /** 容器内边距 */
-  padding?: {
-    horizontal?: number;
-    vertical?: number;
-  };
-  /** 排序回调函数 */
-  onSort?: (fieldName: string, direction: SortDirection, columnIndex?: number) => void;
-  /** 点击回调函数 */
-  onPress?: (fieldName: string, columnIndex?: number) => void;
-  /** 长按回调函数 */
-  onLongPress?: (fieldName: string, columnIndex?: number) => void;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 排序图标大小 */
-  sortIconSize?: number;
-  /** 排序图标颜色（激活状态） */
-  activeSortIconColor?: string;
-  /** 排序图标颜色（非激活状态） */
-  inactiveSortIconColor?: string;
-  /** 自定义排序图标名称 */
-  sortIcons?: {
-    ascending?: string;
-    descending?: string;
-  };
-  /** 是否显示排序状态指示器 */
-  showSortIndicator?: boolean;
-  /** 最小高度 */
-  minHeight?: number;
-}
-
-const TapasTableColumnHeader: React.FC<TapasTableColumnHeaderProps> = ({
-  title,
-  columnIndex,
-  fieldName,
-  sortable = false,
-  sortDirection = null,
-  textAlign = "left",
-  titleStyle,
-  sortButtonStyle,
-  padding = { horizontal: 16, vertical: 8 },
-  onSort,
-  onPress,
-  onLongPress,
-  disabled = false,
-  sortIconSize = 18,
-  activeSortIconColor,
-  inactiveSortIconColor,
-  sortIcons = {
-    ascending: "arrow_drop_up",
-    descending: "arrow_drop_down",
-  },
-  showSortIndicator = true,
-  minHeight = 40,
-  style,
-  ...otherProps
-}) => {
-  const styles = useStyles({ 
-    textAlign, 
-    padding, 
-    minHeight, 
-    disabled 
-  });
-
-  // 处理排序点击
-  const handleSortPress = useCallback(() => {
-    if (!sortable || disabled || !fieldName) return;
-
-    let newDirection: SortDirection;
-    
-    // 排序逻辑：null -> ASC -> DESC -> null
-    switch (sortDirection) {
-      case null:
-        newDirection = "ASC";
-        break;
-      case "ASC":
-        newDirection = "DESC";
-        break;
-      case "DESC":
-        newDirection = null;
-        break;
-      default:
-        newDirection = "ASC";
-    }
-
-    onSort?.(fieldName, newDirection, columnIndex);
-  }, [sortable, disabled, fieldName, sortDirection, onSort, columnIndex]);
-
-  // 处理普通点击
-  const handlePress = useCallback(() => {
-    if (disabled) return;
-    
-    if (sortable) {
-      handleSortPress();
-    } else if (onPress && fieldName) {
-      onPress(fieldName, columnIndex);
-    }
-  }, [disabled, sortable, handleSortPress, onPress, fieldName, columnIndex]);
-
-  // 处理长按
-  const handleLongPress = useCallback(() => {
-    if (disabled || !fieldName) return;
-    onLongPress?.(fieldName, columnIndex);
-  }, [disabled, fieldName, onLongPress, columnIndex]);
-
-  // 渲染排序指示器
-  const renderSortIndicator = () => {
-    if (!sortable || !showSortIndicator) return null;
-
-    const isAscending = sortDirection === "ASC";
-    const isDescending = sortDirection === "DESC";
-    
-    return (
-      <View style={[styles.sortContainer, sortButtonStyle]}>
-        <View style={styles.sortArrows}>
-          <TapasIcon
-            name={sortIcons.ascending || "arrow_drop_up"}
-            size={sortIconSize}
-            color={
-              isDescending
-                ? activeSortIconColor || styles.activeSortIcon.color
-                : inactiveSortIconColor || styles.inactiveSortIcon.color
-            }
-            style={styles.arrowUp}
-          />
-          <TapasIcon
-            name={sortIcons.descending || "arrow_drop_down"}
-            size={sortIconSize}
-            color={
-              isAscending
-                ? activeSortIconColor || styles.activeSortIcon.color
-                : inactiveSortIconColor || styles.inactiveSortIcon.color
-            }
-            style={styles.arrowDown}
-          />
-        </View>
-      </View>
-    );
-  };
-
-  const renderContent = () => (
-    <View style={styles.content}>
-      <Text 
-        style={[styles.title, titleStyle]}
-        numberOfLines={2}
-        ellipsizeMode="tail"
-      >
-        {title}
-      </Text>
-      {renderSortIndicator()}
-    </View>
-  );
-
-  // 如果可排序或有点击事件，使用 Pressable
-  if (sortable || onPress || onLongPress) {
-    return (
-      <Pressable
-        {...otherProps}
-        style={[styles.container, style]}
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        disabled={disabled}
-      >
-        {renderContent()}
-      </Pressable>
-    );
-  }
-
-  // 否则使用普通 View
-  return (
-    <View {...otherProps} style={[styles.container, style]}>
-      {renderContent()}
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme, props?: { 
-  textAlign?: "left" | "center" | "right";
-  padding?: { horizontal?: number; vertical?: number };
-  minHeight?: number;
-  disabled?: boolean;
-}) => {
-  const textAlign = props?.textAlign || "left";
-  const paddingHorizontal = props?.padding?.horizontal || 16;
-  const paddingVertical = props?.padding?.vertical || 8;
-  const minHeight = props?.minHeight || 40;
-  const disabled = props?.disabled || false;
-
-  return {
-    container: {
-      minHeight,
-      paddingHorizontal,
-      paddingVertical,
-      backgroundColor: theme?.colors?.grey5 || "#f8f9fa",
-      borderBottomWidth: 1,
-      borderBottomColor: theme?.colors?.grey3 || "#e0e0e0",
-      opacity: disabled ? 0.5 : 1,
-    },
-    content: {
-      flex: 1,
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: textAlign === "left" ? "flex-start" : 
-                     textAlign === "right" ? "flex-end" : "center",
-      gap: 8,
-    },
-    title: {
-      fontSize: theme?.fonts?.sizeS || 14,
-      fontWeight: "600",
-      color: theme?.colors?.colorTextSecondary || theme?.colors?.grey1 || "#333",
-      flexShrink: 1,
-    },
-    sortContainer: {
-      flexShrink: 0,
-    },
-    sortArrows: {
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      height: 20,
-      width: 16,
-      position: "relative",
-    },
-    arrowUp: {
-      position: "absolute",
-      top: -2,
-    },
-    arrowDown: {
-      position: "absolute",
-      bottom: -2,
-    },
-    activeSortIcon: {
-      color: theme?.colors?.primary || "#007AFF",
-    },
-    inactiveSortIcon: {
-      color: theme?.colors?.grey2 || "#999",
-    },
-  };
-});
-
-export default withTheme(TapasTableColumnHeader);
-
-// Export aliases for compatibility
-export const TableColumnHeader = withTheme(TapasTableColumnHeader);
-export { TapasTableColumnHeader };

package/components/TableColumnHeader/index.tsx

@@ -1,7 +0,0 @@
-export { default } from './TableColumnHeader';
-export type { 
-  TapasTableColumnHeaderProps, 
-  SortDirection, 
-  SortState 
-} from './TableColumnHeader';
-export { TableColumnHeader, TapasTableColumnHeader } from './TableColumnHeader';