@beppla/tapas-ui 1.5.14 → 1.5.15

package/package/module/ReasonModal/README.md

@@ -0,0 +1,320 @@
+# TapasReasonModal
+
+一个用于选择原因的模态框组件，内置单选按钮组，适用于取消原因、退货原因、反馈类型等场景。
+
+## 功能特性
+
+- ✅ 内置单选按钮组，单选体验优化
+- ✅ 支持预选择和空选择状态控制
+- ✅ 可自定义模态框尺寸和按钮文案
+- ✅ 完整的回调事件支持
+- ✅ 响应式设计，适配不同屏幕尺寸
+- ✅ 支持长文本选项的良好显示
+- ✅ 向后兼容的导出别名
+
+## 安装使用
+
+```tsx
+import { TapasReasonModal } from '@beppla/tapas-ui';
+
+// 基础用法
+<TapasReasonModal
+  visible={isVisible}
+  title="选择取消原因"
+  options={reasonOptions}
+  onConfirm={(reason) => console.log('确认:', reason)}
+  onClose={() => setIsVisible(false)}
+/>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `visible` | `boolean` | `false` | 是否显示模态框 |
+| `title` | `string` | `"Select Reason"` | 模态框标题 |
+| `subtitle` | `string` | - | 副标题或说明文字 |
+| `options` | `ReasonOption[]` | `[]` | 可选择的原因选项数组 |
+| `selectedReason` | `string` | - | 当前选中的原因key |
+| `confirmText` | `string` | `"Confirm"` | 确认按钮文字 |
+| `cancelText` | `string` | `"Cancel"` | 取消按钮文字 |
+| `width` | `number` | `480` | 模态框宽度（像素） |
+| `disableConfirmWhenEmpty` | `boolean` | `true` | 没有选择时是否禁用确认按钮 |
+| `onClose` | `() => void` | - | 关闭模态框的回调 |
+| `onConfirm` | `(reason: ReasonOption) => void` | - | 确认选择的回调 |
+| `onSelectionChange` | `(reason: ReasonOption \| null) => void` | - | 选择改变的回调 |
+| `onRequestClose` | `() => void` | - | 模态框请求关闭的回调 |
+
+## ReasonOption 接口
+
+```tsx
+interface ReasonOption {
+  key: string;    // 唯一标识
+  text: string;   // 显示文本
+}
+```
+
+## 使用示例
+
+### 基础取消原因选择
+
+```tsx
+import React, { useState } from 'react';
+import { TapasReasonModal, ReasonOption } from '@beppla/tapas-ui';
+
+const CancelReasonDemo = () => {
+  const [visible, setVisible] = useState(false);
+  const [selectedReason, setSelectedReason] = useState<string>('');
+
+  const cancelReasons: ReasonOption[] = [
+    { key: '1', text: '商品质量问题' },
+    { key: '2', text: '订单信息错误' },
+    { key: '3', text: '改变主意了' },
+    { key: '4', text: '其他原因' },
+  ];
+
+  const handleConfirm = (reason: ReasonOption) => {
+    console.log('用户选择的取消原因:', reason);
+    // 处理取消逻辑
+    setVisible(false);
+  };
+
+  return (
+    <TapasReasonModal
+      visible={visible}
+      title="取消订单"
+      subtitle="请选择取消此订单的原因"
+      options={cancelReasons}
+      selectedReason={selectedReason}
+      confirmText="确认取消"
+      cancelText="保留订单"
+      onConfirm={handleConfirm}
+      onClose={() => setVisible(false)}
+      onSelectionChange={(reason) => setSelectedReason(reason?.key || '')}
+    />
+  );
+};
+```
+
+### 预选择状态
+
+```tsx
+import React, { useState } from 'react';
+import { TapasReasonModal } from '@beppla/tapas-ui';
+
+const PreselectedDemo = () => {
+  const [visible, setVisible] = useState(false);
+  // 预设选中第二个选项
+  const [selectedReason, setSelectedReason] = useState<string>('2');
+
+  return (
+    <TapasReasonModal
+      visible={visible}
+      title="修改选择"
+      subtitle="您可以修改之前的选择"
+      options={reasons}
+      selectedReason={selectedReason}
+      confirmText="更新"
+      cancelText="取消"
+      onConfirm={handleUpdate}
+      onClose={() => setVisible(false)}
+    />
+  );
+};
+```
+
+### 反馈类型选择
+
+```tsx
+import React from 'react';
+import { TapasReasonModal, ReasonOption } from '@beppla/tapas-ui';
+
+const FeedbackDemo = () => {
+  const feedbackTypes: ReasonOption[] = [
+    { key: 'bug', text: '发现了Bug' },
+    { key: 'feature', text: '功能建议' },
+    { key: 'improvement', text: '改进建议' },
+    { key: 'complaint', text: '投诉问题' },
+    { key: 'praise', text: '表扬赞赏' },
+  ];
+
+  return (
+    <TapasReasonModal
+      title="反馈类型"
+      subtitle="请选择您要提供的反馈类型"
+      options={feedbackTypes}
+      confirmText="继续"
+      cancelText="取消"
+      disableConfirmWhenEmpty={false} // 允许不选择
+      width={400}
+      onConfirm={(reason) => {
+        // 跳转到对应的反馈页面
+        navigateToFeedbackPage(reason.key);
+      }}
+    />
+  );
+};
+```
+
+### 退货原因选择
+
+```tsx
+import React from 'react';
+import { TapasReasonModal, ReasonOption } from '@beppla/tapas-ui';
+
+const ReturnReasonDemo = () => {
+  const returnReasons: ReasonOption[] = [
+    { key: 'defective', text: '商品有缺陷或损坏' },
+    { key: 'not-as-described', text: '与描述不符' },
+    { key: 'wrong-size', text: '尺寸不合适' },
+    { key: 'damaged-shipping', text: '运输过程中损坏' },
+    { key: 'not-needed', text: '不再需要' },
+  ];
+
+  return (
+    <TapasReasonModal
+      title="申请退货"
+      subtitle="请说明您申请退货的原因"
+      options={returnReasons}
+      confirmText="提交申请"
+      cancelText="取消"
+      width={500}
+      onConfirm={(reason) => {
+        // 提交退货申请
+        submitReturnRequest(reason);
+      }}
+    />
+  );
+};
+```
+
+### 紧凑尺寸选择
+
+```tsx
+import React from 'react';
+import { TapasReasonModal, ReasonOption } from '@beppla/tapas-ui';
+
+const CompactDemo = () => {
+  const options: ReasonOption[] = [
+    { key: 'yes', text: '是' },
+    { key: 'no', text: '否' },
+    { key: 'maybe', text: '稍后再说' },
+  ];
+
+  return (
+    <TapasReasonModal
+      title="确认操作"
+      options={options}
+      confirmText="确定"
+      cancelText="取消"
+      width={320} // 紧凑宽度
+      onConfirm={(reason) => {
+        handleConfirmation(reason.key);
+      }}
+    />
+  );
+};
+```
+
+## 回调事件详解
+
+### onSelectionChange
+当用户选择或取消选择某个选项时触发：
+
+```tsx
+<TapasReasonModal
+  onSelectionChange={(reason) => {
+    if (reason) {
+      console.log('用户选择了:', reason.text);
+      // 可以在这里实时更新UI或保存草稿
+    } else {
+      console.log('用户取消了选择');
+    }
+  }}
+/>
+```
+
+### onConfirm
+当用户点击确认按钮时触发：
+
+```tsx
+<TapasReasonModal
+  onConfirm={(reason) => {
+    console.log('确认选择:', reason);
+    // 执行最终的业务逻辑
+    processReason(reason);
+  }}
+/>
+```
+
+### onClose
+当用户点击取消按钮或其他方式关闭模态框时触发：
+
+```tsx
+<TapasReasonModal
+  onClose={() => {
+    console.log('模态框已关闭');
+    setModalVisible(false);
+  }}
+/>
+```
+
+### onRequestClose
+处理系统级的关闭请求（如Android返回键）：
+
+```tsx
+<TapasReasonModal
+  onRequestClose={() => {
+    console.log('系统请求关闭模态框');
+    // 可以在这里处理特殊的关闭逻辑
+    handleSystemClose();
+  }}
+/>
+```
+
+## 自定义样式
+
+组件支持通过 `style` 属性自定义容器样式：
+
+```tsx
+<TapasReasonModal
+  style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
+  width={600}
+  // 其他props...
+/>
+```
+
+## 向后兼容
+
+为了确保向后兼容，组件同时导出了以下别名：
+
+```tsx
+// 新的推荐用法
+import { TapasReasonModal } from '@beppla/tapas-ui';
+
+// 向后兼容的用法
+import { ReasonModal } from '@beppla/tapas-ui';
+```
+
+## 最佳实践
+
+1. **合理的选项数量**：建议选项数量控制在 3-8 个之间，过多选项考虑分页或搜索
+2. **清晰的文案**：选项文案应该简洁明确，避免歧义
+3. **合适的宽度**：根据文案长度调整模态框宽度，确保良好的阅读体验
+4. **一致的交互**：在应用中保持一致的确认/取消按钮文案和行为
+
+## 使用场景
+
+- 订单取消原因选择
+- 商品退货/退款原因
+- 用户反馈类型选择
+- 调查问卷单选题
+- 设置选项配置
+- 错误报告分类
+
+## 注意事项
+
+1. `options` 数组为空时，组件仍会正常渲染，但不会显示任何选项
+2. 当 `disableConfirmWhenEmpty` 为 `true` 时，未选择任何选项时确认按钮会被禁用
+3. 组件会在显示/隐藏时自动重置选择状态到 `selectedReason` 的值
+4. 支持 React Native 和 React Native Web 环境

package/package/module/ReasonModal/ReasonModal.js

@@ -0,0 +1,186 @@
+"use strict";
+
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { View, Text, Modal } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import TapasButton from "../Button/Button";
+import TapasRadioButton from "../RadioButton/RadioButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TapasReasonModal = ({
+  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("");
+
+  // 同步外部选中状态
+  useEffect(() => {
+    setLocalSelectedReason(selectedReason || "");
+  }, [selectedReason]);
+
+  // 重置选择当模态框显示/隐藏时
+  useEffect(() => {
+    if (visible) {
+      setLocalSelectedReason(selectedReason || "");
+    } else {
+      setLocalSelectedReason("");
+    }
+  }, [visible, selectedReason]);
+
+  // 处理选择改变
+  const handleSelectionChange = useCallback(option => {
+    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 /*#__PURE__*/_jsx(Modal, {
+    animationType: "fade",
+    transparent: true,
+    visible: visible,
+    onRequestClose: handleRequestClose,
+    ...otherProps,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.modalContainer, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.modalContent, {
+          width
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.titleContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: title
+          }), subtitle && /*#__PURE__*/_jsx(Text, {
+            style: styles.subtitle,
+            children: subtitle
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.optionsContainer,
+          children: /*#__PURE__*/_jsx(TapasRadioButton, {
+            options: options,
+            selected: localSelectedReason,
+            onPress: handleSelectionChange
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.buttonsContainer,
+          children: [/*#__PURE__*/_jsx(TapasButton, {
+            title: cancelText,
+            type: "clear",
+            onPress: handleClose,
+            style: styles.cancelButton
+          }), /*#__PURE__*/_jsx(TapasButton, {
+            title: confirmText,
+            type: "solid",
+            disabled: isConfirmDisabled,
+            onPress: handleConfirm,
+            style: styles.confirmButton
+          })]
+        })]
+      })
+    })
+  });
+};
+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 };
+//# sourceMappingURL=ReasonModal.js.map

package/package/module/ReasonModal/ReasonModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","useCallback","useMemo","View","Text","Modal","withTheme","makeStyles","TapasButton","TapasRadioButton","jsx","_jsx","jsxs","_jsxs","TapasReasonModal","visible","title","subtitle","options","selectedReason","confirmText","cancelText","width","disableConfirmWhenEmpty","onClose","onConfirm","onSelectionChange","onRequestClose","style","otherProps","styles","useStyles","localSelectedReason","setLocalSelectedReason","handleSelectionChange","option","key","handleClose","handleConfirm","selectedOption","find","handleRequestClose","isConfirmDisabled","animationType","transparent","children","modalContainer","modalContent","titleContainer","optionsContainer","selected","onPress","buttonsContainer","type","cancelButton","disabled","confirmButton","theme","flex","justifyContent","alignItems","backgroundColor","zIndex","borderRadius","radius","rounded","colors","white","boxShadow","display","flexDirection","maxHeight","minWidth","maxWidth","padding","spacing","tpRg","paddingBottom","tpXs","borderBottomWidth","borderBottomColor","grey4","fontSize","fontWeight","fonts","weightL","color","primary","lineHeight","marginTop","tp2xs","colorTextSecondary","grey1","minHeight","paddingTop","borderTopWidth","borderTopColor","gap","ReasonModal"],"sourceRoot":"../../../components","sources":["ReasonModal/ReasonModal.tsx"],"mappings":"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","ignoreList":[]}

package/package/module/ScanButton/README.md

@@ -0,0 +1,72 @@
+# ScanButton
+
+浮动扫描按钮组件，用于快速启动二维码扫描等功能。支持五个定位位置，可自定义文本、图标和颜色，以悬浮按钮形式固定在页面指定位置。
+
+## 功能特性
+
+- ✅ 五种定位位置：bottom-right / bottom-left / top-right / top-left / center
+- ✅ 自定义按钮文本
+- ✅ 自定义图标（TapasIcon 图标名）
+- ✅ 自定义图标大小
+- ✅ 自定义背景色、文字色、图标色
+- ✅ 悬浮定位（position: absolute）
+- ✅ 圆角胶囊按钮样式 + 阴影效果
+- ✅ 主题色适配
+
+## 安装使用
+
+```tsx
+import { ScanButton } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| onPress | `() => void` | - | 按钮点击回调 |
+| text | `string` | `'Scan QR Code'` | 按钮文本 |
+| icon | `string` | `'qr_code_scan'` | 图标名称 |
+| size | `number` | `20` | 图标大小 |
+| position | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' \| 'center'` | `'bottom-right'` | 按钮定位位置 |
+| backgroundColor | `string` | 主题 primary | 背景色 |
+| textColor | `string` | 主题 white | 文字颜色 |
+| iconColor | `string` | 主题 white | 图标颜色 |
+| testID | `string` | - | 测试标识 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<ScanButton onPress={() => navigation.navigate('Scanner')} />
+```
+
+### 左下角定位
+
+```tsx
+<ScanButton
+  position="bottom-left"
+  onPress={() => handleScan()}
+/>
+```
+
+### 自定义样式
+
+```tsx
+<ScanButton
+  text="Scan Barcode"
+  icon="barcode_scanner"
+  position="top-right"
+  backgroundColor="#895F38"
+  textColor="#FFF"
+  onPress={() => handleBarcodeScan()}
+/>
+```
+
+## 注意事项
+
+- 组件使用 `position: absolute` 定位，需要父容器具备定位上下文
+- 按钮固定高度 40px，圆角 20px（胶囊形状）
+- 文本超长会自动截断（numberOfLines=1, ellipsizeMode=tail）
+- `center` 位置通过负 margin 实现居中，可能需要根据内容宽度调整
+- 需在 `ThemeProvider` 内使用