@beppla/tapas-ui 1.5.10 → 1.5.11

package/package/module/Navigation/Navigation.js

@@ -0,0 +1,213 @@
+"use strict";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { View, TouchableOpacity, Text, StyleSheet, Platform } from "react-native";
+import { Image, withTheme, makeStyles } from "@rneui/themed";
+import Icon from "../Icons/TapasIcon";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export let NavItemType = /*#__PURE__*/function (NavItemType) {
+  NavItemType["Nav"] = "nav";
+  NavItemType["System"] = "system";
+  return NavItemType;
+}({});
+const useStyles = makeStyles(theme => {
+  return {
+    menuContainer: {
+      backgroundColor: theme?.colors?.bg1,
+      display: "flex",
+      height: "100%",
+      overflow: "hidden"
+    },
+    navItem: {
+      flexDirection: "row",
+      alignItems: "center",
+      height: 40,
+      marginBottom: theme?.spacing?.tpSm,
+      borderRadius: theme?.radius?.full,
+      minWidth: 40,
+      minHeight: 40,
+      maxHeight: 40,
+      width: 40
+    },
+    selectedNavItem: {
+      backgroundColor: theme?.colors?.secondary
+    },
+    iconContainer: {
+      borderRadius: theme?.radius?.full,
+      padding: 10
+    },
+    selectedIconContainer: {
+      backgroundColor: theme?.colors?.secondary
+    },
+    navItemText: {
+      fontFamily: theme?.fonts?.fontFamily,
+      color: theme?.colors?.white,
+      fontSize: theme.fonts.sizeM,
+      fontWeight: theme.fonts.weightM
+    },
+    logoContainer: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: 56,
+      backgroundColor: theme?.colors?.black
+    },
+    navItemsContainer: {
+      marginTop: 10,
+      padding: theme?.spacing?.tpXs
+    },
+    bottomContainer: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      borderTopWidth: 1,
+      borderTopColor: theme?.colors?.grey3,
+      padding: theme?.spacing?.tpXs
+    },
+    mask: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: "500%",
+      backgroundColor: "rgba(0,0,0,0.5)"
+    }
+  };
+});
+const defaultProps = {
+  expanded: false // 统一默认收起状态
+};
+const Navigation = ({
+  onLogoPress,
+  navItems,
+  systemItems,
+  logoImg,
+  expanded,
+  onItemPress,
+  defaultSelectedItem,
+  selectedIndex,
+  onMaskPress,
+  theme,
+  visible = true,
+  navigation,
+  testID,
+  ...props
+}) => {
+  const [isExpanded, setIsExpanded] = useState(expanded || defaultProps.expanded);
+  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);
+  const themeStyles = useStyles(props);
+  const handleToggle = useCallback(() => {
+    setIsExpanded(prev => !prev);
+    onLogoPress?.();
+  }, [onLogoPress]);
+  useEffect(() => {
+    if (typeof selectedIndex === "number" && navItems && navItems[selectedIndex]) {
+      setSelectedItem({
+        type: NavItemType.Nav,
+        selectedItemIndex: selectedIndex
+      });
+    } else {
+      setSelectedItem(undefined);
+    }
+  }, [selectedIndex, navItems]);
+  const handleItemPress = useCallback((selectedItemIndex, type) => {
+    setSelectedItem({
+      type,
+      selectedItemIndex
+    });
+    const item = type === NavItemType.Nav ? navItems?.[selectedItemIndex] : systemItems?.[selectedItemIndex];
+    if (item) {
+      onItemPress?.(item);
+      if (navigation && item.name) {
+        navigation.navigate(item.name, item.params);
+      }
+    }
+  }, [navItems, systemItems, onItemPress, navigation]);
+  return visible && /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: Platform.OS === "web" ? handleToggle : onMaskPress,
+      style: isExpanded && themeStyles.mask,
+      children: /*#__PURE__*/_jsx(View, {})
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.container, !isExpanded ? styles.smallContainer : styles.expendedContainer],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: themeStyles.menuContainer,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleToggle,
+          accessibilityRole: "button",
+          children: /*#__PURE__*/_jsx(View, {
+            style: themeStyles.logoContainer,
+            children: /*#__PURE__*/_jsx(Image, {
+              source: logoImg,
+              style: {
+                width: 48,
+                height: 48
+              }
+            })
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [themeStyles.navItemsContainer],
+          children: navItems?.map((item, index) => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            testID: item.testID,
+            accessibilityLabel: item.testID || item.name,
+            onPress: () => handleItemPress(index, NavItemType.Nav),
+            style: [themeStyles.navItem, !isExpanded && styles.smallMenusItemContainer, selectedItem?.selectedItemIndex === index && selectedItem?.type === NavItemType.Nav && isExpanded && themeStyles.selectedNavItem],
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [themeStyles.iconContainer, !isExpanded && selectedItem?.selectedItemIndex === index && selectedItem?.type === NavItemType.Nav && themeStyles.selectedIconContainer],
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: item.iconName,
+                size: 20,
+                color: theme?.colors?.white
+              })
+            }), isExpanded && /*#__PURE__*/_jsx(Text, {
+              style: [themeStyles.navItemText, selectedItem?.selectedItemIndex === index && selectedItem?.type === NavItemType.Nav && styles.selectedItemText],
+              children: item.name
+            })]
+          }, item.name))
+        }), /*#__PURE__*/_jsx(View, {
+          style: themeStyles.bottomContainer,
+          children: systemItems?.map((item, index) => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            testID: item.testID,
+            accessibilityLabel: item.testID || item.name,
+            onPress: () => handleItemPress(index, NavItemType.System),
+            style: [themeStyles.navItem, !isExpanded && styles.smallMenusItemContainer, selectedItem?.selectedItemIndex === index && selectedItem?.type === NavItemType.System && isExpanded && themeStyles.selectedNavItem],
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [themeStyles.iconContainer, selectedItem?.selectedItemIndex === index && selectedItem?.type === NavItemType.System && !isExpanded && themeStyles.selectedIconContainer],
+              children: /*#__PURE__*/_jsx(Icon, {
+                name: item.iconName,
+                size: 20,
+                color: theme?.colors?.white
+              })
+            }), isExpanded && /*#__PURE__*/_jsx(Text, {
+              style: [themeStyles.navItemText, selectedItem?.selectedItemIndex === index && selectedItem?.type === NavItemType.System && styles.selectedItemText],
+              children: item.name
+            })]
+          }, item.name))
+        })]
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: "100%"
+  },
+  smallMenusItemContainer: {
+    marginLeft: 0
+  },
+  smallContainer: {
+    width: 56
+  },
+  expendedContainer: {
+    width: 336
+  },
+  selectedItemText: {
+    fontWeight: "bold"
+  }
+});
+export default withTheme(Navigation);
+//# sourceMappingURL=Navigation.js.map

