@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.
- package/commonjs/Alert/README.md +75 -0
- package/commonjs/BarChart/README.md +172 -0
- package/commonjs/Button/README.md +108 -0
- package/commonjs/Calendar/Calendar.base.js +1 -1
- package/commonjs/Calendar/Calendar.base.js.map +1 -1
- package/commonjs/Calendar/README.md +410 -0
- package/commonjs/Card/README.md +126 -0
- package/commonjs/CheckBox/README.md +147 -0
- package/commonjs/CircularProgress/README.md +70 -0
- package/commonjs/Collapsible/README.md +140 -0
- package/commonjs/ComboChart/README.md +124 -0
- package/commonjs/DashboardCard/README.md +120 -0
- package/commonjs/DataTable/README.md +159 -0
- package/commonjs/DeviceSelectionModal/README.md +124 -0
- package/commonjs/DraggableFlatList/README.md +35 -0
- package/commonjs/Drawer/README.md +175 -0
- package/commonjs/Dropdown/Dropdown.js +60 -30
- package/commonjs/Dropdown/Dropdown.js.map +1 -1
- package/commonjs/Dropdown/README.md +230 -0
- package/commonjs/ExternalLink/README.md +81 -0
- package/commonjs/Gantt/README.md +155 -0
- package/commonjs/Grid/README.md +197 -0
- package/commonjs/Header/README.md +109 -0
- package/commonjs/HelloWave/README.md +28 -0
- package/commonjs/Hoverable/Hoverable.js.map +1 -1
- package/commonjs/IconText/README.md +99 -0
- package/commonjs/Image/PreviewImg/README.md +100 -0
- package/commonjs/Image/README.md +88 -0
- package/commonjs/Input/Input.js +60 -4
- package/commonjs/Input/Input.js.map +1 -1
- package/commonjs/Layout/README.md +174 -0
- package/commonjs/LineChart/README.md +181 -0
- package/commonjs/ListItem/README.md +122 -0
- package/commonjs/MessageBox/MessageBox.js +7 -1
- package/commonjs/MessageBox/MessageBox.js.map +1 -1
- package/commonjs/MessageBox/README.md +120 -0
- package/commonjs/Navigation/README.md +197 -0
- package/commonjs/NumericInput/README.md +95 -0
- package/commonjs/Overlay/README.md +84 -0
- package/commonjs/Pagination/README.md +106 -0
- package/commonjs/PieChart/README.md +212 -0
- package/commonjs/Popover/README.md +82 -0
- package/commonjs/Progress/README.md +106 -0
- package/commonjs/RadioButton/README.md +85 -0
- package/commonjs/ScanButton/README.md +72 -0
- package/commonjs/SearchInput/SearchInput.js.map +1 -1
- package/commonjs/SheetTitle/README.md +89 -0
- package/commonjs/Shell/README.md +152 -0
- package/commonjs/Shell/Shell.js.map +1 -1
- package/commonjs/StatisticCard/README.md +129 -0
- package/commonjs/Status/README.md +75 -0
- package/commonjs/Steps/README.md +76 -0
- package/commonjs/Switch/Switch.js +101 -0
- package/commonjs/Switch/Switch.js.map +1 -0
- package/commonjs/Tab/README.md +161 -0
- package/commonjs/Tag/README.md +93 -0
- package/commonjs/Task/README.md +110 -0
- package/commonjs/Text/README.md +97 -0
- package/commonjs/TextArea/README.md +127 -0
- package/commonjs/TextArea/TextArea.js +4 -2
- package/commonjs/TextArea/TextArea.js.map +1 -1
- package/commonjs/Theme/README.md +161 -0
- package/commonjs/Theme/makeStyles.js +30 -0
- package/commonjs/Theme/makeStyles.js.map +1 -0
- package/commonjs/Theme/withTheme.js +91 -0
- package/commonjs/Theme/withTheme.js.map +1 -0
- package/commonjs/Timeline/README.md +111 -0
- package/commonjs/Toast/README.md +96 -0
- package/commonjs/Upload/Upload.js +126 -0
- package/commonjs/Upload/Upload.js.map +1 -0
- package/commonjs/index.js +24 -4
- package/commonjs/index.js.map +1 -1
- package/module/Alert/README.md +75 -0
- package/module/BarChart/README.md +172 -0
- package/module/Button/README.md +108 -0
- package/module/Calendar/Calendar.base.js +1 -1
- package/module/Calendar/Calendar.base.js.map +1 -1
- package/module/Calendar/README.md +410 -0
- package/module/Card/README.md +126 -0
- package/module/CheckBox/README.md +147 -0
- package/module/CircularProgress/README.md +70 -0
- package/module/Collapsible/README.md +140 -0
- package/module/ComboChart/README.md +124 -0
- package/module/DashboardCard/README.md +120 -0
- package/module/DataTable/README.md +159 -0
- package/module/DeviceSelectionModal/README.md +124 -0
- package/module/DraggableFlatList/README.md +35 -0
- package/module/Drawer/README.md +175 -0
- package/module/Dropdown/Dropdown.js +60 -30
- package/module/Dropdown/Dropdown.js.map +1 -1
- package/module/Dropdown/README.md +230 -0
- package/module/ExternalLink/README.md +81 -0
- package/module/Gantt/README.md +155 -0
- package/module/Grid/README.md +197 -0
- package/module/Header/README.md +109 -0
- package/module/HelloWave/README.md +28 -0
- package/module/Hoverable/Hoverable.js.map +1 -1
- package/module/IconText/README.md +99 -0
- package/module/Image/PreviewImg/README.md +100 -0
- package/module/Image/README.md +88 -0
- package/module/Input/Input.js +60 -4
- package/module/Input/Input.js.map +1 -1
- package/module/Layout/README.md +174 -0
- package/module/LineChart/README.md +181 -0
- package/module/ListItem/README.md +122 -0
- package/module/MessageBox/MessageBox.js +8 -2
- package/module/MessageBox/MessageBox.js.map +1 -1
- package/module/MessageBox/README.md +120 -0
- package/module/Navigation/README.md +197 -0
- package/module/NumericInput/README.md +95 -0
- package/module/Overlay/README.md +84 -0
- package/module/Pagination/README.md +106 -0
- package/module/PieChart/README.md +212 -0
- package/module/Popover/README.md +82 -0
- package/module/Progress/README.md +106 -0
- package/module/RadioButton/README.md +85 -0
- package/module/ScanButton/README.md +72 -0
- package/module/SearchInput/SearchInput.js.map +1 -1
- package/module/SheetTitle/README.md +89 -0
- package/module/Shell/README.md +152 -0
- package/module/Shell/Shell.js.map +1 -1
- package/module/StatisticCard/README.md +129 -0
- package/module/Status/README.md +75 -0
- package/module/Steps/README.md +76 -0
- package/module/Switch/Switch.js +96 -0
- package/module/Switch/Switch.js.map +1 -0
- package/module/Tab/README.md +161 -0
- package/module/Tag/README.md +93 -0
- package/module/Task/README.md +110 -0
- package/module/Text/README.md +97 -0
- package/module/TextArea/README.md +127 -0
- package/module/TextArea/TextArea.js +4 -2
- package/module/TextArea/TextArea.js.map +1 -1
- package/module/Theme/README.md +161 -0
- package/module/Theme/makeStyles.js +24 -0
- package/module/Theme/makeStyles.js.map +1 -0
- package/module/Theme/withTheme.js +82 -0
- package/module/Theme/withTheme.js.map +1 -0
- package/module/Timeline/README.md +111 -0
- package/module/Toast/README.md +96 -0
- package/module/Upload/Upload.js +121 -0
- package/module/Upload/Upload.js.map +1 -0
- package/module/index.js +11 -3
- package/module/index.js.map +1 -1
- package/package.json +1 -1
- package/typescript/Dropdown/Dropdown.d.ts +20 -0
- package/typescript/Dropdown/Dropdown.d.ts.map +1 -1
- package/typescript/Grid/FixedSizeGrid.d.ts +1 -3
- package/typescript/Grid/FixedSizeGrid.d.ts.map +1 -1
- package/typescript/Grid/Grid.base.d.ts +1 -3
- package/typescript/Grid/Grid.base.d.ts.map +1 -1
- package/typescript/Grid/VariableSizeGrid.d.ts +1 -3
- package/typescript/Grid/VariableSizeGrid.d.ts.map +1 -1
- package/typescript/Input/Input.d.ts +5 -0
- package/typescript/Input/Input.d.ts.map +1 -1
- package/typescript/MessageBox/MessageBox.d.ts.map +1 -1
- package/typescript/SearchInput/SearchInput.d.ts +4 -0
- package/typescript/SearchInput/SearchInput.d.ts.map +1 -1
- package/typescript/Switch/Switch.d.ts +15 -0
- package/typescript/Switch/Switch.d.ts.map +1 -0
- package/typescript/TextArea/TextArea.d.ts +2 -0
- package/typescript/TextArea/TextArea.d.ts.map +1 -1
- package/typescript/Theme/makeStyles.d.ts +11 -0
- package/typescript/Theme/makeStyles.d.ts.map +1 -0
- package/typescript/Theme/withTheme.d.ts +12 -0
- package/typescript/Theme/withTheme.d.ts.map +1 -0
- package/typescript/Upload/Upload.d.ts +25 -0
- package/typescript/Upload/Upload.d.ts.map +1 -0
- package/typescript/WebViewBridge/useWebViewBridge.d.ts +1 -1
- package/typescript/WebViewBridge/useWebViewBridge.d.ts.map +1 -1
- package/typescript/common/hooks/useBridgelessFix.d.ts +1 -1
- package/typescript/index.d.ts +8 -2
- 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,
|
|
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":[]}
|