@yorkjs/hive-ui 0.0.9 → 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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Cell/Cell.tsx +68 -56
  3. package/src/components/Cell/CellValue.tsx +27 -9
  4. package/src/components/Cell/index.module.styl +12 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yorkjs/hive-ui",
3
- "version": "0.0.9",
3
+ "version": "0.1.0",
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/Cell.tsx 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
- vertical ? (
84
- <>
85
- <View className={styles['header-row']}>
86
- <View style={{
87
- display: 'flex',
88
- flexDirection: 'row',
89
- alignItems: 'center',
90
- flex: 1
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
- typeof title === 'string'
103
- ? <CellTitle title={title} required={required} tooltip={tooltip} />
104
- : title
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
- showArrow
110
- ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
123
+ icon
124
+ ? <View className={styles['icon-wrapper']}>{icon}</View>
111
125
  : undefined
112
126
  }
113
- </View>
114
- <View className={styles['content-section']}>
115
- {renderContent()}
116
- </View>
117
- </>
118
- )
119
- : (
120
- <>
121
- {
122
- icon
123
- ? <View className={styles['icon-wrapper']}>{icon}</View>
124
- : undefined
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
- typeof title === 'string'
132
- ? <CellTitle title={title} required={required} tooltip={tooltip} />
133
- : title
141
+ showArrow
142
+ ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
143
+ : undefined
134
144
  }
135
- </View>
136
- <View className={styles['content-section']}>
137
- {renderContent()}
138
- </View>
139
- {
140
- showArrow
141
- ? <View className={styles['arrow-wrapper']}><CellArrow /></View>
142
- : undefined
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
- {children}
158
+ : undefined
159
+ }
148
160
  </View>
149
161
  </View>
150
162
  )
package/src/components/Cell/CellValue.tsx CHANGED
@@ -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> = ({ value, placeholder, maxLines, className }) => {
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
- const dynamicStyle: React.CSSProperties = maxLines !== 1 ? {
19
- WebkitLineClamp: maxLines,
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 className={formatClassNames(
39
- styles['placeholder-text'],
40
- className
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
  )
package/src/components/Cell/index.module.styl CHANGED
@@ -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-inner
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