@beppla/tapas-ui 1.5.14 → 1.5.15

package/package/module/Tab/TapasTab.js

@@ -0,0 +1,151 @@
+"use strict";
+
+/**
+ * TapasTab - Tab组件包装器
+ * 扩展@rneui Tab组件，支持根据内容宽度而非平分宽度
+ */
+import React from 'react';
+import { Tab as RNETab } from '@rneui/themed';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TapasTab组件
+ * 
+ * @example
+ * // 内容宽度模式 - 根据文本内容自适应宽度
+ * <TapasTab widthMode="content" value={index} onChange={setIndex}>
+ *   <TapasTab.Item title="短标签" />
+ *   <TapasTab.Item title="这是一个较长的标签" />
+ * </TapasTab>
+ * 
+ * // 内容宽度模式 - 带最小/最大宽度和内边距控制
+ * <TapasTab 
+ *   widthMode="content" 
+ *   minTabWidth={80}
+ *   maxTabWidth={200}
+ *   contentPadding={20}
+ *   value={index} 
+ *   onChange={setIndex}
+ * >
+ *   <TapasTab.Item title="Tab 1" />
+ *   <TapasTab.Item title="Tab 2" />
+ * </TapasTab>
+ * 
+ * // 平分宽度模式（默认）
+ * <TapasTab value={index} onChange={setIndex}>
+ *   <TapasTab.Item title="Tab 1" />
+ *   <TapasTab.Item title="Tab 2" />
+ * </TapasTab>
+ */
+export const TapasTab = ({
+  widthMode = 'fill',
+  minTabWidth,
+  maxTabWidth,
+  contentPadding = 16,
+  showDivider = true,
+  dividerColor = '#e0e0e0',
+  containerStyle,
+  buttonStyle,
+  titleStyle,
+  children,
+  ...props
+}) => {
+  // 根据widthMode调整按钮样式
+  const adjustedButtonStyle = React.useMemo(() => {
+    if (widthMode === 'content') {
+      const contentStyle = {
+        flexGrow: 0,
+        // 不自动增长
+        flexShrink: 0,
+        // 不自动收缩
+        paddingHorizontal: contentPadding
+      };
+      if (minTabWidth !== undefined) {
+        contentStyle.minWidth = minTabWidth;
+      }
+      if (maxTabWidth !== undefined) {
+        contentStyle.maxWidth = maxTabWidth;
+      }
+      return [buttonStyle, contentStyle];
+    }
+    return buttonStyle;
+  }, [widthMode, buttonStyle, minTabWidth, maxTabWidth, contentPadding]);
+
+  // 为 content 模式定制 titleStyle
+  const adjustedTitleStyle = React.useMemo(() => {
+    if (widthMode === 'content') {
+      // 使用类型断言来支持 Web 专有属性
+      const contentTitleStyle = {
+        whiteSpace: 'nowrap',
+        // Web: 防止文本换行
+        overflow: 'hidden',
+        // 隐藏溢出
+        textOverflow: 'ellipsis' // Web: 显示省略号
+      };
+      return [titleStyle, contentTitleStyle];
+    }
+    return titleStyle;
+  }, [widthMode, titleStyle]);
+
+  // 为 content 模式调整容器样式，确保填满父容器
+  const adjustedContainerStyle = React.useMemo(() => {
+    if (widthMode === 'content') {
+      const contentContainerStyle = {
+        width: '100%' // 填满父容器宽度
+      };
+      return [containerStyle, contentContainerStyle];
+    }
+    return containerStyle;
+  }, [widthMode, containerStyle]);
+
+  // 外层包裹容器样式（用于添加底部分隔线）
+  const wrapperStyle = React.useMemo(() => {
+    if (widthMode === 'content' && showDivider) {
+      const style = {
+        width: '100%',
+        borderBottomWidth: 1,
+        borderBottomColor: dividerColor
+      };
+      return style;
+    }
+    return undefined;
+  }, [widthMode, showDivider, dividerColor]);
+
+  // 处理 children，为每个 Tab.Item 添加样式
+  const renderChildren = React.useMemo(() => {
+    if (widthMode === 'content' && children) {
+      return React.Children.map(children, child => {
+        if (/*#__PURE__*/React.isValidElement(child) && child.type === RNETab.Item) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            buttonStyle: adjustedButtonStyle,
+            titleStyle: adjustedTitleStyle
+          });
+        }
+        return child;
+      });
+    }
+    return children;
+  }, [widthMode, children, adjustedButtonStyle, adjustedTitleStyle]);
+  const tabComponent = /*#__PURE__*/_jsx(RNETab, {
+    ...props,
+    scrollable: widthMode === 'content',
+    containerStyle: adjustedContainerStyle,
+    buttonStyle: widthMode === 'fill' ? buttonStyle : undefined,
+    titleStyle: widthMode === 'fill' ? titleStyle : undefined,
+    children: renderChildren
+  });
+
+  // 在 content 模式下，用外层 View 包裹以添加底部分隔线
+  if (widthMode === 'content' && wrapperStyle) {
+    return /*#__PURE__*/_jsx(View, {
+      style: wrapperStyle,
+      children: tabComponent
+    });
+  }
+  return tabComponent;
+};
+
+// 复用@rneui Tab.Item
+TapasTab.Item = RNETab.Item;
+export default TapasTab;
+//# sourceMappingURL=TapasTab.js.map

