@yorkjs/hive-ui 2.0.2 → 2.0.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yorkjs/hive-ui",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
4
4
  "description": "Hive UI - Taro React component library",
5
5
  "main": "src/index.ts",
6
6
  "module": "src/index.ts",
@@ -38,6 +38,7 @@
38
38
  margin-right 10PX
39
39
  flex 1
40
40
  overflow hidden
41
+ min-width 0
41
42
 
42
43
  .flow-item-icon
43
44
  flex-shrink 0
@@ -51,11 +52,16 @@
51
52
  justify-content center
52
53
  padding 2PX
53
54
  box-sizing border-box
55
+ overflow hidden
54
56
 
55
57
  .icon-img
56
58
  width 100%
57
59
  height 100%
58
60
 
61
+ .flow-item-icon-custom
62
+ flex-shrink 0
63
+ margin-right 10PX
64
+
59
65
  .flow-item-content
60
66
  flex 1
61
67
  display flex
@@ -63,14 +69,29 @@
63
69
  justify-content center
64
70
  align-items flex-start
65
71
  overflow hidden
72
+ min-width 0
73
+
74
+ .flow-item-title-row
75
+ display flex
76
+ flex-direction row
77
+ align-items center
78
+ width 100%
79
+ overflow hidden
66
80
 
67
81
  .flow-item-title
68
82
  font-size 16PX
69
83
  color var(--textTitle)
70
84
  text-align left
71
- width 100%
85
+ flex-shrink 1
86
+ min-width 0
72
87
  lineClamp(1)
73
88
 
89
+ .flow-item-title-extra
90
+ flex-shrink 0
91
+ margin-left 5PX
92
+ display flex
93
+ align-items center
94
+
74
95
  .flow-item-time-container
75
96
  display flex
76
97
  margin-top 5PX
@@ -10,9 +10,11 @@ import styles from './index.module.styl'
10
10
 
11
11
  interface IProps {
12
12
  /** 左侧图标链接 */
13
- icon?: string
13
+ icon?: string | React.ReactNode
14
14
  /** 标题 */
15
15
  title?: string
16
+ /** 标题右侧的额外内容(如标签、状态) */
17
+ titleExtra?: React.ReactNode
16
18
  /** 时间或下方副标题 */
17
19
  time?: string | React.ReactNode
18
20
  /** 右侧金额 */
@@ -35,6 +37,7 @@ const FlowItem: React.FC<IProps> = (props) => {
35
37
  icon,
36
38
  title,
37
39
  time,
40
+ titleExtra,
38
41
  amount,
39
42
  amountColor,
40
43
  desc,
@@ -44,6 +47,29 @@ const FlowItem: React.FC<IProps> = (props) => {
44
47
  className
45
48
  } = props
46
49
 
50
+ const renderIcon = () => {
51
+ if (isEmpty(icon)) return null
52
+
53
+ if (typeof icon === 'string') {
54
+ return (
55
+ <View className="flow-item-icon">
56
+ <Image
57
+ src={icon}
58
+ className="icon-img"
59
+ mode="aspectFit"
60
+ />
61
+ </View>
62
+ )
63
+ }
64
+
65
+ // 如果是自定义元素
66
+ return (
67
+ <View className="flow-item-icon-custom">
68
+ {icon}
69
+ </View>
70
+ )
71
+ }
72
+
47
73
  return (
48
74
  <View
49
75
  className={formatClassNames(
@@ -54,29 +80,30 @@ const FlowItem: React.FC<IProps> = (props) => {
54
80
  >
55
81
  <View className={showSeparator ? 'flow-content-no-border' : 'flow-content'}>
56
82
  <View className="flow-item-left">
57
- {
58
- !isEmpty(icon)
59
- ? (
60
- <View className="flow-item-icon">
61
- <Image
62
- src={icon}
63
- className="icon-img"
64
- mode="aspectFit"
65
- />
66
- </View>
67
- ) : undefined
68
- }
83
+ {renderIcon()}
69
84
 
70
85
  <View className="flow-item-content">
71
- {
72
- !isEmpty(title)
73
- ? (
74
- <Text className="flow-item-title">
75
- {title}
76
- </Text>
77
- )
78
- : undefined
79
- }
86
+
87
+ <View className="flow-item-title-row">
88
+ {
89
+ !isEmpty(title)
90
+ ? (
91
+ <Text className="flow-item-title">
92
+ {title}
93
+ </Text>
94
+ )
95
+ : undefined
96
+ }
97
+ {
98
+ !isEmpty(titleExtra)
99
+ ? (
100
+ <View className="flow-item-title-extra">
101
+ {titleExtra}
102
+ </View>
103
+ )
104
+ : undefined
105
+ }
106
+ </View>
80
107
  {
81
108
  !isEmpty(time)
82
109
  ? (