@momo-kits/step 0.0.43-beta.20 → 0.0.43-beta.24

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 (6) hide show
  1. package/Step.horizontal.js +260 -0
  2. package/Step.js +12 -282
  3. package/Step.vertical.js +244 -0
  4. package/Step.web.js +167 -228
  5. package/package.json +1 -1
  6. package/publish.sh +2 -2
package/Step.horizontal.js ADDED
@@ -0,0 +1,260 @@
1
+ import React, { Component } from 'react';
2
+ import { View, StyleSheet, Dimensions } from 'react-native';
3
+
4
+ import PropTypes, { string } from 'prop-types';
5
+ import { Colors, Text, IconSource, Image, Icon } from '@momo-kits/core';
6
+ import { getUrlByTime } from '../../core/components/image/utils';
7
+ import { ScrollView } from 'react-native-gesture-handler';
8
+ import { transform } from 'lodash';
9
+
10
+ const CIRCLE_SIZE = 24;
11
+ const SCREEN_WIDTH = Dimensions.get('window').width;
12
+
13
+ // this is layout of each item (flexdirection row)
14
+ // this is left container (flex 0.2, )
15
+ // this is value label
16
+ // this is image
17
+ // this is caption label
18
+ // this is desc label
19
+ // this is right container (flex 0.8)
20
+ // this is line (width flex = 1 or width 100 percent)
21
+
22
+ const styles = StyleSheet.create({
23
+ circle: {
24
+ width: CIRCLE_SIZE,
25
+ height: CIRCLE_SIZE,
26
+ borderRadius: CIRCLE_SIZE / 2,
27
+ borderWidth: 2,
28
+ padding: 4,
29
+ },
30
+ checkedCircle: {
31
+ width: CIRCLE_SIZE,
32
+ height: CIRCLE_SIZE,
33
+ borderRadius: CIRCLE_SIZE / 2,
34
+ backgroundColor: '#ffadd2',
35
+ borderWidth: 2,
36
+ borderColor: Colors.pink_09,
37
+ },
38
+ titleDefault: {
39
+ color: Colors.black_12,
40
+ fontWeight: 'normal',
41
+ },
42
+ titleActive: {
43
+ color: Colors.black_17,
44
+ fontWeight: 'bold',
45
+ },
46
+ containerStyle: {
47
+ minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
48
+ },
49
+ description: {
50
+ fontSize: 12,
51
+ color: Colors.black_12,
52
+ marginBottom: 16,
53
+ paddingTop: 4,
54
+ paddingLeft: 11,
55
+ },
56
+ date: {
57
+ fontSize: 10,
58
+ color: Colors.black_12,
59
+ },
60
+ number: {
61
+ fontSize: 12,
62
+ color: 'white',
63
+ textAlign: 'center',
64
+ lineHeight: 13,
65
+ },
66
+ lineHorizontal: {
67
+ height: 2,
68
+ marginTop: 26,
69
+ width: '100%',
70
+ },
71
+ minHeight: {
72
+ minHeight: 12,
73
+ marginBottom: 4,
74
+ },
75
+ });
76
+
77
+ export default class HorizontalStep extends Component {
78
+ constructor(props) {
79
+ super(props);
80
+ this.state = {
81
+ width: 0,
82
+ height: 0,
83
+ };
84
+ }
85
+
86
+ onLayout = (e) => {
87
+ this.setState({
88
+ width: e.nativeEvent.layout.width,
89
+ height: e.nativeEvent.layout.height,
90
+ });
91
+ };
92
+
93
+ circleStep = (index) => {
94
+ return (
95
+ <View style={[styles.circle]}>
96
+ <Text style={styles.number}>{index}</Text>
97
+ </View>
98
+ );
99
+ };
100
+
101
+ circleColumn = (value, index) => {
102
+ const {
103
+ currentStep,
104
+ titles,
105
+ iconActive,
106
+ iconInActive,
107
+ lineColorActive,
108
+ lineColorInActive,
109
+ items,
110
+ currentStepColor,
111
+ date,
112
+ isVertical,
113
+ titleFontSize,
114
+ } = this.props;
115
+ const icon =
116
+ currentStep >= index + 2
117
+ ? iconActive || IconSource.ic_check_24
118
+ : iconInActive || index + 1;
119
+ var circleColor =
120
+ currentStep >= index + 1 ? currentStepColor : Colors.black_06;
121
+ var circleBorderColor =
122
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
123
+ const textFontStyle =
124
+ currentStep === index + 1
125
+ ? styles.titleActive
126
+ : styles.titleDefault;
127
+ const lineActive =
128
+ currentStep >= index + 2
129
+ ? lineColorActive
130
+ ? Colors.pink_09
131
+ : '#ffd6e7'
132
+ : lineColorInActive || Colors.black_04;
133
+ const minHeight = !isVertical && styles.minHeight;
134
+ const lineWidth = Math.round(
135
+ (SCREEN_WIDTH - 10 - CIRCLE_SIZE - 4) / titles.length,
136
+ );
137
+ const lineRight = parseInt(`-${lineWidth / 2 - 10}`);
138
+ return (
139
+ <View
140
+ key={index}
141
+ style={{
142
+ flexDirection: 'row',
143
+ flex: 1,
144
+ justifyContent: 'center',
145
+ }}>
146
+ <View
147
+ style={{
148
+ flexDirection: 'column',
149
+ alignItems: 'center',
150
+ }}>
151
+ {currentStep >= index + 1 ? (
152
+ <Text style={[styles.date, { marginBottom: 4 }]}>
153
+ {date}
154
+ </Text>
155
+ ) : (
156
+ <View style={minHeight}></View>
157
+ )}
158
+ {currentStep <= index + 1 ? (
159
+ <View>
160
+ {/* image */}
161
+ <View
162
+ style={[
163
+ styles.circle,
164
+ {
165
+ backgroundColor: circleColor,
166
+ borderColor: circleBorderColor,
167
+ },
168
+ ]}>
169
+ <Text style={styles.number}>{icon}</Text>
170
+ </View>
171
+ </View>
172
+ ) : (
173
+ <View>
174
+ <Image
175
+ source={icon}
176
+ style={[
177
+ styles.checkedCircle,
178
+ { tintColor: '#ffd6e7' },
179
+ ]}
180
+ />
181
+ </View>
182
+ )}
183
+ <View>
184
+ <Text.Caption
185
+ style={[
186
+ { marginTop: 4, fontSize: titleFontSize },
187
+ textFontStyle,
188
+ ]}>
189
+ {value}
190
+ </Text.Caption>
191
+ </View>
192
+
193
+ <View>
194
+ <Text style={[{ fontSize: 10 }]}>{items[index]}</Text>
195
+ </View>
196
+ </View>
197
+ {titles?.length - 1 !== index && (
198
+ <View
199
+ style={{
200
+ position: 'absolute',
201
+ right: lineRight,
202
+ width: lineWidth,
203
+ zIndex: -1,
204
+ }}>
205
+ <View
206
+ style={[
207
+ styles.lineHorizontal,
208
+ {
209
+ backgroundColor: lineActive,
210
+ },
211
+ ]}
212
+ />
213
+ </View>
214
+ )}
215
+ </View>
216
+ );
217
+ };
218
+
219
+ renderCircle = () => {
220
+ const { titles = [[]] } = this.props;
221
+ return titles.map(this.circleColumn);
222
+ };
223
+
224
+ render() {
225
+ const { style = {} } = this.props;
226
+ return (
227
+ <ScrollView>
228
+ <View
229
+ style={[styles.containerStyle, style]}
230
+ onLayout={this.onLayout}>
231
+ <View
232
+ style={{
233
+ flexDirection: 'row',
234
+ }}>
235
+ {this.renderCircle()}
236
+ </View>
237
+ </View>
238
+ </ScrollView>
239
+ );
240
+ }
241
+ }
242
+
243
+ HorizontalStep.propTypes = {
244
+ titles: PropTypes.array,
245
+ currentStep: PropTypes.number,
246
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
247
+ items: PropTypes.array,
248
+ isVertical: PropTypes.bool,
249
+ iconActive: PropTypes.any,
250
+ iconInActive: PropTypes.any,
251
+ lineColorActive: PropTypes.string,
252
+ lineColorInActive: PropTypes.string,
253
+ borderColorActive: PropTypes.string,
254
+ borderColorInActive: PropTypes.string,
255
+ };
256
+
257
+ HorizontalStep.defaultProps = {
258
+ titles: [],
259
+ currentStep: 0,
260
+ };
package/Step.js CHANGED
@@ -1,308 +1,38 @@
1
1
  import React, { Component } from 'react';
