@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/StatisticsTable/index.tsx

@@ -1,10 +0,0 @@
-export { StatisticsTable } from './StatisticsTable';
-export type { 
-  StatisticsTableProps, 
-  StatisticsTableColumn, 
-  StatisticsTableCell,
-  StatisticsTableAction,
-  CellAlignment,
-  CellDataType,
-} from './StatisticsTable';
-

package/components/Status/Status.tsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import {View, Text, StyleProp, ViewStyle} from 'react-native';
-import {withTheme, makeStyles} from "@rneui/themed";
-import {capitalizeFirstLetter} from '../common';
-
-export type STATUS_TYPE = 'success' | 'error' | 'warning' | 'waiting' | 'unavailable' | 'disabled';
-
-export interface Props {
-  mode?: 'point' | 'solid';
-  tag: string;
-  type: STATUS_TYPE;
-  testID?: string;
-  styles?: StyleProp<ViewStyle>;
-}
-const useStyles = makeStyles((theme) => {
-  return {
-    statusWrap: {
-      height: 24,
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      alignItems: 'center'
-    },
-    base: {
-      width: 'auto',
-      fontFamily: theme?.fonts?.fontFamily,
-      fontSize: theme?.fonts.sizeM,
-      fontWeight: theme?.fonts.weightR,
-      paddingHorizontal: 6,
-      alignItems: 'center',
-      display: 'flex',
-      height: 24,
-      borderRadius: 4,
-      color: theme.colors.colorTextSecondary
-    },
-    unavailable: {
-      color: theme.colors.colorTextSecondary
-    },
-    disabled: {
-      backgroundColor: theme.colors.grey5
-    },
-    warning: {
-      backgroundColor: (theme.colors as unknown as Record<string, string>).warning2
-    },
-    reserved: {
-      backgroundColor: theme.colors.colorStatusReserved
-    },
-    error: {
-      backgroundColor: theme.colors.colorStatusError
-    },
-    success: {
-      backgroundColor: theme.colors.colorStatusAvailable
-    },
-    waiting: {
-      borderColor: theme.colors.colorStatusAwaiting,
-      borderWidth: 1,
-      color: theme.colors.colorStatusAwaiting
-    },
-    point: {
-      borderRadius: 4,
-      height: 8,
-      width: 8
-    },
-    solid_disabled: {
-      borderColor: theme.colors.grey5,
-      borderWidth: 1,
-      color: theme.colors.grey5
-    },
-    solid_warning: {
-      borderColor: (theme.colors as unknown as Record<string, string>).warning2,
-      borderWidth: 1,
-      color: (theme.colors as unknown as Record<string, string>).warning2
-    },
-    solid_error: {
-      borderColor: theme.colors.colorStatusError,
-      borderWidth: 1,
-      color: theme.colors.colorStatusError
-    },
-    solid_success: {
-      borderColor: theme.colors.colorStatusAvailable,
-      borderWidth: 1,
-      color: theme.colors.colorStatusAvailable
-    },
-    solid_unavailable: {
-      color: theme.colors.colorTextSecondary,
-      borderColor: theme.colors.grey3,
-      borderWidth: 1
-    },
-    solid_waiting: {
-      color: theme.colors.colorStatusAwaiting,
-      borderColor: theme.colors.colorStatusAwaiting,
-      borderWidth: 1
-    },
-    solid_reserved: {
-      color: (theme.colors as unknown as Record<string, string>).warning2,
-      borderColor: (theme.colors as unknown as Record<string, string>).warning2,
-      borderWidth: 1
-    }
-  };
-});
-export const StatusTag: React.FC<Props> = ({tag, type, mode = 'point', ...props}) => {
-  const styles = useStyles(props);
-  const formattedTag = capitalizeFirstLetter(tag);
-  if (!tag) {
-    return null;
-  }
-  return (
-    <View testID={props?.testID} style={[styles.statusWrap, props.styles]}>
-      {mode === 'point' ? (
-        <>
-          <Text style={[styles.point, styles[type]]} />
-          <Text style={[styles.base]}>{formattedTag}</Text>
-        </>
-      ) : (
-        <Text style={[styles.base, styles[`solid_${type}`]]}>
-          {formattedTag}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-export default withTheme(React.memo(StatusTag));

package/components/Steps/Steps.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
-import { withTheme, makeStyles} from '@rneui/themed';
-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) => {
-    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(React.memo(Steps));

package/components/Switch/Switch.tsx

@@ -1,121 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Animated,
-  SwitchProps,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { makeStyles, withTheme } from '@rneui/themed';
-
-export interface TapasSwitchProps extends SwitchProps {
-  /** Track width (default: 56) */
-  width?: number;
-  /** Track height (default: 32) */
-  height?: number;
-  /** Test ID for testing */
-  testID?: string;
-  /** Container style override */
-  containerStyle?: StyleProp<ViewStyle>;
-}
-
-const TapasSwitch: React.FC<TapasSwitchProps> = ({
-  trackColor,
-  thumbColor,
-  width = 56,
-  height = 32,
-  onValueChange,
-  value,
-  disabled,
-  testID,
-  containerStyle,
-}) => {
-  const styles = useStyles();
-  const leftAnim = useRef(new Animated.Value(value ? width - height - 1 : 3)).current;
-
-  useEffect(() => {
-    Animated.timing(leftAnim, {
-      toValue: value ? width - height - 1 : 3,
-      duration: 200,
-      useNativeDriver: false,
-    }).start();
-  }, [value, width, height, leftAnim]);
-
-  const thumbSize = height - 6;
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <TouchableOpacity
-        testID={testID}
-        activeOpacity={0.8}
-        onPress={() => {
-          if (!disabled && onValueChange) {
-            onValueChange(!value);
-          }
-        }}
-        style={[
-          styles.track,
-          {
-            width,
-            height,
-            borderRadius: height / 2,
-            backgroundColor: value
-              ? trackColor?.true ?? (disabled ? styles.disabledOnBg.backgroundColor : styles.onBg.backgroundColor)
-              : trackColor?.false ?? (disabled ? styles.disabledOffBg.backgroundColor : styles.offBg.backgroundColor),
-            opacity: disabled ? 0.6 : 1,
-          },
-        ]}
-      >
-        <Animated.View
-          style={[
-            {
-              width: thumbSize,
-              height: thumbSize,
-              borderRadius: thumbSize / 2,
-              backgroundColor: thumbColor ?? styles.thumb.backgroundColor,
-              transform: [{ translateX: leftAnim }],
-            },
-            !disabled && styles.shadow,
-          ]}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  track: {
-    padding: 3,
-    justifyContent: 'center',
-    position: 'relative',
-  },
-  onBg: {
-    backgroundColor: theme.colors.success,
-  },
-  offBg: {
-    backgroundColor: theme.colors.grey3,
-  },
-  disabledOnBg: {
-    backgroundColor: theme.colors.grey3,
-  },
-  disabledOffBg: {
-    backgroundColor: theme.colors.grey4,
-  },
-  thumb: {
-    backgroundColor: theme.colors.white,
-  },
-  shadow: {
-    shadowColor: 'rgba(0, 0, 0, 0.12)',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.12,
-    shadowRadius: 16,
-    elevation: 8,
-  },
-}));
-
-export default withTheme(React.memo(TapasSwitch));

package/components/Tab/TapasTab.tsx

@@ -1,191 +0,0 @@
-/**
- * TapasTab - Tab组件包装器
- * 扩展@rneui Tab组件，支持根据内容宽度而非平分宽度
- */
-import React from 'react';
-import { Tab as RNETab, TabProps, TabItemProps } from '@rneui/themed';
-import { StyleProp, ViewStyle, TextStyle, View } from 'react-native';
-
-export interface TapasTabProps extends Omit<TabProps, 'value' | 'onChange'> {
-  value: number;
-  onChange: (value: number) => void;
-  /** Test ID for E2E testing */
-  testID?: string;
-  /**
-   * Tab宽度模式
-   * 'fill': 平分容器宽度（默认）
-   * 'content': 根据内容宽度自适应
-   */
-  widthMode?: 'fill' | 'content';
-  /**
-   * 内容模式下的最小宽度（可选）
-   */
-  minTabWidth?: number;
-  /**
-   * 内容模式下的最大宽度（可选）
-   */
-  maxTabWidth?: number;
-  /**
-   * 内容模式下的水平内边距（可选）
-   */
-  contentPadding?: number;
-  /**
-   * 是否显示底部分隔线（默认 true）
-   */
-  showDivider?: boolean;
-  /**
-   * 底部分隔线颜色
-   */
-  dividerColor?: string;
-  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,
-  showDivider = true,
-  dividerColor = '#e0e0e0',
-  containerStyle,
-  buttonStyle,
-  titleStyle,
-  children,
-  testID,
-  ...props
-}) => {
-  // 根据widthMode调整按钮样式
-  const adjustedButtonStyle = React.useMemo(() => {
-    if (widthMode === 'content') {
-      const contentStyle: ViewStyle = {
-        flexGrow: 0,      // 不自动增长
-        flexShrink: 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]);
-
-  // 为 content 模式定制 titleStyle
-  const adjustedTitleStyle = React.useMemo(() => {
-    if (widthMode === 'content') {
-      // 使用类型断言来支持 Web 专有属性
-      const contentTitleStyle: any = {
-        whiteSpace: 'nowrap', // Web: 防止文本换行
-        overflow: 'hidden', // 隐藏溢出
-        textOverflow: 'ellipsis', // Web: 显示省略号
-      };
-      return [titleStyle, contentTitleStyle];
-    }
-    return titleStyle;
-  }, [widthMode, titleStyle]);
-
-  // 为 content 模式调整容器样式，确保填满父容器
-  const adjustedContainerStyle = React.useMemo(() => {
-    if (widthMode === 'content') {
-      const contentContainerStyle: ViewStyle = {
-        width: '100%', // 填满父容器宽度
-      };
-      
-      return [containerStyle, contentContainerStyle];
-    }
-    return containerStyle;
-  }, [widthMode, containerStyle]);
-
-  // 外层包裹容器样式（用于添加底部分隔线）
-  const wrapperStyle = React.useMemo(() => {
-    if (widthMode === 'content' && showDivider) {
-      const style: ViewStyle = {
-        width: '100%',
-        borderBottomWidth: 1,
-        borderBottomColor: dividerColor,
-      };
-      return style;
-    }
-    return undefined;
-  }, [widthMode, showDivider, dividerColor]);
-
-  // 处理 children，为每个 Tab.Item 添加样式
-  const renderChildren = React.useMemo(() => {
-    if (widthMode === 'content' && children) {
-      return React.Children.map(children, (child) => {
-        if (React.isValidElement<TabItemProps>(child) && child.type === RNETab.Item) {
-          return React.cloneElement(child, {
-            buttonStyle: adjustedButtonStyle,
-            titleStyle: adjustedTitleStyle,
-          });
-        }
-        return child;
-      });
-    }
-    return children;
-  }, [widthMode, children, adjustedButtonStyle, adjustedTitleStyle]);
-
-  const tabComponent = (
-    <RNETab
-      {...props}
-      scrollable={widthMode === 'content'}
-      containerStyle={adjustedContainerStyle}
-      buttonStyle={widthMode === 'fill' ? buttonStyle : undefined}
-      titleStyle={widthMode === 'fill' ? titleStyle : undefined}
-    >
-      {renderChildren}
-    </RNETab>
-  );
-
-  // 在 content 模式下，用外层 View 包裹以添加底部分隔线
-  if (widthMode === 'content' && wrapperStyle) {
-    return <View testID={testID} style={wrapperStyle}>{tabComponent}</View>;
-  }
-
-  return testID ? <View testID={testID}>{tabComponent}</View> : tabComponent;
-};
-
-// 复用@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';
-