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

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 +280 -112
  2. package/Step.horizontal.web.js +280 -112
  3. package/Step.js +21 -3
  4. package/Step.vertical.js +261 -111
  5. package/Step.vertical.web.js +261 -111
  6. package/Step.web.js +22 -3
  7. package/package.json +1 -1
package/Step.vertical.js CHANGED
@@ -13,13 +13,12 @@ const styles = StyleSheet.create({
13
13
  borderWidth: 2,
14
14
  padding: 4,
15
15
  },
16
- checkedCircle: {
17
- width: CIRCLE_SIZE,
18
- height: CIRCLE_SIZE,
19
- borderRadius: CIRCLE_SIZE / 2,
20
- backgroundColor: '#ffadd2',
21
- borderWidth: 2,
22
- borderColor: Colors.pink_09,
16
+ iconImage: {
17
+ width: 16,
18
+ height: 16,
19
+ position: 'absolute',
20
+ top: 2,
21
+ left: 2,
23
22
  },
24
23
  titleDefault: {
25
24
  color: Colors.black_12,
@@ -31,8 +30,15 @@ const styles = StyleSheet.create({
31
30
  fontSize: 14,
32
31
  fontWeight: 'bold',
33
32
  },
34
- containerStyle: {
35
- minHeight: CIRCLE_SIZE + 20 + CIRCLE_SIZE,
33
+ container: {
34
+ width: '100%',
35
+ paddingRight: 48,
36
+ marginTop: 4,
37
+ },
38
+ titleAndDate: {
39
+ flexDirection: 'row',
40
+ justifyContent: 'space-between',
41
+ alignItems: 'center',
36
42
  },
37
43
  description: {
38
44
  fontSize: 12,
@@ -81,127 +87,266 @@ export default class VerticalStep extends Component {
81
87
  });
82
88
  };
83
89
 
84
- circleStep = (index) => {
90
+ /* #region render cust */
91
+ _renderCircleImage = ({ icon = '', circleColor, circleBorderColor }) => {
85
92
  return (
86
- <View style={[styles.circle]}>
87
- <Text style={styles.number}>{index}</Text>
93
+ <View>
94
+ <View
95
+ style={[
96
+ styles.circle,
97
+ {
98
+ backgroundColor: circleColor,
99
+ borderColor: circleBorderColor,
100
+ },
101
+ ]}>
102
+ <Image
103
+ source={icon}
104
+ style={[styles.iconImage, { tintColor: '#ffffff' }]}
105
+ />
106
+ </View>
107
+ </View>
108
+ );
109
+ };
110
+
111
+ _renderCircleText = ({
112
+ circleColor = '',
113
+ circleBorderColor = '',
114
+ index = 0,
115
+ }) => {
116
+ return (
117
+ <View>
118
+ <View
119
+ style={[
120
+ styles.circle,
121
+ {
122
+ backgroundColor: circleColor,
123
+ borderColor: circleBorderColor,
124
+ },
125
+ ]}>
126
+ <Text style={styles.number}>{index + 1}</Text>
127
+ </View>
128
+ </View>
129
+ );
130
+ };
131
+
132
+ _renderCircle = ({
133
+ circleColor = '',
134
+ circleBorderColor = '',
135
+ isActiveState = false,
136
+ circleUnchecked = false,
137
+ iconActive,
138
+ iconUnchecked,
139
+ icon = {},
140
+ index = 0,
141
+ }) => {
142
+ let resultComponent = <></>;
143
+ if (!isActiveState) {
144
+ if (circleUnchecked) {
145
+ if (Object.keys(iconUnchecked).length === 0) {
146
+ resultComponent = this._renderCircleImage({
147
+ icon,
148
+ circleColor,
149
+ circleBorderColor,
150
+ });
151
+ } else {
152
+ resultComponent = this._renderCircleText({
153
+ circleColor,
154
+ circleBorderColor,
155
+ index,
156
+ });
157
+ }
158
+ } else {
159
+ resultComponent = this._renderCircleImage({
160
+ icon,
161
+ circleColor,
162
+ circleBorderColor,
163
+ });
164
+ }
165
+ } else {
166
+ // This is active case
167
+ // If icon diff "" & regex http or https url so will render image component
168
+ if (Object.keys(iconActive).length === 0) {
169
+ resultComponent = this._renderCircleImage({
170
+ icon,
171
+ circleColor,
172
+ circleBorderColor,
173
+ });
174
+ } else {
175
+ // Otherwise render index number in text component
176
+ resultComponent = resultComponent = this._renderCircleText({
177
+ circleColor,
178
+ circleBorderColor,
179
+ index,
180
+ });
181
+ }
182
+ }
183
+ return resultComponent;
184
+ };
185
+
186
+ _renderLine = ({ titles = {}, index = 0, lineActive = '' }) => {
187
+ let resultComponent = <></>;
188
+
189
+ if (titles?.length - 1 !== index) {
190
+ resultComponent = (
191
+ <View
192
+ style={[
193
+ styles.lineVertical,
194
+ {
195
+ backgroundColor: lineActive,
196
+ },
197
+ ]}
198
+ />
199
+ );
200
+ }
201
+ return resultComponent;
202
+ };
203
+
204
+ _renderTitle = ({ textFontStyle = {}, titleStyle = {}, value = {} }) => {
205
+ let resultComponent = (
206
+ <View>
207
+ <Text.Caption
208
+ style={[{ marginLeft: 10 }, textFontStyle, titleStyle]}>
209
+ {value}
210
+ </Text.Caption>
88
211
  </View>
89
212
  );
213
+ return resultComponent;
214
+ };
215
+
216
+ _renderDateOrValue = ({
217
+ date = '',
218
+ isActiveState = false,
219
+ circleChecked = false,
220
+ dateStyle = {},
221
+ index = 0,
222
+ }) => {
223
+ // Init states in render function
224
+ let resultComponent = <></>;
225
+ if (!date) {
226
+ return resultComponent;
227
+ }
228
+ if (isActiveState || circleChecked) {
229
+ resultComponent = (
230
+ <Text style={[styles.date, dateStyle]}>{date[index]}</Text>
231
+ );
232
+ }
233
+ return resultComponent;
234
+ };
235
+
236
+ _renderDescription = ({ items = {}, descriptionStyle = {}, index = 0 }) => {
237
+ let resultComponent = <></>;
238
+
239
+ if (items) {
240
+ resultComponent = (
241
+ <View>
242
+ {typeof items[index] == 'string' ? (
243
+ <Text style={[styles.description, descriptionStyle]}>
244
+ {items[index]}
245
+ </Text>
246
+ ) : (
247
+ <View style={[styles.description]}>{items[index]}</View>
248
+ )}
249
+ </View>
250
+ );
251
+ }
252
+ return resultComponent;
90
253
  };
254
+ /* #endregion */
91
255
 
92
256
  circleColumn = (value, index) => {
93
257
  const {
94
258
  currentStep,
95
259
  titles,
96
- lineStyle,
97
260
  iconActive,
98
- iconInActive,
261
+ iconChecked,
262
+ iconUnchecked,
263
+ circleColorActive,
264
+ circleColorChecked,
265
+ circleColorUnchecked,
266
+ circleBorderColorActive,
267
+ circleBorderColorChecked,
268
+ circleBorderColorUnchecked,
99
269
  lineColorActive,
100
270
  lineColorInActive,
101
271
  items,
102
- currentStepColor,
103
272
  date,
104
273
  titleStyle,
105
274
  descriptionStyle,
106
275
  dateStyle,
107
276
  } = this.props;
108
- const icon =
109
- currentStep >= index + 2
110
- ? iconActive || IconSource.ic_check_24
111
- : iconInActive || index + 1;
112
- var circleColor =
113
- currentStep >= index + 1 ? currentStepColor : Colors.black_06;
114
- var circleBorderColor =
115
- currentStep >= index + 1 ? Colors.pink_09 : Colors.black_04;
116
- const textFontStyle =
117
- currentStep === index + 1
118
- ? styles.titleActive
119
- : styles.titleDefault;
120
- const lineActive =
121
- currentStep >= index + 2
122
- ? lineColorActive
123
- ? Colors.pink_09
124
- : '#ffd6e7'
125
- : lineColorInActive || Colors.black_04;
277
+
278
+ // Three circle states
279
+ const isActiveState = currentStep == index + 1;
280
+ const circleChecked = currentStep > index + 1;
281
+ const circleUnchecked = currentStep < index + 1;
282
+
283
+ // Default properties is inactive state
284
+ let icon = {};
285
+ let circleColor = circleColorUnchecked || Colors.black_06;
286
+ let circleBorderColor = circleBorderColorUnchecked || Colors.black_04;
287
+ let textFontStyle = styles.titleDefault;
288
+ let lineActive = lineColorInActive || Colors.black_04;
289
+
290
+ let tintColor = '#ffd6e7';
291
+
292
+ // This is all properties in active state
293
+ if (isActiveState) {
294
+ icon = iconActive || index + 1;
295
+ circleColor = circleColorActive || '#d82d8b';
296
+ circleBorderColor = circleBorderColorActive || Colors.pink_09;
297
+ textFontStyle = styles.titleActive;
298
+ }
299
+
300
+ if (circleChecked) {
301
+ icon = iconChecked || IconSource.ic_check_24;
302
+ lineActive = lineColorActive || tintColor;
303
+ circleColor = circleColorChecked || '#ffadd2';
304
+ circleBorderColor = circleBorderColorChecked || Colors.pink_09;
305
+ }
306
+
307
+ if (circleUnchecked) {
308
+ icon = iconUnchecked || index + 1;
309
+ }
310
+
126
311
  return (
127
312
  <View key={index} style={{ flexDirection: 'row' }}>
128
313
  <View>
129
- {currentStep <= index + 1 ? (
130
- <View>
131
- {/* image */}
132
- <View
133
- style={[
134
- styles.circle,
135
- {
136
- backgroundColor: circleColor,
137
- borderColor: circleBorderColor,
138
- },
139
- ]}>
140
- <Text style={styles.number}>{icon}</Text>
141
- </View>
142
- </View>
143
- ) : (
144
- <View>
145
- <Image
146
- source={icon}
147
- style={[
148
- styles.checkedCircle,
149
- { tintColor: '#ffd6e7' },
150
- ]}
151
- />
152
- </View>
153
- )}
154
- {titles?.length - 1 !== index && (
155
- <View
156
- style={[
157
- styles.lineVertical,
158
- {
159
- backgroundColor: lineActive,
160
- },
161
- lineStyle,
162
- ]}
163
- />
164
- )}
314
+ {this._renderCircle({
315
+ circleColor,
316
+ circleBorderColor,
317
+ isActiveState,
318
+ circleUnchecked,
319
+ iconActive,
320
+ iconUnchecked,
321
+ icon,
322
+ index,
323
+ })}
324
+ {this._renderLine({
325
+ titles,
326
+ index,
327
+ lineActive,
328
+ })}
165
329
  </View>
166
- <View
167
- style={[{ width: '100%', paddingRight: 48, marginTop: 4 }]}>
168
- <View
169
- style={{
170
- flexDirection: 'row',
171
- justifyContent: 'space-between',
172
- alignItems: 'center',
173
- }}>
174
- <Text.Caption
175
- style={[
176
- { marginLeft: 10 },
177
- textFontStyle,
178
- titleStyle,
179
- ]}>
180
- {value}
181
- </Text.Caption>
182
- {date && currentStep >= index + 1 && (
183
- <Text style={[styles.date, dateStyle]}>
184
- {date[index]}
185
- </Text>
186
- )}
330
+ <View style={styles.container}>
331
+ <View style={styles.titleAndDate}>
332
+ {this._renderTitle({
333
+ textFontStyle,
334
+ titleStyle,
335
+ value,
336
+ })}
337
+ {this._renderDateOrValue({
338
+ date,
339
+ isActiveState,
340
+ circleChecked,
341
+ dateStyle,
342
+ index,
343
+ })}
187
344
  </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
- )}
345
+ {this._renderDescription({
346
+ items,
347
+ descriptionStyle,
348
+ index,
349
+ })}
205
350
  </View>
206
351
  </View>
207
352
  );
@@ -215,7 +360,7 @@ export default class VerticalStep extends Component {
215
360
  render() {
216
361
  return (
217
362
  <ScrollView>
218
- <View style={[styles.containerStyle]} onLayout={this.onLayout}>
363
+ <View onLayout={this.onLayout}>
219
364
  <View style={[styles.circleColumn]}>
220
365
  {this.renderCircle()}
221
366
  </View>
@@ -232,11 +377,16 @@ VerticalStep.propTypes = {
232
377
  items: PropTypes.array,
233
378
  isVertical: PropTypes.bool,
234
379
  iconActive: PropTypes.any,
235
- iconInActive: PropTypes.any,
380
+ iconChecked: PropTypes.any,
381
+ iconUnchecked: PropTypes.any,
382
+ circleColorActive: PropTypes.string,
383
+ circleColorChecked: PropTypes.string,
384
+ circleColorUnchecked: PropTypes.string,
385
+ circleBorderColorActive: PropTypes.string,
386
+ circleBorderColorChecked: PropTypes.string,
387
+ circleBorderColorUnchecked: PropTypes.string,
236
388
  lineColorActive: PropTypes.string,
237
389
  lineColorInActive: PropTypes.string,
238
- borderColorActive: PropTypes.string,
239
- borderColorInActive: PropTypes.string,
240
390
  titleStyle: PropTypes.object,
241
391
  descriptionStyle: PropTypes.object,
242
392
  dateStyle: PropTypes.object,