@momo-kits/step 0.0.2-beta → 0.0.4

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 +174 -35
  2. package/Step.web.js +175 -39
  3. package/index.js +2 -2
  4. package/package.json +14 -15
package/Step.js CHANGED
@@ -2,27 +2,29 @@ import React, { Component } from 'react';
2
2
  import { View, StyleSheet } from 'react-native';
3
3
 
4
4
  import PropTypes from 'prop-types';
5
- import { Colors, Text, IconSource,Image } from 'react-native/Libraries/NewAppScreen';
5
+ import {
6
+ Colors, Text, IconSource, Image
7
+ } from '@momo-kits/core';
6
8
 
7
- const CIRCLE_SIZE = 18;
9
+ const CIRCLE_SIZE = 24;
8
10
 
9
11
  const styles = StyleSheet.create({
10
12
  circle: {
11
13
  width: CIRCLE_SIZE,
12
14
  height: CIRCLE_SIZE,
13
- borderWidth: 1,
14
- borderColor: Colors.sepia_05,
15
- borderRadius: 9,
15
+ // borderWidth: 1,
16
+ // borderColor: Colors.sepia_05,
17
+ borderRadius: CIRCLE_SIZE / 2,
16
18
  backgroundColor: 'white'
17
19
  },
18
20
  line: {
19
- height: 1,
21
+ height: 4,
20
22
  backgroundColor: 'white',
21
- borderWidth: 1,
22
- borderRadius: 1,
23
- borderStyle: 'dashed',
23
+ // borderWidth: 1,
24
+ // borderRadius: 1,
25
+ // borderStyle: 'dashed',
24
26
  zIndex: 0,
25
- marginTop: 9
27
+ // marginTop: 8
26
28
  },
27
29
  topRight: {
28
30
  position: 'absolute',
@@ -56,6 +58,10 @@ const styles = StyleSheet.create({
56
58
  justifyContent: 'space-between',
57
59
  flexDirection: 'row',
58
60
  },
61
+ circleColumn: {
62
+ // position: 'absolute',
63
+ justifyContent: 'space-between',
64
+ },
59
65
  titleDefault: {
60
66
  color: Colors.black_12
61
67
  },
@@ -72,31 +78,41 @@ export default class Step extends Component {
72
78
  constructor(props) {
73
79
  super(props);
74
80
  this.state = {
75
- width: 0
81
+ width: 0,
82
+ height: 0
76
83
  };
77
84
  }
78
85
 
79
86
  onLayout = (e) => {
80
- this.setState({ width: e.nativeEvent.layout.width });
87
+ this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
81
88
  }
82
89
 
83
90
  renderLine = () => {
84
- const { lineColor } = this.props;
91
+ const {
92
+ lineColor, lineStyle, currentStep, data
93
+ } = this.props;
85
94
  return (
86
- <View style={[styles.line, { borderColor: lineColor }]}>
87
- <View style={styles.topLeft} />
95
+ <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
96
+ {/* <View style={styles.topLeft} />
88
97
  <View style={styles.topLeftWidth} />
89
- <View style={styles.topRight} />
98
+ <View style={styles.topRight} /> */}
90
99
  </View>
91
100
  );
92
101
  }
93
102
 
94
103
  circle = (value, index) => {
95
- const { currentStep, tintColor, data } = this.props;
104
+ const {
105
+ currentStep, tintColor, data, lineStyle, isNumber, iconActive,
106
+ iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle, checkedPreviousStep, borderColorActive, borderColorInActive,
107
+ } = this.props;
96
108
  const { width } = this.state;
97
- const icon = currentStep >= (index + 1) ? IconSource.ic_step_active : IconSource.ic_step_coming;
109
+ const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
98
110
  const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
99
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;
100
116
  let left = 0;
101
117
  let textAlignStyle = { textAlign: 'center' };
102
118
  /**
@@ -117,53 +133,176 @@ export default class Step extends Component {
117
133
  */
118
134
  } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
119
135
  const textStyle = [textAlignStyle, textFontStyle];
136
+
120
137
  return (
121
- <View>
122
- <Image source={icon} style={[styles.circle, { tintColor }]} />
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
+
123
170
  <View style={{
124
171
  position: 'absolute',
125
172
  width: itemWidth,
126
173
  left,
127
- top: CIRCLE_SIZE + CIRCLE_SIZE / 2
174
+ top: CIRCLE_SIZE + CIRCLE_SIZE / 4
128
175
  }}
129
176
  >
130
- <Text.Title style={textStyle}>{value}</Text.Title>
177
+ <Text.Caption style={[textStyle, bodyStyle]}>{value}</Text.Caption>
131
178
  </View>
132
179
  </View>
133
180
  );
134
181
  }
135
182
 
183
+ circleColumn = (value, index) => {
184
+ const {
185
+ currentStep, tintColor, data, lineStyle, isNumber, iconActive,
186
+ iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
187
+ } = this.props;
188
+ const { height } = this.state;
189
+ const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
190
+ const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
191
+ const itemWidth = (height - CIRCLE_SIZE) / data?.length;
192
+ const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
193
+ const lineWidth = (height - CIRCLE_SIZE) / (data.length - 1);
194
+ const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
195
+ let left = 0;
196
+ let textAlignStyle = { textAlign: 'center' };
197
+ /**
198
+ * item lefr
199
+ */
200
+ if (index === 0) {
201
+ left = 0;
202
+ textAlignStyle = { textAlign: 'left' };
203
+
204
+ /**
205
+ * item right
206
+ */
207
+ } else if (index === data?.length - 1) {
208
+ left = -itemWidth + CIRCLE_SIZE;
209
+ textAlignStyle = { textAlign: 'right' };
210
+ /**
211
+ * center item
212
+ */
213
+ } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
214
+ const textStyle = [textAlignStyle, textFontStyle];
215
+
216
+ return (
217
+ <View key={index}>
218
+ <View style={{ flexDirection: 'row', alignItems: 'center' }}>
219
+ {
220
+ isNumber ? (
221
+ <View style={{
222
+ width: CIRCLE_SIZE,
223
+ height: CIRCLE_SIZE,
224
+ borderRadius: CIRCLE_SIZE / 2,
225
+ backgroundColor: backgroundActive,
226
+ borderColor: Colors.pink_09,
227
+ borderWidth: 1,
228
+ alignItems: 'center',
229
+ justifyContent: 'center'
230
+ }}
231
+ >
232
+ {
233
+ iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
234
+ }
235
+ </View>
236
+ ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
237
+ }
238
+ <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
239
+ </View>
240
+
241
+ {
242
+ data?.length - 1 !== index && (
243
+ <View style={[styles.line, {
244
+ left: 10,
245
+ backgroundColor: lineActive,
246
+ width: 4,
247
+ height: lineWidth,
248
+ marginTop: 0,
249
+ }, lineStyle]}
250
+ />
251
+ )
252
+ }
253
+
254
+ </View>
255
+ );
256
+ }
257
+
136
258
  renderCircle = () => {
137
- const { data = [] } = this.props;
138
- const views = data.map(this.circle);
139
- return views;
259
+ const { data = [], isVertical } = this.props;
260
+ return data.map(isVertical ? this.circleColumn : this.circle);
140
261
  }
141
262
 
142
263
  render() {
143
- const { width } = this.state;
144
- const { style } = this.props;
264
+ const { width, height } = this.state;
265
+ const { style, isVertical } = this.props;
145
266
  return (
146
267
  <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
147
- {this.renderLine()}
148
- <View style={[styles.circleRow, { width }]}>
149
- {this.renderCircle()}
150
- </View>
268
+ {/* {this.renderLine()} */}
269
+ {
270
+ isVertical ? (
271
+ <View style={[styles.circleColumn, { height }]}>
272
+ {this.renderCircle()}
273
+ </View>
274
+ ) : (
275
+ <View style={[styles.circleRow, { width }]}>
276
+ {this.renderCircle()}
277
+ </View>
278
+ )
279
+ }
280
+
151
281
  </View>
152
282
  );
153
283
  }
154
284
  }
155
285
 
156
286
  Step.propTypes = {
157
- lineColor: PropTypes.string,
158
287
  data: PropTypes.arrayOf(PropTypes.string),
159
288
  currentStep: PropTypes.number,
160
289
  tintColor: PropTypes.string,
161
290
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
291
+ isNumber: PropTypes.bool,
292
+ isVertical: PropTypes.bool,
293
+ iconActive: PropTypes.any,
294
+ iconInActive: PropTypes.any,
295
+ lineColorActive: PropTypes.string,
296
+ lineColorInActive: PropTypes.string,
297
+ bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\
298
+ checkedPreviousStep: PropTypes.bool,
299
+ borderColorActive: PropTypes.string,
300
+ borderColorInActive: PropTypes.string,
162
301
  };
163
302
 
164
303
  Step.defaultProps = {
165
304
  data: [],
166
- lineColor: Colors.sepia_05,
167
305
  currentStep: 0,
168
- tintColor: Colors.sepia_05
169
- };
306
+ tintColor: Colors.sepia_05,
307
+ checkedPreviousStep: false,
308
+ };
package/Step.web.js CHANGED
@@ -1,29 +1,29 @@
1
1
  import React, { Component } from 'react';
2
2
  import { View, StyleSheet, Image } from 'react-native';
3
3
  import PropTypes from 'prop-types';
4
- import { ColorCore } from '../../colors/colorCore';
5
- import Text from '../typography';
6
- import { Icons } from '../../icons';
4
+ import { ColorCore as Colors } from '../../core/colors/colorCore';
5
+ import Text from '../../core/components/typography';
6
+ import { Icons as IconSource } from '../../core/icons';
7
7
 
8
- const CIRCLE_SIZE = 18;
8
+ const CIRCLE_SIZE = 24;
9
9
 
10
10
  const styles = StyleSheet.create({
11
11
  circle: {
12
12
  width: CIRCLE_SIZE,
13
13
  height: CIRCLE_SIZE,
14
- borderWidth: 1,
15
- borderColor: ColorCore.sepia_05,
16
- borderRadius: 9,
14
+ // borderWidth: 1,
15
+ // borderColor: Colors.sepia_05,
16
+ borderRadius: CIRCLE_SIZE / 2,
17
17
  backgroundColor: 'white'
18
18
  },
19
19
  line: {
20
- height: 1,
20
+ height: 4,
21
21
  backgroundColor: 'white',
22
- borderWidth: 1,
23
- borderRadius: 1,
24
- borderStyle: 'dashed',
22
+ // borderWidth: 1,
23
+ // borderRadius: 1,
24
+ // borderStyle: 'dashed',
25
25
  zIndex: 0,
26
- marginTop: 9
26
+ // marginTop: 8
27
27
  },
28
28
  topRight: {
29
29
  position: 'absolute',
@@ -57,11 +57,15 @@ const styles = StyleSheet.create({
57
57
  justifyContent: 'space-between',
58
58
  flexDirection: 'row',
59
59
  },
60
+ circleColumn: {
61
+ // position: 'absolute',
62
+ justifyContent: 'space-between',
63
+ },
60
64
  titleDefault: {
61
- color: ColorCore.black_12
65
+ color: Colors.black_12
62
66
  },
63
67
  titleActive: {
64
- color: ColorCore.black_17,
68
+ color: Colors.black_17,
65
69
  fontWeight: 'bold'
66
70
  },
67
71
  containerStyle: {
@@ -73,31 +77,41 @@ export default class Step extends Component {
73
77
  constructor(props) {
74
78
  super(props);
75
79
  this.state = {
76
- width: 0
80
+ width: 0,
81
+ height: 0
77
82
  };
78
83
  }
79
84
 
80
85
  onLayout = (e) => {
81
- this.setState({ width: e.nativeEvent.layout.width });
86
+ this.setState({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
82
87
  }
83
88
 
84
89
  renderLine = () => {
85
- const { lineColor } = this.props;
90
+ const {
91
+ lineColor, lineStyle, currentStep, data
92
+ } = this.props;
86
93
  return (
87
- <View style={[styles.line, { borderColor: lineColor }]}>
88
- <View style={styles.topLeft} />
94
+ <View style={[styles.line, { borderColor: lineColor }, lineStyle]}>
95
+ {/* <View style={styles.topLeft} />
89
96
  <View style={styles.topLeftWidth} />
90
- <View style={styles.topRight} />
97
+ <View style={styles.topRight} /> */}
91
98
  </View>
92
99
  );
93
100
  }
94
101
 
95
102
  circle = (value, index) => {
96
- const { currentStep, tintColor, data } = this.props;
103
+ const {
104
+ currentStep, tintColor, data, lineStyle, isNumber, iconActive,
105
+ iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle, checkedPreviousStep, borderColorActive, borderColorInActive,
106
+ } = this.props;
97
107
  const { width } = this.state;
98
- const icon = currentStep >= (index + 1) ? Icons.ic_step_active : Icons.ic_step_coming;
108
+ const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
99
109
  const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
100
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;
101
115
  let left = 0;
102
116
  let textAlignStyle = { textAlign: 'center' };
103
117
  /**
@@ -118,53 +132,175 @@ export default class Step extends Component {
118
132
  */
119
133
  } else { left = -itemWidth / 2 + CIRCLE_SIZE / 2; }
120
134
  const textStyle = [textAlignStyle, textFontStyle];
135
+
121
136
  return (
122
- <View>
123
- <Image source={icon} style={[styles.circle, { tintColor }]} />
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
+
124
169
  <View style={{
125
170
  position: 'absolute',
126
171
  width: itemWidth,
127
172
  left,
128
- top: CIRCLE_SIZE + CIRCLE_SIZE / 2
173
+ top: CIRCLE_SIZE + CIRCLE_SIZE / 4
129
174
  }}
130
175
  >
131
- <Text.Title style={textStyle}>{value}</Text.Title>
176
+ <Text.Caption style={[textStyle, bodyStyle]}>{value}</Text.Caption>
132
177
  </View>
133
178
  </View>
134
179
  );
135
180
  }
136
181
 
182
+ circleColumn = (value, index) => {
183
+ const {
184
+ currentStep, tintColor, data, lineStyle, isNumber, iconActive,
185
+ iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
186
+ } = this.props;
187
+ 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
+
215
+ 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
+ >
231
+ {
232
+ iconActive ? <Image source={iconActive} style={[styles.circle, { tintColor }, iconStyle]} /> : <Text.SubTitle style={{ color: 'white' }} weight="bold">{index + 1}</Text.SubTitle>
233
+ }
234
+ </View>
235
+ ) : <Image source={icon} style={[styles.circle, { tintColor }, iconStyle]} />
236
+ }
237
+ <Text.Caption style={[{ marginLeft: 10 }, textStyle, bodyStyle]}>{value}</Text.Caption>
238
+ </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
+ </View>
254
+ );
255
+ }
256
+
137
257
  renderCircle = () => {
138
- const { data = [] } = this.props;
139
- const views = data.map(this.circle);
140
- return views;
258
+ const { data = [], isVertical } = this.props;
259
+ return data.map(isVertical ? this.circleColumn : this.circle);
141
260
  }
142
261
 
143
262
  render() {
144
- const { width } = this.state;
145
- const { style } = this.props;
263
+ const { width, height } = this.state;
264
+ const { style, isVertical } = this.props;
146
265
  return (
147
266
  <View style={[styles.containerStyle, style]} onLayout={this.onLayout}>
148
- {this.renderLine()}
149
- <View style={[styles.circleRow, { width }]}>
150
- {this.renderCircle()}
151
- </View>
267
+ {/* {this.renderLine()} */}
268
+ {
269
+ isVertical ? (
270
+ <View style={[styles.circleColumn, { height }]}>
271
+ {this.renderCircle()}
272
+ </View>
273
+ ) : (
274
+ <View style={[styles.circleRow, { width }]}>
275
+ {this.renderCircle()}
276
+ </View>
277
+ )
278
+ }
279
+
152
280
  </View>
153
281
  );
154
282
  }
155
283
  }
156
284
 
157
285
  Step.propTypes = {
158
- lineColor: PropTypes.string,
159
286
  data: PropTypes.arrayOf(PropTypes.string),
160
287
  currentStep: PropTypes.number,
161
288
  tintColor: PropTypes.string,
162
289
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
290
+ isNumber: PropTypes.bool,
291
+ isVertical: PropTypes.bool,
292
+ iconActive: PropTypes.any,
293
+ iconInActive: PropTypes.any,
294
+ lineColorActive: PropTypes.string,
295
+ lineColorInActive: PropTypes.string,
296
+ bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
297
+ checkedPreviousStep: PropTypes.bool,
298
+ borderColorActive: PropTypes.string,
299
+ borderColorInActive: PropTypes.string,
163
300
  };
164
301
 
165
302
  Step.defaultProps = {
166
303
  data: [],
167
- lineColor: '#fa541c',
168
304
  currentStep: 0,
169
- tintColor: '#fa541c'
170
- };
305
+ tintColor: Colors.sepia_05
306
+ };
package/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import Silder from './Slider';
1
+ import Step from './Step';
2
2
 
3
- export default Silder;
3
+ export default Step;
package/package.json CHANGED
@@ -1,16 +1,15 @@
1
1
  {
2
- "name": "@momo-kits/step",
3
- "version": "0.0.2-beta",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {},
7
- "peerDependencies": {
8
- "react-native": ">=0.55",
9
- "prop-types": "^15.7.2",
10
- "react": "16.9.0",
11
- "@momo-kits/core": ">=0.0.5-beta"
12
- },
13
- "devDependencies": {},
14
- "license": "MoMo"
15
- }
16
-
2
+ "name": "@momo-kits/step",
3
+ "version": "0.0.4",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {},
7
+ "peerDependencies": {
8
+ "react-native": ">=0.55",
9
+ "prop-types": "^15.7.2",
10
+ "react": "16.9.0",
11
+ "@momo-kits/core": ">=0.0.5-beta"
12
+ },
13
+ "devDependencies": {},
14
+ "license": "MoMo"
15
+ }