@beppla/tapas-ui 1.5.2 → 1.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/commonjs/Alert/README.md +75 -0
  2. package/commonjs/BarChart/README.md +172 -0
  3. package/commonjs/Button/README.md +108 -0
  4. package/commonjs/Calendar/Calendar.base.js +1 -1
  5. package/commonjs/Calendar/Calendar.base.js.map +1 -1
  6. package/commonjs/Calendar/README.md +410 -0
  7. package/commonjs/Card/README.md +126 -0
  8. package/commonjs/CheckBox/README.md +147 -0
  9. package/commonjs/CircularProgress/README.md +70 -0
  10. package/commonjs/Collapsible/README.md +140 -0
  11. package/commonjs/ComboChart/README.md +124 -0
  12. package/commonjs/DashboardCard/README.md +120 -0
  13. package/commonjs/DataTable/README.md +159 -0
  14. package/commonjs/DeviceSelectionModal/README.md +124 -0
  15. package/commonjs/DraggableFlatList/README.md +35 -0
  16. package/commonjs/Drawer/README.md +175 -0
  17. package/commonjs/Dropdown/Dropdown.js +60 -30
  18. package/commonjs/Dropdown/Dropdown.js.map +1 -1
  19. package/commonjs/Dropdown/README.md +230 -0
  20. package/commonjs/ExternalLink/README.md +81 -0
  21. package/commonjs/Gantt/README.md +155 -0
  22. package/commonjs/Grid/README.md +197 -0
  23. package/commonjs/Header/README.md +109 -0
  24. package/commonjs/HelloWave/README.md +28 -0
  25. package/commonjs/Hoverable/Hoverable.js.map +1 -1
  26. package/commonjs/IconText/README.md +99 -0
  27. package/commonjs/Image/PreviewImg/README.md +100 -0
  28. package/commonjs/Image/README.md +88 -0
  29. package/commonjs/Input/Input.js +60 -4
  30. package/commonjs/Input/Input.js.map +1 -1
  31. package/commonjs/Layout/README.md +174 -0
  32. package/commonjs/LineChart/README.md +181 -0
  33. package/commonjs/ListItem/README.md +122 -0
  34. package/commonjs/MessageBox/MessageBox.js +7 -1
  35. package/commonjs/MessageBox/MessageBox.js.map +1 -1
  36. package/commonjs/MessageBox/README.md +120 -0
  37. package/commonjs/Navigation/README.md +197 -0
  38. package/commonjs/NumericInput/README.md +95 -0
  39. package/commonjs/Overlay/README.md +84 -0
  40. package/commonjs/Pagination/README.md +106 -0
  41. package/commonjs/PieChart/README.md +212 -0
  42. package/commonjs/Popover/README.md +82 -0
  43. package/commonjs/Progress/README.md +106 -0
  44. package/commonjs/RadioButton/README.md +85 -0
  45. package/commonjs/ScanButton/README.md +72 -0
  46. package/commonjs/SearchInput/SearchInput.js.map +1 -1
  47. package/commonjs/SheetTitle/README.md +89 -0
  48. package/commonjs/Shell/README.md +152 -0
  49. package/commonjs/Shell/Shell.js.map +1 -1
  50. package/commonjs/StatisticCard/README.md +129 -0
  51. package/commonjs/Status/README.md +75 -0
  52. package/commonjs/Steps/README.md +76 -0
  53. package/commonjs/Switch/Switch.js +101 -0
  54. package/commonjs/Switch/Switch.js.map +1 -0
  55. package/commonjs/Tab/README.md +161 -0
  56. package/commonjs/Tag/README.md +93 -0
  57. package/commonjs/Task/README.md +110 -0
  58. package/commonjs/Text/README.md +97 -0
  59. package/commonjs/TextArea/README.md +127 -0
  60. package/commonjs/TextArea/TextArea.js +4 -2
  61. package/commonjs/TextArea/TextArea.js.map +1 -1
  62. package/commonjs/Theme/README.md +161 -0
  63. package/commonjs/Theme/makeStyles.js +30 -0
  64. package/commonjs/Theme/makeStyles.js.map +1 -0
  65. package/commonjs/Theme/withTheme.js +91 -0
  66. package/commonjs/Theme/withTheme.js.map +1 -0
  67. package/commonjs/Timeline/README.md +111 -0
  68. package/commonjs/Toast/README.md +96 -0
  69. package/commonjs/Upload/Upload.js +126 -0
  70. package/commonjs/Upload/Upload.js.map +1 -0
  71. package/commonjs/index.js +24 -4
  72. package/commonjs/index.js.map +1 -1
  73. package/module/Alert/README.md +75 -0
  74. package/module/BarChart/README.md +172 -0
  75. package/module/Button/README.md +108 -0
  76. package/module/Calendar/Calendar.base.js +1 -1
  77. package/module/Calendar/Calendar.base.js.map +1 -1
  78. package/module/Calendar/README.md +410 -0
  79. package/module/Card/README.md +126 -0
  80. package/module/CheckBox/README.md +147 -0
  81. package/module/CircularProgress/README.md +70 -0
  82. package/module/Collapsible/README.md +140 -0
  83. package/module/ComboChart/README.md +124 -0
  84. package/module/DashboardCard/README.md +120 -0
  85. package/module/DataTable/README.md +159 -0
  86. package/module/DeviceSelectionModal/README.md +124 -0
  87. package/module/DraggableFlatList/README.md +35 -0
  88. package/module/Drawer/README.md +175 -0
  89. package/module/Dropdown/Dropdown.js +60 -30
  90. package/module/Dropdown/Dropdown.js.map +1 -1
  91. package/module/Dropdown/README.md +230 -0
  92. package/module/ExternalLink/README.md +81 -0
  93. package/module/Gantt/README.md +155 -0
  94. package/module/Grid/README.md +197 -0
  95. package/module/Header/README.md +109 -0
  96. package/module/HelloWave/README.md +28 -0
  97. package/module/Hoverable/Hoverable.js.map +1 -1
  98. package/module/IconText/README.md +99 -0
  99. package/module/Image/PreviewImg/README.md +100 -0
  100. package/module/Image/README.md +88 -0
  101. package/module/Input/Input.js +60 -4
  102. package/module/Input/Input.js.map +1 -1
  103. package/module/Layout/README.md +174 -0
  104. package/module/LineChart/README.md +181 -0
  105. package/module/ListItem/README.md +122 -0
  106. package/module/MessageBox/MessageBox.js +8 -2
  107. package/module/MessageBox/MessageBox.js.map +1 -1
  108. package/module/MessageBox/README.md +120 -0
  109. package/module/Navigation/README.md +197 -0
  110. package/module/NumericInput/README.md +95 -0
  111. package/module/Overlay/README.md +84 -0
  112. package/module/Pagination/README.md +106 -0
  113. package/module/PieChart/README.md +212 -0
  114. package/module/Popover/README.md +82 -0
  115. package/module/Progress/README.md +106 -0
  116. package/module/RadioButton/README.md +85 -0
  117. package/module/ScanButton/README.md +72 -0
  118. package/module/SearchInput/SearchInput.js.map +1 -1
  119. package/module/SheetTitle/README.md +89 -0
  120. package/module/Shell/README.md +152 -0
  121. package/module/Shell/Shell.js.map +1 -1
  122. package/module/StatisticCard/README.md +129 -0
  123. package/module/Status/README.md +75 -0
  124. package/module/Steps/README.md +76 -0
  125. package/module/Switch/Switch.js +96 -0
  126. package/module/Switch/Switch.js.map +1 -0
  127. package/module/Tab/README.md +161 -0
  128. package/module/Tag/README.md +93 -0
  129. package/module/Task/README.md +110 -0
  130. package/module/Text/README.md +97 -0
  131. package/module/TextArea/README.md +127 -0
  132. package/module/TextArea/TextArea.js +4 -2
  133. package/module/TextArea/TextArea.js.map +1 -1
  134. package/module/Theme/README.md +161 -0
  135. package/module/Theme/makeStyles.js +24 -0
  136. package/module/Theme/makeStyles.js.map +1 -0
  137. package/module/Theme/withTheme.js +82 -0
  138. package/module/Theme/withTheme.js.map +1 -0
  139. package/module/Timeline/README.md +111 -0
  140. package/module/Toast/README.md +96 -0
  141. package/module/Upload/Upload.js +121 -0
  142. package/module/Upload/Upload.js.map +1 -0
  143. package/module/index.js +11 -3
  144. package/module/index.js.map +1 -1
  145. package/package.json +1 -1
  146. package/typescript/Dropdown/Dropdown.d.ts +20 -0
  147. package/typescript/Dropdown/Dropdown.d.ts.map +1 -1
  148. package/typescript/Grid/FixedSizeGrid.d.ts +1 -3
  149. package/typescript/Grid/FixedSizeGrid.d.ts.map +1 -1
  150. package/typescript/Grid/Grid.base.d.ts +1 -3
  151. package/typescript/Grid/Grid.base.d.ts.map +1 -1
  152. package/typescript/Grid/VariableSizeGrid.d.ts +1 -3
  153. package/typescript/Grid/VariableSizeGrid.d.ts.map +1 -1
  154. package/typescript/Input/Input.d.ts +5 -0
  155. package/typescript/Input/Input.d.ts.map +1 -1
  156. package/typescript/MessageBox/MessageBox.d.ts.map +1 -1
  157. package/typescript/SearchInput/SearchInput.d.ts +4 -0
  158. package/typescript/SearchInput/SearchInput.d.ts.map +1 -1
  159. package/typescript/Switch/Switch.d.ts +15 -0
  160. package/typescript/Switch/Switch.d.ts.map +1 -0
  161. package/typescript/TextArea/TextArea.d.ts +2 -0
  162. package/typescript/TextArea/TextArea.d.ts.map +1 -1
  163. package/typescript/Theme/makeStyles.d.ts +11 -0
  164. package/typescript/Theme/makeStyles.d.ts.map +1 -0
  165. package/typescript/Theme/withTheme.d.ts +12 -0
  166. package/typescript/Theme/withTheme.d.ts.map +1 -0
  167. package/typescript/Upload/Upload.d.ts +25 -0
  168. package/typescript/Upload/Upload.d.ts.map +1 -0
  169. package/typescript/WebViewBridge/useWebViewBridge.d.ts +1 -1
  170. package/typescript/WebViewBridge/useWebViewBridge.d.ts.map +1 -1
  171. package/typescript/common/hooks/useBridgelessFix.d.ts +1 -1
  172. package/typescript/index.d.ts +8 -2
  173. package/typescript/index.d.ts.map +1 -1
