@beppla/tapas-ui 1.5.9 → 1.5.11

package/package/module/ReasonModal/ReasonModal.js

@@ -0,0 +1,188 @@
+"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,
+  testID,
+  ...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,
+    testID: testID,
+    ...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","testID","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` 内使用

package/package/module/SearchInput/README.md

@@ -0,0 +1,304 @@
+# TapasSearchInput
+
+一个专门用于搜索的输入组件，内置搜索图标和优化的样式，支持多种回调接口。
+
+## 功能特性
+
+- ✅ 内置搜索图标，点击触发搜索
+- ✅ 支持实时搜索回调
+- ✅ 可自定义尺寸和样式
+- ✅ 圆角设计，适合搜索场景
+- ✅ 支持双回调接口（`onSearch` 和 `attachSearch`）
+- ✅ 向后兼容客户端项目的接口
+- ✅ 支持搜索结果列表显示
+- ✅ 支持搜索历史记录
+- ✅ 支持加载状态显示
+- ✅ 支持自定义占位符（激活/未激活状态）
+- ✅ 支持自定义结果项渲染
+
+## 安装使用
+
+```tsx
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+// 基础用法
+<TapasSearchInput 
+  placeholder="搜索..."
+  onSearch={(text) => console.log('搜索:', text)}
+/>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `placeholder` | `string` | - | 占位符文本（当未设置 activePlaceholder/inactivePlaceholder 时使用） |
+| `activePlaceholder` | `string` | - | 搜索激活时的占位符 |
+| `inactivePlaceholder` | `string` | - | 搜索未激活时的占位符 |
+| `value` | `string` | - | 输入框的值 |
+| `width` | `number` | `168` | 组件宽度 |
+| `height` | `number` | `40` | 组件高度 |
+| `onSearch` | `(keyword: string) => void` | - | 搜索回调函数（关键词变化时触发） |
+| `attachSearch` | `(val?: string) => void` | - | 搜索回调函数（兼容客户端接口） |
+| `onSelectResult` | `(item: any) => void` | - | 选择搜索结果时的回调 |
+| `onSelectHistory` | `(historyEntry: SearchHistoryEntry) => void` | - | 选择搜索历史时的回调 |
+| `renderResultItem` | `(item: any, index: number, isHistory: boolean) => React.ReactNode` | - | 自定义搜索结果项渲染函数 |
+| `searchResults` | `any[]` | `[]` | 搜索结果数据数组 |
+| `isLoading` | `boolean` | `false` | 搜索加载状态 |
+| `style` | `ViewStyle` | - | 自定义样式 |
+
+## 使用示例
+
+### 基础搜索
+
+```tsx
+import React, { useState } from 'react';
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+const SearchDemo = () => {
+  const [results, setResults] = useState('');
+
+  return (
+    <TapasSearchInput
+      placeholder="输入搜索关键词"
+      onSearch={(text) => {
+        setResults(`搜索结果: ${text}`);
+      }}
+    />
+  );
+};
+```
+
+### 使用 attachSearch（兼容客户端接口）
+
+```tsx
+import React from 'react';
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+const ClientCompatibleSearch = () => {
+  return (
+    <TapasSearchInput
+      placeholder="搜索..."
+      attachSearch={(text) => {
+        // 兼容客户端项目的 attachSearch 接口
+        console.log('客户端搜索:', text);
+      }}
+    />
+  );
+};
+```
+
+### 双回调模式
+
+```tsx
+import React from 'react';
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+const DualCallbackSearch = () => {
+  return (
+    <TapasSearchInput
+      placeholder="搜索..."
+      onSearch={(text) => {
+        console.log('onSearch 触发:', text);
+      }}
+      attachSearch={(text) => {
+        console.log('attachSearch 触发:', text);
+      }}
+    />
+  );
+};
+```
+
+### 自定义尺寸
+
+```tsx
+import React from 'react';
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+const CustomSizeSearch = () => {
+  return (
+    <TapasSearchInput
+      placeholder="大尺寸搜索框"
+      width={300}
+      height={48}
+      onSearch={(text) => console.log('搜索:', text)}
+    />
+  );
+};
+```
+
+### 搜索结果列表
+
+```tsx
+import React, { useState } from 'react';
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+const SearchWithResults = () => {
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleSearch = (keyword) => {
+    setLoading(true);
+    // 模拟搜索
+    setTimeout(() => {
+      setResults([
+        { id: 1, name: `结果 1: ${keyword}` },
+        { id: 2, name: `结果 2: ${keyword}` },
+      ]);
+      setLoading(false);
+    }, 500);
+  };
+
+  return (
+    <TapasSearchInput
+      placeholder="搜索..."
+      onSearch={handleSearch}
+      searchResults={results}
+      isLoading={loading}
+      onSelectResult={(item) => {
+        console.log('选择了结果:', item);
+      }}
+    />
+  );
+};
+```
+
+### 搜索历史记录
+
+```tsx
+import React, { useState } from 'react';
+import { TapasSearchInput, SearchHistoryEntry } from '@beppla/tapas-ui';
+
+const SearchWithHistory = () => {
+  const [history, setHistory] = useState<SearchHistoryEntry[]>([
+    { id: 1, keyword: 'React Native', timestamp: Date.now() },
+    { id: 2, keyword: 'TypeScript', timestamp: Date.now() },
+  ]);
+
+  return (
+    <TapasSearchInput
+      placeholder="搜索..."
+      searchResults={history}
+      onSelectHistory={(entry) => {
+        console.log('选择了历史:', entry.keyword);
+      }}
+    />
+  );
+};
+```
+
+### 自定义占位符
+
+```tsx
+import React from 'react';
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+const CustomPlaceholder = () => {
+  return (
+    <TapasSearchInput
+      activePlaceholder="正在搜索..."
+      inactivePlaceholder="请输入关键词"
+      onSearch={(keyword) => console.log('搜索:', keyword)}
+    />
+  );
+};
+```
+
+### 自定义结果项渲染
+
+```tsx
+import React from 'react';
+import { TapasSearchInput, View, Text } from '@beppla/tapas-ui';
+
+const CustomRender = () => {
+  const results = [
+    { id: 1, title: '结果 1', description: '这是结果 1 的描述' },
+    { id: 2, title: '结果 2', description: '这是结果 2 的描述' },
+  ];
+
+  return (
+    <TapasSearchInput
+      placeholder="搜索..."
+      searchResults={results}
+      renderResultItem={(item, index, isHistory) => (
+        <View style={{ padding: 16, borderBottomWidth: 1 }}>
+          <Text style={{ fontWeight: 'bold' }}>{item.title}</Text>
+          <Text style={{ color: '#666', marginTop: 4 }}>{item.description}</Text>
+        </View>
+      )}
+    />
+  );
+};
+```
+
+## 向后兼容
+
+为了确保向后兼容，组件同时导出了以下别名：
+
+```tsx
+// 新的推荐用法
+import { TapasSearchInput } from '@beppla/tapas-ui';
+
+// 向后兼容的用法
+import { SearchInput } from '@beppla/tapas-ui';
+```
+
+## 样式定制
+
+组件使用 `makeStyles` 创建样式，可以通过传入 `style` 属性来覆盖默认样式：
+
+```tsx
+<TapasSearchInput
+  style={{ margin: 10 }}
+  placeholder="自定义样式搜索框"
+  onSearch={handleSearch}
+/>
+```
+
+## 类型定义
+
+```tsx
+/**
+ * 搜索历史记录项类型
+ */
+export interface SearchHistoryEntry {
+  id?: string | number;
+  keyword: string;
+  timestamp?: number;
+  [key: string]: any;
+}
+
+export interface SearchInputProps extends ViewProps {
+  placeholder?: string;
+  activePlaceholder?: string;  // 搜索激活时的占位符
+  inactivePlaceholder?: string;  // 搜索未激活时的占位符
+  value?: string;
+  height?: number;
+  width?: number;
+  onSearch?: (keyword: string) => void;  // 搜索回调（必需 keyword 参数）
+  attachSearch?: (val?: string) => void;  // 兼容旧接口
+  onSelectResult?: (item: any) => void;  // 选择结果回调
+  onSelectHistory?: (historyEntry: SearchHistoryEntry) => void;  // 选择历史回调
+  renderResultItem?: (item: any, index: number, isHistory: boolean) => React.ReactNode;  // 自定义渲染
+  searchResults?: any[];  // 搜索结果数据
+  isLoading?: boolean;  // 加载状态
+}
+```
+
+## 使用场景
+
+- 页面顶部搜索栏
+- 列表过滤搜索
+- 数据查找输入框
+- 客户端项目迁移（使用 `attachSearch` 接口）
+
+## 注意事项
+
+1. 当同时提供 `onSearch` 和 `attachSearch` 时，两个回调都会被触发
+2. 组件会自动处理搜索图标的点击事件
+3. 输入框的实际宽度会比设置的 `width` 小 56px（为搜索图标留空间）
+4. 组件支持 React Native 和 React Native Web 环境
+5. `onSearch` 回调的参数类型已更新为 `(keyword: string)`，不再支持可选参数（向后兼容通过 `attachSearch` 保持）
+6. 搜索结果列表会在输入框获得焦点且有搜索结果时自动显示
+7. 移动端使用 Modal 显示结果列表，桌面端使用绝对定位
+8. 历史记录项需要包含 `keyword` 字段才会被识别为历史记录