@yorkjs/hive-ui 0.1.1 → 0.1.3

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.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/Cell/index.module.styl +1 -0
  3. package/src/components/DisplayCard/index.module.styl +56 -0
  4. package/src/components/DisplayCard/index.tsx +120 -0
  5. package/src/components/FieldCard/index.module.styl +8 -11
  6. package/src/components/FieldCard/index.tsx +37 -20
  7. package/src/constant/mall.ts +2 -0
  8. package/src/index.ts +1 -0
  9. package/src/item/ProductItem/ProductItem.tsx +6 -1
  10. package/src/item/ProductItem/config.ts +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yorkjs/hive-ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Hive UI - Taro React component library",
5
5
  "main": "src/index.ts",
6
6
  "module": "src/index.ts",
package/src/components/Cell/index.module.styl CHANGED
@@ -72,6 +72,7 @@ $DESC_FONT_SIZE = 13PX
72
72
  align-items center
73
73
 
74
74
  .title-section
75
+ display flex
75
76
  flex-shrink 0
76
77
  margin-right 10PX
77
78
 
package/src/components/DisplayCard/index.module.styl ADDED
@@ -0,0 +1,56 @@
1
+ @import '../../styles/mixin.styl'
2
+ @import '../../styles/variable.styl'
3
+
4
+ $CELL_PADDING_HORIZONTAL = 10PX
5
+ $CELL_PADDING_VERTICAL = 15PX
6
+ $LABEL_MARGIN_RIGHT = 20PX
7
+
8
+ .display-card
9
+ padding $CELL_PADDING_VERTICAL $CELL_PADDING_HORIZONTAL
10
+ background-color var(--containerCard)
11
+ margin 0 $WING_BLANK
12
+ border-radius 10PX
13
+ &.show-top-gutter
14
+ margin-top $GUTTER_BLANK
15
+ &.show-bottom-gutter
16
+ margin-bottom $GUTTER_BLANK
17
+ &.show-top-blank
18
+ margin-top $CARD_BLANK
19
+
20
+ .card-header
21
+ display flex
22
+ justify-content space-between
23
+ align-items center
24
+ margin-bottom 15PX
25
+
26
+ .header-title
27
+ font-size 16PX
28
+ font-weight bold
29
+ color var(--textTitle)
30
+
31
+ .header-extra
32
+ font-size 14PX
33
+ color var(--textMuted)
34
+
35
+ .info-row
36
+ display flex
37
+ flex-direction row
38
+ align-items flex-start
39
+ margin-bottom 15PX
40
+ &:last-child
41
+ margin-bottom 0
42
+
43
+ .info-label
44
+ font-size 14PX
45
+ color var(--textContent)
46
+ flex-shrink 0
47
+ margin-right $LABEL_MARGIN_RIGHT
48
+ min-width 70PX
49
+
50
+ .info-value
51
+ flex 1
52
+ font-size 14PX
53
+ color var(--textTitle)
54
+ word-break break-all
55
+ display flex
56
+ flex-direction row
package/src/components/DisplayCard/index.tsx ADDED
@@ -0,0 +1,120 @@
1
+ import React from 'react'
2
+ import { View, Text } from '@tarojs/components'
3
+ import styles from './index.module.styl'
4
+ import { formatClassNames } from '../../util/function'
5
+
6
+ interface IRowProps {
7
+ label: React.ReactNode
8
+ value?: React.ReactNode
9
+ children?: React.ReactNode
10
+ className?: string
11
+ }
12
+
13
+ const InfoRow: React.FC<IRowProps> = ({
14
+ label,
15
+ value,
16
+ children,
17
+ className
18
+ }) => (
19
+ <View
20
+ className={formatClassNames(styles['info-row'], className)}
21
+ >
22
+ <View className={styles['info-label']}>
23
+ {
24
+ typeof label === 'string'
25
+ ? <Text>{label}</Text>
26
+ : label
27
+ }
28
+ </View>
29
+ <View className={styles['info-value']}>
30
+ {children || value || '-'}
31
+ </View>
32
+ </View>
33
+ )
34
+
35
+ interface IBlockProps {
36
+ children?: React.ReactNode
37
+ className?: string
38
+ }
39
+
40
+ const InfoBlock: React.FC<IBlockProps> = ({
41
+ children,
42
+ className
43
+ }) => (
44
+ <View
45
+ className={className}
46
+ >
47
+ {children}
48
+ </View>
49
+ )
50
+
51
+ interface ICardProps {
52
+ title?: React.ReactNode
53
+ showTopGutter?: boolean
54
+ showBottomGutter?: boolean
55
+ showTopBlank?: boolean
56
+ extra?: React.ReactNode
57
+ children?: React.ReactNode
58
+ className?: string
59
+ style?: React.CSSProperties
60
+ }
61
+
62
+ const DisplayCardMain: React.FC<ICardProps> = ({
63
+ title,
64
+ extra,
65
+ children,
66
+ className,
67
+ style,
68
+ showTopGutter = false,
69
+ showBottomGutter = false,
70
+ showTopBlank = false,
71
+ }) => {
72
+ return (
73
+ <View
74
+ className={formatClassNames(
75
+ styles['display-card'],
76
+ {
77
+ [styles['show-top-gutter']]: showTopGutter,
78
+ [styles['show-bottom-gutter']]: showBottomGutter,
79
+ [styles['show-top-blank']]: showTopBlank,
80
+ },
81
+ className
82
+ )}
83
+ style={style}
84
+ >
85
+ {
86
+ (title || extra)
87
+ ? (
88
+ <View className={styles['card-header']}>
89
+ <View className={styles['header-title']}>
90
+ {
91
+ typeof title === 'string'
92
+ ? <Text>{title}</Text>
93
+ : title
94
+ }
95
+ </View>
96
+ {
97
+ extra ? (
98
+ <View className={styles['header-extra']}>
99
+ {extra}
100
+ </View>
101
+ )
102
+ : undefined
103
+ }
104
+ </View>
105
+ )
106
+ : undefined
107
+ }
108
+ <View className={styles['card-content']}>
109
+ {children}
110
+ </View>
111
+ </View>
112
+ )
113
+ }
114
+
115
+ const DisplayCard = Object.assign(DisplayCardMain, {
116
+ Row: InfoRow,
117
+ Block: InfoBlock,
118
+ })
119
+
120
+ export default DisplayCard
package/src/components/FieldCard/index.module.styl CHANGED
@@ -1,25 +1,23 @@
1
1
  @import '../../styles/mixin.styl'
