@beppla/tapas-ui 1.4.14 → 1.4.15

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);

package/components/ReasonModal/ReasonModal.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { View, Text, Modal, ViewProps } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasButton from "../Button/Button";
+import TapasRadioButton from "../RadioButton/RadioButton";
+
+export interface ReasonOption {
+  key: string;
+  text: string;
+}
+
+export interface ReasonModalProps extends ViewProps {
+  /** 是否显示模态框 */
+  visible?: boolean;
+  /** 模态框标题 */
+  title?: string;
+  /** 副标题或说明文字 */
+  subtitle?: string;
+  /** 可选择的原因选项 */
+  options: ReasonOption[];
+  /** 当前选中的原因key */
+  selectedReason?: string;
+  /** 确认按钮文字 */
+  confirmText?: string;
+  /** 取消按钮文字 */
+  cancelText?: string;
+  /** 模态框宽度 */
+  width?: number;
+  /** 是否禁用确认按钮（当没有选择时） */
+  disableConfirmWhenEmpty?: boolean;
+  /** 关闭模态框的回调 */
+  onClose?: () => void;
+  /** 确认选择的回调 */
+  onConfirm?: (reason: ReasonOption) => void;
+  /** 选择改变的回调 */
+  onSelectionChange?: (reason: ReasonOption | null) => void;
+  /** 模态框请求关闭的回调（Android返回键等） */
+  onRequestClose?: () => void;
+}
+
+const TapasReasonModal: React.FC<ReasonModalProps> = ({
+  visible = false,
+  title = "Select Reason",
+  subtitle,
+  options = [],
+  selectedReason,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  width = 480,
+  disableConfirmWhenEmpty = true,
+  onClose,
+  onConfirm,
+  onSelectionChange,
+  onRequestClose,
+  style,
+  ...otherProps
+}) => {
+  const styles = useStyles();
+  const [localSelectedReason, setLocalSelectedReason] = useState<string>("");
+
+  // 同步外部选中状态
+  useEffect(() => {
+    setLocalSelectedReason(selectedReason || "");
+  }, [selectedReason]);
+
+  // 重置选择当模态框显示/隐藏时
+  useEffect(() => {
+    if (visible) {
+      setLocalSelectedReason(selectedReason || "");
+    } else {
+      setLocalSelectedReason("");
+    }
+  }, [visible, selectedReason]);
+
+  // 处理选择改变
+  const handleSelectionChange = useCallback((option: ReasonOption) => {
+    setLocalSelectedReason(option.key);
+    onSelectionChange?.(option);
+  }, [onSelectionChange]);
+
+  // 处理关闭
+  const handleClose = useCallback(() => {
+    setLocalSelectedReason("");
+    onClose?.();
+  }, [onClose]);
+
+  // 处理确认
+  const handleConfirm = useCallback(() => {
+    const selectedOption = options.find(option => option.key === localSelectedReason);
+    if (selectedOption) {
+      onConfirm?.(selectedOption);
+    }
+  }, [localSelectedReason, options, onConfirm]);
+
+  // 处理模态框请求关闭
+  const handleRequestClose = useCallback(() => {
+    if (onRequestClose) {
+      onRequestClose();
+    } else {
+      handleClose();
+    }
+  }, [onRequestClose, handleClose]);
+
+  // 计算是否应该禁用确认按钮
+  const isConfirmDisabled = useMemo(() => {
+    return disableConfirmWhenEmpty && !localSelectedReason;
+  }, [disableConfirmWhenEmpty, localSelectedReason]);
+
+
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={handleRequestClose}
+      {...otherProps}
+    >
+      <View style={[styles.modalContainer, style]}>
+        <View style={[styles.modalContent, { width }]}>
+          {/* 标题区域 */}
+          <View style={styles.titleContainer}>
+            <Text style={styles.title}>{title}</Text>
+            {subtitle && (
+              <Text style={styles.subtitle}>{subtitle}</Text>
+            )}
+          </View>
+
+          {/* 选项区域 */}
+          <View style={styles.optionsContainer}>
+            <TapasRadioButton
+              options={options}
+              selected={localSelectedReason}
+              onPress={handleSelectionChange}
+            />
+          </View>
+
+          {/* 按钮区域 */}
+          <View style={styles.buttonsContainer}>
+            <TapasButton
+              title={cancelText}
+              type="clear"
+              onPress={handleClose}
+              style={styles.cancelButton}
+            />
+            <TapasButton
+              title={confirmText}
+              type="solid"
+              disabled={isConfirmDisabled}
+              onPress={handleConfirm}
+              style={styles.confirmButton}
+            />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  modalContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    zIndex: 10,
+  },
+  modalContent: {
+    borderRadius: theme?.radius?.rounded || 12,
+    backgroundColor: theme?.colors?.white || '#ffffff',
+    boxShadow: "0px 12px 40px 0px rgba(0, 0, 0, 0.14), 0px 24px 56px 0px rgba(0, 0, 0, 0.10)",
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "80%",
+    minWidth: 320,
+    maxWidth: "90%",
+  },
+  titleContainer: {
+    padding: theme?.spacing?.tpRg || 16,
+    paddingBottom: theme?.spacing?.tpXs || 8,
+    borderBottomWidth: 1,
+    borderBottomColor: theme?.colors?.grey4 || '#e0e0e0',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: theme?.fonts?.weightL || "600",
+    color: theme?.colors?.primary || '#007AFF',
+    lineHeight: 24,
+  },
+  subtitle: {
+    marginTop: theme?.spacing?.tp2xs || 4,
+    fontSize: 14,
+    color: theme?.colors?.colorTextSecondary || theme?.colors?.grey1 || '#666666',
+    lineHeight: 20,
+  },
+  optionsContainer: {
+    flex: 1,
+    padding: theme?.spacing?.tpRg || 16,
+    minHeight: 100,
+    maxHeight: 400,
+  },
+  buttonsContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    padding: theme?.spacing?.tpRg || 16,
+    paddingTop: theme?.spacing?.tpXs || 8,
+    borderTopWidth: 1,
+    borderTopColor: theme?.colors?.grey4 || '#e0e0e0',
+    gap: 12,
+  },
+  cancelButton: {
+    minWidth: 80,
+  },
+  confirmButton: {
+    minWidth: 80,
+  },
+}));
+
+export default withTheme(TapasReasonModal);
+
+// Export aliases for compatibility
+export const ReasonModal = withTheme(TapasReasonModal);
+export { TapasReasonModal };

