@momo-kits/step 0.73.3-beta.4 → 0.74.2-react-native.1

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 (16) hide show
  1. package/StepIcon.tsx +31 -0
  2. package/StepsHorizontal.tsx +94 -0
  3. package/StepsVertical.tsx +89 -0
  4. package/index.tsx +20 -0
  5. package/package.json +11 -9
  6. package/publish.sh +1 -1
  7. package/styles.ts +48 -0
  8. package/types.ts +96 -0
  9. package/utils.ts +126 -0
  10. package/Step.horizontal.js +0 -279
  11. package/Step.horizontal.web.js +0 -299
  12. package/Step.js +0 -52
  13. package/Step.vertical.js +0 -313
  14. package/Step.vertical.web.js +0 -325
  15. package/Step.web.js +0 -51
  16. package/index.js +0 -3
package/Step.vertical.js DELETED
@@ -1,313 +0,0 @@
1
- import {
2
- Colors,
3
- IconSource,
4
- Image,
5
- ScaleSize,
6
- Spacing,
7
- Text,
8
- } from '@momo-kits/core-v2';
9
-
10
- import React from 'react';
11
- import {StyleSheet, View} from 'react-native';
12
-
13
- const ICON_URL = IconSource.ic_check_24;
14
-
15
- const VerticalStep = props => {
16
- const {
17
- steps = {},
18
- currentStep,
19
- type,
20
- activeCircleColor,
21
- inactiveCircleColor,
22
- checkedCircleColor,
23
- activeBorderColor,
24
- inactiveBorderColor,
25
- activeLineColor,
26
- inactiveLineColor,
27
- style,
28
- size = 'default',
29
- checkIcon,
30
- errorIcon,
31
- } = props;
32
- let CIRCLE_SIZE = 24;
33
- let CIRCLE_TEXT_SIZE = 12;
34
- let ICON_SIZE = 16;
35
- let TITLE_SIZE = {
36
- size: 14,
37
- lineHeight: 20,
38
- };
39
- let SUBTITLE_SIZE = {
40
- size: 10,
41
- lineHeight: 14,
42
- };
43
- let CONTENT_SIZE = {
44
- size: 12,
45
- lineHeight: 16,
46
- };
47
- const ICON_URL = checkIcon || IconSource.ic_check_24;
48
- const ERROR_ICON_URL = errorIcon || IconSource.ic_close_x_24;
49
- if (size === 'small') {
50
- CIRCLE_SIZE = 16;
51
- CIRCLE_TEXT_SIZE = 8;
52
- ICON_SIZE = 12;
53
- TITLE_SIZE = {
54
- size: 12,
55
- lineHeight: 16,
56
- };
57
- SUBTITLE_SIZE = {
58
- size: 10,
59
- lineHeight: 14,
60
- };
61
- CONTENT_SIZE = {
62
- size: 10,
63
- lineHeight: 14,
64
- };
65
- }
66
-
67
- const renderCircle = (error, index) => {
68
- let circleColor = inactiveCircleColor;
69
- let borderColor = inactiveBorderColor;
70
-
71
- if (index < currentStep) {
72
- circleColor = checkedCircleColor;
73
- } else if (index === currentStep) circleColor = activeCircleColor;
74
-
75
- if (index <= currentStep) borderColor = activeBorderColor;
76
- if (error) {
77
- circleColor = Colors.red_03;
78
- borderColor = Colors.red_08;
79
- }
80
-
81
- return (
82
- <View
83
- style={[
84
- styles.circle,
85
- {
86
- width: CIRCLE_SIZE,
87
- height: CIRCLE_SIZE,
88
- borderRadius: CIRCLE_SIZE / 2,
89
- borderColor: borderColor,
90
- backgroundColor: circleColor,
91
- },
92
- ]}>
93
- {renderCircleContent(error, index)}
94
- </View>
95
- );
96
- };
97
-
98
- const renderCircleContent = (error, index) => {
99
- const icon = error ? ERROR_ICON_URL : ICON_URL;
100
-
101
- if (type === 'check') {
102
- return (
103
- <Image
104
- source={icon}
105
- style={[
106
- styles.icon,
107
- {
108
- width: ICON_SIZE,
109
- height: ICON_SIZE,
110
- },
111
- ]}
112
- />
113
- );
114
- } else if (type === 'combine') {
115
- return index < currentStep ? (
116
- <Image
117
- source={icon}
118
- style={[
119
- styles.icon,
120
- {
121
- width: ICON_SIZE,
122
- height: ICON_SIZE,
123
- },
124
- ]}
125
- />
126
- ) : (
127
- <Text
128
- style={[
129
- styles.circleText,
130
- {
131
- fontSize: CIRCLE_TEXT_SIZE,
132
- lineHeight: CIRCLE_TEXT_SIZE + 2,
133
- },
134
- ]}>
135
- {index + 1}
136
- </Text>
137
- );
138
- }
139
- return (
140
- <Text
141
- style={[
142
- styles.circleText,
143
- {
144
- fontSize: CIRCLE_TEXT_SIZE,
145
- lineHeight: CIRCLE_TEXT_SIZE + 2,
146
- },
147
- ]}>
148
- {index + 1}
149
- </Text>
150
- );
151
- };
152
-
153
- const renderLine = index => {
154
- if (index === steps.length - 1) return null;
155
- const lineColor = index < currentStep ? activeLineColor : inactiveLineColor;
156
-
157
- return <View style={[styles.line, {backgroundColor: lineColor}]} />;
158
- };
159
-
160
- const renderHeader = (title, subTitle, error, index) => {
161
- const weight = index === currentStep ? '600' : '400';
162
- const disabledColor = Colors.black_09;
163
- const errorColor = Colors.red_03;
164
- return (
165
- <View style={styles.header}>
166
- <Text
167
- style={[
168
- styles.title,
169
- {
170
- lineHeight: TITLE_SIZE.lineHeight,
171
- fontSize: TITLE_SIZE.size,
172
- fontWeight: weight,
173
- color: error
174
- ? errorColor
175
- : index < currentStep
176
- ? disabledColor
177
- : Colors.black_17,
178
- },
179
- ]}>
180
- {title}
181
- </Text>
182
- <Text
183
- style={[
184
- styles.subTitle,
185
- {
186
- fontSize: SUBTITLE_SIZE.size,
187
- lineHeight: SUBTITLE_SIZE.lineHeight,
188
- color:
189
- index < currentStep && !error ? disabledColor : Colors.black_12,
190
- },
191
- ]}>
192
- {subTitle}
193
- </Text>
194
- </View>
195
- );
196
- };
197
-
198
- const renderContent = (content, error, index, size) => {
199
- const disabledColor = Colors.black_09;
200
- let marginBottom = size === 'small' ? Spacing.S : Spacing.M;
201
- let minHeight = ScaleSize(30);
202
-
203
- if (index === steps.length - 1) {
204
- marginBottom = 0;
205
- minHeight = 0;
206
- }
207
-
208
- return (
209
- <View
210
- style={[
211
- styles.content,
212
- {
213
- marginBottom,
214
- minHeight,
215
- },
216
- ]}>
217
- {content && typeof content === 'string' ? (
218
- <Text
219
- style={[
220
- styles.contentText,
221
- {
222
- fontSize: CONTENT_SIZE.size,
223
- lineHeight: CONTENT_SIZE.lineHeight,
224
- color:
225
- index < currentStep && !error
226
- ? disabledColor
227
- : Colors.black_12,
228
- },
229
- ]}>
230
- {content}
231
- </Text>
232
- ) : (
233
- content
234
- )}
235
- </View>
236
- );
237
- };
238
-
239
- const renderStepPart = (item, index) => {
240
- const {title, subTitle, content, error} = item;
241
- return (
242
- <View
243
- key={index.toString()}
244
- style={{
245
- flexDirection: 'row',
246
- }}>
247
- <View style={styles.circleContainer}>
248
- {renderCircle(error, index)}
249
- {renderLine(index)}
250
- </View>
251
- <View style={styles.contentContainer}>
252
- {renderHeader(title, subTitle, error, index)}
253
- {renderContent(content, error, index, size)}
254
- </View>
255
- </View>
256
- );
257
- };
258
-
259
- return (
260
- <View style={style}>
261
- {steps.map((item, index) => {
262
- return renderStepPart(item, index);
263
- })}
264
- </View>
265
- );
266
- };
267
-
268
- export default VerticalStep;
269
-
270
- const styles = StyleSheet.create({
271
- circleContainer: {
272
- flexDirection: 'column',
273
- alignItems: 'center',
274
- height: '100%',
275
- },
276
- circle: {
277
- borderWidth: 2,
278
- justifyContent: 'center',
279
- alignItems: 'center',
280
- },
281
- contentContainer: {
282
- marginLeft: Spacing.S,
283
- flex: 1,
284
- },
285
- content: {
286
- marginTop: Spacing.XS,
287
- },
288
- contentText: {
289
- color: Colors.black_12,
290
- },
291
- header: {
292
- flexDirection: 'row',
293
- justifyContent: 'space-between',
294
- alignItems: 'center',
295
- },
296
- title: {},
297
- subTitle: {
298
- color: Colors.black_12,
299
- },
300
- line: {
301
- width: 2,
302
- flex: 1,
303
- marginVertical: Spacing.XS,
304
- borderRadius: 1,
305
- },
306
- icon: {
307
- tintColor: Colors.white,
308
- },
309
- circleText: {
310
- color: Colors.white,
311
- fontWeight: '600',
312
- },
313
- });
package/Step.vertical.web.js DELETED
@@ -1,325 +0,0 @@
1
- import PropTypes from 'prop-types';
2
- import React from 'react';
3
- import {StyleSheet, View, Image} from 'react-native';
4
- import Colors from '../../core/colors';
5
- import Text from '../../core/components/typography';
6
- import Spacing from '../../core/spacing';
7
-
8
- import {Icons as IconSource} from '../../core/icons';
9
-
10
- const CIRCLE_SIZE = 24;
11
- const CIRCLE_TEXT_SIZE = 12;
12
- const ICON_SIZE = 16;
13
- const ICON_URL = IconSource.ic_check_24;
14
- const TITLE_SIZE = {
15
- size: 14,
16
- lineHeight: 20,
17
- };
18
- const SUBTITLE_SIZE = {
19
- size: 10,
20
- lineHeight: 14,
21
- };
22
- const CONTENT_SIZE = {
23
- size: 12,
24
- lineHeight: 16,
25
- };
26
-
27
- const VerticalStep = props => {
28
- const {
29
- steps = {},
30
- currentStep,
31
- type,
32
- activeCircleColor,
33
- inactiveCircleColor,
34
- checkedCircleColor,
35
- activeBorderColor,
36
- inactiveBorderColor,
37
- activeLineColor,
38
- inactiveLineColor,
39
- style,
40
- size = 'default',
41
- checkIcon,
42
- errorIcon,
43
- } = props;
44
- let CIRCLE_SIZE = 24;
45
- let CIRCLE_TEXT_SIZE = 12;
46
- let ICON_SIZE = 16;
47
- let TITLE_SIZE = {
48
- size: 14,
49
- lineHeight: 20,
50
- };
51
- let SUBTITLE_SIZE = {
52
- size: 10,
53
- lineHeight: 14,
54
- };
55
- let CONTENT_SIZE = {
56
- size: 12,
57
- lineHeight: 16,
58
- };
59
- const ICON_URL = checkIcon || IconSource.ic_check_24;
60
- const ERROR_ICON_URL = errorIcon || IconSource.ic_close_x_24;
61
- if (size === 'small') {
62
- CIRCLE_SIZE = 16;
63
- CIRCLE_TEXT_SIZE = 8;
64
- ICON_SIZE = 12;
65
- TITLE_SIZE = {
66
- size: 12,
67
- lineHeight: 16,
68
- };
69
- SUBTITLE_SIZE = {
70
- size: 10,
71
- lineHeight: 14,
72
- };
73
- CONTENT_SIZE = {
74
- size: 10,
75
- lineHeight: 14,
76
- };
77
- }
78
-
79
- const renderCircle = (error, index) => {
80
- let circleColor = inactiveCircleColor;
81
- let borderColor = inactiveBorderColor;
82
-
83
- if (index < currentStep) {
84
- circleColor = checkedCircleColor;
85
- } else if (index === currentStep) circleColor = activeCircleColor;
86
-
87
- if (index <= currentStep) borderColor = activeBorderColor;
88
- if (error) {
89
- circleColor = Colors.red_03;
90
- borderColor = Colors.red_08;
91
- }
92
-
93
- return (
94
- <View
95
- style={[
96
- styles.circle,
97
- {
98
- width: CIRCLE_SIZE,
99
- height: CIRCLE_SIZE,
100
- borderRadius: CIRCLE_SIZE / 2,
101
- borderColor: borderColor,
102
- backgroundColor: circleColor,
103
- },
104
- ]}>
105
- {renderCircleContent(error, index)}
106
- </View>
107
- );
108
- };
109
-
110
- const renderCircleContent = (error, index) => {
111
- const icon = error ? ERROR_ICON_URL : ICON_URL;
112
-
113
- if (type === 'check') {
114
- return (
115
- <Image
116
- source={icon}
117
- style={[
118
- styles.icon,
119
- {
120
- width: ICON_SIZE,
121
- height: ICON_SIZE,
122
- },
123
- ]}
124
- />
125
- );
126
- } else if (type === 'combine') {
127
- return index < currentStep ? (
128
- <Image
129
- source={icon}
130
- style={[
131
- styles.icon,
132
- {
133
- width: ICON_SIZE,
134
- height: ICON_SIZE,
135
- },
136
- ]}
137
- />
138
- ) : (
139
- <Text
140
- style={[
141
- styles.circleText,
142
- {
143
- fontSize: CIRCLE_TEXT_SIZE,
144
- lineHeight: CIRCLE_TEXT_SIZE + 2,
145
- },
146
- ]}>
147
- {index + 1}
148
- </Text>
149
- );
150
- }
151
- return (
152
- <Text
153
- style={[
154
- styles.circleText,
155
- {
156
- fontSize: CIRCLE_TEXT_SIZE,
157
- lineHeight: CIRCLE_TEXT_SIZE + 2,
158
- },
159
- ]}>
160
- {index + 1}
161
- </Text>
162
- );
163
- };
164
-
165
- const renderLine = index => {
166
- if (index === steps.length - 1) return null;
167
- const lineColor = index < currentStep ? activeLineColor : inactiveLineColor;
168
-
169
- return <View style={[styles.line, {backgroundColor: lineColor}]} />;
170
- };
171
-
172
- const renderHeader = (title, subTitle, error, index) => {
173
- const weight = index === currentStep ? '600' : '400';
174
- const disabledColor = Colors.black_09;
175
- const errorColor = Colors.red_03;
176
- return (
177
- <View style={styles.header}>
178
- <Text
179
- style={[
180
- styles.title,
181
- {
182
- lineHeight: TITLE_SIZE.lineHeight,
183
- fontSize: TITLE_SIZE.size,
184
- fontWeight: weight,
185
- color: error
186
- ? errorColor
187
- : index < currentStep
188
- ? disabledColor
189
- : Colors.black_17,
190
- },
191
- ]}>
192
- {title}
193
- </Text>
194
- <Text
195
- style={[
196
- styles.subTitle,
197
- {
198
- fontSize: SUBTITLE_SIZE.size,
199
- lineHeight: SUBTITLE_SIZE.lineHeight,
200
- color:
201
- index < currentStep && !error ? disabledColor : Colors.black_12,
202
- },
203
- ]}>
204
- {subTitle}
205
- </Text>
206
- </View>
207
- );
208
- };
209
-
210
- const renderContent = (content, error, index, size) => {
211
- const disabledColor = Colors.black_09;
212
- let marginBottom = size === 'small' ? Spacing.S : Spacing.M;
213
- let minHeight = 30;
214
-
215
- if (index === steps.length - 1) {
216
- marginBottom = 0;
217
- minHeight = 0;
218
- }
219
-
220
- return (
221
- <View
222
- style={[
223
- styles.content,
224
- {
225
- marginBottom,
226
- minHeight,
227
- },
228
- ]}>
229
- {content && typeof content === 'string' ? (
230
- <Text
231
- style={[
232
- styles.contentText,
233
- {
234
- fontSize: CONTENT_SIZE.size,
235
- lineHeight: CONTENT_SIZE.lineHeight,
236
- color:
237
- index < currentStep && !error
238
- ? disabledColor
239
- : Colors.black_12,
240
- },
241
- ]}>
242
- {content}
243
- </Text>
244
- ) : (
245
- content
246
- )}
247
- </View>
248
- );
249
- };
250
-
251
- const renderStepPart = (item, index) => {
252
- const {title, subTitle, content, error} = item;
253
- return (
254
- <View
255
- key={index.toString()}
256
- style={{
257
- flexDirection: 'row',
258
- }}>
259
- <View style={styles.circleContainer}>
260
- {renderCircle(error, index)}
261
- {renderLine(index)}
262
- </View>
263
- <View style={styles.contentContainer}>
264
- {renderHeader(title, subTitle, error, index)}
265
- {renderContent(content, error, index, size)}
266
- </View>
267
- </View>
268
- );
269
- };
270
-
271
- return (
272
- <View style={style}>
273
- {steps.map((item, index) => {
274
- return renderStepPart(item, index);
275
- })}
276
- </View>
277
- );
278
- };
279
-
280
- export default VerticalStep;
281
-
282
- const styles = StyleSheet.create({
283
- circleContainer: {
284
- flexDirection: 'column',
285
- alignItems: 'center',
286
- height: '100%',
287
- },
288
- circle: {
289
- borderWidth: 2,
290
- justifyContent: 'center',
291
- alignItems: 'center',
292
- },
293
- contentContainer: {
294
- marginLeft: Spacing.S,
295
- flex: 1,
296
- },
297
- content: {
298
- marginTop: Spacing.XS,
299
- },
300
- contentText: {
301
- color: Colors.black_12,
302
- },
303
- header: {
304
- flexDirection: 'row',
305
- justifyContent: 'space-between',
306
- alignItems: 'center',
307
- },
308
- title: {},
309
- subTitle: {
310
- color: Colors.black_12,
311
- },
312
- line: {
313
- width: 2,
314
- flex: 1,
315
- marginVertical: Spacing.XS,
316
- borderRadius: 1,
317
- },
318
- icon: {
319
- tintColor: Colors.white,
320
- },
321
- circleText: {
322
- color: Colors.white,
323
- fontWeight: '600',
324
- },
325
- });
package/Step.web.js DELETED
@@ -1,51 +0,0 @@
1
- import React, {Component} from 'react';
2
-
3
- import PropTypes from 'prop-types';
4
- import HorizontalStep from './Step.horizontal.web.js';
5
- import VerticalStep from './Step.vertical.web.js';
6
- import Colors from '../../core-v2/colors';
7
-
8
- const Step = props => {
9
- const {isVertical} = props;
10
- if (isVertical) {
11
- return <VerticalStep {...props} />;
12
- }
13
- return <HorizontalStep {...props} />;
14
- };
15
-
16
- export default Step;
17
-
18
- Step.propTypes = {
19
- steps: PropTypes.arrayOf({
20
- title: PropTypes.string.isRequired,
21
- subTitle: PropTypes.string,
22
- content: PropTypes.oneOfType([PropTypes.string || PropTypes.element]),
23
- error: PropTypes.bool,
24
- }),
25
- currentStep: PropTypes.number,
26
- type: PropTypes.oneOf(['check', 'combine', 'text']),
27
- size: PropTypes.oneOf(['default', 'small']),
28
- activeCircleColor: PropTypes.string,
29
- inactiveCircleColor: PropTypes.string,
30
- checkedCircleColor: PropTypes.string,
31
- activeBorderColor: PropTypes.string,
32
- inactiveBorderColor: PropTypes.string,
33
- activeLineColor: PropTypes.string,
34
- inactiveLineColor: PropTypes.string,
35
- style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
36
- checkIcon: PropTypes.string,
37
- errorIcon: PropTypes.string,
38
- };
39
-
40
- Step.defaultProps = {
41
- currentStep: 0,
42
- type: 'check',
43
- size: 'normal',
44
- activeCircleColor: Colors.pink_03,
45
- inactiveCircleColor: Colors.black_06,
46
- checkedCircleColor: Colors.pink_08,
47
- activeBorderColor: Colors.pink_10,
48
- inactiveBorderColor: Colors.black_04,
49
- activeLineColor: Colors.pink_08,
50
- inactiveLineColor: Colors.black_04,
51
- };
package/index.js DELETED
@@ -1,3 +0,0 @@
1
- import Step from './Step';
2
-
3
- export default Step;