@yorkjs/hive-ui 2.1.5 → 2.1.6
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,51 @@
|
|
|
1
|
+
@import '../../styles/mixin.styl'
|
|
2
|
+
|
|
3
|
+
.entry-item-card
|
|
4
|
+
padding 14PX 18PX
|
|
5
|
+
position relative
|
|
6
|
+
|
|
7
|
+
.card-main-body
|
|
8
|
+
display flex
|
|
9
|
+
flex-direction row
|
|
10
|
+
align-items center
|
|
11
|
+
justify-content space-between
|
|
12
|
+
|
|
13
|
+
.card-icon-section
|
|
14
|
+
flex-shrink 0
|
|
15
|
+
margin-right 12PX
|
|
16
|
+
display flex
|
|
17
|
+
align-items center
|
|
18
|
+
justify-content center
|
|
19
|
+
|
|
20
|
+
.menu-icon
|
|
21
|
+
width 44PX
|
|
22
|
+
height 44PX
|
|
23
|
+
|
|
24
|
+
.card-info
|
|
25
|
+
flex 1
|
|
26
|
+
display flex
|
|
27
|
+
flex-direction column
|
|
28
|
+
overflow hidden
|
|
29
|
+
|
|
30
|
+
.card-title
|
|
31
|
+
font-size 15PX
|
|
32
|
+
color var(--textTitle)
|
|
33
|
+
line-height 21PX
|
|
34
|
+
margin-bottom 3PX
|
|
35
|
+
wordBreak()
|
|
36
|
+
|
|
37
|
+
.card-desc
|
|
38
|
+
font-size 13PX
|
|
39
|
+
color var(--textMuted)
|
|
40
|
+
line-height 19PX
|
|
41
|
+
lineClamp(2)
|
|
42
|
+
wordBreak()
|
|
43
|
+
|
|
44
|
+
.card-right-section
|
|
45
|
+
margin-left 10PX
|
|
46
|
+
flex-shrink 0
|
|
47
|
+
display flex
|
|
48
|
+
align-items center
|
|
49
|
+
|
|
50
|
+
.arrow-icon
|
|
51
|
+
font-size 14PX
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { View, Text, Image } from '@tarojs/components'
|
|
3
|
+
import { formatClassNames } from '../../util/function'
|
|
4
|
+
|
|
5
|
+
import Card from '../../components/Card'
|
|
6
|
+
import Icon from '../../components/Icon'
|
|
7
|
+
|
|
8
|
+
import styles from './index.module.styl'
|
|
9
|
+
|
|
10
|
+
export interface EntryItemCardProps {
|
|
11
|
+
/** 标题 */
|
|
12
|
+
title: React.ReactNode
|
|
13
|
+
/** 描述文案 */
|
|
14
|
+
desc?: React.ReactNode
|
|
15
|
+
/** 左侧图标：支持远程图片链接或 ReactNode */
|
|
16
|
+
icon?: React.ReactNode
|
|
17
|
+
/** 是否显示右侧内置箭头，默认 true */
|
|
18
|
+
showArrow?: boolean
|
|
19
|
+
/** 箭头颜色 */
|
|
20
|
+
arrowColor?: string
|
|
21
|
+
/** 是否显示顶部大留白 (通常 10PX) */
|
|
22
|
+
showTopBlank?: boolean
|
|
23
|
+
/** 是否显示顶边距 */
|
|
24
|
+
showTopGutter?: boolean
|
|
25
|
+
/** 点击回调 */
|
|
26
|
+
onClick?: () => void
|
|
27
|
+
/** 外部样式 */
|
|
28
|
+
className?: string
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const EntryItemCard: React.FC<EntryItemCardProps> = (props) => {
|
|
32
|
+
const {
|
|
33
|
+
title,
|
|
34
|
+
desc,
|
|
35
|
+
icon,
|
|
36
|
+
showArrow = true,
|
|
37
|
+
arrowColor = 'var(--textPlaceholder)',
|
|
38
|
+
showTopBlank,
|
|
39
|
+
showTopGutter,
|
|
40
|
+
onClick,
|
|
41
|
+
className,
|
|
42
|
+
} = props
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<Card
|
|
46
|
+
className={formatClassNames(styles['entry-item-card'], className)}
|
|
47
|
+
showTopBlank={showTopBlank}
|
|
48
|
+
showTopGutter={showTopGutter}
|
|
49
|
+
>
|
|
50
|
+
<View className={styles['card-main-body']} onClick={onClick}>
|
|
51
|
+
{icon && (
|
|
52
|
+
<View className={styles['card-icon-section']}>
|
|
53
|
+
{
|
|
54
|
+
typeof icon === 'string'
|
|
55
|
+
? (
|
|
56
|
+
<Image
|
|
57
|
+
className={styles['menu-icon']}
|
|
58
|
+
src={icon}
|
|
59
|
+
mode="aspectFit"
|
|
60
|
+
/>
|
|
61
|
+
)
|
|
62
|
+
: (
|
|
63
|
+
icon
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
</View>
|
|
67
|
+
)}
|
|
68
|
+
|
|
69
|
+
<View className={styles['card-info']}>
|
|
70
|
+
<View className={styles['card-title']}>
|
|
71
|
+
{
|
|
72
|
+
typeof title === 'string'
|
|
73
|
+
? <Text>{title}</Text>
|
|
74
|
+
: title
|
|
75
|
+
}
|
|
76
|
+
</View>
|
|
77
|
+
{desc && (
|
|
78
|
+
<View className={styles['card-desc']}>
|
|
79
|
+
{
|
|
80
|
+
typeof desc === 'string'
|
|
81
|
+
? <Text>{desc}</Text>
|
|
82
|
+
: desc
|
|
83
|
+
}
|
|
84
|
+
</View>
|
|
85
|
+
)}
|
|
86
|
+
</View>
|
|
87
|
+
|
|
88
|
+
{showArrow && (
|
|
89
|
+
<View className={styles['card-right-section']}>
|
|
90
|
+
<Icon
|
|
91
|
+
name="right"
|
|
92
|
+
size={14}
|
|
93
|
+
color={arrowColor}
|
|
94
|
+
className={styles['arrow-icon']}
|
|
95
|
+
/>
|
|
96
|
+
</View>
|
|
97
|
+
)}
|
|
98
|
+
</View>
|
|
99
|
+
</Card>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export default React.memo(EntryItemCard)
|
package/src/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { default as Checkbox } from './components/Checkbox'
|
|
|
8
8
|
export { default as Tag } from './components/Tag'
|
|
9
9
|
export { default as FieldCard } from './components/FieldCard'
|
|
10
10
|
export { default as DisplayCard } from './components/DisplayCard'
|
|
11
|
+
export { default as EntryItemCard } from './components/EntryItemCard'
|
|
11
12
|
export { default as SectionCard } from './components/SectionCard'
|
|
12
13
|
export { default as RemoteImage } from './components/RemoteImage'
|
|
13
14
|
export { default as Alert } from './components/Alert'
|