2
- import { View, StyleSheet } from 'react-native';
3
-
4
2
  import PropTypes from 'prop-types';
5
- import {
6
- Colors, Text, IconSource, Image
7
- } from '@momo-kits/core';
8
-
9
- const CIRCLE_SIZE = 24;
10
-
11
- const styles = StyleSheet.create({
12
- circle: {
13
- width: CIRCLE_SIZE,
14
- height: CIRCLE_SIZE,
15
- // borderWidth: 1,
16
- // borderColor: Colors.sepia_05,
17
- borderRadius: CIRCLE_SIZE / 2,
18
- backgroundColor: 'white'
19
- },
20
- line: {
21
- height: 4,
22
- backgroundColor: 'white',
23
- // borderWidth: 1,
24
- // borderRadius: 1,
25
- // borderStyle: 'dashed',
26
- zIndex: 0,
27
- // marginTop: 8
28
- },
29
- topRight: {
30
- position: 'absolute',
31
- right: -1,
32
- top: -1,
33
- width: 1,
34
- height: '100%',
35
- backgroundColor: 'white',
36
- zIndex: 1
37
- },
38
- topLeft: {
39
- position: 'absolute',
40
- left: -1,
41
- top: -1,
42
- width: '100%',
43
- height: 1,
44
- backgroundColor: 'white',
45
- zIndex: 1
46
- },
47
- topLeftWidth: {
48
- position: 'absolute',
49
- left: -1,
50
- top: -1,
51
- width: 1,
52
- height: '100%',
53
- backgroundColor: 'white',
54
- zIndex: 1
55
- },
56
- circleRow: {
57
- position: 'absolute',
58
- justifyContent: 'space-between',
59
- flexDirection: 'row',
60
- },
61
- circleColumn: {
62
- // position: 'absolute',
63
- justifyContent: 'space-between',
64
- },
65
- titleDefault: {
66
- color: Colors.black_12
67
- },
68
- titleActive: {
69
- color: Colors.black_17,
70
- fontWeight: 'bold'
71
- },
72
- containerStyle: {
73
- minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE
74
- }
75
- });
3
+ import HorizontalStep from './Step.horizontal';
4
+ import VerticalStep from './Step.vertical';
76
5
 
