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

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 +168 -231
  2. package/Step.web.js +167 -228
  3. package/package.json +1 -1
  4. package/publish.sh +1 -1
package/Step.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { Component } from 'react';
2
2
  import { View, StyleSheet } from 'react-native';
3
3
 
4
- import PropTypes from 'prop-types';
5
- import {
6
- Colors, Text, IconSource, Image
7
- } from '@momo-kits/core';
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
8
 
9
9
  const CIRCLE_SIZE = 24;
10
10
 
@@ -12,66 +12,48 @@ const styles = StyleSheet.create({
12
12
  circle: {
13
13
  width: CIRCLE_SIZE,
14
14
  height: CIRCLE_SIZE,
15
- // borderWidth: 1,
16
- // borderColor: Colors.sepia_05,
17
15
  borderRadius: CIRCLE_SIZE / 2,
18
- backgroundColor: 'white'
16
+ borderWidth: 2,
17
+ padding: 4,
19
18
  },
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',
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,
64
26
  },
65
27
  titleDefault: {
66
- color: Colors.black_12
28
+ color: Colors.black_12,
29
+ fontSize: 14,
30
+ fontWeight: 'normal',
67
31
  },
68
32
  titleActive: {
69
33
  color: Colors.black_17,
70
- fontWeight: 'bold'
34
+ fontSize: 14,
35
+ fontWeight: 'bold',
71
36
  },
72
37
  containerStyle: {
73
- minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE
74
- }
38
+ minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
39
+ },
40
+ description: {
41
+ fontSize: 12,
42
+ color: Colors.black_12,
43
+ paddingBottom: 16,
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
+ },
75
57
  });
76
58
 
77
59
  export default class Step extends Component {
@@ -79,195 +61,156 @@ export default class Step extends Component {
79
61
  super(props);
80
62
  this.state = {
81
63
  width: 0,
82
- height: 0
64
+ height: 0,
83
65
  };
84
66
  }
85
67
 
86
68
  onLayout = (e) => {
87
- this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
88
- }
69
+ this.setState({
70
+ width: e.nativeEvent.layout.width,
71
+ height: e.nativeEvent.layout.height,
72
+ });
73
+ };
89
74
 
90
- renderLine = () => {
91
- const {
92
- lineColor, lineStyle, currentStep, data
93
- } = this.props;
75
+ circleStep = (index) => {
94
76
  return (
95
- <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
96
- {/* <View style={styles.topLeft} />
97
- <View style={styles.topLeftWidth} />
98
- <View style={styles.topRight} /> */}
77
+ <View style={[styles.circle]}>
78
+ <Text style={styles.number}>{index}</Text>
99
79
  </View>
100
80
  );
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
- }
81
+ };
182
82
 
183
83
  circleColumn = (value, index) => {
184
84
  const {
185
- currentStep, tintColor, data, lineStyle, isNumber, iconActive,
186
- 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,
187
95
  } = this.props;
188
96
  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
-
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_06;
104
+ var circleBorderColor =
105
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
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_04;
117
+ console.log(typeof items[index]);
216
118
  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
- >
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,
232
154
  {
233
- iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
234
- }
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]}
235
192
  </View>
236
- ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
237
- }
238
- <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
193
+ )}
194
+ </View>
239
195
  </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
196
  </View>
255
197
  );
256
- }
198
+ };
257
199
 
258
200
  renderCircle = () => {
259
- const { data = [], isVertical } = this.props;
260
- return data.map(isVertical ? this.circleColumn : this.circle);
261
- }
201
+ const { titles = [[]] } = this.props;
202
+ return titles.map(this.circleColumn);
203
+ };
262
204
 
263
205
  render() {
264
206
  const { width, height } = this.state;
265
207
  const { style, isVertical } = this.props;
266
208
  return (
267
- <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
268
- {/* {this.renderLine()} */}
269
- {
270
- isVertical ? (
209
+ <ScrollView>
210
+ <View
211
+ style={[styles.containerStyle, style]}
212
+ onLayout={this.onLayout}>
213
+ {isVertical ? (
271
214
  <View style={[styles.circleColumn, { height }]}>
272
215
  {this.renderCircle()}
273
216
  </View>
@@ -275,34 +218,28 @@ export default class Step extends Component {
275
218
  <View style={[styles.circleRow, { width }]}>
276
219
  {this.renderCircle()}
277
220
  </View>
278
- )
279
- }
280
-
281
- </View>
221
+ )}
222
+ </View>
223
+ </ScrollView>
282
224
  );
283
225
  }
284
226
  }
285
227
 
286
228
  Step.propTypes = {
287
- data: PropTypes.arrayOf(PropTypes.string),
229
+ titles: PropTypes.array,
288
230
  currentStep: PropTypes.number,
289
- tintColor: PropTypes.string,
290
231
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
291
- isNumber: PropTypes.bool,
232
+ items: PropTypes.array,
292
233
  isVertical: PropTypes.bool,
293
234
  iconActive: PropTypes.any,
294
235
  iconInActive: PropTypes.any,
295
236
  lineColorActive: PropTypes.string,
296
237
  lineColorInActive: PropTypes.string,
297
- bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
298
- checkedPreviousStep: PropTypes.bool,
299
238
  borderColorActive: PropTypes.string,
300
239
  borderColorInActive: PropTypes.string,
301
240
  };
302
241
 
303
242
  Step.defaultProps = {
304
- data: [],
243
+ titles: [],
305
244
  currentStep: 0,
306
- tintColor: Colors.sepia_05,
307
- checkedPreviousStep: false,
308
- };
245
+ };
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.22",
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