@beppla/tapas-ui 1.5.13 → 1.5.15

package/components/StatisticsTable/index.tsx

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

package/components/Status/Status.tsx

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

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

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

@@ -0,0 +1,188 @@
+/**
+ * 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;
+  /**
+   * 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,
+  ...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 style={wrapperStyle}>{tabComponent}</View>;
+  }
+
+  return tabComponent;
+};
+
+// 复用@rneui Tab.Item
+TapasTab.Item = RNETab.Item;
+
+export default TapasTab;
+

package/components/Tab/index.tsx

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