@beppla/tapas-ui 1.4.31 → 1.4.33

package/components/Progress/Progress.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { withTheme, makeStyles} from '@rneui/themed';
+import defaultTheme from "../Theme/defaultTheme";
+import {TapasIcon} from "../index";
+
+const useStyles = makeStyles((theme: typeof  defaultTheme, ...props) => {
+
+    const {data, type} = props[0] as Props;
+
+    const {progress} = data || {};
+
+    const width: any = `${progress}%`;
+    let fontSize;
+
+    switch (type) {
+        case 'image':
+            fontSize = theme.fonts.sizeS;
+            break;
+        case "file":
+            fontSize = theme.fonts.sizeXs;
+            break;
+    }
+
+    return {
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 20,
+            width: '100%',
+        },
+        stepText: {
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            flexDirection: 'row',
+            minWidth: 52,
+        },
+        fileText: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            flexDirection: 'row',
+            minWidth: 52,
+        },
+        hr: {
+            height: 2,
+            backgroundColor:theme.colors.grey4,
+            borderRadius: theme.radius.rounded,
+            flexGrow: 1,
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            zIndex: 0,
+        },
+        progress: {
+            backgroundColor:theme.colors.grey1,
+            zIndex: 1,
+            width: width,
+        },
+        done: {
+            backgroundColor: theme.colors.success,
+            width: '100%',
+        },
+        failed: {
+            backgroundColor: theme.colors.error,
+            width: '100%',
+        },
+        stepItem: {
+            display: "flex",
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: "flex-start",
+            flexGrow: 1,
+            flexShrink: 1,
+        },
+        progressText: {
+            fontSize: fontSize,
+            fontFamily: theme.fonts.fontFamily,
+            fontWeight: theme.fonts.weightR,
+            letterSpacing: 0.1,
+            color: theme.colors.secondary
+        },
+        success: {
+            color: theme.colors.success,
+            marginLeft: 2,
+        },
+        error: {
+            color: theme.colors.error,
+            marginLeft: 2,
+        },
+        reUpload: {
+            color: theme.colors.primary,
+            marginLeft: 12,
+        },
+        fileContainer: {
+            display: "flex",
+            flexDirection: 'row',
+            justifyContent: "space-between"
+        },
+        startContainer: {
+            marginRight: 8,
+        },
+        endContainer: {
+            marginLeft: 8,
+        }
+    }
+});
+
+export interface Props {
+    type: 'image' | 'file'
+    data: {
+        start: React.ReactNode |string;
+        end?: React.ReactNode| string;
+        status: 'progress' | 'done' | 'failed',
+        progress?: number;
+        file?: string;
+    };
+    testID?: string;
+}
+
+const Progress: React.FC<Props> = (props) => {
+    const styles = useStyles(props);
+    
+    // Add null check for data
+    if (!props?.data) {
+        return null;
+    }
+    
+    return (
+        <View style={styles.container} testID={props.testID}>
+            <View style={styles.stepItem}>
+                <View style={styles.startContainer}>
+                    {
+                        props.data.start
+                    }
+                </View>
+                {props.type === 'image' && (<>
+                    <View style={{flexGrow: 1, position: 'relative'}}>
+                        <View style={styles.hr}></View>
+                        <View style={[styles.hr, styles[props.data.status]]}></View>
+                    </View>
+                    <View style={styles.endContainer}>
+                        {
+                            props.data.status === 'progress' && <View style={styles.stepText}>
+                                <Text style={[styles.progressText]}>{props.data.end || `${props.data.progress}%`}</Text>
+                            </View>
+                        }
+                        {
+                            props.data.status === 'failed' &&(
+                                <View style={styles.stepText}>
+                                    <TapasIcon name="warning_filled" size={16} style={styles.error} />
+                                    <Text style={[styles.progressText, styles.error]}>{props.data.end || props.data.progress}</Text>
+                                    {/*<TapasIcon style={styles.reUpload} name="upload" onPress={data.reUpload} size={20} />*/}
+                                </View>
+                            )
+                        }
+                        {
+                            props.data.status === 'done' &&(
+                                <View style={styles.stepText}>
+                                    <TapasIcon name="check_circle_filled" size={16} style={styles.success} />
+                                    <Text style={[styles.progressText, styles.success]}>{props.data.end || props.data.progress}</Text>
+                                </View>
+                            )
+                        }
+                    </View>
+                </>)}
+                {props.type === 'file' && (<>
+                    <View style={{flexGrow: 1, position: 'relative'}}>
+                        <View style={styles.fileContainer}>
+                            <Text style={styles.progressText}>{props.data.file}</Text>
+                            <View>
+                                {
+                                    props.data.status === 'progress' && <View style={styles.fileText}>
+                                        <Text style={[styles.progressText]}>{props.data.end || `${props.data.progress}%`}</Text>
+                                    </View>
+                                }
+                                {
+                                    props.data.status === 'failed' &&(
+                                        <View style={styles.fileText}>
+                                            <TapasIcon name="warning_filled" size={12} style={styles.error} />
+                                            <Text style={[styles.progressText, styles.error]}>{props.data.end || props.data.progress}</Text>
+                                            {/*<TapasIcon style={styles.reUpload} name="upload" onPress={data.reUpload} size={20} />*/}
+                                        </View>
+                                    )
+                                }
+                                {
+                                    props.data.status === 'done' &&(
+                                        <View style={styles.fileText}>
+                                            <TapasIcon name="check_circle_filled" size={12} style={styles.success} />
+                                            <Text style={[styles.progressText, styles.success]}>{props.data.end || props.data.progress}</Text>
+                                        </View>
+                                    )
+                                }
+                            </View>
+                        </View>
+                        <View>
+                            <View style={styles.hr}></View>
+                            <View style={[styles.hr, styles[props.data.status]]}></View>
+                        </View>
+
+                    </View>
+                </>)}
+            </View>
+        </View>
+    );
+};
+
+export default withTheme(Progress);