2
2
  @import '../../styles/variable.styl'
3
3
 
4
- $CELL_PADDING_HORIZONTAL = 16PX
5
4
  $CELL_PADDING_VERTICAL = 14PX
6
5
 
7
6
  .field-card-container
8
7
  border-radius 10PX
9
8
  background-color var(--containerCard)
10
- margin 0 $WING_BLANK
11
- margin-bottom 12PX
12
9
  overflow hidden
13
10
 
11
+ .card-head-wrapper
12
+ padding 0PX $CELL_PADDING_VERTICAL
13
+
14
14
  .card-header
15
15
  display flex
16
16
  flex-direction row
17
17
  align-items center
18
18
  justify-content space-between
19
- padding $CELL_PADDING_VERTICAL $CELL_PADDING_HORIZONTAL
19
+ padding 13PX 0PX
20
20
  position relative
21
- min-height 48PX
22
- box-sizing border-box
23
21
  halfBorder(bottom, var(--lineBorder))
24
22
 
25
23
  .header-left
@@ -31,11 +29,11 @@ $CELL_PADDING_VERTICAL = 14PX
31
29
 
32
30
  .header-title
33
31
  color var(--textTitle)
34
- font-size 16PX
32
+ font-size 14PX
33
+ line-height 1
35
34
  lineClamp(1)
36
35
 
37
36
  .edit-icon-wrapper
38
- padding 4PX 8PX
39
37
  margin-left 2PX
40
38
  display flex
41
39
  align-items center
@@ -56,8 +54,7 @@ $CELL_PADDING_VERTICAL = 14PX
56
54
  align-items center
57
55
 
58
56
  .action-text
59
- color #FF4D4F
60
- font-size 14PX
61
- padding 4PX
57
+ color var(--primary)
58
+ font-size 13PX
62
59
  &:active
63
60
  opacity 0.6