package/components/ReasonModal/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './ReasonModal';
+export type { ReasonModalProps, ReasonOption } from './ReasonModal';
+export { ReasonModal, TapasReasonModal } from './ReasonModal';

package/components/ScanButton/ScanButton.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { View, Text, Pressable } from "react-native";
+import { withTheme, makeStyles, useTheme } from "@rneui/themed";
+import TapasIcon from "../Icons/TapasIcon";
+
+export interface ScanButtonProps {
+  onPress?: () => void;
+  text?: string;
+  icon?: string;
+  size?: number;
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
+  backgroundColor?: string;
+  textColor?: string;
+  iconColor?: string;
+  testID?: string;
+}
+
+const ScanButton: React.FC<ScanButtonProps> = ({ 
+  onPress,
+  text = "Scan QR Code",
+  icon = "qr_code_scan",
+  size = 20,
+  position = 'bottom-right',
+  backgroundColor,
+  textColor,
+  iconColor,
+  testID,
+}) => {
+  const theme = useTheme();
+  const styles = useStyles({ position });
+  
+  return (
+    <View style={styles.scanWrapper} testID={testID}>
+      <View style={styles.barCon}>
+        <Pressable
+          style={[
+            styles.scanBtn,
+            backgroundColor ? { backgroundColor } : null
+          ]}
+          onPress={() => {
+            onPress && onPress();
+          }}
+        >
+          <TapasIcon
+            style={styles.scanIcon}
+            name={icon}
+            size={size}
+            color={iconColor || theme.theme.colors.white}
+          />
+          <Text
+            style={[
+              styles.scanText,
+              textColor ? { color: textColor } : null
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {text}
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const useStyles = makeStyles((theme, props?: { position?: string }) => {
+  const { position = 'bottom-right' } = props || {};
+  
+  let positionStyle: any = {
+    bottom: 24,
+    right: 24,
+  };
+
+  switch (position) {
+    case 'bottom-left':
+      positionStyle = { bottom: 24, left: 24 };
+      break;
+    case 'top-right':
+      positionStyle = { top: 24, right: 24 };
+      break;
+    case 'top-left':
+      positionStyle = { top: 24, left: 24 };
+      break;
+    case 'center':
+      positionStyle = { 
+        top: '50%', 
+        left: '50%',
+        marginTop: -20,
+        marginLeft: -50,
+      };
+      break;
+  }
+
+  return {
+    scanWrapper: {
+      display: "flex",
+      position: "absolute",
+      flexDirection: "column",
+      height: 40,
+      justifyContent: "flex-end",
+      ...positionStyle,
+    },
+    barCon: {
+      height: 40,
+      flex: 1,
+      maxHeight: 40,
+      display: "flex",
+      flexDirection: "row",
+      zIndex: 20,
+    },
+    scanBtn: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      alignContent: "center",
+      height: 40,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderRadius: 20,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 16,
+      elevation: 8,
+      backgroundColor: theme.colors.primary,
+    },
+    scanIcon: {
+      display: "flex",
+      marginRight: 8,
+    },
+    scanText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: theme.colors.white,
+    }
+  };
+});
+
+export default withTheme(ScanButton);