package/package/module/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","useCallback","View","TouchableOpacity","Text","StyleSheet","Platform","Image","withTheme","makeStyles","Icon","jsx","_jsx","jsxs","_jsxs","NavItemType","useStyles","theme","menuContainer","backgroundColor","colors","bg1","display","height","overflow","navItem","flexDirection","alignItems","marginBottom","spacing","tpSm","borderRadius","radius","full","minWidth","minHeight","maxHeight","width","selectedNavItem","secondary","iconContainer","padding","selectedIconContainer","navItemText","fontFamily","fonts","color","white","fontSize","sizeM","fontWeight","weightM","logoContainer","justifyContent","black","navItemsContainer","marginTop","tpXs","bottomContainer","position","bottom","left","right","borderTopWidth","borderTopColor","grey3","mask","top","defaultProps","expanded","Navigation","onLogoPress","navItems","systemItems","logoImg","onItemPress","defaultSelectedItem","selectedIndex","onMaskPress","visible","navigation","testID","props","isExpanded","setIsExpanded","selectedItem","setSelectedItem","themeStyles","handleToggle","prev","type","Nav","selectedItemIndex","undefined","handleItemPress","item","name","navigate","params","style","styles","container","children","onPress","OS","smallContainer","expendedContainer","accessibilityRole","source","map","index","accessibilityLabel","smallMenusItemContainer","iconName","size","selectedItemText","System","create","marginLeft"],"sourceRoot":"../../../components","sources":["Navigation/Navigation.tsx"],"mappings":"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","ignoreList":[]}

package/package/module/Navigation/README.md