77
6
  export default class Step extends Component {
78
7
  constructor(props) {
79
8
  super(props);
80
- this.state = {
81
- width: 0,
82
- height: 0
83
- };
84
- }
85
-
86
- onLayout = (e) => {
87
- this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
88
- }
89
-
90
- renderLine = () => {
91
- const {
92
- lineColor, lineStyle, currentStep, data
93
- } = this.props;
94
- return (
95
- <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
96
- {/* <View style={styles.topLeft} />
97
- <View style={styles.topLeftWidth} />
98
- <View style={styles.topRight} /> */}
99
- </View>
100
- );
101
- }
102
-
103
- circle = (value, index) => {
104
- const {
105
- currentStep, tintColor, data, lineStyle, isNumber, iconActive,
106
- iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle, checkedPreviousStep, borderColorActive, borderColorInActive,
107
- } = this.props;
108
- const { width } = this.state;
109
- const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
110
- const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
111
- const itemWidth = (width - CIRCLE_SIZE) / data?.length;
112
- const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? lineColorActive || Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
113
- const lineWidth = (width - CIRCLE_SIZE) / (data.length - 1);
114
- const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
115
- const borderColor = currentStep >= (index + 1) ? borderColorActive || Colors.pink_09 : borderColorInActive || Colors.pink_09;
116
- let left = 0;
117
- let textAlignStyle = { textAlign: 'center' };
118
- /**
119
- * item lefr
120
- */
121
- if (index === 0) {
122
- left = 0;
123
- textAlignStyle = { textAlign: 'left' };
124
-
125
- /**
126
- * item right
127
- */
128
- } else if (index === data?.length - 1) {
129
- left = -itemWidth + CIRCLE_SIZE;
130
- textAlignStyle = { textAlign: 'right' };
131
- /**
132
- * center item
133
- */
134
- } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
135
- const textStyle = [textAlignStyle, textFontStyle];
136
-
137
- return (
138
- <View key={index}>
139
- {
140
- data?.length - 1 !== index && (
141
- <View style={[styles.line, {
142
- position: 'absolute',
143
- top: 10,
144
- backgroundColor: lineActive,
145
- width: lineWidth,
146
- height: 4,
147
- marginTop: 0
148
- }, lineStyle]}
149
- />
150
- )
151
- }
152
- {
153
- (isNumber && !checkedPreviousStep) || (isNumber && checkedPreviousStep && index >= currentStep -1 ) ? (
154
- <View style={{
155
- width: CIRCLE_SIZE,
156
- height: CIRCLE_SIZE,
157
- borderRadius: CIRCLE_SIZE / 2,
158
- backgroundColor: backgroundActive,
159
- borderColor: borderColor,
160
- borderWidth: 2,
161
- alignItems: 'center',
162
- justifyContent: 'center'
163
- }}
164
- >
165
- <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
166
- </View>
167
- ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
168
- }
169
-
170
- <View style={{
171
- position: 'absolute',
172
- width: itemWidth,
173
- left,
174
- top: CIRCLE_SIZE + CIRCLE_SIZE / 4
175
- }}
176
- >
177
- <Text.Caption style={[textStyle, bodyStyle]}>{value}</Text.Caption>
178
- </View>
179
- </View>
180
- );
181
- }
182
-
183
- circleColumn = (value, index) => {
184
- const {
185
- currentStep, tintColor, data, lineStyle, isNumber, iconActive,
186
- iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
187
- } = this.props;
188
- const { height } = this.state;
189
- const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
190
- const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
191
- const itemWidth = (height - CIRCLE_SIZE) / data?.length;
192
- const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
193
- const lineWidth = (height - CIRCLE_SIZE) / (data.length - 1);
194
- const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
195
- let left = 0;
196
- let textAlignStyle = { textAlign: 'center' };
197
- /**
198
- * item lefr
199
- */
200
- if (index === 0) {
201
- left = 0;
202
- textAlignStyle = { textAlign: 'left' };
203
-
204
- /**
205
- * item right
206
- */
207
- } else if (index === data?.length - 1) {
208
- left = -itemWidth + CIRCLE_SIZE;
209
- textAlignStyle = { textAlign: 'right' };
210
- /**
211
- * center item
212
- */
213
- } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
214
- const textStyle = [textAlignStyle, textFontStyle];
215
-
216
- return (
217
- <View key={index}>
218
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
219
- {
220
- isNumber ? (
221
- <View style={{
222
- width: CIRCLE_SIZE,
223
- height: CIRCLE_SIZE,
224
- borderRadius: CIRCLE_SIZE / 2,
225
- backgroundColor: backgroundActive,
226
- borderColor: Colors.pink_09,
227
- borderWidth: 1,
228
- alignItems: 'center',
229
- justifyContent: 'center'
230
- }}
231
- >
232
- {
233
- iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
234
- }
235
- </View>
236
- ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
237
- }
238
- <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
239
- </View>
240
-
241
- {
242
- data?.length - 1 !== index && (
243
- <View style={[styles.line, {
244
- left: 10,
245
- backgroundColor: lineActive,
246
- width: 4,
247
- height: lineWidth,
248
- marginTop: 0,
249
- }, lineStyle]}
250
- />
251
- )
252
- }
253
-
254
- </View>
255
- );
256
- }
257
-
258
- renderCircle = () => {
259
- const { data = [], isVertical } = this.props;
260
- return data.map(isVertical ? this.circleColumn : this.circle);
261
9
  }
262
10
 
263
11
  render() {
264
- const { width, height } = this.state;
265
- const { style, isVertical } = this.props;
266
- return (
267
- <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
268
- {/* {this.renderLine()} */}
269
- {
270
- isVertical ? (
271
- <View style={[styles.circleColumn, { height }]}>
272
- {this.renderCircle()}
273
- </View>
274
- ) : (
275
- <View style={[styles.circleRow, { width }]}>
276
- {this.renderCircle()}
277
- </View>
278
- )
279
- }
280
-
281
- </View>
282
- );
12
+ const { isVertical } = this.props;
13
+ let DefaultComponent = HorizontalStep;
14
+ if (isVertical) {
15
+ DefaultComponent = VerticalStep;
16
+ }
17
+ return <DefaultComponent {...this.props} />;
283
18
  }
284
19
  }
285
20
 
286
21
  Step.propTypes = {
287
- data: PropTypes.arrayOf(PropTypes.string),
22
+ titles: PropTypes.array,
288
23
  currentStep: PropTypes.number,
289
- tintColor: PropTypes.string,
290
24
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
291
- isNumber: PropTypes.bool,
25
+ items: PropTypes.array,
292
26
  isVertical: PropTypes.bool,
293
27
  iconActive: PropTypes.any,
294
28
  iconInActive: PropTypes.any,
295
29
  lineColorActive: PropTypes.string,
296
30
  lineColorInActive: PropTypes.string,
297
- bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
298
- checkedPreviousStep: PropTypes.bool,
299
31
  borderColorActive: PropTypes.string,
300
32
  borderColorInActive: PropTypes.string,
301
33
  };
302
34
 
303
35
  Step.defaultProps = {
304
- data: [],
36
+ titles: [],
305
37
  currentStep: 0,
306
- tintColor: Colors.sepia_05,
307
- checkedPreviousStep: false,
308
- };
38
+ };
package/Step.vertical.js ADDED
@@ -0,0 +1,244 @@
1
+ import React, { Component } from 'react';
2
+ import { View, StyleSheet, Dimensions } from 'react-native';
3
+
4
+ import PropTypes, { string } from 'prop-types';
5
+ import { Colors, Text, IconSource, Image, Icon } from '@momo-kits/core';
6
+ import { getUrlByTime } from '../../core/components/image/utils';
7
+ import { ScrollView } from 'react-native-gesture-handler';
8
+ import { transform } from 'lodash';
9
+
10
+ const CIRCLE_SIZE = 24;
11
+
12
+ // this is layout of each item (flexdirection row)
13
+ // this is left container (flex 0.2, )
14
+ // this is value label
15
+ // this is image
16
+ // this is caption label
17
+ // this is desc label
18
+ // this is right container (flex 0.8)
19
+ // this is line (width flex = 1 or width 100 percent)
20
+
21
+ const styles = StyleSheet.create({
22
+ circle: {
23
+ width: CIRCLE_SIZE,
24
+ height: CIRCLE_SIZE,
25
+ borderRadius: CIRCLE_SIZE / 2,
26
+ borderWidth: 2,
27
+ padding: 4,
28
+ },
29
+ checkedCircle: {
30
+ width: CIRCLE_SIZE,
31
+ height: CIRCLE_SIZE,
32
+ borderRadius: CIRCLE_SIZE / 2,
33
+ backgroundColor: '#ffadd2',
34
+ borderWidth: 2,
35
+ borderColor: Colors.pink_09,
36
+ },
37
+ titleDefault: {
38
+ color: Colors.black_12,
39
+ fontSize: 14,
40
+ fontWeight: 'normal',
41
+ },
42
+ titleActive: {
43
+ color: Colors.black_17,
44
+ fontSize: 14,
45
+ fontWeight: 'bold',
46
+ },
47
+ containerStyle: {
48
+ minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
49
+ },
50
+ description: {
51
+ fontSize: 12,
52
+ color: Colors.black_12,
53
+ marginBottom: 16,
54
+ paddingTop: 4,
55
+ paddingLeft: 11,
56
+ },
57
+ date: {
58
+ fontSize: 10,
59
+ color: Colors.black_12,
60
+ },
61
+ number: {
62
+ fontSize: 12,
63
+ color: 'white',
64
+ textAlign: 'center',
65
+ lineHeight: 13,
66
+ },
67
+ lineVertical: {
68
+ marginLeft: 11,
69
+ width: 2,
70
+ minHeight: 10,
71
+ marginTop: 4,
72
+ marginBottom: 4,
73
+ flex: 1,
74
+ },
75
+ minHeight: {
76
+ minHeight: 12,
77
+ marginBottom: 4,
78
+ },
79
+ });
80
+
81
+ export default class VerticalStep extends Component {
82
+ constructor(props) {
83
+ super(props);
84
+ this.state = {
85
+ width: 0,
86
+ height: 0,
87
+ };
88
+ }
89
+
90
+ onLayout = (e) => {
91
+ this.setState({
92
+ width: e.nativeEvent.layout.width,
93
+ height: e.nativeEvent.layout.height,
94
+ });
95
+ };
96
+
97
+ circleStep = (index) => {
98
+ return (
99
+ <View style={[styles.circle]}>
100
+ <Text style={styles.number}>{index}</Text>
101
+ </View>
102
+ );
103
+ };
104
+
105
+ circleColumn = (value, index) => {
106
+ const {
107
+ currentStep,
108
+ titles,
109
+ lineStyle,
110
+ iconActive,
111
+ iconInActive,
112
+ lineColorActive,
113
+ lineColorInActive,
114
+ items,
115
+ currentStepColor,
116
+ date,
117
+ isVertical,
118
+ } = this.props;
119
+ const icon =
120
+ currentStep >= index + 2
121
+ ? iconActive || IconSource.ic_check_24
122
+ : iconInActive || index + 1;
123
+ var circleColor =
124
+ currentStep >= index + 1 ? currentStepColor : Colors.black_06;
125
+ var circleBorderColor =
126
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
127
+ const textFontStyle =
128
+ currentStep === index + 1
129
+ ? styles.titleActive
130
+ : styles.titleDefault;
131
+ const lineActive =
132
+ currentStep >= index + 2
133
+ ? lineColorActive
134
+ ? Colors.pink_09
135
+ : '#ffd6e7'
136
+ : lineColorInActive || Colors.black_04;
137
+ return (
138
+ <View key={index} style={{ flexDirection: 'row' }}>
139
+ <View>
140
+ {currentStep <= index + 1 ? (
141
+ <View>
142
+ {/* image */}
143
+ <View
144
+ style={[
145
+ styles.circle,
146
+ {
147
+ backgroundColor: circleColor,
148
+ borderColor: circleBorderColor,
149
+ },
150
+ ]}>
151
+ <Text style={styles.number}>{icon}</Text>
152
+ </View>
153
+ </View>
154
+ ) : (
155
+ <View>
156
+ <Image
157
+ source={icon}
158
+ style={[
159
+ styles.checkedCircle,
160
+ { tintColor: '#ffd6e7' },
161
+ ]}
162
+ />
163
+ </View>
164
+ )}
165
+ {titles?.length - 1 !== index && (
166
+ <View
167
+ style={[
168
+ styles.lineVertical,
169
+ {
170
+ backgroundColor: lineActive,
171
+ },
172
+ lineStyle,
173
+ ]}
174
+ />
175
+ )}
176
+ </View>
177
+ <View
178
+ style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
179
+ <View
180
+ style={{
181
+ flexDirection: 'row',
182
+ justifyContent: 'space-between',
183
+ alignItems: 'center',
184
+ }}>
185
+ <Text.Caption
186
+ style={[{ marginLeft: 10 }, textFontStyle]}>
187
+ {value}
188
+ </Text.Caption>
189
+ {currentStep >= index + 1 && (
190
+ <Text style={styles.date}>{date}</Text>
191
+ )}
192
+ </View>
193
+ <View>
194
+ {typeof items[index] == 'string' ? (
195
+ <Text style={[styles.description]}>
196
+ {items[index]}
197
+ </Text>
198
+ ) : (
199
+ <View style={[styles.description]}>
200
+ {items[index]}
201
+ </View>
202
+ )}
203
+ </View>
204
+ </View>
205
+ </View>
206
+ );
207
+ };
208
+
209
+ renderCircle = () => {
210
+ const { titles = [[]] } = this.props;
211
+ return titles.map(this.circleColumn);
212
+ };
213
+
214
+ render() {
215
+ return (
216
+ <ScrollView>
217
+ <View style={[styles.containerStyle]} onLayout={this.onLayout}>
218
+ <View style={[styles.circleColumn]}>
219
+ {this.renderCircle()}
220
+ </View>
221
+ </View>
222
+ </ScrollView>
223
+ );
224
+ }
225
+ }
226
+
227
+ VerticalStep.propTypes = {
228
+ titles: PropTypes.array,
229
+ currentStep: PropTypes.number,
230
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
231
+ items: PropTypes.array,
232
+ isVertical: PropTypes.bool,
233
+ iconActive: PropTypes.any,
234
+ iconInActive: PropTypes.any,
235
+ lineColorActive: PropTypes.string,
236
+ lineColorInActive: PropTypes.string,
237
+ borderColorActive: PropTypes.string,
238
+ borderColorInActive: PropTypes.string,
239
+ };
240
+
241
+ VerticalStep.defaultProps = {
242
+ titles: [],
243
+ currentStep: 0,
244
+ };
package/Step.web.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React, { Component } from 'react';
2
- import { View, StyleSheet, Image } from 'react-native';
2
+ import { View, StyleSheet, ScrollView, Image } from 'react-native';
3
+
3
4
  import PropTypes from 'prop-types';
4
- import { ColorCore as Colors } from '../../core/colors/colorCore';
5
+ import Colors from '../../core/colors';
5
6
  import Text from '../../core/components/typography';
6
7
  import { Icons as IconSource } from '../../core/icons';
7
8
 
@@ -11,66 +12,48 @@ const styles = StyleSheet.create({
11
12
  circle: {
12
13
  width: CIRCLE_SIZE,
13
14
  height: CIRCLE_SIZE,
14
- // borderWidth: 1,
15
- // borderColor: Colors.sepia_05,
16
15
  borderRadius: CIRCLE_SIZE / 2,
17
- backgroundColor: 'white'
18
- },
19
- line: {
20
- height: 4,
21
- backgroundColor: 'white',
22
- // borderWidth: 1,
23
- // borderRadius: 1,
24
- // borderStyle: 'dashed',
25
- zIndex: 0,
26
- // marginTop: 8
27
- },
28
- topRight: {
29
- position: 'absolute',
30
- right: -1,
31
- top: -1,
32
- width: 1,
33
- height: '100%',
34
- backgroundColor: 'white',
35
- zIndex: 1
36
- },
37
- topLeft: {
38
- position: 'absolute',
39
- left: -1,
40
- top: -1,
41
- width: '100%',
42
- height: 1,
43
- backgroundColor: 'white',
44
- zIndex: 1
16
+ borderWidth: 2,
17
+ padding: 4,
45
18
  },
46
- topLeftWidth: {
47
- position: 'absolute',
48
- left: -1,
49
- top: -1,
50
- width: 1,
51
- height: '100%',
52
- backgroundColor: 'white',
53
- zIndex: 1
54
- },
55
- circleRow: {
56
- position: 'absolute',
57
- justifyContent: 'space-between',
58
- flexDirection: 'row',
59
- },
60
- circleColumn: {
61
- // position: 'absolute',
62
- justifyContent: 'space-between',
19
+ checkedCircle: {
20
+ width: CIRCLE_SIZE,
21
+ height: CIRCLE_SIZE,
22
+ borderRadius: CIRCLE_SIZE / 2,
23
+ backgroundColor: '#ffadd2',
24
+ borderWidth: 2,
25
+ borderColor: Colors.pink_09,
63
26
  },
64
27
  titleDefault: {
65
- color: Colors.black_12
28
+ color: Colors.black_12,
29
+ fontSize: 14,
30
+ fontWeight: 'normal',
66
31
  },
67
32
  titleActive: {
68
33
  color: Colors.black_17,
69
- fontWeight: 'bold'
34
+ fontSize: 14,
35
+ fontWeight: 'bold',
70
36
  },
71
37
  containerStyle: {
72
- minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE
73
- }
38
+ minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
39
+ },
40
+ description: {
41
+ fontSize: 12,
42
+ color: Colors.black_12,
43
+ paddingBottom: 8,
44
+ paddingTop: 4,
45
+ paddingLeft: 11,
46
+ },
47
+ date: {
48
+ fontSize: 10,
49
+ color: Colors.black_12,
50
+ },
51
+ number: {
52
+ fontSize: 12,
53
+ color: 'white',
54
+ textAlign: 'center',
55
+ lineHeight: 13,
56
+ },
74
57
  });
75
58
 
76
59
  export default class Step extends Component {
@@ -78,195 +61,156 @@ export default class Step extends Component {
78
61
  super(props);
79
62
  this.state = {
80
63
  width: 0,
81
- height: 0
64
+ height: 0,
82
65
  };
83
66
  }
84
67
 
85
68
  onLayout = (e) => {
86
- this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
87
- }
88
-
89
- renderLine = () => {
90
- const {
91
- lineColor, lineStyle, currentStep, data
92
- } = this.props;
93
- return (
94
- <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
95
- {/* <View style={styles.topLeft} />
96
- <View style={styles.topLeftWidth} />
97
- <View style={styles.topRight} /> */}
98
- </View>
99
- );
100
- }
101
-
102
- circle = (value, index) => {
103
- const {
104
- currentStep, tintColor, data, lineStyle, isNumber, iconActive,
105
- iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle, checkedPreviousStep, borderColorActive, borderColorInActive,
106
- } = this.props;
107
- const { width } = this.state;
108
- const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
109
- const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
110
- const itemWidth = (width - CIRCLE_SIZE) / data?.length;
111
- const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? lineColorActive || Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
112
- const lineWidth = (width - CIRCLE_SIZE) / (data.length - 1);
113
- const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
114
- const borderColor = currentStep >= (index + 1) ? borderColorActive || Colors.pink_09 : borderColorInActive || Colors.pink_09;
115
- let left = 0;
116
- let textAlignStyle = { textAlign: 'center' };
117
- /**
118
- * item lefr
119
- */
120
- if (index === 0) {
121
- left = 0;
122
- textAlignStyle = { textAlign: 'left' };
123
-
124
- /**
125
- * item right
126
- */
127
- } else if (index === data?.length - 1) {
128
- left = -itemWidth + CIRCLE_SIZE;
129
- textAlignStyle = { textAlign: 'right' };
130
- /**
131
- * center item
132
- */
133
- } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
134
- const textStyle = [textAlignStyle, textFontStyle];
69
+ this.setState({
70
+ width: e.nativeEvent.layout.width,
71
+ height: e.nativeEvent.layout.height,
72
+ });
73
+ };
135
74
 
75
+ circleStep = (index) => {
136
76
  return (
137
- <View key={index}>
138
- {
139
- data?.length - 1 !== index && (
140
- <View style={[styles.line, {
141
- position: 'absolute',
142
- top: 10,
143
- backgroundColor: lineActive,
144
- width: lineWidth,
145
- height: 4,
146
- marginTop: 0
147
- }, lineStyle]}
148
- />
149
- )
150
- }
151
- {
152
- (isNumber && !checkedPreviousStep) || (isNumber && checkedPreviousStep && index >= currentStep -1 ) ? (
153
- <View style={{
154
- width: CIRCLE_SIZE,
155
- height: CIRCLE_SIZE,
156
- borderRadius: CIRCLE_SIZE / 2,
157
- backgroundColor: backgroundActive,
158
- borderColor: borderColor,
159
- borderWidth: 2,
160
- alignItems: 'center',
161
- justifyContent: 'center'
162
- }}
163
- >
164
- <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
165
- </View>
166
- ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
167
- }
168
-
169
- <View style={{
170
- position: 'absolute',
171
- width: itemWidth,
172
- left,
173
- top: CIRCLE_SIZE + CIRCLE_SIZE / 4
174
- }}
175
- >
176
- <Text.Caption style={[textStyle, bodyStyle]}>{value}</Text.Caption>
177
- </View>
77
+ <View style={[styles.circle]}>
78
+ <Text style={styles.number}>{index}</Text>
178
79
  </View>
179
80
  );
180
- }
81
+ };
181
82
 
182
83
  circleColumn = (value, index) => {
183
84
  const {
184
- currentStep, tintColor, data, lineStyle, isNumber, iconActive,
185
- iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
85
+ currentStep,
86
+ titles,
87
+ lineStyle,
88
+ iconActive,
89
+ iconInActive,
90
+ lineColorActive,
91
+ lineColorInActive,
92
+ items,
93
+ currentStepColor,
94
+ date,
186
95
  } = this.props;
187
96
  const { height } = this.state;
188
- const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
189
- const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
190
- const itemWidth = (height - CIRCLE_SIZE) / data?.length;
191
- const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
192
- const lineWidth = (height - CIRCLE_SIZE) / (data.length - 1);
193
- const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
194
- let left = 0;
195
- let textAlignStyle = { textAlign: 'center' };
196
- /**
197
- * item lefr
198
- */
199
- if (index === 0) {
200
- left = 0;
201
- textAlignStyle = { textAlign: 'left' };
202
-
203
- /**
204
- * item right
205
- */
206
- } else if (index === data?.length - 1) {
207
- left = -itemWidth + CIRCLE_SIZE;
208
- textAlignStyle = { textAlign: 'right' };
209
- /**
210
- * center item
211
- */
212
- } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
213
- const textStyle = [textAlignStyle, textFontStyle];
214
-
97
+ let itemHeight = 0;
98
+ const icon =
99
+ currentStep >= index + 2
100
+ ? iconActive || IconSource.ic_check_24
101
+ : iconInActive || index + 1;
102
+ var circleColor =
103
+ currentStep >= index + 1 ? currentStepColor : Colors.black_04;
104
+ var circleBorderColor =
105
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_02;
106
+ const textFontStyle =
107
+ currentStep === index + 1
108
+ ? styles.titleActive
109
+ : styles.titleDefault;
110
+ const itemWidth = (height - CIRCLE_SIZE) / titles?.length;
111
+ const lineActive =
112
+ currentStep >= index + 2
113
+ ? lineColorActive
114
+ ? Colors.pink_09
115
+ : '#ffd6e7'
116
+ : lineColorInActive || Colors.black_02;
117
+ console.log(typeof items[index]);
215
118
  return (
216
- <View key={index}>
217
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
218
- {
219
- isNumber ? (
220
- <View style={{
221
- width: CIRCLE_SIZE,
222
- height: CIRCLE_SIZE,
223
- borderRadius: CIRCLE_SIZE / 2,
224
- backgroundColor: backgroundActive,
225
- borderColor: Colors.pink_09,
226
- borderWidth: 1,
227
- alignItems: 'center',
228
- justifyContent: 'center'
229
- }}
230
- >
119
+ <View
120
+ onLayout={(event) => {
121
+ const viewHeight = event.nativeEvent.layout.height;
122
+ itemHeight = viewHeight;
123
+ console.log({ itemHeight });
124
+ }}
125
+ key={index}
126
+ style={{ flexDirection: 'row' }}>
127
+ <View>
128
+ {currentStep <= index + 1 ? (
129
+ <View
130
+ style={[
131
+ styles.circle,
132
+ {
133
+ backgroundColor: circleColor,
134
+ borderColor: circleBorderColor,
135
+ },
136
+ ]}>
137
+ <Text style={styles.number}>{icon}</Text>
138
+ </View>
139
+ ) : (
140
+ <View>
141
+ <Image
142
+ source={icon}
143
+ style={[
144
+ styles.checkedCircle,
145
+ { tintColor: '#ffd6e7' },
146
+ ]}
147
+ />
148
+ </View>
149
+ )}
150
+ {titles?.length - 1 !== index && (
151
+ <View
152
+ style={[
153
+ styles.line,
231
154
  {
232
- iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
233
- }
155
+ left: 11,
156
+ backgroundColor: lineActive,
157
+ width: 2,
158
+ minHeight: 10,
159
+ marginTop: 4,
160
+ marginBottom: 4,
161
+ flex: 1,
162
+ },
163
+ lineStyle,
164
+ ]}
165
+ />
166
+ )}
167
+ </View>
168
+ <View
169
+ style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
170
+ <View
171
+ style={{
172
+ flexDirection: 'row',
173
+ justifyContent: 'space-between',
174
+ alignItems: 'center',
175
+ }}>
176
+ <Text.Caption
177
+ style={[{ marginLeft: 10 }, textFontStyle]}>
178
+ {value}
179
+ </Text.Caption>
180
+ {currentStep >= index + 1 && (
181
+ <Text style={styles.date}>{date}</Text>
182
+ )}
183
+ </View>
184
+ <View>
185
+ {typeof items[index] == 'string' ? (
186
+ <Text style={[styles.description]}>
187
+ {items[index]}
188
+ </Text>
189
+ ) : (
190
+ <View style={[styles.description]}>
191
+ {items[index]}
234
192
  </View>
235
- ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
236
- }
237
- <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
193
+ )}
194
+ </View>
238
195
  </View>
239
-
240
- {
241
- data?.length - 1 !== index && (
242
- <View style={[styles.line, {
243
- left: 10,
244
- backgroundColor: lineActive,
245
- width: 4,
246
- height: lineWidth,
247
- marginTop: 0,
248
- }, lineStyle]}
249
- />
250
- )
251
- }
252
-
253
196
  </View>
254
197
  );
255
- }
198
+ };
256
199
 
257
200
  renderCircle = () => {
258
- const { data = [], isVertical } = this.props;
259
- return data.map(isVertical ? this.circleColumn : this.circle);
260
- }
201
+ const { titles = [[]] } = this.props;
202
+ return titles.map(this.circleColumn);
203
+ };
261
204
 