package/src/components/FieldCard/index.tsx CHANGED
@@ -48,30 +48,47 @@ const FieldCard: React.FC<FieldCardProps> = (props) => {
48
48
 
49
49
  return (
50
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
- )}
51
+ <View className={styles['card-head-wrapper']}>
52
+ <View className={styles['card-header']}>
53
+ <View className={styles['header-left']}>
54
+ {
55
+ typeof title === 'string'
56
+ ? (
57
+ <Text className={styles['header-title']}>{title}</Text>
58
+ )
59
+ : (
60
+ title
61
+ )
62
+ }
63
+
64
+ {showEditIcon && (
65
+ <View className={styles['edit-icon-wrapper']} onClick={handleEditClick}>
66
+ <Icon
67
+ name='edit'
68
+ size={14}
69
+ className={styles['edit-icon']}
70
+ />
71
+ </View>
72
+ )}
73
+ </View>
58
74
 
59
- {showEditIcon && (
60
- <View className={styles['edit-icon-wrapper']} onClick={handleEditClick}>
61
- <Icon name='edit' size={14} className={styles['edit-icon']} />
75
+ {extra && (
76
+ <View className={styles['header-extra']} onClick={handleExtraClick}>
77
+ {
78
+ typeof extra === 'string' ? (
79
+ <Text
80
+ className={styles['action-text']}
81
+ >
82
+ {extra}
83
+ </Text>
84
+ )
85
+ : (
86
+ extra
87
+ )
88
+ }
62
89
  </View>
63
90
  )}
64
91
  </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
92
  </View>
76
93
 
77
94
  <View className={styles['card-content']}>
package/src/constant/mall.ts CHANGED
@@ -2,6 +2,8 @@
2
2
  export const MALL_PRODUCT_TYPE_REAL = 1
3
3
  export const MALL_PRODUCT_TYPE_VIRTUAL = 2
4
4
  export const MALL_PRODUCT_TYPE_SERVICE = 3
5
+ // 前端定义的字段后台不存在
6
+ export const MALL_PRODUCT_TYPE_COMBO = 4
5
7
 
6
8
  // 快递发货
7
9
  export const MALL_PRODUCT_DELIVERY_TYPE_EXPRESS = 1
package/src/index.ts CHANGED
@@ -6,6 +6,7 @@ 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
8
  export { default as FieldCard } from './components/FieldCard'
9
+ export { default as DisplayCard } from './components/DisplayCard'
9
10
 
10
11
  export { default as FlowItem } from './item/FlowItem'
11
12
  export { default as ProductItem, setProductItemConfig } from './item/ProductItem'
package/src/item/ProductItem/ProductItem.tsx CHANGED
@@ -20,13 +20,14 @@ import {
20
20
  PROMOTION_ACTIVITY_TYPE_HOT,
21
21
  PROMOTION_ACTIVITY_TYPE_PRESENT,
22
22
  PROMOTION_ACTIVITY_TYPE_COUNT_DISCOUNT,
23
+ MALL_PRODUCT_TYPE_COMBO,
23
24
  } from '../../constant/mall'
24
25
  import { getProductItemConfig } from './config'
25
26
 
26
27
  import styles from './index.module.styl'
27
28
 
28
29
  export interface IProductCardLabels {
29
- product_type?: { real: string; virtual: string; service: string }
30
+ product_type?: { real: string; virtual: string; service: string; combo: string }
30
31
  delivery_type?: { dine: string; self_pickup: string; delivery: string }
31
32
  activity_type?: { flash: string; brand: string; hot: string; present: string; full_discount: string }
32
33
  present_badge?: string
@@ -181,6 +182,10 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
181
182
  color: '#03BE02',
182
183
  text: labels.product_type?.service
183
184
  },
185
+ [MALL_PRODUCT_TYPE_COMBO] : {
186
+ color: '#E4B700',
187
+ text: labels.product_type?.combo
188
+ },
184
189
  }
185
190
  const item = colorMap[productType]
186
191
  if (!item) return null
package/src/item/ProductItem/config.ts CHANGED
@@ -5,7 +5,8 @@ let globalLabels: IProductCardLabels = {
5
5
  product_type: {
6
6
  real: '实物',
7
7
  virtual: '虚拟',
8
- service: '服务'
8
+ service: '服务',
9
+ combo: '套餐'
9
10
  },
10
11
  delivery_type: {
11
12
  dine: '堂食',