@momo-kits/step 0.0.43-beta.2 → 0.0.43-beta.23

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/Step.js +166 -230
  2. package/Step.web.js +167 -228
  3. package/package.json +1 -1
  4. package/publish.sh +1 -1
package/Step.js CHANGED
@@ -2,9 +2,8 @@ import React, { Component } from 'react';
2
2
  import { View, StyleSheet } from 'react-native';
3
3
 
4
4
  import PropTypes from 'prop-types';
5
- import {
6
- Colors, Text, IconSource, Image
7
- } from '@momo-kits/core';
5
+ import { Colors, Text, IconSource, Image } from '@momo-kits/core';
6
+ import { ScrollView } from 'react-native-gesture-handler';
8
7
 
9
8
  const CIRCLE_SIZE = 24;
10
9
 
@@ -12,66 +11,48 @@ const styles = StyleSheet.create({
12
11
  circle: {
13
12
  width: CIRCLE_SIZE,
14
13
  height: CIRCLE_SIZE,
15
- // borderWidth: 1,
16
- // borderColor: Colors.sepia_05,
17
14
  borderRadius: CIRCLE_SIZE / 2,
18
- backgroundColor: 'white'
15
+ borderWidth: 2,
16
+ padding: 4,
19
17
  },
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',
18
+ checkedCircle: {
19
+ width: CIRCLE_SIZE,
20
+ height: CIRCLE_SIZE,
21
+ borderRadius: CIRCLE_SIZE / 2,
22
+ backgroundColor: '#ffadd2',
23
+ borderWidth: 2,
24
+ borderColor: Colors.pink_09,
64
25
  },
65
26
  titleDefault: {
66
- color: Colors.black_12
27
+ color: Colors.black_12,
28
+ fontSize: 14,
29
+ fontWeight: 'normal',
67
30
  },
68
31
  titleActive: {
69
32
  color: Colors.black_17,
70
- fontWeight: 'bold'
33
+ fontSize: 14,
34
+ fontWeight: 'bold',
71
35
  },
72
36
  containerStyle: {
73
- minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE
74
- }
37
+ minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
38
+ },
39
+ description: {
40
+ fontSize: 12,
41
+ color: Colors.black_12,
42
+ paddingBottom: 16,
43
+ paddingTop: 4,
44
+ paddingLeft: 11,
45
+ },
46
+ date: {
47
+ fontSize: 10,
48
+ color: Colors.black_12,
49
+ },
50
+ number: {
51
+ fontSize: 12,
52
+ color: 'white',
53
+ textAlign: 'center',
54
+ lineHeight: 13,
55
+ },
75
56
  });
76
57
 
77
58
  export default class Step extends Component {
@@ -79,195 +60,156 @@ export default class Step extends Component {
79
60
  super(props);
80
61
  this.state = {
81
62
  width: 0,
82
- height: 0
63
+ height: 0,
83
64
  };
84
65
  }
85
66
 
86
67
  onLayout = (e) => {
87
- this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
88
- }
68
+ this.setState({
69
+ width: e.nativeEvent.layout.width,
70
+ height: e.nativeEvent.layout.height,
71
+ });
72
+ };
89
73
 
90
- renderLine = () => {
91
- const {
92
- lineColor, lineStyle, currentStep, data
93
- } = this.props;
74
+ circleStep = (index) => {
94
75
  return (
95
- <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
96
- {/* <View style={styles.topLeft} />
97
- <View style={styles.topLeftWidth} />
98
- <View style={styles.topRight} /> */}
76
+ <View style={[styles.circle]}>
77
+ <Text style={styles.number}>{index}</Text>
99
78
  </View>
100
79
  );
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
- }
80
+ };
182
81
 
