@yorkjs/hive-ui 0.0.8 → 0.1.0
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 +1 -1
- package/src/components/Cell/Cell.tsx +68 -56
- package/src/components/Cell/CellValue.tsx +27 -9
- package/src/components/Cell/index.module.styl +12 -1
- package/src/item/ProductItem/ProductItem.tsx +5 -1
- package/src/components/FieldCard/index.module.styl +0 -60
- package/src/components/FieldCard/index.tsx +0 -83
package/package.json
CHANGED
|
@@ -79,72 +79,84 @@ const Cell: React.FC<CellProps> = (props) => {
|
|
|
79
79
|
return (
|
|
80
80
|
<View className={containerClass} onClick={onClick}>
|
|
81
81
|
<View className={innerClass}>
|
|
82
|
-
{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<View
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
icon
|
|
94
|
-
? (
|
|
95
|
-
<View className={styles['icon-wrapper']}>
|
|
96
|
-
{icon}
|
|
97
|
-
</View>
|
|
98
|
-
) : undefined
|
|
99
|
-
}
|
|
100
|
-
<View className={styles['title-section']}>
|
|
82
|
+
<View className={styles['cell-main']}>
|
|
83
|
+
{
|
|
84
|
+
vertical ? (
|
|
85
|
+
<>
|
|
86
|
+
<View className={styles['header-row']}>
|
|
87
|
+
<View style={{
|
|
88
|
+
display: 'flex',
|
|
89
|
+
flexDirection: 'row',
|
|
90
|
+
alignItems: 'center',
|
|
91
|
+
flex: 1
|
|
92
|
+
}}>
|
|
101
93
|
{
|
|
102
|
-
|
|
103
|
-
?
|
|
104
|
-
|
|
94
|
+
icon
|
|
95
|
+
? (
|
|
96
|
+
<View className={styles['icon-wrapper']}>
|
|
97
|
+
{icon}
|
|
98
|
+
</View>
|
|
99
|
+
) : undefined
|
|
105
100
|
}
|
|
101
|
+
<View className={styles['title-section']}>
|
|
102
|
+
{
|
|
103
|
+
typeof title === 'string'
|
|
104
|
+
? <CellTitle title={title} required={required} tooltip={tooltip} />
|
|
105
|
+
: title
|
|
106
|
+
}
|
|
107
|
+
</View>
|
|
106
108
|
</View>
|
|
109
|
+
{
|
|
110
|
+
showArrow
|
|
111
|
+
? <View className={styles['arrow-wrapper']}><CellArrow /></View>
|
|
112
|
+
: undefined
|
|
113
|
+
}
|
|
107
114
|
</View>
|
|
115
|
+
<View className={styles['content-section']}>
|
|
116
|
+
{renderContent()}
|
|
117
|
+
</View>
|
|
118
|
+
</>
|
|
119
|
+
)
|
|
120
|
+
: (
|
|
121
|
+
<>
|
|
108
122
|
{
|
|
109
|
-
|
|
110
|
-
? <View className={styles['
|
|
123
|
+
icon
|
|
124
|
+
? <View className={styles['icon-wrapper']}>{icon}</View>
|
|
111
125
|
: undefined
|
|
112
126
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<View
|
|
127
|
-
className={styles['title-section']}
|
|
128
|
-
style={titleWidth ? { width: `${titleWidth}px` } : { maxWidth: '60%' }}
|
|
129
|
-
>
|
|
127
|
+
<View
|
|
128
|
+
className={styles['title-section']}
|
|
129
|
+
style={titleWidth ? { width: `${titleWidth}px` } : { maxWidth: '60%' }}
|
|
130
|
+
>
|
|
131
|
+
{
|
|
132
|
+
typeof title === 'string'
|
|
133
|
+
? <CellTitle title={title} required={required} tooltip={tooltip} />
|
|
134
|
+
: title
|
|
135
|
+
}
|
|
136
|
+
</View>
|
|
137
|
+
<View className={styles['content-section']}>
|
|
138
|
+
{renderContent()}
|
|
139
|
+
</View>
|
|
130
140
|
{
|
|
131
|
-
|
|
132
|
-
? <
|
|
133
|
-
:
|
|
141
|
+
showArrow
|
|
142
|
+
? <View className={styles['arrow-wrapper']}><CellArrow /></View>
|
|
143
|
+
: undefined
|
|
134
144
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
+
</>
|
|
146
|
+
)
|
|
147
|
+
}
|
|
148
|
+
</View>
|
|
149
|
+
{
|
|
150
|
+
children
|
|
151
|
+
? (
|
|
152
|
+
<View
|
|
153
|
+
className={styles['cell-extra-children']}
|
|
154
|
+
>
|
|
155
|
+
{children}
|
|
156
|
+
</View>
|
|
145
157
|
)
|
|
146
|
-
|
|
147
|
-
|
|
158
|
+
: undefined
|
|
159
|
+
}
|
|
148
160
|
</View>
|
|
149
161
|
</View>
|
|
150
162
|
)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { Text } from '@tarojs/components'
|
|
2
|
+
import { ITouchEvent, Text } from '@tarojs/components'
|
|
3
3
|
|
|
4
4
|
import { formatClassNames } from '../../util/function'
|
|
5
5
|
|
|
@@ -10,14 +10,28 @@ export interface CellValueProps {
|
|
|
10
10
|
value?: string | number
|
|
11
11
|
placeholder?: string | number
|
|
12
12
|
maxLines?: number
|
|
13
|
+
onClick?:(event: ITouchEvent) => void
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
const CellValue: React.FC<CellValueProps> = ({
|
|
16
|
+
const CellValue: React.FC<CellValueProps> = ({
|
|
17
|
+
value,
|
|
18
|
+
placeholder,
|
|
19
|
+
maxLines,
|
|
20
|
+
className,
|
|
21
|
+
onClick,
|
|
22
|
+
}) => {
|
|
16
23
|
const hasValue = value !== undefined && value !== null && value !== ''
|
|
17
24
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
25
|
+
const dynamicStyle: React.CSSProperties = maxLines !== 1 ? {
|
|
26
|
+
WebkitLineClamp: maxLines,
|
|
27
|
+
} : {}
|
|
28
|
+
|
|
29
|
+
const handlePress = (e: ITouchEvent) => {
|
|
30
|
+
if (onClick) {
|
|
31
|
+
e.stopPropagation()
|
|
32
|
+
onClick(e)
|
|
33
|
+
}
|
|
34
|
+
}
|
|
21
35
|
|
|
22
36
|
if (hasValue) {
|
|
23
37
|
return (
|
|
@@ -27,6 +41,7 @@ const CellValue: React.FC<CellValueProps> = ({ value, placeholder, maxLines, cla
|
|
|
27
41
|
className
|
|
28
42
|
)}
|
|
29
43
|
style={dynamicStyle}
|
|
44
|
+
onClick={handlePress}
|
|
30
45
|
>
|
|
31
46
|
{value}
|
|
32
47
|
</Text>
|
|
@@ -35,10 +50,13 @@ const CellValue: React.FC<CellValueProps> = ({ value, placeholder, maxLines, cla
|
|
|
35
50
|
|
|
36
51
|
if (placeholder !== undefined && placeholder !== null) {
|
|
37
52
|
return (
|
|
38
|
-
<Text
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
53
|
+
<Text
|
|
54
|
+
className={formatClassNames(
|
|
55
|
+
styles['placeholder-text'],
|
|
56
|
+
className
|
|
57
|
+
)}
|
|
58
|
+
onClick={handlePress}
|
|
59
|
+
>
|
|
42
60
|
{placeholder}
|
|
43
61
|
</Text>
|
|
44
62
|
)
|
|
@@ -62,8 +62,12 @@ $DESC_FONT_SIZE = 13PX
|
|
|
62
62
|
&.show-separator
|
|
63
63
|
halfBorder(bottom, var(--lineBorder))
|
|
64
64
|
|
|
65
|
+
.cell-main
|
|
66
|
+
width 100%
|
|
67
|
+
display flex
|
|
68
|
+
|
|
65
69
|
.is-horizontal
|
|
66
|
-
.cell-
|
|
70
|
+
.cell-main
|
|
67
71
|
flex-direction row
|
|
68
72
|
align-items center
|
|
69
73
|
|
|
@@ -80,6 +84,9 @@ $DESC_FONT_SIZE = 13PX
|
|
|
80
84
|
text-align right
|
|
81
85
|
|
|
82
86
|
.is-vertical
|
|
87
|
+
.cell-main
|
|
88
|
+
flex-direction column
|
|
89
|
+
|
|
83
90
|
.header-row
|
|
84
91
|
display flex
|
|
85
92
|
flex-direction row
|
|
@@ -98,6 +105,10 @@ $DESC_FONT_SIZE = 13PX
|
|
|
98
105
|
justify-content flex-start
|
|
99
106
|
text-align left
|
|
100
107
|
|
|
108
|
+
.cell-extra-children
|
|
109
|
+
width 100%
|
|
110
|
+
display block
|
|
111
|
+
|
|
101
112
|
.icon-wrapper
|
|
102
113
|
margin-right 12PX
|
|
103
114
|
display flex
|
|
@@ -62,6 +62,8 @@ export interface IProductCardProps {
|
|
|
62
62
|
saleCount?: string | number
|
|
63
63
|
/** 商品条码 */
|
|
64
64
|
barcode?: string
|
|
65
|
+
/** 自定义标签 */
|
|
66
|
+
customTags?: React.ReactNode
|
|
65
67
|
/** 规格描述文案 (如: 红色, 大号) */
|
|
66
68
|
spec?: string
|
|
67
69
|
/** 规格描述最大显示行数 (默认1) */
|
|
@@ -113,6 +115,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
|
|
|
113
115
|
title,
|
|
114
116
|
titleMaxLines = 1,
|
|
115
117
|
productType,
|
|
118
|
+
customTags,
|
|
116
119
|
showMultipleSpec,
|
|
117
120
|
stockCount,
|
|
118
121
|
saleCount,
|
|
@@ -229,7 +232,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
|
|
|
229
232
|
})
|
|
230
233
|
}, [deliveryTypes, labels])
|
|
231
234
|
|
|
232
|
-
|
|
235
|
+
const stockAndSaleElem = useMemo(() => {
|
|
233
236
|
if (!stockCount && !saleCount) return null
|
|
234
237
|
return (
|
|
235
238
|
<View className={styles['stock-and-sale']}>
|
|
@@ -306,6 +309,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
|
|
|
306
309
|
</View>
|
|
307
310
|
</ScrollView>
|
|
308
311
|
)}
|
|
312
|
+
{customTags}
|
|
309
313
|
{(activityType || deliveryTags) && (
|
|
310
314
|
<View className={styles['tag-row']}>
|
|
311
315
|
{activityType && labels.activity_type && (
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
@import '../../styles/mixin.styl'
|
|
2
|
-
|
|
3
|
-
$CELL_PADDING_HORIZONTAL = 16PX
|
|
4
|
-
$CELL_PADDING_VERTICAL = 14PX
|
|
5
|
-
$TITLE_FONT_SIZE = 16PX
|
|
6
|
-
|
|
7
|
-
.field-card-container
|
|
8
|
-
border-radius 10PX
|
|
9
|
-
background-color var(--containerCard)
|
|
10
|
-
margin 0 12PX
|
|
11
|
-
margin-bottom 12PX
|
|
12
|
-
overflow visible
|
|
13
|
-
|
|
14
|
-
.card-header
|
|
15
|
-
display flex
|
|
16
|
-
flex-direction row
|
|
17
|
-
align-items center
|
|
18
|
-
justify-content space-between
|
|
19
|
-
padding $CELL_PADDING_VERTICAL $CELL_PADDING_HORIZONTAL
|
|
20
|
-
position relative
|
|
21
|
-
min-height 48PX
|
|
22
|
-
box-sizing border-box
|
|
23
|
-
halfBorder(bottom, var(--lineBorder))
|
|
24
|
-
|
|
25
|
-
.header-left
|
|
26
|
-
flex 1
|
|
27
|
-
display flex
|
|
28
|
-
flex-direction row
|
|
29
|
-
align-items center
|
|
30
|
-
min-width 0
|
|
31
|
-
|
|
32
|
-
.header-title
|
|
33
|
-
color var(--textTitle)
|
|
34
|
-
font-size $TITLE_FONT_SIZE
|
|
35
|
-
font-weight 500
|
|
36
|
-
line-height 1.4
|
|
37
|
-
lineClamp(1)
|
|
38
|
-
|
|
39
|
-
.edit-icon
|
|
40
|
-
margin-left 6PX
|
|
41
|
-
color var(--textMuted)
|
|
42
|
-
flex-shrink 0
|
|
43
|
-
|
|
44
|
-
.header-extra
|
|
45
|
-
margin-left 12PX
|
|
46
|
-
flex-shrink 0
|
|
47
|
-
display flex
|
|
48
|
-
align-items center
|
|
49
|
-
// 动作区域通常字号稍小
|
|
50
|
-
font-size 14PX
|
|
51
|
-
|
|
52
|
-
.action-text
|
|
53
|
-
color #FF4D4F
|
|
54
|
-
|
|
55
|
-
.action-link
|
|
56
|
-
color var(--primary)
|
|
57
|
-
|
|
58
|
-
.card-content
|
|
59
|
-
border-radius 0 0 10PX 10PX
|
|
60
|
-
overflow hidden
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { View, Text, ITouchEvent } from '@tarojs/components'
|
|
3
|
-
|
|
4
|
-
import { formatClassNames } from '../../util/function'
|
|
5
|
-
import Icon from '../Icon'
|
|
6
|
-
|
|
7
|
-
import styles from './index.module.styl'
|
|
8
|
-
|
|
9
|
-
export interface FieldCardProps {
|
|
10
|
-
/** 标题内容 */
|
|
11
|
-
title: string
|
|
12
|
-
/** 是否显示标题旁的编辑小图标 */
|
|
13
|
-
showEditIcon?: boolean
|
|
14
|
-
/** 右侧动作区域：支持字符串、Icon 或自定义节点 */
|
|
15
|
-
extra?: React.ReactNode
|
|
16
|
-
/** 点击整个 Header 区域的回调 */
|
|
17
|
-
onHeaderClick?: (e: ITouchEvent) => void
|
|
18
|
-
/** 点击右侧 extra 区域的回调 (如果传了 extra 且需要独立点击) */
|
|
19
|
-
onExtraClick?: (e: ITouchEvent) => void
|
|
20
|
-
/** 子组件 */
|
|
21
|
-
children?: React.ReactNode
|
|
22
|
-
/** 外部样式 */
|
|
23
|
-
className?: string
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const FieldCard: React.FC<FieldCardProps> = (props) => {
|
|
27
|
-
const {
|
|
28
|
-
title,
|
|
29
|
-
showEditIcon = false,
|
|
30
|
-
extra,
|
|
31
|
-
onHeaderClick,
|
|
32
|
-
onExtraClick,
|
|
33
|
-
children,
|
|
34
|
-
className
|
|
35
|
-
} = props
|
|
36
|
-
|
|
37
|
-
const handleExtraClick = (e: ITouchEvent) => {
|
|
38
|
-
if (onExtraClick) {
|
|
39
|
-
e.stopPropagation()
|
|
40
|
-
onExtraClick(e)
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
return (
|
|
45
|
-
<View className={formatClassNames(styles['field-card-container'], className)}>
|
|
46
|
-
<View className={styles['card-header']} onClick={onHeaderClick}>
|
|
47
|
-
<View className={styles['header-left']}>
|
|
48
|
-
<Text className={styles['header-title']}>{title}</Text>
|
|
49
|
-
{
|
|
50
|
-
showEditIcon
|
|
51
|
-
? (
|
|
52
|
-
<Icon name='edit' size={14} className={styles['edit-icon']} />
|
|
53
|
-
)
|
|
54
|
-
: undefined
|
|
55
|
-
}
|
|
56
|
-
</View>
|
|
57
|
-
|
|
58
|
-
{extra && (
|
|
59
|
-
<View
|
|
60
|
-
className={styles['header-extra']}
|
|
61
|
-
onClick={handleExtraClick}
|
|
62
|
-
>
|
|
63
|
-
{
|
|
64
|
-
typeof extra === 'string'
|
|
65
|
-
? (
|
|
66
|
-
<Text className={styles['action-text']}>{extra}</Text>
|
|
67
|
-
)
|
|
68
|
-
: (
|
|
69
|
-
extra
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
</View>
|
|
73
|
-
)}
|
|
74
|
-
</View>
|
|
75
|
-
|
|
76
|
-
<View className={styles['card-content']}>
|
|
77
|
-
{children}
|
|
78
|
-
</View>
|
|
79
|
-
</View>
|
|
80
|
-
)
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export default FieldCard
|