@yorkjs/hive-ui 0.1.0 → 0.1.1
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,63 @@
|
|
|
1
|
+
@import '../../styles/mixin.styl'
|
|
2
|
+
@import '../../styles/variable.styl'
|
|
3
|
+
|
|
4
|
+
$CELL_PADDING_HORIZONTAL = 16PX
|
|
5
|
+
$CELL_PADDING_VERTICAL = 14PX
|
|
6
|
+
|
|
7
|
+
.field-card-container
|
|
8
|
+
border-radius 10PX
|
|
9
|
+
background-color var(--containerCard)
|
|
10
|
+
margin 0 $WING_BLANK
|
|
11
|
+
margin-bottom 12PX
|
|
12
|
+
overflow hidden
|
|
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 16PX
|
|
35
|
+
lineClamp(1)
|
|
36
|
+
|
|
37
|
+
.edit-icon-wrapper
|
|
38
|
+
padding 4PX 8PX
|
|
39
|
+
margin-left 2PX
|
|
40
|
+
display flex
|
|
41
|
+
align-items center
|
|
42
|
+
justify-content center
|
|
43
|
+
border-radius 4PX
|
|
44
|
+
transition background-color 0.2s
|
|
45
|
+
|
|
46
|
+
&:active
|
|
47
|
+
background-color rgba(0, 0, 0, 0.05)
|
|
48
|
+
|
|
49
|
+
.edit-icon
|
|
50
|
+
color var(--textMuted)
|
|
51
|
+
|
|
52
|
+
.header-extra
|
|
53
|
+
margin-left 12PX
|
|
54
|
+
flex-shrink 0
|
|
55
|
+
display flex
|
|
56
|
+
align-items center
|
|
57
|
+
|
|
58
|
+
.action-text
|
|
59
|
+
color #FF4D4F
|
|
60
|
+
font-size 14PX
|
|
61
|
+
padding 4PX
|
|
62
|
+
&:active
|
|
63
|
+
opacity 0.6
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { View, Text, ITouchEvent } from '@tarojs/components'
|
|
3
|
+
import { formatClassNames } from '../../util/function'
|
|
4
|
+
import Icon from '../Icon'
|
|
5
|
+
import styles from './index.module.styl'
|
|
6
|
+
|
|
7
|
+
export interface FieldCardProps {
|
|
8
|
+
/** 标题内容：支持字符串或自定义 DOM */
|
|
9
|
+
title: React.ReactNode
|
|
10
|
+
/** 是否显示标题旁的编辑小图标 */
|
|
11
|
+
showEditIcon?: boolean
|
|
12
|
+
/** 点击编辑图标的回调 */
|
|
13
|
+
onEditClick?: (e: ITouchEvent) => void
|
|
14
|
+
/** 右侧动作区域：支持字符串、Icon 或自定义节点 */
|
|
15
|
+
extra?: React.ReactNode
|
|
16
|
+
/** 点击右侧 extra 区域的回调 (会自动阻止冒泡) */
|
|
17
|
+
onExtraClick?: (e: ITouchEvent) => void
|
|
18
|
+
/** 子组件 */
|
|
19
|
+
children?: React.ReactNode
|
|
20
|
+
/** 外部样式 */
|
|
21
|
+
className?: string
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const FieldCard: React.FC<FieldCardProps> = (props) => {
|
|
25
|
+
const {
|
|
26
|
+
title,
|
|
27
|
+
showEditIcon = false,
|
|
28
|
+
onEditClick,
|
|
29
|
+
extra,
|
|
30
|
+
onExtraClick,
|
|
31
|
+
children,
|
|
32
|
+
className
|
|
33
|
+
} = props
|
|
34
|
+
|
|
35
|
+
const handleEditClick = (e: ITouchEvent) => {
|
|
36
|
+
if (onEditClick) {
|
|
37
|
+
e.stopPropagation()
|
|
38
|
+
onEditClick(e)
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const handleExtraClick = (e: ITouchEvent) => {
|
|
43
|
+
if (onExtraClick) {
|
|
44
|
+
e.stopPropagation()
|
|
45
|
+
onExtraClick(e)
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<View className={formatClassNames(styles['field-card-container'], className)}>
|
|
51
|
+
<View className={styles['card-header']}>
|
|
52
|
+
<View className={styles['header-left']}>
|
|
53
|
+
{typeof title === 'string' ? (
|
|
54
|
+
<Text className={styles['header-title']}>{title}</Text>
|
|
55
|
+
) : (
|
|
56
|
+
title
|
|
57
|
+
)}
|
|
58
|
+
|
|
59
|
+
{showEditIcon && (
|
|
60
|
+
<View className={styles['edit-icon-wrapper']} onClick={handleEditClick}>
|
|
61
|
+
<Icon name='edit' size={14} className={styles['edit-icon']} />
|
|
62
|
+
</View>
|
|
63
|
+
)}
|
|
64
|
+
</View>
|
|
65
|
+
|
|
66
|
+
{extra && (
|
|
67
|
+
<View className={styles['header-extra']} onClick={handleExtraClick}>
|
|
68
|
+
{typeof extra === 'string' ? (
|
|
69
|
+
<Text className={styles['action-text']}>{extra}</Text>
|
|
70
|
+
) : (
|
|
71
|
+
extra
|
|
72
|
+
)}
|
|
73
|
+
</View>
|
|
74
|
+
)}
|
|
75
|
+
</View>
|
|
76
|
+
|
|
77
|
+
<View className={styles['card-content']}>
|
|
78
|
+
{children}
|
|
79
|
+
</View>
|
|
80
|
+
</View>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export default FieldCard
|
package/src/constant/mall.ts
CHANGED
|
@@ -19,4 +19,6 @@ export const PROMOTION_ACTIVITY_TYPE_BRAND = 2
|
|
|
19
19
|
// 热点活动
|
|
20
20
|
export const PROMOTION_ACTIVITY_TYPE_HOT = 3
|
|
21
21
|
//买赠活动
|
|
22
|
-
export const PROMOTION_ACTIVITY_TYPE_PRESENT = 4
|
|
22
|
+
export const PROMOTION_ACTIVITY_TYPE_PRESENT = 4
|
|
23
|
+
// 满减折扣
|
|
24
|
+
export const PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT = 5
|
package/src/index.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { default as Cell, setCellConfig } from './components/Cell'
|
|
|
5
5
|
export { default as Icon } from './components/Icon'
|
|
6
6
|
export { default as Checkbox } from './components/Checkbox'
|
|
7
7
|
export { default as Tag } from './components/Tag'
|
|
8
|
+
export { default as FieldCard } from './components/FieldCard'
|
|
8
9
|
|
|
9
10
|
export { default as FlowItem } from './item/FlowItem'
|
|
10
11
|
export { default as ProductItem, setProductItemConfig } from './item/ProductItem'
|
|
@@ -19,6 +19,7 @@ import {
|
|
|
19
19
|
PROMOTION_ACTIVITY_TYPE_BRAND,
|
|
20
20
|
PROMOTION_ACTIVITY_TYPE_HOT,
|
|
21
21
|
PROMOTION_ACTIVITY_TYPE_PRESENT,
|
|
22
|
+
PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT,
|
|
22
23
|
} from '../../constant/mall'
|
|
23
24
|
import { getProductItemConfig } from './config'
|
|
24
25
|
|
|
@@ -27,7 +28,7 @@ import styles from './index.module.styl'
|
|
|
27
28
|
export interface IProductCardLabels {
|
|
28
29
|
product_type?: { real: string; virtual: string; service: string }
|
|
29
30
|
delivery_type?: { dine: string; self_pickup: string; delivery: string }
|
|
30
|
-
activity_type?: { flash: string; brand: string; hot: string; present: string }
|
|
31
|
+
activity_type?: { flash: string; brand: string; hot: string; present: string; full_discount: string }
|
|
31
32
|
present_badge?: string
|
|
32
33
|
stock_label?: string
|
|
33
34
|
sale_label?: string
|
|
@@ -321,6 +322,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
|
|
|
321
322
|
{activityType === PROMOTION_ACTIVITY_TYPE_BRAND && labels.activity_type.brand}
|
|
322
323
|
{activityType === PROMOTION_ACTIVITY_TYPE_HOT && labels.activity_type.hot}
|
|
323
324
|
{activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && labels.activity_type.present}
|
|
325
|
+
{activityType === PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT && labels.activity_type.full_discount}
|
|
324
326
|
</Text>
|
|
325
327
|
</View>
|
|
326
328
|
</View>
|