@beppla/tapas-ui 1.4.35 → 1.5.0

package/components/Progress/Progress.tsx

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

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

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

package/components/RadioButton/RadioButton.tsx

@@ -1,119 +0,0 @@
-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);