package/components/Quantity/Quantity.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, ViewProps, Pressable } from "react-native";
+import { makeStyles, useTheme, withTheme } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+
+export interface TapasQuantityProps extends ViewProps {
+  /** 当前数量值 */
+  value: number;
+  /** 数量变化回调 */
+  onChange?: (value: number) => void;
+  /** 最大值 */
+  max?: number;
+  /** 最小值 */
+  min?: number;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 步长（每次增减的数量） */
+  step?: number;
+  /** 是否显示当前值 */
+  showValue?: boolean;
+  /** 自定义样式 */
+  buttonStyle?: ViewProps['style'];
+  /** 值显示区域样式 */
+  valueStyle?: ViewProps['style'];
+  /** 增减按钮大小 */
+  buttonSize?: number;
+  /** 是否显示边界提示 */
+  showBoundaryHint?: boolean;
+  /** 测试ID */
+  testID?: string;
+}
+
+const TapasQuantity: React.FC<TapasQuantityProps> = ({
+  value,
+  onChange,
+  max = 99999,
+  min = 0,
+  disabled = false,
+  step = 1,
+  showValue = true,
+  style,
+  buttonStyle,
+  valueStyle,
+  buttonSize = 32,
+  showBoundaryHint = false,
+  testID,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useStyles(theme);
+  const [currentValue, setCurrentValue] = useState<number>(value ?? 0);
+
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  const isDecreaseDisabled = disabled || currentValue <= min;
+  const isIncreaseDisabled = disabled || currentValue >= max;
+
+  const handleDecrease = () => {
+    if (isDecreaseDisabled) return;
+    
+    const newValue = Math.max(min, currentValue - step);
+    setCurrentValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleIncrease = () => {
+    if (isIncreaseDisabled) return;
+    
+    const newValue = Math.min(max, currentValue + step);
+    setCurrentValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const getButtonStyle = (isDisabled: boolean, isPrimary = false) => [
+    styles.button,
+    { width: buttonSize, height: buttonSize },
+    isPrimary && styles.primaryButton,
+    isDisabled && styles.disabledButton,
+    buttonStyle,
+  ];
+
+  const getIconColor = (isDisabled: boolean, isPrimary = false) => {
+    if (isDisabled) return theme.theme.colors.grey2;
+    if (isPrimary) return theme.theme.colors.white;
+    return theme.theme.colors.secondary;
+  };
+
+  return (
+    <View style={[styles.container, style]} testID={testID} {...props}>
+      <Pressable
+        onPress={handleDecrease}
+        disabled={isDecreaseDisabled}
+        style={getButtonStyle(isDecreaseDisabled)}
+        testID="quantity-decrease"
+      >
+        <TapasIcon
+          size={20}
+          name="remove"
+          color={getIconColor(isDecreaseDisabled)}
+        />
+      </Pressable>
+      
+      {showValue && (
+        <View style={[styles.valueContainer, valueStyle]}>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              styles.valueText,
+              disabled && { color: theme.theme.colors.grey2 },
+            ]}
+          >
+            {currentValue}
+          </Text>
+          {showBoundaryHint && (
+            <Text style={styles.boundaryHint}>
+              {min} - {max}
+            </Text>
+          )}
+        </View>
+      )}
+      
+      <Pressable
+        onPress={handleIncrease}
+        disabled={isIncreaseDisabled}
+        style={getButtonStyle(isIncreaseDisabled, true)}
+        testID="quantity-increase"
+      >
+        <TapasIcon
+          size={20}
+          name="add"
+          color={getIconColor(isIncreaseDisabled, true)}
+        />
+      </Pressable>
+    </View>
+  );
+};
+
+const useStyles = makeStyles((theme) => {
+  return {
+    container: {
+      width: 136,
+      paddingLeft: 4,
+      paddingRight: 4,
+      borderRadius: 12,
+      backgroundColor: theme.colors.grey4,
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "row",
+      alignContent: "center",
+      alignItems: "center",
+    },
+    button: {
+      display: "flex",
+      flexDirection: "column",
+      alignSelf: "center",
+      justifyContent: "center",
+      alignContent: "center",
+      alignItems: "center",
+      borderRadius: 8,
+    },
+    primaryButton: {
+      backgroundColor: theme.colors.primary,
+    },
+    disabledButton: {
+      backgroundColor: theme.colors.grey5,
+    },
+    valueContainer: {
+      display: "flex",
+      flex: 1,
+      overflow: "hidden",
+      height: 32,
+      justifyContent: "center",
+      flexDirection: "column",
+      alignContent: "center",
+      alignItems: "center",
+    },
+    valueText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: theme.colors.secondary,
+      textAlign: "center",
+    },
+    boundaryHint: {
+      fontSize: 10,
+      color: theme.colors.grey2,
+      textAlign: "center",
+      marginTop: 2,
+    },
+  };
+});
+
+export default withTheme(TapasQuantity);

