@yorkjs/hive-ui 2.3.3 → 2.3.4
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/package.json
CHANGED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@import '../../styles/mixin.styl'
|
|
2
|
+
@import '../../styles/variable.styl'
|
|
3
|
+
|
|
4
|
+
.stats-card
|
|
5
|
+
padding 15PX 12PX
|
|
6
|
+
|
|
7
|
+
.card-title
|
|
8
|
+
margin-bottom 16PX
|
|
9
|
+
font-size 16PX
|
|
10
|
+
font-weight bold
|
|
11
|
+
color var(--textTitle)
|
|
12
|
+
line-height 22PX
|
|
13
|
+
lineClamp(1)
|
|
14
|
+
|
|
15
|
+
.stats-row
|
|
16
|
+
display flex
|
|
17
|
+
align-items center
|
|
18
|
+
justify-content space-between
|
|
19
|
+
|
|
20
|
+
.stat-item
|
|
21
|
+
display flex
|
|
22
|
+
flex-direction column
|
|
23
|
+
align-items center
|
|
24
|
+
|
|
25
|
+
.stat-value
|
|
26
|
+
font-size 14PX
|
|
27
|
+
font-weight bold
|
|
28
|
+
color var(--primary)
|
|
29
|
+
line-height 20PX
|
|
30
|
+
|
|
31
|
+
.stat-label
|
|
32
|
+
margin-top 5PX
|
|
33
|
+
font-size 12PX
|
|
34
|
+
color var(--textContent)
|
|
35
|
+
line-height 17PX
|
|
36
|
+
lineClamp(1)
|
|
37
|
+
|
|
38
|
+
.stat-divider
|
|
39
|
+
width 1PX
|
|
40
|
+
height 38PX
|
|
41
|
+
flex-shrink 0
|
|
42
|
+
halfBorder(left, var(--lineBorder))
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React, { Fragment } from 'react'
|
|
2
|
+
import { View, Text } from '@tarojs/components'
|
|
3
|
+
|
|
4
|
+
import Card from '../Card'
|
|
5
|
+
import { formatClassNames } from '../../util/function'
|
|
6
|
+
|
|
7
|
+
import styles from './index.module.styl'
|
|
8
|
+
|
|
9
|
+
export interface StatsCardItem {
|
|
10
|
+
/** 统计项唯一标识 */
|
|
11
|
+
key: string | number
|
|
12
|
+
/** 统计数值 */
|
|
13
|
+
value: React.ReactNode
|
|
14
|
+
/** 统计项名称 */
|
|
15
|
+
label: React.ReactNode
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export interface StatsCardProps {
|
|
19
|
+
/** 卡片标题，不传则不显示标题区域 */
|
|
20
|
+
title?: React.ReactNode
|
|
21
|
+
/** 统计项列表 */
|
|
22
|
+
items: StatsCardItem[]
|
|
23
|
+
/** 自定义类名 */
|
|
24
|
+
className?: string
|
|
25
|
+
/** 是否显示顶部间距 */
|
|
26
|
+
showTopGutter?: boolean
|
|
27
|
+
/** 是否显示底部间距 */
|
|
28
|
+
showBottomGutter?: boolean
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/** 展示标题和横向统计数据的卡片 */
|
|
32
|
+
const StatsCard: React.FC<StatsCardProps> = ({
|
|
33
|
+
title,
|
|
34
|
+
items,
|
|
35
|
+
className,
|
|
36
|
+
showTopGutter = false,
|
|
37
|
+
showBottomGutter = false,
|
|
38
|
+
}) => (
|
|
39
|
+
<Card
|
|
40
|
+
className={formatClassNames(
|
|
41
|
+
styles['stats-card'],
|
|
42
|
+
className
|
|
43
|
+
)}
|
|
44
|
+
showTopGutter={showTopGutter}
|
|
45
|
+
showBottomGutter={showBottomGutter}
|
|
46
|
+
>
|
|
47
|
+
{title !== undefined && title !== null && (
|
|
48
|
+
<View className={styles['card-title']}>
|
|
49
|
+
{typeof title === 'string' ? <Text>{title}</Text> : title}
|
|
50
|
+
</View>
|
|
51
|
+
)}
|
|
52
|
+
<View className={styles['stats-row']}>
|
|
53
|
+
{items.map((item, index) => (
|
|
54
|
+
<Fragment key={item.key}>
|
|
55
|
+
{index > 0 && <View className={styles['stat-divider']} />}
|
|
56
|
+
<View className={styles['stat-item']}>
|
|
57
|
+
<View className={styles['stat-value']}>
|
|
58
|
+
{typeof item.value === 'string' || typeof item.value === 'number'
|
|
59
|
+
? <Text>{item.value}</Text>
|
|
60
|
+
: item.value}
|
|
61
|
+
</View>
|
|
62
|
+
<View className={styles['stat-label']}>
|
|
63
|
+
{typeof item.label === 'string' || typeof item.label === 'number'
|
|
64
|
+
? <Text>{item.label}</Text>
|
|
65
|
+
: item.label}
|
|
66
|
+
</View>
|
|
67
|
+
</View>
|
|
68
|
+
</Fragment>
|
|
69
|
+
))}
|
|
70
|
+
</View>
|
|
71
|
+
</Card>
|
|
72
|
+
)
|
|
73
|
+
|
|
74
|
+
export default StatsCard
|
package/src/index.ts
CHANGED
|
@@ -15,6 +15,7 @@ export { default as Alert } from './components/Alert'
|
|
|
15
15
|
export { default as Switch } from './components/Switch'
|
|
16
16
|
export { default as SimpleModal } from './components/SimpleModal'
|
|
17
17
|
export { default as Progress } from './components/Progress'
|
|
18
|
+
export { default as StatsCard, type StatsCardItem, type StatsCardProps } from './components/StatsCard'
|
|
18
19
|
|
|
19
20
|
export { default as FlowItem } from './item/FlowItem'
|
|
20
21
|
export { default as ListItem } from './item/ListItem'
|
|
@@ -34,4 +35,4 @@ export {
|
|
|
34
35
|
type RichTextImageBlock,
|
|
35
36
|
type RichTextAlign,
|
|
36
37
|
type RichTextBlockType,
|
|
37
|
-
} from './components/RichTextEditor'
|
|
38
|
+
} from './components/RichTextEditor'
|