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

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