@@ -0,0 +1,197 @@
+# Navigation
+
+侧边导航栏组件，提供可展开/折叠的垂直导航菜单。支持导航项（navItems）和系统项（systemItems）两层分组，收起时仅显示图标，展开时显示图标和文本。
+
+## 功能特性
+
+- 可展开/折叠的侧边导航（收起 56px，展开 336px）
+- 导航项和系统项两层分组（系统项固定在底部）
+- 点击 Logo 切换展开/折叠状态
+- 选中项高亮显示（展开时背景高亮，收起时图标高亮）
+- 移动端支持背景遮罩层（点击遮罩关闭导航）
+- 可配置权限信息（`permissions` 字段）
+- 支持 `selectedIndex` 受控选中
+- 可选集成 React Navigation 自动路由导航
+- 自定义 Logo 图片
+
+## 安装使用
+
+```tsx
+import { Navigation, NavItem, NavItemType, SelectedItem } from '@beppla/tapas-ui';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| navItems | `NavItem[]` | - | 导航项数组 |
+| systemItems | `NavItem[]` | - | 系统项数组（显示在底部） |
+| logoImg | `ImageSourcePropType` | - | Logo 图片资源 |
+| expanded | `boolean` | `false` | 是否展开导航菜单 |
+| onItemPress | `(item: NavItem) => void` | - | 导航项点击回调 |
+| onLogoPress | `() => void` | - | Logo 点击回调 |
+| defaultSelectedItem | `SelectedItem` | - | 默认选中项 |
+| selectedIndex | `number` | - | 选中项索引（受控模式，仅匹配 navItems） |
+| visible | `boolean` | `true` | 导航栏是否可见 |
+| onMaskPress | `() => void` | - | 背景遮罩点击回调（移动端） |
+| navigation | `{ navigate: (routeName: string, params?: any) => void }` | - | React Navigation 对象（可选） |
+
+## 类型定义
+
+### NavItem
+
+```tsx
+interface NavItem {
+  name: string;              // 项目名称（展开时显示）
+  iconName: string;          // TapasIcon 图标名称
+  url?: string;              // 链接 URL（可选）
+  permissions?: Permissions[]; // 权限要求（可选）
+}
+```
+
+### Permissions
+
+```tsx
+interface Permissions {
+  resource: string;  // 资源名
+  action: string;    // 操作名
+}
+```
+
+### NavItemType / SelectedItem
+
+```tsx
+enum NavItemType {
+  Nav = 'nav',       // 导航项
+  System = 'system', // 系统项
+}
+
+interface SelectedItem {
+  type: NavItemType;         // 项目类型
+  selectedItemIndex: number; // 项目索引
+}
+```
+
+## 使用示例
+
+### 基础导航
+
+```tsx
+import { Navigation, NavItem, NavItemType } from '@beppla/tapas-ui';
+
+const navItems: NavItem[] = [
+  { name: 'Dashboard', iconName: 'home' },
+  { name: 'Analytics', iconName: 'vector' },
+  { name: 'Products', iconName: 'product_items' },
+  { name: 'Messages', iconName: 'chat' },
+];
+
+const systemItems: NavItem[] = [
+  { name: 'Settings', iconName: 'settings' },
+  { name: 'Refresh', iconName: 'refresh' },
+];
+
+export default function App() {
+  return (
+    <Navigation
+      navItems={navItems}
+      systemItems={systemItems}
+      logoImg={require('./logo.png')}
+      defaultSelectedItem={{
+        type: NavItemType.Nav,
+        selectedItemIndex: 0,
+      }}
+    />
+  );
+}
+```
+
+### 带点击回调
+
+```tsx
+<Navigation
+  navItems={navItems}
+  systemItems={systemItems}
+  logoImg={require('./logo.png')}
+  onItemPress={(item) => {
+    console.log('Selected:', item.name);
+    setCurrentPage(item.name);
+  }}
+/>
+```
+
+### 受控选中索引
+
+```tsx
+const [selectedIdx, setSelectedIdx] = useState(0);
+
+<Navigation
+  navItems={navItems}
+  systemItems={systemItems}
+  logoImg={require('./logo.png')}
+  selectedIndex={selectedIdx}
+  onItemPress={(item) => {
+    const idx = navItems.findIndex(n => n.name === item.name);
+    if (idx >= 0) setSelectedIdx(idx);
+  }}
+/>
+```
+
+### 与 React Navigation 集成
+
+```tsx
+import { useNavigation } from '@react-navigation/native';
+
+const navigation = useNavigation();
+
+<Navigation
+  navItems={[
+    { name: 'Home', iconName: 'home' },
+    { name: 'Details', iconName: 'info' },
+  ]}
+  logoImg={require('./logo.png')}
+  navigation={navigation}
+/>
+```
+
+### 完整布局示例
+
+```tsx
+import { View, Text } from 'react-native';
+import { Navigation, NavItem } from '@beppla/tapas-ui';
+import { useState } from 'react';
+
+const navItems: NavItem[] = [
+  { name: 'Dashboard', iconName: 'home' },
+  { name: 'Products', iconName: 'product_items' },
+  { name: 'Orders', iconName: 'manufacturing' },
+];
+
+export default function App() {
+  const [page, setPage] = useState('Dashboard');
+
+  return (
+    <View style={{ flexDirection: 'row', height: '100%' }}>
+      <Navigation
+        navItems={navItems}
+        logoImg={require('./logo.png')}
+        onItemPress={(item) => setPage(item.name)}
+      />
+      <View style={{ flex: 1, padding: 16 }}>
+        <Text>{page} Content</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+## 注意事项
+
+- 导航栏默认收起状态（宽度 56px），点击 Logo 切换展开（336px）/折叠
+- 桌面端点击 Logo 触发 `onLogoPress` 并切换展开状态；移动端点击 Logo 触发 `onMaskPress`
+- 展开时会在导航栏外显示半透明遮罩层（`rgba(0,0,0,0.5)`），点击遮罩可关闭
+- `selectedIndex` 仅匹配 `navItems` 数组，不支持直接选中 `systemItems`
+- 设置 `navigation` 属性后，点击导航项会自动调用 `navigation.navigate(item.name)`
+- 导航项图标大小固定 20px，颜色为主题 `white`
+- 选中状态：展开时背景高亮（`secondary` 色），收起时图标容器高亮
+- `visible=false` 时整个导航栏不渲染

package/package/module/Notification/README.md

@@ -0,0 +1,158 @@
+# TapasNotification
+
+A side notification panel component with expand/collapse animation and item selection functionality.
+
+## Features
+
+- **Expandable Side Panel**: Smooth expand/collapse animation
+- **Notification List**: Display multiple notification items with icons
+- **Item Selection**: Highlight selected items with visual feedback
+- **Customizable**: Configurable title, empty state, and animations
+- **Responsive**: Adapts to different screen sizes and orientations
+
+## Usage
+
+```tsx
+import { TapasNotification, NotificationItem } from '@beppla/tapas-ui';
+
+const notifications: NotificationItem[] = [
+  { id: 1, title: 'System Update Available', icon: 'system_update' },
+  { id: 2, title: 'New Message from John', icon: 'message' },
+];
+
+const MyComponent = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<number | string>();
+
+  const handleSelectItem = (item: NotificationItem) => {
+    setSelectedItem(item.id);
+    console.log('Selected:', item);
+  };
+
+  return (
+    <TapasNotification
+      open={open}
+      title="Notifications"
+      items={notifications}
+      selectedItem={selectedItem}
+      onSelectItem={handleSelectItem}
+      onHeaderButtonPress={() => setOpen(!open)}
+    />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Controls whether the notification panel is expanded |
+| `title` | `string` | `'Notification'` | The title displayed in the header |
+| `emptyText` | `string` | `'No Data'` | Text displayed when there are no notification items |
+| `headerTitleStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the header title |
+| `hideHeaderButton` | `boolean` | `false` | Whether to hide the header action button |
+| `items` | `NotificationItem[]` | `[]` | Array of notification items to display |
+| `selectedItem` | `number \| string` | `undefined` | ID of the currently selected item |
+| `onSelectItem` | `(item: NotificationItem) => void` | `undefined` | Callback when an item is selected |
+| `onHeaderButtonPress` | `() => void` | `undefined` | Callback when header button is pressed |
+| `animationDuration` | `number` | `500` | Duration of expand/collapse animation in milliseconds |
+| `expandedWidth` | `number` | `288` | Width of the expanded notification panel |
+
+## NotificationItem Interface
+
+```tsx
+interface NotificationItem {
+  id: number | string;        // Unique identifier
+  title: string;              // Display text
+  icon?: string;              // Optional icon name
+  [key: string]: any;         // Additional custom properties
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```tsx
+<TapasNotification
+  open={true}
+  title="System Alerts"
+  items={[
+    { id: 1, title: 'Server Maintenance', icon: 'warning' },
+    { id: 2, title: 'Backup Complete', icon: 'check_circle' }
+  ]}
+/>
+```
+
+### With Selection
+
+```tsx
+<TapasNotification
+  open={true}
+  title="Messages"
+  items={messages}
+  selectedItem={selectedMessageId}
+  onSelectItem={handleMessageSelect}
+/>
+```
+
+### Custom Styling
+
+```tsx
+<TapasNotification
+  open={true}
+  title="Custom Title"
+  headerTitleStyle={{ color: '#FF6B6B', fontSize: 18 }}
+  style={{ backgroundColor: '#2C3E50' }}
+/>
+```
+
+### Hidden Header Button
+
+```tsx
+<TapasNotification
+  open={true}
+  title="Read Only"
+  hideHeaderButton={true}
+  items={notifications}
+/>
+```
+
+### Custom Animation
+
+```tsx
+<TapasNotification
+  open={true}
+  animationDuration={300}
+  expandedWidth={400}
+  items={notifications}
+/>
+```
+
+## Styling
+
+The component uses the theme system for consistent styling. Key style properties include:
+
+- **Container**: Uses `theme.colors.colorSurface2` for background
+- **Header Title**: Uses `theme.colors.white` for text color
+- **Selected Row**: Uses `theme.colors.secondary` for background
+- **Empty State**: Uses `theme.colors.colorSurface11` for text color
+
+## Accessibility
+
+- Supports screen readers with proper text labels
+- Keyboard navigation support
+- High contrast mode compatible
+- Scalable text sizes
+
+## Browser Support
+
+- React Native Web compatible
+- Modern browser support (ES6+)
+- Responsive design for mobile and desktop
+
+## Dependencies
+
+- `react-native-gesture-handler` for ScrollView
+- `@rneui/themed` for theming and styling
+- React Native core components

package/package/module/NumericInput/README.md

@@ -0,0 +1,95 @@
+# NumericInput
+
+数字输入组件，包含加减按钮和文本输入框，适用于数量选择场景。
+
+## 功能特性
+
+- ✅ 加减按钮控制数值增减
+- ✅ 支持手动键盘输入数字
+- ✅ 可设置最大值和最小值限制
+- ✅ 到达边界时自动禁用对应按钮
+- ✅ 支持整体禁用状态
+- ✅ 加号按钮使用主题色填充背景
+- ✅ 支持 onReduce 和 onAdd 额外回调
+- ✅ 兼容 RN 0.77 Bridgeless 模式（Android 焦点管理修复）
+- ✅ 支持自定义输入框样式
+- ✅ 支持 testID 属性用于测试
+
+## 安装使用
+
+```tsx
+import NumericInput from '@beppla/tapas-ui/components/NumericInput/NumericInput';
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| value | `number` | - | 当前数值 |
+| max | `number` | - | 最大值 |
+| min | `number` | - | 最小值 |
+| onChange | `(value: number) => void` | - | 数值变化回调 |
+| onReduce | `() => void` | - | 减少按钮点击回调（在数值变化前触发） |
+| onAdd | `() => void` | - | 增加按钮点击回调（在数值变化前触发） |
+| disabled | `boolean` | - | 是否禁用整个组件 |
+| inputStyle | `StyleProp<ViewStyle>` | - | 输入框自定义样式 |
+| testID | `string` | - | 测试标识 |
+| enableBridgelessFix | `boolean` | `true` | 是否启用 RN 0.77 Bridgeless 模式兼容修复 |
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+<NumericInput
+  value={0}
+  min={0}
+  max={99}
+  onChange={(value) => console.log('数量:', value)}
+/>
+```
+
+### 设置范围
+
+```tsx
+<NumericInput
+  value={5}
+  min={1}
+  max={10}
+  onChange={(value) => setQuantity(value)}
+/>
+```
+
+### 禁用状态
+
+```tsx
+<NumericInput
+  value={3}
+  min={0}
+  max={99}
+  disabled
+  onChange={() => {}}
+/>
+```
+
+### 带额外回调
+
+```tsx
+<NumericInput
+  value={count}
+  min={0}
+  max={99}
+  onChange={(value) => setCount(value)}
+  onAdd={() => console.log('点击了增加')}
+  onReduce={() => console.log('点击了减少')}
+/>
+```
+
+## 注意事项
+
+- `onReduce` 和 `onAdd` 在按钮点击时立即触发，即使数值已到边界也会触发
+- `onChange` 只在数值实际变化时触发（边界处不触发）
+- 手动输入时，超过 `max` 的值会被忽略
+- 失焦时会触发 `onChange` 回调，Android 上有延迟处理以兼容 Bridgeless 模式
+- 组件最小宽度 136px，高度 40px
+- 如果 Android 上遇到焦点问题，可设置 `enableBridgelessFix={false}` 尝试