package/package/module/Tab/TapasTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tab","RNETab","View","jsx","_jsx","TapasTab","widthMode","minTabWidth","maxTabWidth","contentPadding","showDivider","dividerColor","containerStyle","buttonStyle","titleStyle","children","props","adjustedButtonStyle","useMemo","contentStyle","flexGrow","flexShrink","paddingHorizontal","undefined","minWidth","maxWidth","adjustedTitleStyle","contentTitleStyle","whiteSpace","overflow","textOverflow","adjustedContainerStyle","contentContainerStyle","width","wrapperStyle","style","borderBottomWidth","borderBottomColor","renderChildren","Children","map","child","isValidElement","type","Item","cloneElement","tabComponent","scrollable"],"sourceRoot":"../../../components","sources":["Tab/TapasTab.tsx"],"mappings":"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","ignoreList":[]}

package/package/module/TabTitle/README.md

@@ -0,0 +1,399 @@
+# TapasTabTitle
+
+一个专用于Tab标题的组件，支持文本显示和可选的通知指示器，适用于标签导航、页面标题和需要状态提示的场景。
+
+## 功能特性
+
+- ✅ 清晰的文本显示，支持自动截断
+- ✅ 可选的通知指示器（红点提示）
+- ✅ 可自定义指示器颜色、大小和位置
+- ✅ 灵活的文本样式配置
+- ✅ 完整的可访问性支持
+- ✅ 向后兼容的导出别名
+- ✅ 主题集成，自动适配应用主题
+
+## 安装使用
+
+```tsx
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+// 基础用法
+<TapasTabTitle text="Home" />
+
+// 带通知指示器
+<TapasTabTitle 
+  text="Messages" 
+  showIndicator={true}
+  indicatorColor="#FF4444"
+/>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `text` | `string` | - | 显示的文本内容 |
+| `showIndicator` | `boolean` | `false` | 是否显示通知指示器 |
+| `indicatorColor` | `string` | `"#FF4444"` | 指示器颜色 |
+| `indicatorSize` | `number` | `5` | 指示器大小（像素） |
+| `textStyle` | `StyleProp<TextStyle>` | - | 自定义文本样式 |
+| `textProps` | `Partial<TextProps>` | - | 传递给Text组件的属性 |
+| `indicatorOffset` | `{top?: number, right?: number}` | `{top: 0, right: -8}` | 指示器相对文本的偏移位置 |
+| `style` | `StyleProp<ViewStyle>` | - | 容器样式 |
+
+## 使用示例
+
+### 基础文本显示
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const BasicExample = () => {
+  return (
+    <TapasTabTitle text="Home" />
+  );
+};
+```
+
+### 带通知指示器
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const WithIndicatorExample = () => {
+  return (
+    <TapasTabTitle 
+      text="Messages" 
+      showIndicator={true}
+      indicatorColor="#FF4444"
+    />
+  );
+};
+```
+
+### Tab导航示例
+
+```tsx
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const TabNavigationExample = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  
+  const tabs = [
+    { title: 'Home', hasNotification: false },
+    { title: 'Messages', hasNotification: true },
+    { title: 'Notifications', hasNotification: true },
+    { title: 'Settings', hasNotification: false },
+  ];
+
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      {tabs.map((tab, index) => (
+        <TouchableOpacity 
+          key={index}
+          style={{
+            flex: 1,
+            padding: 12,
+            backgroundColor: activeTab === index ? '#E3F2FD' : 'transparent',
+          }}
+          onPress={() => setActiveTab(index)}
+        >
+          <TapasTabTitle
+            text={tab.title}
+            showIndicator={tab.hasNotification}
+            textStyle={{
+              color: activeTab === index ? '#007AFF' : '#8E8E93',
+              fontWeight: activeTab === index ? 'bold' : 'normal',
+            }}
+          />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+```
+
+### 自定义指示器样式
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const CustomIndicatorExample = () => {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* 不同颜色的指示器 */}
+      <TapasTabTitle 
+        text="Alerts" 
+        showIndicator={true}
+        indicatorColor="#FF9500"
+        indicatorSize={6}
+      />
+      
+      {/* 绿色指示器 */}
+      <TapasTabTitle 
+        text="Updates" 
+        showIndicator={true}
+        indicatorColor="#00C851"
+        indicatorSize={8}
+      />
+      
+      {/* 大尺寸指示器 */}
+      <TapasTabTitle 
+        text="Important" 
+        showIndicator={true}
+        indicatorColor="#FF4444"
+        indicatorSize={12}
+      />
+    </View>
+  );
+};
+```
+
+### 自定义指示器位置
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const CustomPositionExample = () => {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* 默认位置 */}
+      <TapasTabTitle 
+        text="Default Position" 
+        showIndicator={true}
+        indicatorOffset={{ top: 0, right: -8 }}
+      />
+      
+      {/* 右上角 */}
+      <TapasTabTitle 
+        text="Top Right Corner" 
+        showIndicator={true}
+        indicatorOffset={{ top: -2, right: -2 }}
+      />
+      
+      {/* 远离文本 */}
+      <TapasTabTitle 
+        text="Far Right" 
+        showIndicator={true}
+        indicatorOffset={{ top: 0, right: -15 }}
+      />
+      
+      {/* 偏下位置 */}
+      <TapasTabTitle 
+        text="Lower Position" 
+        showIndicator={true}
+        indicatorOffset={{ top: 5, right: -8 }}
+      />
+    </View>
+  );
+};
+```
+
+### 自定义文本样式
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const CustomTextExample = () => {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* 大号文字 */}
+      <TapasTabTitle 
+        text="Large Text" 
+        showIndicator={true}
+        textStyle={{
+          fontSize: 20,
+          fontWeight: 'bold',
+          color: '#0066CC',
+        }}
+      />
+      
+      {/* 自定义颜色和字体 */}
+      <TapasTabTitle 
+        text="Custom Style" 
+        showIndicator={true}
+        textStyle={{
+          fontSize: 16,
+          fontWeight: '500',
+          color: '#8B5CF6',
+          letterSpacing: 0.5,
+        }}
+        indicatorColor="#8B5CF6"
+      />
+    </View>
+  );
+};
+```
+
+### 长文本处理
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const LongTextExample = () => {
+  return (
+    <View style={{ width: 150 }}>
+      <TapasTabTitle 
+        text="Very Long Tab Title That Will Be Truncated"
+        showIndicator={true}
+        textProps={{
+          numberOfLines: 1,
+          ellipsizeMode: 'tail'
+        }}
+      />
+    </View>
+  );
+};
+```
+
+### 动态通知状态
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+import { TapasButton } from '@beppla/tapas-ui';
+
+const DynamicNotificationExample = () => {
+  const [hasNotification, setHasNotification] = useState(false);
+
+  return (
+    <View style={{ alignItems: 'center', gap: 16 }}>
+      <TapasTabTitle 
+        text="Dynamic Notification" 
+        showIndicator={hasNotification}
+        indicatorColor="#FF4444"
+      />
+      
+      <TapasButton
+        title={hasNotification ? "Clear Notification" : "Add Notification"}
+        onPress={() => setHasNotification(!hasNotification)}
+      />
+    </View>
+  );
+};
+```
+
+### 可访问性支持
+
+```tsx
+import React from 'react';
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+const AccessibilityExample = () => {
+  return (
+    <TapasTabTitle 
+      text="Accessible Tab"
+      showIndicator={true}
+      accessible={true}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: true }}
+      accessibilityLabel="Home tab with notifications"
+      accessibilityHint="Double tap to open home section"
+    />
+  );
+};
+```
+
+## 指示器配置详解
+
+### 颜色选择
+- **红色 (#FF4444)**: 用于重要通知、错误提示
+- **橙色 (#FF9500)**: 用于警告、待处理事项
+- **绿色 (#00C851)**: 用于成功状态、完成提示
+- **蓝色 (#007AFF)**: 用于信息提示、一般通知
+- **紫色 (#AF52DE)**: 用于特殊状态、VIP提示
+
+### 尺寸建议
+- **小尺寸 (3-4px)**: 适用于密集布局、小字体
+- **标准尺寸 (5-6px)**: 适用于大多数场景
+- **中等尺寸 (8-10px)**: 适用于需要突出显示的场景
+- **大尺寸 (12px+)**: 适用于重要提示、显著标记
+
+### 位置配置
+```tsx
+// 默认位置（文本右上角稍微偏右）
+indicatorOffset={{ top: 0, right: -8 }}
+
+// 紧贴右上角
+indicatorOffset={{ top: -2, right: -2 }}
+
+// 远离文本
+indicatorOffset={{ top: 0, right: -15 }}
+
+// 垂直居中
+indicatorOffset={{ top: 8, right: -8 }}
+```
+
+## 主题集成
+
+组件会自动使用应用主题的以下属性：
+
+```tsx
+// 文本样式
+fontSize: theme.fonts?.sizeM || 16
+fontWeight: "600"
+color: theme.colors.colorTextPrimary || theme.colors.primary
+
+// 容器样式
+alignItems: "flex-start"
+justifyContent: "center"
+```
+
+可以通过 `textStyle` 覆盖默认主题样式：
+
+```tsx
+<TapasTabTitle 
+  text="Custom Theme"
+  textStyle={{
+    fontSize: 18,
+    color: '#custom-color',
+    fontFamily: 'custom-font'
+  }}
+/>
+```
+
+## 最佳实践
+
+1. **文本长度控制**: 保持Tab标题简洁，一般不超过10个字符
+2. **指示器颜色**: 在应用中保持一致的颜色语义
+3. **通知及时清除**: 提供清除通知的机制，避免永久显示
+4. **可访问性**: 为指示器提供合适的可访问性描述
+5. **响应式设计**: 在不同屏幕尺寸下测试显示效果
+
+## 向后兼容
+
+为了确保向后兼容，组件同时导出了以下别名：
+
+```tsx
+// 新的推荐用法
+import { TapasTabTitle } from '@beppla/tapas-ui';
+
+// 向后兼容的用法
+import { TabTitle } from '@beppla/tapas-ui';
+```
+
+## 使用场景
+
+- Tab导航栏标题
+- 页面section标题
+- 菜单项标签
+- 状态指示标签
+- 通知提示文本
+- 分类标签
+
+## 注意事项
+
+1. 指示器位置基于文本元素的相对定位，确保父容器有足够空间
+2. 长文本会自动截断，建议设置合适的容器宽度
+3. 指示器颜色应该与应用整体色彩方案保持一致
+4. 在深色主题下，注意指示器颜色的对比度
+5. 组件支持React Native和React Native Web环境

package/package/module/TabTitle/TabTitle.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import React from "react";
+import { Text, View } from "react-native";
+import { withTheme, makeStyles } from "@rneui/themed";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TapasTabTitle = ({
+  text,
+  showIndicator = false,
+  indicatorColor = "#FF4444",
+  indicatorSize = 5,
+  textStyle,
+  textProps,
+  indicatorOffset = {
+    top: 0,
+    right: -8
+  },
+  style,
+  ...otherProps
+}) => {
+  const styles = useStyles();
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, style],
+    ...otherProps,
+    children: /*#__PURE__*/_jsxs(Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      style: [styles.text, textStyle],
+      ...textProps,
+      children: [text, showIndicator && /*#__PURE__*/_jsx(View, {
+        style: [styles.indicator, {
+          width: indicatorSize,
+          height: indicatorSize,
+          borderRadius: indicatorSize / 2,
+          backgroundColor: indicatorColor,
+          top: indicatorOffset.top,
+          right: indicatorOffset.right
+        }]
+      })]
+    })
+  });
+};
+const useStyles = makeStyles(theme => ({
+  container: {
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  text: {
+    fontSize: theme?.fonts?.sizeM || 16,
+    fontWeight: "600",
+    color: theme?.colors?.colorTextPrimary || theme?.colors?.primary || "#000",
+    position: "relative",
+    overflow: "visible"
+  },
+  indicator: {
+    position: "absolute",
+    zIndex: 1
+  }
+}));
+export default withTheme(TapasTabTitle);
+
+// Export aliases for compatibility
+export const TabTitle = withTheme(TapasTabTitle);
+export { TapasTabTitle };
+//# sourceMappingURL=TabTitle.js.map

package/package/module/TabTitle/TabTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","View","withTheme","makeStyles","jsx","_jsx","jsxs","_jsxs","TapasTabTitle","text","showIndicator","indicatorColor","indicatorSize","textStyle","textProps","indicatorOffset","top","right","style","otherProps","styles","useStyles","container","children","numberOfLines","ellipsizeMode","indicator","width","height","borderRadius","backgroundColor","theme","alignItems","justifyContent","fontSize","fonts","sizeM","fontWeight","color","colors","colorTextPrimary","primary","position","overflow","zIndex","TabTitle"],"sourceRoot":"../../../components","sources":["TabTitle/TabTitle.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAoD,cAAc;AACrF,SAASC,SAAS,EAAEC,UAAU,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAsBtD,MAAMC,aAA2C,GAAGA,CAAC;EACnDC,IAAI;EACJC,aAAa,GAAG,KAAK;EACrBC,cAAc,GAAG,SAAS;EAC1BC,aAAa,GAAG,CAAC;EACjBC,SAAS;EACTC,SAAS;EACTC,eAAe,GAAG;IAAEC,GAAG,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;EAAE,CAAC;EACvCC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGC,SAAS,CAAC,CAAC;EAE1B,oBACEhB,IAAA,CAACJ,IAAI;IAACiB,KAAK,EAAE,CAACE,MAAM,CAACE,SAAS,EAAEJ,KAAK,CAAE;IAAA,GAAKC,UAAU;IAAAI,QAAA,eACpDhB,KAAA,CAACP,IAAI;MACHwB,aAAa,EAAE,CAAE;MACjBC,aAAa,EAAC,MAAM;MACpBP,KAAK,EAAE,CAACE,MAAM,CAACX,IAAI,EAAEI,SAAS,CAAE;MAAA,GAC5BC,SAAS;MAAAS,QAAA,GAEZd,IAAI,EACJC,aAAa,iBACZL,IAAA,CAACJ,IAAI;QACHiB,KAAK,EAAE,CACLE,MAAM,CAACM,SAAS,EAChB;UACEC,KAAK,EAAEf,aAAa;UACpBgB,MAAM,EAAEhB,aAAa;UACrBiB,YAAY,EAAEjB,aAAa,GAAG,CAAC;UAC/BkB,eAAe,EAAEnB,cAAc;UAC/BK,GAAG,EAAED,eAAe,CAACC,GAAG;UACxBC,KAAK,EAAEF,eAAe,CAACE;QACzB,CAAC;MACD,CACH,CACF;IAAA,CACG;EAAC,CACH,CAAC;AAEX,CAAC;AAED,MAAMI,SAAS,GAAGlB,UAAU,CAAE4B,KAAK,KAAM;EACvCT,SAAS,EAAE;IACTU,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE;EAClB,CAAC;EACDxB,IAAI,EAAE;IACJyB,QAAQ,EAAEH,KAAK,EAAEI,KAAK,EAAEC,KAAK,IAAI,EAAE;IACnCC,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAEP,KAAK,EAAEQ,MAAM,EAAEC,gBAAgB,IAAIT,KAAK,EAAEQ,MAAM,EAAEE,OAAO,IAAI,MAAM;IAC1EC,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDjB,SAAS,EAAE;IACTgB,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC,CAAC;AAEH,eAAe1C,SAAS,CAACM,aAAa,CAAC;;AAEvC;AACA,OAAO,MAAMqC,QAAQ,GAAG3C,SAAS,CAACM,aAAa,CAAC;AAChD,SAASA,aAAa","ignoreList":[]}