262
205
  render() {
263
206
  const { width, height } = this.state;
264
207
  const { style, isVertical } = this.props;
265
208
  return (
266
- <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
267
- {/* {this.renderLine()} */}
268
- {
269
- isVertical ? (
209
+ <ScrollView>
210
+ <View
211
+ style={[styles.containerStyle, style]}
212
+ onLayout={this.onLayout}>
213
+ {isVertical ? (
270
214
  <View style={[styles.circleColumn, { height }]}>
271
215
  {this.renderCircle()}
272
216
  </View>
@@ -274,33 +218,28 @@ export default class Step extends Component {
274
218
  <View style={[styles.circleRow, { width }]}>
275
219
  {this.renderCircle()}
276
220
  </View>
277
- )
278
- }
279
-
280
- </View>
221
+ )}
222
+ </View>
223
+ </ScrollView>
281
224
  );
282
225
  }
283
226
  }
284
227
 
285
228
  Step.propTypes = {
286
- data: PropTypes.arrayOf(PropTypes.string),
229
+ titles: PropTypes.array,
287
230
  currentStep: PropTypes.number,
288
- tintColor: PropTypes.string,
289
231
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
290
- isNumber: PropTypes.bool,
232
+ items: PropTypes.array,
291
233
  isVertical: PropTypes.bool,
292
234
  iconActive: PropTypes.any,
293
235
  iconInActive: PropTypes.any,
294
236
  lineColorActive: PropTypes.string,
295
237
  lineColorInActive: PropTypes.string,
296
- bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
297
- checkedPreviousStep: PropTypes.bool,
298
238
  borderColorActive: PropTypes.string,
299
239
  borderColorInActive: PropTypes.string,
300
240
  };
301
241
 
302
242
  Step.defaultProps = {
303
- data: [],
243
+ titles: [],
304
244
  currentStep: 0,
305
- tintColor: Colors.sepia_05
306
- };
245
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/step",
3
- "version": "0.0.43-beta.20",
3
+ "version": "0.0.43-beta.24",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {},
package/publish.sh CHANGED
@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js' --exclude 'props-type
21
21
  #npm login
22
22
  #publish dist to npm
23
23
  cd dist
24
- npm publish --access=public
24
+ npm publish --tag beta --access=public
25
25
  cd ..
26
26
  rm -rf dist
27
27
 
28
28
 
29
- #curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/step new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/step"}'
29
+ curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/step new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/step"}'