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

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 (7) hide show
  1. package/Step.horizontal.js +39 -36
  2. package/Step.horizontal.web.js +266 -0
  3. package/Step.js +3 -0
  4. package/Step.vertical.js +34 -30
  5. package/Step.vertical.web.js +251 -0
  6. package/Step.web.js +11 -214
  7. package/package.json +1 -1
package/Step.horizontal.js CHANGED
@@ -1,24 +1,11 @@
1
+ import { Colors, IconSource, Image, Text } from '@momo-kits/core';
2
+ import PropTypes from 'prop-types';
1
3
  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';
4
+ import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';
9
5
 
10
6
  const CIRCLE_SIZE = 24;
11
7
  const SCREEN_WIDTH = Dimensions.get('window').width;
12
8
 
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
9
  const styles = StyleSheet.create({
23
10
  circle: {
24
11
  width: CIRCLE_SIZE,
@@ -36,16 +23,15 @@ const styles = StyleSheet.create({
36
23
  borderColor: Colors.pink_09,
37
24
  },
38
25
  titleDefault: {
26
+ fontSize: 14,
39
27
  color: Colors.black_12,
40
28
  fontWeight: 'normal',
41
29
  },
42
30
  titleActive: {
31
+ fontSize: 14,
43
32
  color: Colors.black_17,
44
33
  fontWeight: 'bold',
45
34
  },
46
- containerStyle: {
47
- minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
48
- },
49
35
  description: {
50
36
  fontSize: 12,
51
37
  color: Colors.black_12,
@@ -65,7 +51,6 @@ const styles = StyleSheet.create({
65
51
  },
66
52
  lineHorizontal: {
67
53
  height: 2,
68
- marginTop: 26,
69
54
  width: '100%',
70
55
  },
71
56
  minHeight: {
@@ -110,7 +95,9 @@ export default class HorizontalStep extends Component {
110
95
  currentStepColor,
111
96
  date,
112
97
  isVertical,
113
- titleFontSize,
98
+ titleStyle,
99
+ descriptionStyle,
100
+ dateStyle,
114
101
  } = this.props;
115
102
  const icon =
116
103
  currentStep >= index + 2
@@ -134,7 +121,7 @@ export default class HorizontalStep extends Component {
134
121
  const lineWidth = Math.round(
135
122
  (SCREEN_WIDTH - 10 - CIRCLE_SIZE - 4) / titles.length,
136
123
  );
137
- const lineRight = parseInt(`-${lineWidth / 2 - 10}`);
124
+ const lineRight = parseInt(`-${lineWidth / 2}`);
138
125
  return (
139
126
  <View
140
127
  key={index}
@@ -148,13 +135,19 @@ export default class HorizontalStep extends Component {
148
135
  flexDirection: 'column',
149
136
  alignItems: 'center',
150
137
  }}>
151
- {currentStep >= index + 1 ? (
152
- <Text style={[styles.date, { marginBottom: 4 }]}>
153
- {date}
154
- </Text>
155
- ) : (
156
- <View style={minHeight}></View>
157
- )}
138
+ {date &&
139
+ (currentStep >= index + 1 ? (
140
+ <Text
141
+ style={[
142
+ styles.date,
143
+ dateStyle,
144
+ { minHeight: 12, marginBottom: 4 },
145
+ ]}>
146
+ {date[index]}
147
+ </Text>
148
+ ) : (
149
+ <View style={minHeight}></View>
150
+ ))}
158
151
  {currentStep <= index + 1 ? (
159
152
  <View>
160
153
  {/* image */}
@@ -183,16 +176,21 @@ export default class HorizontalStep extends Component {
183
176
  <View>
184
177
  <Text.Caption
185
178
  style={[
186
- { marginTop: 4, fontSize: titleFontSize },
179
+ { marginTop: 4 },
187
180
  textFontStyle,
181
+ titleStyle,
188
182
  ]}>
189
183
  {value}
190
184
  </Text.Caption>
191
185
  </View>
192
186
 
193
- <View>
194
- <Text style={[{ fontSize: 10 }]}>{items[index]}</Text>
195
- </View>
187
+ {items && (
188
+ <View>
189
+ <Text style={[{ fontSize: 10 }, descriptionStyle]}>
190
+ {items[index]}
191
+ </Text>
192
+ </View>
193
+ )}
196
194
  </View>
197
195
  {titles?.length - 1 !== index && (
198
196
  <View
@@ -208,6 +206,10 @@ export default class HorizontalStep extends Component {
208
206
  {
209
207
  backgroundColor: lineActive,
210
208
  },
209
+ date
210
+ ? { marginTop: 27 }
211
+ : { marginTop: 27 - 16 },
212
+ /* subtracting spacing from date */
211
213
  ]}
212
214
  />
213
215
  </View>
@@ -225,9 +227,7 @@ export default class HorizontalStep extends Component {
225
227
  const { style = {} } = this.props;
226
228
  return (
227
229
  <ScrollView>
228
- <View
229
- style={[styles.containerStyle, style]}
230
- onLayout={this.onLayout}>
230
+ <View style={[style]} onLayout={this.onLayout}>
231
231
  <View
232
232
  style={{
233
233
  flexDirection: 'row',
@@ -252,6 +252,9 @@ HorizontalStep.propTypes = {
252
252
  lineColorInActive: PropTypes.string,
253
253
  borderColorActive: PropTypes.string,
254
254
  borderColorInActive: PropTypes.string,
255
+ titleStyle: PropTypes.object,
256
+ descriptionStyle: PropTypes.object,
257
+ dateStyle: PropTypes.object,
255
258
  };
256
259
 
257
260
  HorizontalStep.defaultProps = {
package/Step.horizontal.web.js ADDED
@@ -0,0 +1,266 @@
1
+ import React, { Component } from 'react';
2
+ import { View, StyleSheet, Image, Dimensions, ScrollView } from 'react-native';
3
+
4
+ import PropTypes from 'prop-types';
5
+ import Colors from '../../core/colors';
6
+ import Text from '../../core/components/typography';
7
+ import { Icons as IconSource } from '../../core/icons';
8
+
9
+ const CIRCLE_SIZE = 24;
10
+ const SCREEN_WIDTH = Dimensions.get('window').width;
11
+
12
+ const styles = StyleSheet.create({
13
+ circle: {
14
+ width: CIRCLE_SIZE,
15
+ height: CIRCLE_SIZE,
16
+ borderRadius: CIRCLE_SIZE / 2,
17
+ borderWidth: 2,
18
+ padding: 4,
19
+ },
20
+ checkedCircle: {
21
+ width: CIRCLE_SIZE,
22
+ height: CIRCLE_SIZE,
23
+ borderRadius: CIRCLE_SIZE / 2,
24
+ backgroundColor: '#ffadd2',
25
+ borderWidth: 2,
26
+ borderColor: Colors.pink_09,
27
+ },
28
+ titleDefault: {
29
+ fontSize: 14,
30
+ color: Colors.black_12,
31
+ fontWeight: 'normal',
32
+ },
33
+ titleActive: {
34
+ fontSize: 14,
35
+ color: Colors.black_17,
36
+ fontWeight: 'bold',
37
+ },
38
+ description: {
39
+ fontSize: 12,
40
+ color: Colors.black_12,
41
+ marginBottom: 16,
42
+ paddingTop: 4,
43
+ paddingLeft: 11,
44
+ },
45
+ date: {
46
+ fontSize: 10,
47
+ color: Colors.black_12,
48
+ },
49
+ number: {
50
+ fontSize: 12,
51
+ color: 'white',
52
+ textAlign: 'center',
53
+ lineHeight: 13,
54
+ },
55
+ lineHorizontal: {
56
+ height: 2,
57
+ width: '100%',
58
+ },
59
+ minHeight: {
60
+ minHeight: 12,
61
+ marginBottom: 4,
62
+ },
63
+ });
64
+
65
+ export default class HorizontalStep extends Component {
66
+ constructor(props) {
67
+ super(props);
68
+ this.state = {
69
+ width: 0,
70
+ height: 0,
71
+ };
72
+ }
73
+
74
+ onLayout = (e) => {
75
+ this.setState({
76
+ width: e.nativeEvent.layout.width,
77
+ height: e.nativeEvent.layout.height,
78
+ });
79
+ };
80
+
81
+ circleStep = (index) => {
82
+ return (
83
+ <View style={[styles.circle]}>
84
+ <Text style={styles.number}>{index}</Text>
85
+ </View>
86
+ );
87
+ };
88
+
89
+ circleColumn = (value, index) => {
90
+ const {
91
+ currentStep,
92
+ titles,
93
+ iconActive,
94
+ iconInActive,
95
+ lineColorActive,
96
+ lineColorInActive,
97
+ items,
98
+ currentStepColor,
99
+ date,
100
+ isVertical,
101
+ titleStyle,
102
+ descriptionStyle,
103
+ dateStyle,
104
+ } = this.props;
105
+ const icon =
106
+ currentStep >= index + 2
107
+ ? iconActive || IconSource.ic_check_24
108
+ : iconInActive || index + 1;
109
+ var circleColor =
110
+ currentStep >= index + 1 ? currentStepColor : Colors.black_06;
111
+ var circleBorderColor =
112
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
113
+ const textFontStyle =
114
+ currentStep === index + 1
115
+ ? styles.titleActive
116
+ : styles.titleDefault;
117
+ const lineActive =
118
+ currentStep >= index + 2
119
+ ? lineColorActive
120
+ ? Colors.pink_09
121
+ : '#ffd6e7'
122
+ : lineColorInActive || Colors.black_04;
123
+ const minHeight = !isVertical && styles.minHeight;
124
+ const lineWidth = Math.round(
125
+ (SCREEN_WIDTH - 10 - CIRCLE_SIZE - 4) / titles.length,
126
+ );
127
+ const lineRight = parseInt(`-${lineWidth / 2}`);
128
+ return (
129
+ <View
130
+ key={index}
131
+ style={{
132
+ flexDirection: 'row',
133
+ flex: 1,
134
+ justifyContent: 'center',
135
+ }}>
136
+ <View
137
+ style={{
138
+ flexDirection: 'column',
139
+ alignItems: 'center',
140
+ }}>
141
+ {date &&
142
+ (currentStep >= index + 1 ? (
143
+ <Text
144
+ style={[
145
+ styles.date,
146
+ dateStyle,
147
+ { minHeight: 12, marginBottom: 4 },
148
+ ]}>
149
+ {date[index]}
150
+ </Text>
151
+ ) : (
152
+ <View style={minHeight}></View>
153
+ ))}
154
+ {currentStep <= index + 1 ? (
155
+ <View>
156
+ {/* image */}
157
+ <View
158
+ style={[
159
+ styles.circle,
160
+ {
161
+ backgroundColor: circleColor,
162
+ borderColor: circleBorderColor,
163
+ },
164
+ ]}>
165
+ <Text style={styles.number}>{icon}</Text>
166
+ </View>
167
+ </View>
168
+ ) : (
169
+ <View>
170
+ <Image
171
+ source={icon}
172
+ style={[
173
+ styles.checkedCircle,
174
+ { tintColor: '#ffd6e7' },
175
+ ]}
176
+ />
177
+ </View>
178
+ )}
179
+ <View>
180
+ <Text.Caption
181
+ style={[
182
+ { marginTop: 4 },
183
+ textFontStyle,
184
+ titleStyle,
185
+ ]}>
186
+ {value}
187
+ </Text.Caption>
188
+ </View>
189
+
190
+ {items && (
191
+ <View>
192
+ <Text style={[{ fontSize: 10 }, descriptionStyle]}>
193
+ {items[index]}
194
+ </Text>
195
+ </View>
196
+ )}
197
+ </View>
198
+ {titles?.length - 1 !== index && (
199
+ <View
200
+ style={{
201
+ position: 'absolute',
202
+ right: lineRight,
203
+ width: lineWidth,
204
+ zIndex: -1,
205
+ }}>
206
+ <View
207
+ style={[
208
+ styles.lineHorizontal,
209
+ {
210
+ backgroundColor: lineActive,
211
+ },
212
+ date
213
+ ? { marginTop: 27 }
214
+ : { marginTop: 27 - 16 },
215
+ /* subtracting spacing from date */
216
+ ]}
217
+ />
218
+ </View>
219
+ )}
220
+ </View>
221
+ );
222
+ };
223
+
224
+ renderCircle = () => {
225
+ const { titles = [[]] } = this.props;
226
+ return titles.map(this.circleColumn);
227
+ };
228
+
229
+ render() {
230
+ const { style = {} } = this.props;
231
+ return (
232
+ <ScrollView>
233
+ <View style={[style]} onLayout={this.onLayout}>
234
+ <View
235
+ style={{
236
+ flexDirection: 'row',
237
+ }}>
238
+ {this.renderCircle()}
239
+ </View>
240
+ </View>
241
+ </ScrollView>
242
+ );
243
+ }
244
+ }
245
+
246
+ HorizontalStep.propTypes = {
247
+ titles: PropTypes.array,
248
+ currentStep: PropTypes.number,
249
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
250
+ items: PropTypes.array,
251
+ isVertical: PropTypes.bool,
252
+ iconActive: PropTypes.any,
253
+ iconInActive: PropTypes.any,
254
+ lineColorActive: PropTypes.string,
255
+ lineColorInActive: PropTypes.string,
256
+ borderColorActive: PropTypes.string,
257
+ borderColorInActive: PropTypes.string,
258
+ titleStyle: PropTypes.object,
259
+ descriptionStyle: PropTypes.object,
260
+ dateStyle: PropTypes.object,
261
+ };
262
+
263
+ HorizontalStep.defaultProps = {
264
+ titles: [],
265
+ currentStep: 0,
266
+ };
package/Step.js CHANGED
@@ -30,6 +30,9 @@ Step.propTypes = {
30
30
  lineColorInActive: PropTypes.string,
31
31
  borderColorActive: PropTypes.string,
32
32
  borderColorInActive: PropTypes.string,
33
+ titleStyle: PropTypes.object,
34
+ descriptionStyle: PropTypes.object,
35
+ dateStyle: PropTypes.object,
33
36
  };
34
37
 
35
38
  Step.defaultProps = {
package/Step.vertical.js CHANGED
@@ -1,23 +1,10 @@
1
+ import { Colors, IconSource, Image, Text } from '@momo-kits/core';
2
+ import PropTypes from 'prop-types';
1
3
  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';
4
+ import { View, StyleSheet, ScrollView } from 'react-native';
9
5
 
10
6
  const CIRCLE_SIZE = 24;
11
7
 
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
8
  const styles = StyleSheet.create({
22
9
  circle: {
23
10
  width: CIRCLE_SIZE,
@@ -114,7 +101,9 @@ export default class VerticalStep extends Component {
114
101
  items,
115
102
  currentStepColor,
116
103
  date,
117
- isVertical,
104
+ titleStyle,
105
+ descriptionStyle,
106
+ dateStyle,
118
107
  } = this.props;
119
108
  const icon =
120
109
  currentStep >= index + 2
@@ -183,24 +172,36 @@ export default class VerticalStep extends Component {
183
172
  alignItems: 'center',
184
173
  }}>
185
174
  <Text.Caption
186
- style={[{ marginLeft: 10 }, textFontStyle]}>
175
+ style={[
176
+ { marginLeft: 10 },
177
+ textFontStyle,
178
+ titleStyle,
179
+ ]}>
187
180
  {value}
188
181
  </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]}
182
+ {date && currentStep >= index + 1 && (
183
+ <Text style={[styles.date, dateStyle]}>
184
+ {date[index]}
197
185
  </Text>
198
- ) : (
199
- <View style={[styles.description]}>
200
- {items[index]}
201
- </View>
202
186
  )}
203
187
  </View>
188
+ {items && (
189
+ <View>
190
+ {typeof items[index] == 'string' ? (
191
+ <Text
192
+ style={[
193
+ styles.description,
194
+ descriptionStyle,
195
+ ]}>
196
+ {items[index]}
197
+ </Text>
198
+ ) : (
199
+ <View style={[styles.description]}>
200
+ {items[index]}
201
+ </View>
202
+ )}
203
+ </View>
204
+ )}
204
205
  </View>
205
206
  </View>
206
207
  );
@@ -236,6 +237,9 @@ VerticalStep.propTypes = {
236
237
  lineColorInActive: PropTypes.string,
237
238
  borderColorActive: PropTypes.string,
238
239
  borderColorInActive: PropTypes.string,
240
+ titleStyle: PropTypes.object,
241
+ descriptionStyle: PropTypes.object,
242
+ dateStyle: PropTypes.object,
239
243
  };
240
244
 
241
245
  VerticalStep.defaultProps = {
package/Step.vertical.web.js ADDED
@@ -0,0 +1,251 @@
1
+ import React, { Component } from 'react';
2
+ import { View, StyleSheet, Image, ScrollView } from 'react-native';
3
+
4
+ import PropTypes from 'prop-types';
5
+ import Colors from '../../core/colors';
6
+ import Text from '../../core/components/typography';
7
+ import { Icons as IconSource } from '../../core/icons';
8
+
9
+ const CIRCLE_SIZE = 24;
10
+
11
+ const styles = StyleSheet.create({
12
+ circle: {
13
+ width: CIRCLE_SIZE,
14
+ height: CIRCLE_SIZE,
15
+ borderRadius: CIRCLE_SIZE / 2,
16
+ borderWidth: 2,
17
+ padding: 4,
18
+ },
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,
26
+ },
27
+ titleDefault: {
28
+ color: Colors.black_12,
29
+ fontSize: 14,
30
+ fontWeight: 'normal',
31
+ },
32
+ titleActive: {
33
+ color: Colors.black_17,
34
+ fontSize: 14,
35
+ fontWeight: 'bold',
36
+ },
37
+ containerStyle: {
38
+ minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
39
+ },
40
+ description: {
41
+ fontSize: 12,
42
+ color: Colors.black_12,
43
+ marginBottom: 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
+ },
57
+ lineVertical: {
58
+ marginLeft: 11,
59
+ width: 2,
60
+ minHeight: 10,
61
+ marginTop: 4,
62
+ marginBottom: 4,
63
+ flex: 1,
64
+ },
65
+ minHeight: {
66
+ minHeight: 12,
67
+ marginBottom: 4,
68
+ },
69
+ });
70
+
71
+ export default class VerticalStep extends Component {
72
+ constructor(props) {
73
+ super(props);
74
+ this.state = {
75
+ width: 0,
76
+ height: 0,
77
+ };
78
+ }
79
+
80
+ onLayout = (e) => {
81
+ this.setState({
82
+ width: e.nativeEvent.layout.width,
83
+ height: e.nativeEvent.layout.height,
84
+ });
85
+ };
86
+
87
+ circleStep = (index) => {
88
+ return (
89
+ <View style={[styles.circle]}>
90
+ <Text style={styles.number}>{index}</Text>
91
+ </View>
92
+ );
93
+ };
94
+
95
+ circleColumn = (value, index) => {
96
+ const {
97
+ currentStep,
98
+ titles,
99
+ lineStyle,
100
+ iconActive,
101
+ iconInActive,
102
+ lineColorActive,
103
+ lineColorInActive,
104
+ items,
105
+ currentStepColor,
106
+ date,
107
+ titleStyle,
108
+ descriptionStyle,
109
+ dateStyle,
110
+ } = this.props;
111
+ const icon =
112
+ currentStep >= index + 2
113
+ ? iconActive || IconSource.ic_check_24
114
+ : iconInActive || index + 1;
115
+ var circleColor =
116
+ currentStep >= index + 1 ? currentStepColor : Colors.black_06;
117
+ var circleBorderColor =
118
+ currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
119
+ const textFontStyle =
120
+ currentStep === index + 1
121
+ ? styles.titleActive
122
+ : styles.titleDefault;
123
+ const lineActive =
124
+ currentStep >= index + 2
125
+ ? lineColorActive
126
+ ? Colors.pink_09
127
+ : '#ffd6e7'
128
+ : lineColorInActive || Colors.black_04;
129
+ return (
130
+ <View key={index} style={{ flexDirection: 'row' }}>
131
+ <View>
132
+ {currentStep <= index + 1 ? (
133
+ <View>
134
+ {/* image */}
135
+ <View
136
+ style={[
137
+ styles.circle,
138
+ {
139
+ backgroundColor: circleColor,
140
+ borderColor: circleBorderColor,
141
+ },
142
+ ]}>
143
+ <Text style={styles.number}>{icon}</Text>
144
+ </View>
145
+ </View>
146
+ ) : (
147
+ <View>
148
+ <Image
149
+ source={icon}
150
+ style={[
151
+ styles.checkedCircle,
152
+ { tintColor: '#ffd6e7' },
153
+ ]}
154
+ />
155
+ </View>
156
+ )}
157
+ {titles?.length - 1 !== index && (
158
+ <View
159
+ style={[
160
+ styles.lineVertical,
161
+ {
162
+ backgroundColor: lineActive,
163
+ },
164
+ lineStyle,
165
+ ]}
166
+ />
167
+ )}
168
+ </View>
169
+ <View
170
+ style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
171
+ <View
172
+ style={{
173
+ flexDirection: 'row',
174
+ justifyContent: 'space-between',
175
+ alignItems: 'center',
176
+ }}>
177
+ <Text.Caption
178
+ style={[
179
+ { marginLeft: 10 },
180
+ textFontStyle,
181
+ titleStyle,
182
+ ]}>
183
+ {value}
184
+ </Text.Caption>
185
+ {date && currentStep >= index + 1 && (
186
+ <Text style={[styles.date, dateStyle]}>
187
+ {date[index]}
188
+ </Text>
189
+ )}
190
+ </View>
191
+ {items && (
192
+ <View>
193
+ {typeof items[index] == 'string' ? (
194
+ <Text
195
+ style={[
196
+ styles.description,
197
+ descriptionStyle,
198
+ ]}>
199
+ {items[index]}
200
+ </Text>
201
+ ) : (
202
+ <View style={[styles.description]}>
203
+ {items[index]}
204
+ </View>
205
+ )}
206
+ </View>
207
+ )}
208
+ </View>
209
+ </View>
210
+ );
211
+ };
212
+
213
+ renderCircle = () => {
214
+ const { titles = [[]] } = this.props;
215
+ return titles.map(this.circleColumn);
216
+ };
217
+
218
+ render() {
219
+ return (
220
+ <ScrollView>
221
+ <View style={[styles.containerStyle]} onLayout={this.onLayout}>
222
+ <View style={[styles.circleColumn]}>
223
+ {this.renderCircle()}
224
+ </View>
225
+ </View>
226
+ </ScrollView>
227
+ );
228
+ }
229
+ }
230
+
231
+ VerticalStep.propTypes = {
232
+ titles: PropTypes.array,
233
+ currentStep: PropTypes.number,
234
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
235
+ items: PropTypes.array,
236
+ isVertical: PropTypes.bool,
237
+ iconActive: PropTypes.any,
238
+ iconInActive: PropTypes.any,
239
+ lineColorActive: PropTypes.string,
240
+ lineColorInActive: PropTypes.string,
241
+ borderColorActive: PropTypes.string,
242
+ borderColorInActive: PropTypes.string,
243
+ titleStyle: PropTypes.object,
244
+ descriptionStyle: PropTypes.object,
245
+ dateStyle: PropTypes.object,
246
+ };
247
+
248
+ VerticalStep.defaultProps = {
249
+ titles: [],
250
+ currentStep: 0,
251
+ };
package/Step.web.js CHANGED
@@ -1,227 +1,21 @@
1
1
  import React, { Component } from 'react';
2
- import { View, StyleSheet, ScrollView, Image } from 'react-native';
3
2
 
4
3
  import PropTypes from 'prop-types';
5
- import Colors from '../../core/colors';
6
- import Text from '../../core/components/typography';
7
- import { Icons as IconSource } from '../../core/icons';
8
-
9
- const CIRCLE_SIZE = 24;
10
-
11
- const styles = StyleSheet.create({
12
- circle: {
13
- width: CIRCLE_SIZE,
14
- height: CIRCLE_SIZE,
15
- borderRadius: CIRCLE_SIZE / 2,
16
- borderWidth: 2,
17
- padding: 4,
18
- },
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,
26
- },
27
- titleDefault: {
28
- color: Colors.black_12,
29
- fontSize: 14,
30
- fontWeight: 'normal',
31
- },
32
- titleActive: {
33
- color: Colors.black_17,
34
- fontSize: 14,
35
- fontWeight: 'bold',
36
- },
37
- containerStyle: {
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
- },
57
- });
4
+ import HorizontalStep from './Step.horizontal.web.js';
5
+ import VerticalStep from './Step.vertical.web.js';
58
6
 
59
7
  export default class Step extends Component {
60
8
  constructor(props) {
61
9
  super(props);
62
- this.state = {
63
- width: 0,
64
- height: 0,
65
- };
66
10
  }
67
11
 
68
- onLayout = (e) => {
69
- this.setState({
70
- width: e.nativeEvent.layout.width,
71
- height: e.nativeEvent.layout.height,
72
- });
73
- };
74
-
75
- circleStep = (index) => {
76
- return (
77
- <View style={[styles.circle]}>
78
- <Text style={styles.number}>{index}</Text>
79
- </View>
80
- );
81
- };
82
-
83
- circleColumn = (value, index) => {
84
- const {
85
- currentStep,
86
- titles,
87
- lineStyle,
88
- iconActive,
89
- iconInActive,
90
- lineColorActive,
91
- lineColorInActive,
92
- items,
93
- currentStepColor,
94
- date,
95
- } = this.props;
96
- const { height } = this.state;
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]);
118
- return (
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,
154
- {
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]}
192
- </View>
193
- )}
194
- </View>
195
- </View>
196
- </View>
197
- );
198
- };
199
-
200
- renderCircle = () => {
201
- const { titles = [[]] } = this.props;
202
- return titles.map(this.circleColumn);
203
- };
204
-
205
12
  render() {
206
- const { width, height } = this.state;
207
- const { style, isVertical } = this.props;
208
- return (
209
- <ScrollView>
210
- <View
211
- style={[styles.containerStyle, style]}
212
- onLayout={this.onLayout}>
213
- {isVertical ? (
214
- <View style={[styles.circleColumn, { height }]}>
215
- {this.renderCircle()}
216
- </View>
217
- ) : (
218
- <View style={[styles.circleRow, { width }]}>
219
- {this.renderCircle()}
220
- </View>
221
- )}
222
- </View>
223
- </ScrollView>
224
- );
13
+ const { isVertical } = this.props;
14
+ let DefaultComponent = HorizontalStep;
15
+ if (isVertical) {
16
+ DefaultComponent = VerticalStep;
17
+ }
18
+ return <DefaultComponent {...this.props} />;
225
19
  }
226
20
  }
227
21
 
@@ -237,6 +31,9 @@ Step.propTypes = {
237
31
  lineColorInActive: PropTypes.string,
238
32
  borderColorActive: PropTypes.string,
239
33
  borderColorInActive: PropTypes.string,
34
+ titleStyle: PropTypes.object,
35
+ descriptionStyle: PropTypes.object,
36
+ dateStyle: PropTypes.object,
240
37
  };
241
38
 
242
39
  Step.defaultProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/step",
3
- "version": "0.0.43-beta.24",
3
+ "version": "0.0.43-beta.27",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {},