@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/ReasonModal/ReasonModal.tsx

@@ -1,225 +0,0 @@
-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,
-  testID,
-  ...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}
-      testID={testID}
-      {...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

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

package/components/ScanButton/ScanButton.tsx

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