183
82
  circleColumn = (value, index) => {
184
83
  const {
185
- currentStep, tintColor, data, lineStyle, isNumber, iconActive,
186
- iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
84
+ currentStep,
85
+ titles,
86
+ lineStyle,
87
+ iconActive,
88
+ iconInActive,
89
+ lineColorActive,
90
+ lineColorInActive,
91
+ items,
92
+ currentStepColor,
93
+ date,
187
94
  } = this.props;
188
95
  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
-
96
+ let itemHeight = 0;
97
+ const icon =
98
+ currentStep >= index + 2
99
+ ? iconActive || IconSource.ic_check_24
100
+ : iconInActive || index + 1;
101
+ var circleColor =
102
+ currentStep >= index + 1 ? currentStepColor : Colors.black_06;
103
+ var circleBorderColor =
104
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
105
+ const textFontStyle =
106
+ currentStep === index + 1
107
+ ? styles.titleActive
108
+ : styles.titleDefault;
109
+ const itemWidth = (height - CIRCLE_SIZE) / titles?.length;
110
+ const lineActive =
111
+ currentStep >= index + 2
112
+ ? lineColorActive
113
+ ? Colors.pink_09
114
+ : '#ffd6e7'
115
+ : lineColorInActive || Colors.black_04;
116
+ console.log(typeof items[index]);
216
117
  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
- >
118
+ <View
119
+ onLayout={(event) => {
120
+ const viewHeight = event.nativeEvent.layout.height;
121
+ itemHeight = viewHeight;
122
+ console.log({ itemHeight });
123
+ }}
124
+ key={index}
125
+ style={{ flexDirection: 'row' }}>
126
+ <View>
127
+ {currentStep <= index + 1 ? (
128
+ <View
129
+ style={[
130
+ styles.circle,
131
+ {
132
+ backgroundColor: circleColor,
133
+ borderColor: circleBorderColor,
134
+ },
135
+ ]}>
136
+ <Text style={styles.number}>{icon}</Text>
137
+ </View>
138
+ ) : (
139
+ <View>
140
+ <Image
141
+ source={icon}
142
+ style={[
143
+ styles.checkedCircle,
144
+ { tintColor: '#ffd6e7' },
145
+ ]}
146
+ />
147
+ </View>
148
+ )}
149
+ {titles?.length - 1 !== index && (
150
+ <View
151
+ style={[
152
+ styles.line,
232
153
  {
233
- iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
234
- }
154
+ left: 11,
155
+ backgroundColor: lineActive,
156
+ width: 2,
157
+ minHeight: 10,
158
+ marginTop: 4,
159
+ marginBottom: 4,
160
+ flex: 1,
161
+ },
162
+ lineStyle,
163
+ ]}
164
+ />
165
+ )}
166
+ </View>
167
+ <View
168
+ style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
169
+ <View
170
+ style={{
171
+ flexDirection: 'row',
172
+ justifyContent: 'space-between',
173
+ alignItems: 'center',
174
+ }}>
175
+ <Text.Caption
176
+ style={[{ marginLeft: 10 }, textFontStyle]}>
177
+ {value}
178
+ </Text.Caption>
179
+ {currentStep >= index + 1 && (
180
+ <Text style={styles.date}>{date}</Text>
181
+ )}
182
+ </View>
183
+ <View>
184
+ {typeof items[index] == 'string' ? (
185
+ <Text style={[styles.description]}>
186
+ {items[index]}
187
+ </Text>
188
+ ) : (
189
+ <View style={[styles.description]}>
190
+ {items[index]}
235
191
  </View>
236
- ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
237
- }
238
- <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
192
+ )}
193
+ </View>
239
194
  </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
195
  </View>
255
196
  );
256
- }
197
+ };
257
198
 
258
199
  renderCircle = () => {
259
- const { data = [], isVertical } = this.props;
260
- return data.map(isVertical ? this.circleColumn : this.circle);
261
- }
200
+ const { titles = [[]] } = this.props;
201
+ return titles.map(this.circleColumn);
202
+ };
262
203
 
263
204
  render() {
264
205
  const { width, height } = this.state;
265
206
  const { style, isVertical } = this.props;
266
207
  return (
267
- <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
268
- {/* {this.renderLine()} */}
269
- {
270
- isVertical ? (
208
+ <ScrollView>
209
+ <View
210
+ style={[styles.containerStyle, style]}
211
+ onLayout={this.onLayout}>
212
+ {isVertical ? (
271
213
  <View style={[styles.circleColumn, { height }]}>
272
214
  {this.renderCircle()}
273
215
  </View>
@@ -275,34 +217,28 @@ export default class Step extends Component {
275
217
  <View style={[styles.circleRow, { width }]}>
276
218
  {this.renderCircle()}
277
219
  </View>
278
- )
279
- }
280
-
281
- </View>
220
+ )}
221
+ </View>
222
+ </ScrollView>
282
223
  );
283
224
  }
284
225
  }
285
226
 
286
227
  Step.propTypes = {
287
- data: PropTypes.arrayOf(PropTypes.string),
228
+ titles: PropTypes.array,
288
229
  currentStep: PropTypes.number,
289
- tintColor: PropTypes.string,
290
230
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
291
- isNumber: PropTypes.bool,
231
+ items: PropTypes.array,
292
232
  isVertical: PropTypes.bool,
293
233
  iconActive: PropTypes.any,
294
234
  iconInActive: PropTypes.any,
295
235
  lineColorActive: PropTypes.string,
296
236
  lineColorInActive: PropTypes.string,
297
- bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
298
- checkedPreviousStep: PropTypes.bool,
299
237
  borderColorActive: PropTypes.string,
300
238
  borderColorInActive: PropTypes.string,
301
239
  };
302
240
 
303
241
  Step.defaultProps = {
304
- data: [],
242
+ titles: [],
305
243
  currentStep: 0,
306
- tintColor: Colors.sepia_05,
307
- checkedPreviousStep: false,
308
- };
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.2",
3
+ "version": "0.0.43-beta.23",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {},
package/publish.sh CHANGED
@@ -21,7 +21,7 @@ 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