package/components/Quantity/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Quantity';
+export type { TapasQuantityProps } from './Quantity';

package/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,119 @@
+import { withTheme } from "@rneui/themed";
+import React, { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+
+export interface Option {
+  key: string;
+  text: string;
+}
+
+const RadioButton = ({
+  options,
+  theme,
+  onPress,
+  selected,
+  testID,
+}: {
+  theme?: any;
+  options: Option[];
+  onPress?: (option: Option) => void;
+  selected?: string;
+  testID?: string;
+}) => {
+  const [checked, setChecked] = useState<string>(selected ?? "");
+
+  useEffect(() => {
+    setChecked(selected ?? "");
+  }, [selected]);
+  
+  return (
+    <View style={styles.container} testID={testID}>
+      {(options || []).map((option, index) => (
+        <TouchableOpacity
+          key={index}
+          style={styles.radioContainer}
+          onPress={() => {
+            setChecked(option.key);
+            onPress && onPress(option);
+          }}
+        >
+          <View style={styles.radioCon}>
+            <View
+              style={{
+                ...styles.outerCircle,
+                borderColor: theme.colors.primary,
+              }}
+            >
+              {checked === option.key && (
+                <View
+                  style={{
+                    ...styles.innerCircle,
+                    backgroundColor: theme.colors.primary,
+                  }}
+                />
+              )}
+            </View>
+          </View>
+          <View style={styles.text}>
+            <Text style={{ ...styles.label, color: theme.colors.primary }}>
+              {option.text}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    minWidth: 80,
+    gap: 2,
+  },
+  radioContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    width: "100%",
+    height: 40,
+  },
+  radioCon: {
+    display: "flex",
+    flexDirection: "column",
+    width: 20,
+    height: 40,
+    justifyContent: "center",
+    marginRight: 8,
+  },
+  text: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    flexGrow: 1,
+    height: 40,
+  },
+  outerCircle: {
+    height: 20,
+    width: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
+  innerCircle: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "400",
+  },
+});
+
+export default withTheme(RadioButton);