@@ -0,0 +1,89 @@
1
+ # SheetTitle
2
+
3
+ 底部 Sheet 标题栏组件,用于底部弹窗或模态框的顶部区域。包含标题文本、关闭按钮和可选的清空按钮,适合筛选面板、选择器等场景的标题栏。
4
+
5
+ ## 功能特性
6
+
7
+ - ✅ 标题文本展示,超长自动截断
8
+ - ✅ 关闭按钮(默认显示,可隐藏)
9
+ - ✅ 可选清空按钮(showClear)
10
+ - ✅ 自定义关闭图标(字符串图标名或 ReactNode)
11
+ - ✅ 自定义清空按钮文本
12
+ - ✅ 底部分割线
13
+ - ✅ 全面的样式自定义(标题栏、标题文本、清空按钮、关闭按钮)
14
+ - ✅ React.memo 优化性能
15
+
16
+ ## 安装使用
17
+
18
+ ```tsx
19
+ import { SheetTitle } from '@beppla/tapas-ui';
20
+ ```
21
+
22
+ ## Props
23
+
24
+ | 属性 | 类型 | 默认值 | 说明 |
25
+ |------|------|--------|------|
26
+ | title | `string` | - | 标题文本 |
27
+ | icon | `React.ReactNode \| string` | `'close'` | 关闭按钮图标 |
28
+ | showClear | `Boolean` | - | 是否显示清空按钮 |
29
+ | showClose | `Boolean` | `true` | 是否显示关闭按钮 |
30
+ | clearText | `string` | `'Clear'` | 清空按钮文本 |
31
+ | onClear | `() => void` | - | 清空按钮回调 |
32
+ | onClose | `() => void` | - | 关闭按钮回调 |
33
+ | titleContainerStyle | `StyleProp<ViewStyle>` | - | 标题栏容器样式 |
34
+ | titleStyle | `StyleProp<ViewStyle>` | - | 标题文本样式 |
35
+ | clearStyle | `StyleProp<ViewStyle>` | - | 清空按钮样式 |
36
+ | closeStyle | `StyleProp<ViewStyle>` | - | 关闭按钮样式 |
37
+ | testID | `string` | - | 测试标识 |
38
+
39
+ ## 使用示例
40
+
41
+ ### 基础用法
42
+
43
+ ```tsx
44
+ <SheetTitle
45
+ title="Filter Options"
46
+ onClose={() => setVisible(false)}
47
+ />
48
+ ```
49
+
50
+ ### 带清空按钮
51
+
52
+ ```tsx
53
+ <SheetTitle
54
+ title="Select Category"
55
+ showClear
56
+ clearText="Reset"
57
+ onClear={() => handleReset()}
58
+ onClose={() => setVisible(false)}
59
+ />
60
+ ```
61
+
62
+ ### 自定义图标
63
+
64
+ ```tsx
65
+ <SheetTitle
66
+ title="Settings"
67
+ icon="arrow_back"
68
+ onClose={() => navigation.goBack()}
69
+ />
70
+ ```
71
+
72
+ ### 自定义 ReactNode 图标
73
+
74
+ ```tsx
75
+ <SheetTitle
76
+ title="Details"
77
+ icon={<CustomCloseIcon />}
78
+ onClose={() => setVisible(false)}
79
+ />
80
+ ```
81
+
82
+ ## 注意事项
83
+
84
+ - 标题栏固定高度 40px,宽度 100%
85
+ - 标题文本使用 `flex: 1` 自动撑满可用空间,超长文本截断
86
+ - `icon` 为字符串时渲染 TapasIcon,为 ReactNode 时直接渲染
87
+ - 清空按钮使用 Button 组件的 clear 类型
88
+ - 底部有 1px 分割线(borderBottomColor: greyOutline)
89
+ - 需在 `ThemeProvider` 内使用
@@ -0,0 +1,152 @@
1
+ # Shell
2
+
3
+ 外壳布局组件,提供主内容区域和侧边抽屉的两栏布局,使用复合组件模式(Shell.Main + Shell.Drawer),抽屉支持弹簧动画展开/折叠。
4
+
5
+ ## 功能特性
6
+
7
+ - 两栏布局:主内容区(Shell.Main)+ 侧边抽屉(Shell.Drawer)
8
+ - 复合组件模式,声明式使用 Shell.Main 和 Shell.Drawer
9
+ - 抽屉展开/折叠使用 `Animated.spring` 弹簧动画
10
+ - 可自定义抽屉宽度(默认 150px)
11
+ - 可选的顶部和左侧边框线
12
+ - 支持受控模式(`openDrawer` 属性)
13
+ - 支持自定义容器样式
14
+
15
+ ## 安装使用
16
+
17
+ ```tsx
18
+ import { Shell } from '@beppla/tapas-ui';
19
+ ```
20
+
21
+ ## Props
22
+
23
+ ### Shell
24
+
25
+ | 属性 | 类型 | 默认值 | 说明 |
26
+ |------|------|--------|------|
27
+ | children | `React.ReactNode` | - | 必须包含 Shell.Main 和 Shell.Drawer 子组件 |
28
+ | openDrawer | `boolean` | `false` | 抽屉是否展开 |
29
+ | drawerWidth | `number` | `150` | 抽屉展开时的宽度(像素) |
30
+ | border | `boolean` | `true` | 是否显示边框线(顶部和左侧) |
31
+ | style | `any` | - | 容器自定义样式 |
32
+ | testID | `string` | - | 测试 ID |
33
+ | theme | `any` | - | 主题对象(自动注入) |
34
+
35
+ ### Shell.Main
36
+
37
+ | 属性 | 类型 | 默认值 | 说明 |
38
+ |------|------|--------|------|
39
+ | children | `React.ReactNode` | - | 主内容区域 |
40
+ | style | `any` | - | 自定义样式 |
41
+ | theme | `any` | - | 主题对象(自动注入) |
42
+
43
+ ### Shell.Drawer
44
+
45
+ | 属性 | 类型 | 默认值 | 说明 |
46
+ |------|------|--------|------|
47
+ | children | `React.ReactNode` | - | 侧边抽屉内容 |
48
+ | style | `any` | - | 自定义样式 |
49
+ | theme | `any` | - | 主题对象(自动注入) |
50
+
51
+ ## 使用示例
52
+
53
+ ### 基础用法
54
+
55
+ ```tsx
56
+ import Shell from '@beppla/tapas-ui/components/Shell/Shell';
57
+ import { useState } from 'react';
58
+ import { View, Text, Button } from 'react-native';
59
+
60
+ export default function App() {
61
+ const [open, setOpen] = useState(false);
62
+
63
+ return (
64
+ <Shell openDrawer={open}>
65
+ <Shell.Main>
66
+ <View style={{ padding: 16 }}>
67
+ <Text>Main Content</Text>
68
+ <Button title="Toggle Drawer" onPress={() => setOpen(!open)} />
69
+ </View>
70
+ </Shell.Main>
71
+ <Shell.Drawer>
72
+ <View style={{ padding: 16 }}>
73
+ <Text>Drawer Content</Text>
74
+ </View>
75
+ </Shell.Drawer>
76
+ </Shell>
77
+ );
78
+ }
79
+ ```
80
+
81
+ ### 自定义抽屉宽度
82
+
83
+ ```tsx
84
+ <Shell openDrawer={open} drawerWidth={280}>
85
+ <Shell.Main>
86
+ <Text>Main content with wider drawer</Text>
87
+ </Shell.Main>
88
+ <Shell.Drawer>
89
+ <Text>280px wide drawer</Text>
90
+ </Shell.Drawer>
91
+ </Shell>
92
+ ```
93
+
94
+ ### 无边框模式
95
+
96
+ ```tsx
97
+ <Shell openDrawer={open} border={false} drawerWidth={200}>
98
+ <Shell.Main>
99
+ <Text>No border content</Text>
100
+ </Shell.Main>
101
+ <Shell.Drawer>
102
+ <Text>No border drawer</Text>
103
+ </Shell.Drawer>
104
+ </Shell>
105
+ ```
106
+
107
+ ### POS 订单详情场景
108
+
109
+ ```tsx
110
+ import Shell from '@beppla/tapas-ui/components/Shell/Shell';
111
+ import { useState } from 'react';
112
+ import { View, Text, ScrollView } from 'react-native';
113
+
114
+ export default function OrderPage() {
115
+ const [showDetail, setShowDetail] = useState(false);
116
+
117
+ return (
118
+ <View style={{ height: 600 }}>
119
+ <Shell openDrawer={showDetail} drawerWidth={320}>
120
+ <Shell.Main>
121
+ <ScrollView style={{ padding: 16 }}>
122
+ <Text>Order List</Text>
123
+ <Button
124
+ title="View Details"
125
+ onPress={() => setShowDetail(true)}
126
+ />
127
+ </ScrollView>
128
+ </Shell.Main>
129
+ <Shell.Drawer>
130
+ <View style={{ padding: 16 }}>
131
+ <Text>Order #12345 Details</Text>
132
+ <Button
133
+ title="Close"
134
+ onPress={() => setShowDetail(false)}
135
+ />
136
+ </View>
137
+ </Shell.Drawer>
138
+ </Shell>
139
+ </View>
140
+ );
141
+ }
142
+ ```
143
+
144
+ ## 注意事项
145
+
146
+ - Shell 必须包含 `Shell.Main` 和 `Shell.Drawer` 作为直接子组件,组件通过 `React.Children.forEach` 匹配子组件类型
147
+ - 抽屉动画使用 `Animated.spring`(tension: 300, friction: 20),关闭时宽度动画至 0
148
+ - `openDrawer` 为受控属性,外部状态变化会触发动画
149
+ - 默认抽屉宽度为 150px(`defaultDrawerWidth` 常量)
150
+ - `border=true` 时,主内容区顶部有边框线,抽屉区顶部和左侧有边框线
151
+ - 边框颜色使用主题的 `greyOutline` 色值,默认为 `rgba(0, 0, 0, 0.12)`
152
+ - `ShellPorps` 为已废弃的拼写错误别名,请使用 `ShellProps`
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_types","_styles","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Shell","children","border","drawerWidth","defaultDrawerWidth","style","openDrawer","testID","props","mainContent","drawerContent","open","setOpen","useState","animatedWidth","Animated","Value","useEffect","spring","toValue","tension","friction","useNativeDriver","start","React","Children","forEach","child","isValidElement","type","Main","Drawer","jsxs","View","styles","container","jsx","ShellView","mainContainer","borderTopWidth","drawerContainer","width","ShellDrawer","borderLeftWidth","theme","borderTopColor","greyOutline","borderTopStyle","exports","drawerInnerCon","borderLeftColor","borderLeftStyle","withTheme","_default"],"sourceRoot":"../../../components","sources":["Shell/Shell.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAMA,IAAAI,OAAA,GAAAJ,OAAA;AAAkC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElC,MAAMkB,KAGL,GAAGA,CAAC;EACHC,QAAQ;EACRC,MAAM,GAAG,IAAI;EACbC,WAAW,GAAGC,yBAAkB;EAChCC,KAAK,GAAG,CAAC,CAAC;EACVC,UAAU,GAAG,KAAK;EAClBC,MAAM;EACN,GAAGC;AACO,CAAC,KAAK;EAChB,IAAIC,WAAW,GAAG,IAAI;EACtB,IAAIC,aAAa,GAAG,IAAI;EAExB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAUP,UAAU,CAAC;EACrD,MAAMQ,aAAa,GAAG,IAAIC,qBAAQ,CAACC,KAAK,CAACV,UAAU,GAAGH,WAAW,GAAG,CAAC,CAAC;EAEtE,IAAAc,gBAAS,EAAC,MAAM;IACdL,OAAO,CAACN,UAAU,CAAC;EACrB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,IAAAW,gBAAS,EAAC,MAAM;IACdF,qBAAQ,CAACG,MAAM,CAACJ,aAAa,EAAE;MAC7BK,OAAO,EAAER,IAAI,GAAGR,WAAW,GAAG,CAAC;MAC/BiB,OAAO,EAAE,GAAG;MACZC,QAAQ,EAAE,EAAE;MACZC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAACZ,IAAI,EAAER,WAAW,CAAC,CAAC;EAEvBqB,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACzB,QAAQ,EAAG0B,KAAK,IAAK;IAC1C,iBAAIH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC/B,IAAIA,KAAK,CAACE,IAAI,KAAK7B,KAAK,CAAC8B,IAAI,EAAE;QAC7BrB,WAAW,GAAGkB,KAAK,CAACnB,KAAK,CAACP,QAAQ;MACpC,CAAC,MAAM,IAAI0B,KAAK,CAACE,IAAI,KAAK7B,KAAK,CAAC+B,MAAM,EAAE;QACtCrB,aAAa,GAAGiB,KAAK,CAACnB,KAAK,CAACP,QAAQ;MACtC;IACF;EACF,CAAC,CAAC;EAEF,oBACE,IAAArB,WAAA,CAAAoD,IAAA,EAACxD,YAAA,CAAAyD,IAAI;IAAC5B,KAAK,EAAE;MAAC,GAAG6B,cAAM,CAACC,SAAS;MAAE,GAAG9B;IAAK,CAAE;IAACE,MAAM,EAAEA,MAAO;IAAA,GAAKC,KAAK;IAAAP,QAAA,gBACrE,IAAArB,WAAA,CAAAwD,GAAA,EAACC,SAAS;MACRhC,KAAK,EAAE;QAAE,GAAG6B,cAAM,CAACI,aAAa;QAAEC,cAAc,EAAErC,MAAM,GAAG,CAAC,GAAG;MAAE,CAAE;MAAAD,QAAA,EAElEQ;IAAW,CACH,CAAC,eACZ,IAAA7B,WAAA,CAAAwD,GAAA,EAAC5D,YAAA,CAAAuC,QAAQ,CAACkB,IAAI;MAAC5B,KAAK,EAAE;QAAE,GAAG6B,cAAM,CAACM,eAAe;QAAEC,KAAK,EAAE3B;MAAc,CAAE;MAAAb,QAAA,eACxE,IAAArB,WAAA,CAAAwD,GAAA,EAACM,WAAW;QACVrC,KAAK,EAAE;UACLkC,cAAc,EAAErC,MAAM,GAAG,CAAC,GAAG,CAAC;UAC9ByC,eAAe,EAAEzC,MAAM,GAAG,CAAC,GAAG;QAChC,CAAE;QAAAD,QAAA,EAEDS;MAAa,CACH;IAAC,CACD,CAAC;EAAA,CACZ,CAAC;AAEX,CAAC;AAEM,MAAM2B,SAAmC,GAAGA,CAAC;EAClDpC,QAAQ;EACRI,KAAK,GAAG,CAAC,CAAC;EACVuC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAhE,WAAA,CAAAwD,GAAA,EAAC5D,YAAA,CAAAyD,IAAI;IACH5B,KAAK,EAAE;MACL,GAAGA,KAAK;MACRwC,cAAc,EAAED,KAAK,EAAEE,WAAW,IAAI,qBAAqB;MAC3DC,cAAc,EAAE;IAClB,CAAE;IAAA9C,QAAA,EAEDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAAC+C,OAAA,CAAAX,SAAA,GAAAA,SAAA;AAEK,MAAMK,WAAuC,GAAGA,CAAC;EACtDzC,QAAQ;EACRI,KAAK;EACLuC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAhE,WAAA,CAAAwD,GAAA,EAAC5D,YAAA,CAAAyD,IAAI;IACH5B,KAAK,EAAE;MACL,GAAGA,KAAK;MACR,GAAG6B,cAAM,CAACe,cAAc;MACxBJ,cAAc,EAAED,KAAK,EAAEE,WAAW,IAAI,qBAAqB;MAC3DC,cAAc,EAAE,OAAO;MACvBG,eAAe,EAAEN,KAAK,EAAEE,WAAW,IAAI,qBAAqB;MAC5DK,eAAe,EAAE;IACnB,CAAE;IAAAlD,QAAA,EAEDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAAC+C,OAAA,CAAAN,WAAA,GAAAA,WAAA;AAEF1C,KAAK,CAAC8B,IAAI,GAAG,IAAAsB,iBAAS,EAACf,SAAS,CAA6B;AAC7DrC,KAAK,CAAC+B,MAAM,GAAG,IAAAqB,iBAAS,EAACV,WAAW,CAA+B;AAAC,IAAAW,QAAA,GAAAL,OAAA,CAAAzD,OAAA,GAErDS,KAAK","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_types","_styles","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Shell","children","border","drawerWidth","defaultDrawerWidth","style","openDrawer","testID","props","mainContent","drawerContent","open","setOpen","useState","animatedWidth","Animated","Value","useEffect","spring","toValue","tension","friction","useNativeDriver","start","React","Children","forEach","child","isValidElement","type","Main","Drawer","jsxs","View","styles","container","jsx","ShellView","mainContainer","borderTopWidth","drawerContainer","width","ShellDrawer","borderLeftWidth","theme","borderTopColor","greyOutline","borderTopStyle","exports","drawerInnerCon","borderLeftColor","borderLeftStyle","withTheme","_default"],"sourceRoot":"../../../components","sources":["Shell/Shell.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAMA,IAAAI,OAAA,GAAAJ,OAAA;AAAkC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElC,MAAMkB,KAGL,GAAGA,CAAC;EACHC,QAAQ;EACRC,MAAM,GAAG,IAAI;EACbC,WAAW,GAAGC,yBAAkB;EAChCC,KAAK,GAAG,CAAC,CAAC;EACVC,UAAU,GAAG,KAAK;EAClBC,MAAM;EACN,GAAGC;AACO,CAAC,KAAK;EAChB,IAAIC,WAAW,GAAG,IAAI;EACtB,IAAIC,aAAa,GAAG,IAAI;EAExB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAUP,UAAU,CAAC;EACrD,MAAMQ,aAAa,GAAG,IAAIC,qBAAQ,CAACC,KAAK,CAACV,UAAU,GAAGH,WAAW,GAAG,CAAC,CAAC;EAEtE,IAAAc,gBAAS,EAAC,MAAM;IACdL,OAAO,CAACN,UAAU,CAAC;EACrB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,IAAAW,gBAAS,EAAC,MAAM;IACdF,qBAAQ,CAACG,MAAM,CAACJ,aAAa,EAAE;MAC7BK,OAAO,EAAER,IAAI,GAAGR,WAAW,GAAG,CAAC;MAC/BiB,OAAO,EAAE,GAAG;MACZC,QAAQ,EAAE,EAAE;MACZC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAACZ,IAAI,EAAER,WAAW,CAAC,CAAC;EAEvBqB,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACzB,QAAQ,EAAG0B,KAAK,IAAK;IAC1C,iBAAIH,cAAK,CAACI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC/B,IAAIA,KAAK,CAACE,IAAI,KAAK7B,KAAK,CAAC8B,IAAI,EAAE;QAC7BrB,WAAW,GAAIkB,KAAK,CAACnB,KAAK,CAASP,QAAQ;MAC7C,CAAC,MAAM,IAAI0B,KAAK,CAACE,IAAI,KAAK7B,KAAK,CAAC+B,MAAM,EAAE;QACtCrB,aAAa,GAAIiB,KAAK,CAACnB,KAAK,CAASP,QAAQ;MAC/C;IACF;EACF,CAAC,CAAC;EAEF,oBACE,IAAArB,WAAA,CAAAoD,IAAA,EAACxD,YAAA,CAAAyD,IAAI;IAAC5B,KAAK,EAAE;MAAC,GAAG6B,cAAM,CAACC,SAAS;MAAE,GAAG9B;IAAK,CAAE;IAACE,MAAM,EAAEA,MAAO;IAAA,GAAKC,KAAK;IAAAP,QAAA,gBACrE,IAAArB,WAAA,CAAAwD,GAAA,EAACC,SAAS;MACRhC,KAAK,EAAE;QAAE,GAAG6B,cAAM,CAACI,aAAa;QAAEC,cAAc,EAAErC,MAAM,GAAG,CAAC,GAAG;MAAE,CAAE;MAAAD,QAAA,EAElEQ;IAAW,CACH,CAAC,eACZ,IAAA7B,WAAA,CAAAwD,GAAA,EAAC5D,YAAA,CAAAuC,QAAQ,CAACkB,IAAI;MAAC5B,KAAK,EAAE;QAAE,GAAG6B,cAAM,CAACM,eAAe;QAAEC,KAAK,EAAE3B;MAAc,CAAE;MAAAb,QAAA,eACxE,IAAArB,WAAA,CAAAwD,GAAA,EAACM,WAAW;QACVrC,KAAK,EAAE;UACLkC,cAAc,EAAErC,MAAM,GAAG,CAAC,GAAG,CAAC;UAC9ByC,eAAe,EAAEzC,MAAM,GAAG,CAAC,GAAG;QAChC,CAAE;QAAAD,QAAA,EAEDS;MAAa,CACH;IAAC,CACD,CAAC;EAAA,CACZ,CAAC;AAEX,CAAC;AAEM,MAAM2B,SAAmC,GAAGA,CAAC;EAClDpC,QAAQ;EACRI,KAAK,GAAG,CAAC,CAAC;EACVuC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAhE,WAAA,CAAAwD,GAAA,EAAC5D,YAAA,CAAAyD,IAAI;IACH5B,KAAK,EAAE;MACL,GAAGA,KAAK;MACRwC,cAAc,EAAED,KAAK,EAAEE,WAAW,IAAI,qBAAqB;MAC3DC,cAAc,EAAE;IAClB,CAAE;IAAA9C,QAAA,EAEDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAAC+C,OAAA,CAAAX,SAAA,GAAAA,SAAA;AAEK,MAAMK,WAAuC,GAAGA,CAAC;EACtDzC,QAAQ;EACRI,KAAK;EACLuC;AACF,CAAC,KAAK;EACJ,oBACE,IAAAhE,WAAA,CAAAwD,GAAA,EAAC5D,YAAA,CAAAyD,IAAI;IACH5B,KAAK,EAAE;MACL,GAAGA,KAAK;MACR,GAAG6B,cAAM,CAACe,cAAc;MACxBJ,cAAc,EAAED,KAAK,EAAEE,WAAW,IAAI,qBAAqB;MAC3DC,cAAc,EAAE,OAAO;MACvBG,eAAe,EAAEN,KAAK,EAAEE,WAAW,IAAI,qBAAqB;MAC5DK,eAAe,EAAE;IACnB,CAAE;IAAAlD,QAAA,EAEDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAAC+C,OAAA,CAAAN,WAAA,GAAAA,WAAA;AAEF1C,KAAK,CAAC8B,IAAI,GAAG,IAAAsB,iBAAS,EAACf,SAAS,CAA6B;AAC7DrC,KAAK,CAAC+B,MAAM,GAAG,IAAAqB,iBAAS,EAACV,WAAW,CAA+B;AAAC,IAAAW,QAAA,GAAAL,OAAA,CAAAzD,OAAA,GAErDS,KAAK","ignoreList":[]}
@@ -0,0 +1,129 @@
1
+ # StatisticCard
2
+
3
+ 统计卡片组件,用于展示关键指标和数据,支持趋势指示、前缀/后缀、图标等功能。适用于仪表板、数据大屏和统计报表。
4
+
5
+ ## 功能特性
6
+
7
+ - ✅ 数值展示,支持前缀(如 $)和后缀(如 %)
8
+ - ✅ 趋势指示器:正向增长绿色(#00B894)、负向下降红色(#D63031)
9
+ - ✅ 趋势百分比自动格式化(1 位小数,带 +/- 符号)
10
+ - ✅ 支持自定义图标(React 节点,显示在右上角)
11
+ - ✅ 支持描述文本
12
+ - ✅ 加载状态(loading),显示 "Loading..." 替代数值
13
+ - ✅ 可点击交互:有 onPress 时自动切换为 TouchableOpacity
14
+ - ✅ 自定义数值颜色
15
+ - ✅ 基于 Card 组件封装,最小高度 120px
16
+
17
+ ## 安装使用
18
+
19
+ ```tsx
20
+ import { StatisticCard } from '@beppla/tapas-ui/components/StatisticCard';
21
+ ```
22
+
23
+ ## Props
24
+
25
+ | 属性 | 类型 | 默认值 | 说明 |
26
+ |------|------|--------|------|
27
+ | title | `string` | (必填) | 指标标题 |
28
+ | value | `string \| number` | (必填) | 指标数值 |
29
+ | prefix | `string` | `''` | 数值前缀(如 $、EUR) |
30
+ | suffix | `string` | `''` | 数值后缀(如 %、单) |
31
+ | trend | `{ value: number; isPositive?: boolean }` | - | 趋势数据 |
32
+ | description | `string` | - | 描述文本 |
33
+ | icon | `React.ReactNode` | - | 右上角图标(任意 React 节点) |
34
+ | color | `string` | `'#FF6B00'` | 数值颜色 |
35
+ | onPress | `() => void` | - | 点击回调 |
36
+ | loading | `boolean` | `false` | 是否加载中 |
37
+ | style | `any` | - | 自定义样式 |
38
+
39
+ ## 使用示例
40
+
41
+ ### 基础用法
42
+
43
+ ```tsx
44
+ <StatisticCard title="Total Sales" value="1,234" />
45
+ ```
46
+
47
+ ### 带前缀和后缀
48
+
49
+ ```tsx
50
+ <StatisticCard title="Revenue" value="12,345" prefix="$" />
51
+ <StatisticCard title="Growth Rate" value="15.8" suffix="%" />
52
+ ```
53
+
54
+ ### 带趋势指示
55
+
56
+ ```tsx
57
+ <StatisticCard
58
+ title="Monthly Revenue"
59
+ value="45,678"
60
+ prefix="$"
61
+ trend={{ value: 12.5, isPositive: true }}
62
+ description="Compared to last month"
63
+ />
64
+
65
+ <StatisticCard
66
+ title="Error Rate"
67
+ value="2.3"
68
+ suffix="%"
69
+ trend={{ value: 5.2, isPositive: false }}
70
+ description="Compared to last week"
71
+ color="#D63031"
72
+ />
73
+ ```
74
+
75
+ ### 带图标
76
+
77
+ ```tsx
78
+ import TapasIcon from '@beppla/tapas-ui/components/Icons/TapasIcon';
79
+
80
+ <StatisticCard
81
+ title="Total Orders"
82
+ value="8,456"
83
+ icon={<TapasIcon name="shopping_cart" size={24} color="#FF6B00" />}
84
+ trend={{ value: 8.3, isPositive: true }}
85
+ />
86
+ ```
87
+
88
+ ### 仪表板组合
89
+
90
+ ```tsx
91
+ <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
92
+ <StatisticCard
93
+ title="Total Revenue"
94
+ value="123,456"
95
+ prefix="$"
96
+ trend={{ value: 15.3, isPositive: true }}
97
+ description="Last 30 days"
98
+ color="#FF6B00"
99
+ />
100
+ <StatisticCard
101
+ title="New Users"
102
+ value="1,234"
103
+ trend={{ value: 8.2, isPositive: true }}
104
+ color="#0066CC"
105
+ />
106
+ <StatisticCard
107
+ title="Conversion Rate"
108
+ value="3.45"
109
+ suffix="%"
110
+ trend={{ value: 2.1, isPositive: false }}
111
+ color="#00B894"
112
+ />
113
+ </View>
114
+ ```
115
+
116
+ ### 加载中
117
+
118
+ ```tsx
119
+ <StatisticCard title="Loading Data" value="0" loading />
120
+ ```
121
+
122
+ ## 注意事项
123
+
124
+ - `title` 和 `value` 为必填属性
125
+ - `trend.isPositive` 默认为 `true`(不传或传 `undefined` 时视为正向)
126
+ - 趋势值显示精度为小数点后 1 位(`toFixed(1)`)
127
+ - 加载状态显示 "Loading..." 文本,不渲染数值和趋势
128
+ - 有 `onPress` 时容器变为 TouchableOpacity(activeOpacity=0.7),无 `onPress` 时为 View
129
+ - 默认数值颜色为橙色(#FF6B00),可通过 `color` 自定义
@@ -0,0 +1,75 @@
1
+ # Status
2
+
3
+ 状态标签组件,用于展示不同类型的状态信息。支持 point(圆点)和 solid(填充)两种显示模式。
4
+
5
+ ## 功能特性
6
+
7
+ - ✅ 支持 6 种状态类型:success、error、warning、waiting、unavailable、disabled
8
+ - ✅ 支持 point 模式(圆点 + 文字)和 solid 模式(带边框文字)
9
+ - ✅ 自动首字母大写显示
10
+ - ✅ 各状态类型使用主题色渲染
11
+ - ✅ 空标签自动返回 null,不渲染
12
+ - ✅ 支持自定义样式覆盖
13
+ - ✅ 支持 testID 属性用于测试
14
+ - ✅ 使用 React.memo 优化渲染性能
15
+
16
+ ## 安装使用
17
+
18
+ ```tsx
19
+ import Status from '@beppla/tapas-ui/components/Status/Status';
20
+ // 或具名导出
21
+ import { StatusTag } from '@beppla/tapas-ui/components/Status/Status';
22
+ ```
23
+
24
+ ## Props
25
+
26
+ | 属性 | 类型 | 默认值 | 说明 |
27
+ |------|------|--------|------|
28
+ | tag | `string` | - | 状态文字 |
29
+ | type | `STATUS_TYPE` | - | 状态类型 |
30
+ | mode | `'point' \| 'solid'` | `'point'` | 显示模式 |
31
+ | testID | `string` | - | 测试标识 |
32
+ | styles | `StyleProp<ViewStyle>` | - | 自定义容器样式 |
33
+
34
+ ### STATUS_TYPE
35
+
36
+ ```ts
37
+ type STATUS_TYPE = 'success' | 'error' | 'warning' | 'waiting' | 'unavailable' | 'disabled';
38
+ ```
39
+
40
+ ## 使用示例
41
+
42
+ ### Point 模式(圆点 + 文字)
43
+
44
+ ```tsx
45
+ <Status tag="Active" type="success" mode="point" />
46
+ <Status tag="Error" type="error" mode="point" />
47
+ <Status tag="Warning" type="warning" mode="point" />
48
+ <Status tag="Waiting" type="waiting" mode="point" />
49
+ ```
50
+
51
+ ### Solid 模式(带边框文字)
52
+
53
+ ```tsx
54
+ <Status tag="Available" type="success" mode="solid" />
55
+ <Status tag="Cancelled" type="error" mode="solid" />
56
+ <Status tag="Pending" type="warning" mode="solid" />
57
+ ```
58
+
59
+ ### 全部状态类型
60
+
61
+ ```tsx
62
+ {(['success', 'error', 'warning', 'waiting', 'unavailable', 'disabled'] as STATUS_TYPE[]).map(
63
+ (type) => (
64
+ <Status key={type} type={type} tag={type} mode="point" />
65
+ )
66
+ )}
67
+ ```
68
+
69
+ ## 注意事项
70
+
71
+ - `tag` 为空字符串时组件不渲染(返回 null)
72
+ - 标签文字会自动首字母大写(通过 `capitalizeFirstLetter` 处理)
73
+ - point 模式下圆点为 8x8 像素,带圆角
74
+ - solid 模式使用边框 + 文字颜色,不填充背景
75
+ - waiting 状态在 point 模式下有特殊样式(使用边框而非背景色)
@@ -0,0 +1,76 @@
1
+ # Steps
2
+
3
+ 步骤条组件,用于展示多步骤流程的当前进度。步骤编号以圆形展示,已完成步骤显示对勾图标,步骤之间以连接线相连,支持点击已完成和当前步骤进行导航。
4
+
5
+ ## 功能特性
6
+
7
+ - ✅ 多步骤流程展示
8
+ - ✅ 三种步骤状态:完成(对勾图标)、当前(高亮)、待完成(灰色编号)
9
+ - ✅ 步骤间连接线颜色跟随状态变化
10
+ - ✅ 支持点击已完成/当前步骤进行导航
11
+ - ✅ 待完成步骤不可点击
12
+ - ✅ 横向排列布局
13
+ - ✅ 主题色适配(品牌色高亮)
14
+ - ✅ React.memo 优化性能
15
+
16
+ ## 安装使用
17
+
18
+ ```tsx
19
+ import { Steps } from '@beppla/tapas-ui';
20
+ ```
21
+
22
+ ## Props
23
+
24
+ | 属性 | 类型 | 默认值 | 说明 |
25
+ |------|------|--------|------|
26
+ | steps | `{ title: string; description?: string }[]` | `[]` | 步骤配置数组(必填) |
27
+ | currentStep | `number` | - | 当前步骤索引,从 0 开始(必填) |
28
+ | onPressStep | `(step: number) => void` | - | 步骤点击回调,参数为步骤编号(从 1 开始)(必填) |
29
+ | testID | `string` | - | 测试标识 |
30
+
31
+ ## 使用示例
32
+
33
+ ### 基础用法
34
+
35
+ ```tsx
36
+ const steps = [
37
+ { title: 'Step 1' },
38
+ { title: 'Step 2' },
39
+ { title: 'Step 3' },
40
+ ];
41
+
42
+ <Steps
43
+ steps={steps}
44
+ currentStep={1}
45
+ onPressStep={(step) => console.log('Navigate to step:', step)}
46
+ />
47
+ ```
48
+
49
+ ### 全部完成
50
+
51
+ ```tsx
52
+ <Steps
53
+ steps={[{ title: 'Info' }, { title: 'Payment' }, { title: 'Done' }]}
54
+ currentStep={3}
55
+ onPressStep={handleStepPress}
56
+ />
57
+ ```
58
+
59
+ ### 第一步
60
+
61
+ ```tsx
62
+ <Steps
63
+ steps={[{ title: 'Cart' }, { title: 'Checkout' }, { title: 'Confirm' }]}
64
+ currentStep={0}
65
+ onPressStep={handleStepPress}
66
+ />
67
+ ```
68
+
69
+ ## 注意事项
70
+
71
+ - `currentStep` 从 0 开始索引,0 表示第一步为当前步骤
72
+ - `onPressStep` 回调参数为步骤编号(从 1 开始),与界面展示一致
73
+ - 仅已完成和当前步骤可点击,待完成步骤点击无响应
74
+ - 步骤圆形尺寸固定 28x28,连接线宽度 76px
75
+ - `title` 和 `description` 在当前实现中仅用于数据传递,界面展示为编号/对勾
76
+ - 需在 `ThemeProvider` 内使用
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _reactNative = require("react-native");
9
+ var _themed = require("@rneui/themed");
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
12
+ const TapasSwitch = ({
13
+ trackColor,
14
+ thumbColor,
15
+ width = 56,
16
+ height = 32,
17
+ onValueChange,
18
+ value,
19
+ disabled,
20
+ testID,
21
+ containerStyle
22
+ }) => {
23
+ const styles = useStyles();
24
+ const leftAnim = (0, _react.useRef)(new _reactNative.Animated.Value(value ? width - height - 1 : 3)).current;
25
+ (0, _react.useEffect)(() => {
26
+ _reactNative.Animated.timing(leftAnim, {
27
+ toValue: value ? width - height - 1 : 3,
28
+ duration: 200,
29
+ useNativeDriver: false
30
+ }).start();
31
+ }, [value, width, height, leftAnim]);
32
+ const thumbSize = height - 6;
33
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
34
+ style: [styles.container, containerStyle],
35
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
36
+ testID: testID,
37
+ activeOpacity: 0.8,
38
+ onPress: () => {
39
+ if (!disabled && onValueChange) {
40
+ onValueChange(!value);
41
+ }
42
+ },
43
+ style: [styles.track, {
44
+ width,
45
+ height,
46
+ borderRadius: height / 2,
47
+ backgroundColor: value ? trackColor?.true ?? (disabled ? styles.disabledOnBg.backgroundColor : styles.onBg.backgroundColor) : trackColor?.false ?? (disabled ? styles.disabledOffBg.backgroundColor : styles.offBg.backgroundColor),
48
+ opacity: disabled ? 0.6 : 1
49
+ }],
50
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
51
+ style: [{
52
+ width: thumbSize,
53
+ height: thumbSize,
54
+ borderRadius: thumbSize / 2,
55
+ backgroundColor: thumbColor ?? styles.thumb.backgroundColor,
56
+ transform: [{
57
+ translateX: leftAnim
58
+ }]
59
+ }, !disabled && styles.shadow]
60
+ })
61
+ })
62
+ });
63
+ };
64
+ const useStyles = (0, _themed.makeStyles)(theme => ({
65
+ container: {
66
+ justifyContent: 'center',
67
+ alignItems: 'center'
68
+ },
69
+ track: {
70
+ padding: 3,
71
+ justifyContent: 'center',
72
+ position: 'relative'
73
+ },
74
+ onBg: {
75
+ backgroundColor: theme.colors.success
76
+ },
77
+ offBg: {
78
+ backgroundColor: theme.colors.grey3
79
+ },
80
+ disabledOnBg: {
81
+ backgroundColor: theme.colors.grey3
82
+ },
83
+ disabledOffBg: {
84
+ backgroundColor: theme.colors.grey4
85
+ },
86
+ thumb: {
87
+ backgroundColor: theme.colors.white
88
+ },
89
+ shadow: {
90
+ shadowColor: 'rgba(0, 0, 0, 0.12)',
91
+ shadowOffset: {
92
+ width: 0,
93
+ height: 4
94
+ },
95
+ shadowOpacity: 0.12,
96
+ shadowRadius: 16,
97
+ elevation: 8
98
+ }
99
+ }));
100
+ var _default = exports.default = (0, _themed.withTheme)(/*#__PURE__*/_react.default.memo(TapasSwitch));
101
+ //# sourceMappingURL=Switch.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_themed","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TapasSwitch","trackColor","thumbColor","width","height","onValueChange","value","disabled","testID","containerStyle","styles","useStyles","leftAnim","useRef","Animated","Value","current","useEffect","timing","toValue","duration","useNativeDriver","start","thumbSize","jsx","View","style","container","children","TouchableOpacity","activeOpacity","onPress","track","borderRadius","backgroundColor","true","disabledOnBg","onBg","false","disabledOffBg","offBg","opacity","thumb","transform","translateX","shadow","makeStyles","theme","justifyContent","alignItems","padding","position","colors","success","grey3","grey4","white","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","_default","exports","withTheme","React","memo"],"sourceRoot":"../../../components","sources":["Switch/Switch.tsx"],"mappings":"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","ignoreList":[]}