@momo-kits/step 0.0.65-alpha.20 → 0.0.65-alpha.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/Step.horizontal.js +230 -257
  2. package/Step.horizontal.web.js +178 -270
  3. package/Step.vertical.js +260 -285
  4. package/Step.vertical.web.js +189 -298
  5. package/Step.web.js +39 -39
  6. package/package.json +1 -1
package/Step.horizontal.js CHANGED
@@ -1,279 +1,252 @@
1
- import {Colors, IconSource, Image, Spacing, Text} from '@momo-kits/core-v2';
1
+ import { Colors, IconSource, Image, Spacing, Text } from '@momo-kits/core-v2';
2
2
  import PropTypes from 'prop-types';
3
3
  import React from 'react';
4
- import {StyleSheet, View} from 'react-native';
4
+ import { StyleSheet, View } from 'react-native';
5
5
 
6
- const HorizontalStep = props => {
7
- const {
8
- steps = {},
9
- currentStep,
10
- type,
11
- activeCircleColor,
12
- inactiveCircleColor,
13
- checkedCircleColor,
14
- activeBorderColor,
15
- inactiveBorderColor,
16
- activeLineColor,
17
- inactiveLineColor,
18
- style,
19
- size = 'default',
20
- checkIcon,
21
- errorIcon,
22
- } = props;
6
+ const HorizontalStep = (props) => {
7
+ const {
8
+ steps = {},
9
+ currentStep,
10
+ type,
11
+ activeCircleColor,
12
+ inactiveCircleColor,
13
+ checkedCircleColor,
14
+ activeBorderColor,
15
+ inactiveBorderColor,
16
+ activeLineColor,
17
+ inactiveLineColor,
18
+ style,
19
+ size = 'default',
20
+ checkIcon,
21
+ errorIcon,
22
+ } = props;
23
23
 
24
- let CIRCLE_SIZE = 24;
25
- let CIRCLE_TEXT_SIZE = 12;
26
- let ICON_SIZE = 16;
27
- let TITLE_SIZE = {
28
- size: 14,
29
- lineHeight: 20,
30
- };
31
- let SUBTITLE_SIZE = {
32
- size: 10,
33
- lineHeight: 14,
34
- };
35
- let CONTENT_SIZE = {
36
- size: 12,
37
- lineHeight: 16,
38
- };
39
- const ICON_URL = checkIcon || IconSource.ic_check_24;
40
- const ERROR_ICON_URL = errorIcon || IconSource.ic_close_x_24;
41
- if (size === 'small') {
42
- CIRCLE_SIZE = 16;
43
- CIRCLE_TEXT_SIZE = 8;
44
- ICON_SIZE = 12;
45
- TITLE_SIZE = {
46
- size: 12,
47
- lineHeight: 16,
48
- };
49
- SUBTITLE_SIZE = {
50
- size: 10,
51
- lineHeight: 14,
52
- };
53
- CONTENT_SIZE = {
54
- size: 10,
55
- lineHeight: 14,
56
- };
57
- }
24
+ let CIRCLE_SIZE = 24;
25
+ let CIRCLE_TEXT_SIZE = 12;
26
+ let ICON_SIZE = 16;
27
+ let TITLE_SIZE = { size: 14, lineHeight: 20 };
28
+ let SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
29
+ let CONTENT_SIZE = { size: 12, lineHeight: 16 };
30
+ const ICON_URL = checkIcon || IconSource.ic_check_24;
31
+ const ERROR_ICON_URL = errorIcon || IconSource.ic_close_x_24;
32
+ if (size === 'small') {
33
+ CIRCLE_SIZE = 16;
34
+ CIRCLE_TEXT_SIZE = 8;
35
+ ICON_SIZE = 12;
36
+ TITLE_SIZE = { size: 12, lineHeight: 16 };
37
+ SUBTITLE_SIZE = { size: 10, lineHeight: 14 };
38
+ CONTENT_SIZE = { size: 10, lineHeight: 14 };
39
+ }
58
40
 
59
- const renderCircle = (error, index) => {
60
- let circleColor = inactiveCircleColor;
61
- let borderColor = inactiveBorderColor;
41
+ const renderCircle = (error, index) => {
42
+ let circleColor = inactiveCircleColor;
43
+ let borderColor = inactiveBorderColor;
62
44
 
63
- if (index < currentStep) {
64
- circleColor = checkedCircleColor;
65
- } else if (index === currentStep) circleColor = activeCircleColor;
45
+ if (index < currentStep) circleColor = checkedCircleColor;
46
+ else if (index === currentStep) circleColor = activeCircleColor;
66
47
 
67
- if (index <= currentStep) borderColor = activeBorderColor;
48
+ if (index <= currentStep) borderColor = activeBorderColor;
68
49
 
69
- if (error) {
70
- circleColor = Colors.red_03;
71
- borderColor = Colors.red_08;
72
- }
73
- return (
74
- <View
75
- style={[
76
- styles.circle,
77
- {
78
- width: CIRCLE_SIZE,
79
- height: CIRCLE_SIZE,
80
- borderRadius: CIRCLE_SIZE / 2,
81
- borderColor: borderColor,
82
- backgroundColor: circleColor,
83
- },
84
- ]}>
85
- {renderCircleContent(error, index)}
86
- </View>
87
- );
88
- };
50
+ if (error) {
51
+ circleColor = Colors.red_03;
52
+ borderColor = Colors.red_08;
53
+ }
54
+ return (
55
+ <View
56
+ style={[
57
+ styles.circle,
58
+ {
59
+ width: CIRCLE_SIZE,
60
+ height: CIRCLE_SIZE,
61
+ borderRadius: CIRCLE_SIZE / 2,
62
+ borderColor: borderColor,
63
+ backgroundColor: circleColor,
64
+ },
65
+ ]}>
66
+ {renderCircleContent(error, index)}
67
+ </View>
68
+ );
69
+ };
89
70
 
90
- const renderCircleContent = (error, index) => {
91
- const icon = error ? ERROR_ICON_URL : ICON_URL;
92
- if (type === 'check') {
93
- return (
94
- <Image
95
- source={icon}
96
- style={[
97
- styles.icon,
98
- {
99
- width: ICON_SIZE,
100
- height: ICON_SIZE,
101
- },
102
- ]}
103
- />
104
- );
105
- } else if (type === 'combine') {
106
- return index < currentStep ? (
107
- <Image
108
- source={icon}
109
- style={[
110
- styles.icon,
111
- {
112
- width: ICON_SIZE,
113
- height: ICON_SIZE,
114
- },
115
- ]}
116
- />
117
- ) : (
118
- <Text
119
- style={[
120
- styles.circleText,
121
- {
122
- fontSize: CIRCLE_TEXT_SIZE,
123
- lineHeight: CIRCLE_TEXT_SIZE + 2,
124
- },
125
- ]}>
126
- {index + 1}
127
- </Text>
128
- );
129
- }
130
- return (
131
- <Text
132
- style={[
133
- styles.circleText,
134
- {
135
- fontSize: CIRCLE_TEXT_SIZE,
136
- lineHeight: CIRCLE_TEXT_SIZE + 2,
137
- },
138
- ]}>
139
- {index + 1}
140
- </Text>
141
- );
142
- };
71
+ const renderCircleContent = (error, index) => {
72
+ const icon = error ? ERROR_ICON_URL : ICON_URL;
73
+ if (type === 'check') {
74
+ return (
75
+ <Image
76
+ source={icon}
77
+ style={[
78
+ styles.icon,
79
+ { width: ICON_SIZE, height: ICON_SIZE },
80
+ ]}
81
+ />
82
+ );
83
+ } else if (type === 'combine') {
84
+ return index < currentStep ? (
85
+ <Image
86
+ source={icon}
87
+ style={[
88
+ styles.icon,
89
+ { width: ICON_SIZE, height: ICON_SIZE },
90
+ ]}
91
+ />
92
+ ) : (
93
+ <Text
94
+ style={[
95
+ styles.circleText,
96
+ {
97
+ fontSize: CIRCLE_TEXT_SIZE,
98
+ lineHeight: CIRCLE_TEXT_SIZE + 2,
99
+ },
100
+ ]}>
101
+ {index + 1}
102
+ </Text>
103
+ );
104
+ }
105
+ return (
106
+ <Text
107
+ style={[
108
+ styles.circleText,
109
+ {
110
+ fontSize: CIRCLE_TEXT_SIZE,
111
+ lineHeight: CIRCLE_TEXT_SIZE + 2,
112
+ },
113
+ ]}>
114
+ {index + 1}
115
+ </Text>
116
+ );
117
+ };
143
118
 
144
- const renderLine = index => {
145
- let lineColor = index < currentStep ? activeLineColor : inactiveLineColor;
119
+ const renderLine = (index) => {
120
+ let lineColor =
121
+ index < currentStep ? activeLineColor : inactiveLineColor;
146
122
 
147
- if (index === -1 || index === steps.length - 1) {
148
- lineColor = 'transparent';
149
- }
123
+ if (index === -1 || index === steps.length - 1)
124
+ lineColor = 'transparent';
150
125
 
151
- return <View style={[styles.line, {backgroundColor: lineColor}]} />;
152
- };
126
+ return <View style={[styles.line, { backgroundColor: lineColor }]} />;
127
+ };
128
+
129
+ const renderStepPart = (item, index) => {
130
+ const { title, subTitle, content, error } = item;
131
+ const weight = index === currentStep ? '600' : '400';
132
+ const disabledColor = Colors.black_09;
133
+ const errorColor = Colors.error;
134
+ return (
135
+ <View key={index.toString()} style={styles.stepPart}>
136
+ <Text
137
+ style={[
138
+ styles.subTitle,
139
+ {
140
+ fontSize: SUBTITLE_SIZE.size,
141
+ lineHeight: SUBTITLE_SIZE.lineHeight,
142
+ color:
143
+ index < currentStep && !error
144
+ ? disabledColor
145
+ : Colors.black_12,
146
+ },
147
+ ]}>
148
+ {subTitle}
149
+ </Text>
150
+ <View
151
+ style={{
152
+ flexDirection: 'row',
153
+ alignItems: 'center',
154
+ }}>
155
+ {renderLine(index - 1)}
156
+ {renderCircle(error, index)}
157
+ {renderLine(index)}
158
+ </View>
159
+ <Text
160
+ style={[
161
+ styles.title,
162
+ {
163
+ lineHeight: TITLE_SIZE.lineHeight,
164
+ fontSize: TITLE_SIZE.size,
165
+ fontWeight: weight,
166
+ color: error
167
+ ? errorColor
168
+ : index < currentStep
169
+ ? disabledColor
170
+ : null,
171
+ },
172
+ ]}>
173
+ {title}
174
+ </Text>
175
+ <Text
176
+ style={[
177
+ styles.contentText,
178
+ {
179
+ fontSize: CONTENT_SIZE.size,
180
+ lineHeight: CONTENT_SIZE.lineHeight,
181
+ color:
182
+ index < currentStep && !error
183
+ ? disabledColor
184
+ : Colors.black_12,
185
+ },
186
+ ]}>
187
+ {content}
188
+ </Text>
189
+ </View>
190
+ );
191
+ };
153
192
 
154
- const renderStepPart = (item, index) => {
155
- const {title, subTitle, content, error} = item;
156
- const weight = index === currentStep ? '600' : '400';
157
- const disabledColor = Colors.black_09;
158
- const errorColor = Colors.error;
159
193
  return (
160
- <View key={index.toString()} style={styles.stepPart}>
161
- <Text
162
- style={[
163
- styles.subTitle,
164
- {
165
- fontSize: SUBTITLE_SIZE.size,
166
- lineHeight: SUBTITLE_SIZE.lineHeight,
167
- color:
168
- index < currentStep && !error ? disabledColor : Colors.black_12,
169
- },
170
- ]}>
171
- {subTitle}
172
- </Text>
173
- <View
174
- style={{
175
- flexDirection: 'row',
176
- alignItems: 'center',
177
- }}>
178
- {renderLine(index - 1)}
179
- {renderCircle(error, index)}
180
- {renderLine(index)}
194
+ <View style={style}>
195
+ <View style={styles.container}>
196
+ {steps.map((item, index) => {
197
+ return renderStepPart(item, index);
198
+ })}
199
+ </View>
181
200
  </View>
182
- <Text
183
- style={[
184
- styles.title,
185
- {
186
- lineHeight: TITLE_SIZE.lineHeight,
187
- fontSize: TITLE_SIZE.size,
188
- fontWeight: weight,
189
- color: error
190
- ? errorColor
191
- : index < currentStep
192
- ? disabledColor
193
- : Colors.black_17,
194
- },
195
- ]}>
196
- {title}
197
- </Text>
198
- <Text
199
- style={[
200
- styles.contentText,
201
- {
202
- fontSize: CONTENT_SIZE.size,
203
- lineHeight: CONTENT_SIZE.lineHeight,
204
- color:
205
- index < currentStep && !error ? disabledColor : Colors.black_12,
206
- },
207
- ]}>
208
- {content}
209
- </Text>
210
- </View>
211
201
  );
212
- };
213
-
214
- return (
215
- <View style={style}>
216
- <View style={styles.container}>
217
- {steps.map((item, index) => {
218
- return renderStepPart(item, index);
219
- })}
220
- </View>
221
- </View>
222
- );
223
202
  };
224
203
 
225
204
  export default HorizontalStep;
226
205
 
227
206
  const styles = StyleSheet.create({
228
- container: {
229
- flexDirection: 'row',
230
- width: '100%',
231
- },
232
- circleContainer: {
233
- flexDirection: 'column',
234
- alignItems: 'center',
235
- height: '100%',
236
- },
237
- circle: {
238
- borderWidth: 2,
239
- justifyContent: 'center',
240
- alignItems: 'center',
241
- margin: Spacing.XS,
242
- },
243
- contentContainer: {
244
- marginLeft: Spacing.S,
245
- flex: 1,
246
- },
247
- content: {marginVertical: Spacing.XS},
248
- contentText: {
249
- color: Colors.black_12,
250
- },
251
- header: {
252
- flexDirection: 'row',
253
- justifyContent: 'space-between',
254
- alignItems: 'center',
255
- },
256
- title: {
257
- marginBottom: Spacing.XS,
258
- },
259
- subTitle: {
260
- color: Colors.black_12,
261
- },
262
- line: {
263
- height: 2,
264
- borderRadius: 1,
265
- flex: 1,
266
- },
267
- icon: {
268
- tintColor: Colors.white,
269
- },
270
- circleText: {
271
- color: Colors.white,
272
- fontWeight: '600',
273
- },
274
- stepPart: {
275
- flexDirection: 'column',
276
- alignItems: 'center',
277
- flex: 1,
278
- },
207
+ container: { flexDirection: 'row', width: '100%' },
208
+ circleContainer: {
209
+ flexDirection: 'column',
210
+ alignItems: 'center',
211
+ height: '100%',
212
+ },
213
+ circle: {
214
+ borderWidth: 2,
215
+ justifyContent: 'center',
216
+ alignItems: 'center',
217
+ margin: Spacing.XS,
218
+ },
219
+ contentContainer: { marginLeft: Spacing.S, flex: 1 },
220
+ content: { marginVertical: Spacing.XS },
221
+ contentText: {
222
+ color: Colors.black_12,
223
+ },
224
+ header: {
225
+ flexDirection: 'row',
226
+ justifyContent: 'space-between',
227
+ alignItems: 'center',
228
+ },
229
+ title: {
230
+ marginBottom: Spacing.XS,
231
+ },
232
+ subTitle: {
233
+ color: Colors.black_12,
234
+ },
235
+ line: {
236
+ height: 2,
237
+ borderRadius: 1,
238
+ flex: 1,
239
+ },
240
+ icon: {
241
+ tintColor: Colors.white,
242
+ },
243
+ circleText: {
244
+ color: Colors.white,
245
+ fontWeight: '600',
246
+ },
247
+ stepPart: {
248
+ flexDirection: 'column',
249
+ alignItems: 'center',
250
+ flex: 1,
251
+ },
279
252
  });