@momo-kits/calendar 0.0.55-beta.1 → 0.0.55-beta.10

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 (10) hide show
  1. package/package.json +4 -3
  2. package/src/Calendar.js +67 -35
  3. package/src/CalendarPro.js +73 -70
  4. package/src/Day/index.js +43 -20
  5. package/src/Day/style.js +19 -25
  6. package/src/HeaderControl.js +53 -47
  7. package/src/Month/index.js +24 -19
  8. package/src/MonthList.js +3 -2
  9. package/src/TabHeader.js +45 -37
  10. package/src/calendarPicker/Day.js +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.55-beta.1",
3
+ "version": "0.0.55-beta.10",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
@@ -12,8 +12,9 @@
12
12
  "react": "16.9.0",
13
13
  "react-native": ">=0.55",
14
14
  "prop-types": "^15.7.2",
15
- "@momo-kits/core": ">=0.0.5-beta"
15
+ "@momo-kits/core": ">=0.0.5-beta",
16
+ "@momo-kits/v2-core": "^0.0.51-beta.5"
16
17
  },
17
18
  "devDependencies": {},
18
19
  "license": "MoMo"
19
- }
20
+ }
package/src/Calendar.js CHANGED
@@ -1,8 +1,22 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import React, { Component } from 'react';
3
- import { View, Switch, ScrollView, Platform, StyleSheet } from 'react-native';
3
+ import {
4
+ View,
5
+ ScrollView,
6
+ Platform,
7
+ StyleSheet,
8
+ Dimensions,
9
+ } from 'react-native';
4
10
  import moment from 'moment';
5
- import { Text, SwitchLanguage } from '@momo-kits/core';
11
+ import {
12
+ Text,
13
+ SwitchLanguage,
14
+ Colors,
15
+ Spacing,
16
+ Radius,
17
+ ScaleSize,
18
+ } from '@momo-kits/core';
19
+ import Switch from '@momo-kits/switch';
6
20
  import CalendarPro from './CalendarPro';
7
21
  import TabHeader from './TabHeader';
8
22
 
@@ -318,21 +332,19 @@ class Calendar extends Component {
318
332
  renderSwitchReturnSelection = () => {
319
333
  const { isDoubleDateMode } = this.state;
320
334
  return (
321
- <View style={styles.viewSwitch}>
322
- <Text.Caption style={styles.textSwitch}>
323
- {SwitchLanguage.chooseRoundtrip}
324
- </Text.Caption>
325
- <Switch
326
- value={isDoubleDateMode}
327
- onValueChange={this.toggleSelectionDateMode}
328
- thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
329
- trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
330
- style={[
331
- Platform.OS === 'ios' && {
332
- transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
333
- },
334
- ]}
335
- />
335
+ <View style={styles.headerContainer}>
336
+ <View style={styles.viewSwitch}>
337
+ <Text.Title weight="medium" style={styles.textSwitch}>
338
+ {SwitchLanguage.chooseRoundtrip}
339
+ </Text.Title>
340
+ <Switch
341
+ value={isDoubleDateMode}
342
+ onChange={this.toggleSelectionDateMode}
343
+ thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
344
+ trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
345
+ />
346
+ </View>
347
+ <View style={styles.seperator} />
336
348
  </View>
337
349
  );
338
350
  };
@@ -417,13 +429,29 @@ class Calendar extends Component {
417
429
  maxDate,
418
430
  doubleDate,
419
431
  isHideHeaderPanel,
432
+ style,
420
433
  } = this.props;
421
434
  const { isDoubleDateMode } = this.state;
435
+ const { width } = Dimensions.get('window');
422
436
  return (
423
- <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
424
- {!isHiddenSwitch && this.renderSwitchReturnSelection()}
425
- {!isHideHeaderPanel && this.renderHeaderPanel()}
437
+ <ScrollView
438
+ style={[
439
+ styles.scrollView,
440
+ {
441
+ width: width - ScaleSize(24),
442
+ },
443
+ style,
444
+ ]}>
445
+ <View
446
+ style={{
447
+ backgroundColor: Colors.black_01,
448
+ borderRadius: Radius.XS,
449
+ }}>
450
+ {!isHiddenSwitch && this.renderSwitchReturnSelection()}
451
+ {!isHideHeaderPanel && this.renderHeaderPanel()}
452
+ </View>
426
453
  <CalendarPro
454
+ priceList={priceList}
427
455
  ref={this.calendarPicker}
428
456
  startDate={doubleDate?.first}
429
457
  endDate={doubleDate?.second}
@@ -432,7 +460,6 @@ class Calendar extends Component {
432
460
  selectedDate={this.selectedDate}
433
461
  isShowLunar={isShowLunar}
434
462
  onCallbackCalendar={onCallbackCalendar}
435
- priceList={priceList}
436
463
  labelFrom={labelFrom}
437
464
  labelTo={labelTo}
438
465
  isHideLabel={isHideLabel}
@@ -476,6 +503,7 @@ Calendar.propTypes = {
476
503
  PropTypes.string,
477
504
  PropTypes.instanceOf(Date),
478
505
  ]),
506
+ style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
479
507
  };
480
508
 
481
509
  Calendar.defaultProps = {
@@ -485,36 +513,40 @@ Calendar.defaultProps = {
485
513
 
486
514
  const styles = StyleSheet.create({
487
515
  viewPanel_2: {
488
- height: 46,
489
516
  paddingVertical: 10,
490
- justifyContent: 'center',
491
- alignItems: 'center',
517
+ alignItems: 'flex-start',
492
518
  backgroundColor: 'white',
493
519
  borderRadius: 8,
520
+ paddingHorizontal: Spacing.M,
494
521
  },
495
522
  viewPanel: {
496
523
  height: 50,
497
524
  marginHorizontal: 12,
498
525
  marginTop: 6,
499
- marginBottom: 25,
500
- padding: 2,
501
526
  flexDirection: 'row',
502
- backgroundColor: '#eeeeef',
503
- justifyContent: 'space-around',
504
- borderRadius: 8,
505
527
  },
506
528
  textSwitch: {
507
- // fontSize: 10,
508
- fontWeight: 'bold',
509
- color: '#222222',
529
+ color: Colors.black_15,
510
530
  },
511
531
  viewSwitch: {
512
532
  flexDirection: 'row',
513
533
  justifyContent: 'space-between',
514
- paddingHorizontal: 12,
515
534
  alignItems: 'center',
516
- backgroundColor: '#f2f3f5',
517
- paddingVertical: 9,
535
+ backgroundColor: Colors.white,
518
536
  height: 42,
519
537
  },
538
+ seperator: {
539
+ height: 1,
540
+ width: '100%',
541
+ backgroundColor: Colors.black_04,
542
+ },
543
+ headerContainer: {
544
+ paddingHorizontal: 12,
545
+ paddingVertical: 8,
546
+ },
547
+ scrollView: {
548
+ flex: 1,
549
+ backgroundColor: 'transparent',
550
+ alignSelf: 'center',
551
+ },
520
552
  });
package/src/CalendarPro.js CHANGED
@@ -11,13 +11,12 @@ import {
11
11
  } from 'react-native';
12
12
  import Moment from 'moment';
13
13
  import {
14
- Text,
15
14
  SwitchLanguage,
16
15
  LocalizedStrings,
17
- Colors,
18
16
  Image,
19
17
  IconSource,
20
18
  } from '@momo-kits/core';
19
+ import { Text, Colors, Spacing, Radius } from '@momo-kits/v2-core';
21
20
  import MonthList from './MonthList';
22
21
  import HeaderControl from './HeaderControl';
23
22
  import LunarDateConverter from './LunarDateConverter';
@@ -248,50 +247,56 @@ export default class CalendarPro extends Component {
248
247
  onPressBackArrow={this.onPressBackArrow}
249
248
  onPressNextArrow={this.onPressNextArrow}
250
249
  />
251
- <View style={styles.viewDay}>
252
- {[1, 2, 3, 4, 5, 6, 7].map((item) => (
253
- <Text
254
- style={[
255
- styles.textDay,
256
- {
257
- color:
258
- item === 6 || item === 7
259
- ? Colors.red_05
260
- : Colors.black_12,
261
- },
262
- ]}
263
- key={item}>
264
- {Util.mapWeeKDate(item)}
265
- </Text>
266
- ))}
250
+ <View style={styles.blueSeperator} />
251
+ <View>
252
+ <View style={styles.viewDay}>
253
+ {[1, 2, 3, 4, 5, 6, 7].map((item) => (
254
+ <Text.Label2
255
+ style={[
256
+ styles.textDay,
257
+ {
258
+ color:
259
+ item === 6 || item === 7
260
+ ? Colors.red_05
261
+ : Colors.black_12,
262
+ },
263
+ ]}
264
+ key={item}>
265
+ {Util.mapWeeKDate(item)}
266
+ </Text.Label2>
267
+ ))}
268
+ </View>
269
+ <MonthList
270
+ ref="MonthList"
271
+ today={this.today}
272
+ minDate={this.minDate}
273
+ maxDate={this.maxDate}
274
+ startDate={startDate}
275
+ endDate={endDate}
276
+ onChoose={this.onChoose}
277
+ i18n={i18n}
278
+ onScrollCalendar={this.onScrollCalendar}
279
+ isShowLunar={!isOffLunar && showLunar}
280
+ isDoubleDateMode={isDoubleDateMode}
281
+ tabSelected={tabSelected}
282
+ lunarConverter={this.converter}
283
+ holidays={holidays}
284
+ selectedDate={this.selectedDate}
285
+ priceList={priceListFormat}
286
+ labelFrom={labelFrom}
287
+ labelTo={labelTo}
288
+ isHideLabel={isHideLabel}
289
+ />
267
290
  </View>
268
- <MonthList
269
- ref="MonthList"
270
- today={this.today}
271
- minDate={this.minDate}
272
- maxDate={this.maxDate}
273
- startDate={startDate}
274
- endDate={endDate}
275
- onChoose={this.onChoose}
276
- i18n={i18n}
277
- onScrollCalendar={this.onScrollCalendar}
278
- isShowLunar={!isOffLunar && showLunar}
279
- isDoubleDateMode={isDoubleDateMode}
280
- tabSelected={tabSelected}
281
- lunarConverter={this.converter}
282
- holidays={holidays}
283
- selectedDate={this.selectedDate}
284
- priceList={priceListFormat}
285
- labelFrom={labelFrom}
286
- labelTo={labelTo}
287
- isHideLabel={isHideLabel}
288
- />
289
291
  </View>
290
292
  {!isOffLunar && (
291
- <View style={styles.viewLunar}>
293
+ <View style={[styles.viewLunar]}>
292
294
  <TouchableWithoutFeedback
293
295
  onPress={this.toggleLunarDate}>
294
296
  <Image
297
+ tintColor={
298
+ showLunar ? Colors.pink_03 : Colors.black_17
299
+ }
295
300
  source={
296
301
  showLunar
297
302
  ? IconSource.ic_checkbox_checked_24
@@ -300,11 +305,11 @@ export default class CalendarPro extends Component {
300
305
  style={styles.iconSelected}
301
306
  />
302
307
  </TouchableWithoutFeedback>
303
- <Text
308
+ <Text.Description1
304
309
  style={styles.txtLunar}
305
310
  onPress={this.toggleLunarDate}>
306
311
  {SwitchLanguage.showLunar}
307
- </Text>
312
+ </Text.Description1>
308
313
  </View>
309
314
  )}
310
315
 
@@ -322,32 +327,21 @@ export default class CalendarPro extends Component {
322
327
  const labelHighlight = showLunar
323
328
  ? item.highlight || ''
324
329
  : '';
325
- const labelDate =
326
- LocalizedStrings.defaultLanguage === 'en'
327
- ? `${Util.mapMonthShorten(
328
- item.month,
329
- )} ${item.day}`
330
- : `${item.day} tháng ${item.month}`;
330
+ const labelDate = `${item.day}/${item.month}`;
331
331
  return (
332
332
  <View
333
333
  style={styles.row}
334
334
  key={idx.toString()}>
335
- <Text style={styles.txtMonthLunar}>
335
+ <Text.Description2
336
+ status="red"
337
+ style={styles.txtMonthLunar}>
336
338
  {labelDate}
337
- </Text>
338
- <Text style={styles.subTextLunar}>
339
+ </Text.Description2>
340
+ <Text.Description2
341
+ status="hint"
342
+ style={styles.subTextLunar}>
339
343
  {`${labelHoliday} `}
340
- {labelHighlight ? (
341
- <Text
342
- style={{
343
- color: Colors.red_05,
344
- }}>
345
- {labelHighlight}
346
- </Text>
347
- ) : (
348
- ''
349
- )}
350
- </Text>
344
+ </Text.Description2>
351
345
  </View>
352
346
  );
353
347
  })}
@@ -383,7 +377,7 @@ CalendarPro.defaultProps = {
383
377
 
384
378
  const styles = StyleSheet.create({
385
379
  row: { flexDirection: 'row' },
386
- txtMonthLunar: { color: Colors.red_05, width: 80 },
380
+ txtMonthLunar: { color: Colors.red_05, marginRight: Spacing.S },
387
381
  subTextLunar: {
388
382
  // fontSize: 12,
389
383
  color: '#222222',
@@ -396,18 +390,17 @@ const styles = StyleSheet.create({
396
390
  paddingLeft: 6,
397
391
  color: '#222222',
398
392
  // fontSize: 12,
399
- lineHeight: 14,
400
393
  },
401
394
  viewLunar: {
402
395
  flexDirection: 'row',
403
396
  alignItems: 'center',
404
- marginHorizontal: 12,
405
- paddingVertical: 12,
406
- borderBottomWidth: 1,
397
+ marginHorizontal: Spacing.M,
398
+ borderTopWidth: 1,
399
+ paddingTop: Spacing.M,
407
400
  borderStyle: 'solid',
408
401
  borderColor: '#c7c7cd',
409
402
  },
410
- viewDate: { paddingHorizontal: 12 },
403
+ viewDate: {},
411
404
  textDay: {
412
405
  // fontSize: 14,
413
406
  lineHeight: 16,
@@ -418,9 +411,19 @@ const styles = StyleSheet.create({
418
411
  viewDay: {
419
412
  flexDirection: 'row',
420
413
  justifyContent: 'space-between',
421
- paddingHorizontal: 7,
414
+ paddingHorizontal: Spacing.S,
422
415
  paddingTop: 15,
423
416
  paddingBottom: 10,
424
417
  },
425
- container: { flex: 1, backgroundColor: 'white', marginTop: 20 },
418
+ container: {
419
+ flex: 1,
420
+ backgroundColor: 'white',
421
+ marginTop: Spacing.S,
422
+ borderRadius: Radius.XS,
423
+ },
424
+ blueSeperator: {
425
+ height: 1,
426
+ width: '100%',
427
+ backgroundColor: Colors.blue_05,
428
+ },
426
429
  });
package/src/Day/index.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- import { View, TouchableHighlight, Text } from 'react-native';
5
- import { Colors, SwitchLanguage } from '@momo-kits/core';
4
+ import { View, TouchableHighlight } from 'react-native';
5
+ import { Spacing, SwitchLanguage } from '@momo-kits/core';
6
+ import { Colors, Text } from '@momo-kits/v2-core';
6
7
  import style from './style';
7
8
 
8
9
  class Day extends Component {
@@ -144,13 +145,18 @@ class Day extends Component {
144
145
  <TouchableHighlight
145
146
  style={[
146
147
  style.day,
148
+ {
149
+ paddingVertical: !!price
150
+ ? Spacing.XS
151
+ : Spacing.S,
152
+ },
147
153
  (this.isStart || this.isEnd) && style.focused,
148
154
  ]}
149
155
  underlayColor="rgba(255, 255, 255, 0.35)"
150
156
  onPress={this.chooseDay}>
151
157
  <>
152
158
  {this.lunarDate && this.showLunar && (
153
- <Text
159
+ <Text.Label4
154
160
  style={[
155
161
  style.lunarDayText,
156
162
  (this.isLunarHoliday ||
@@ -162,9 +168,9 @@ class Day extends Component {
162
168
  {this.lunarDate.lunarDay === 1
163
169
  ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
164
170
  : this.lunarDate.lunarDay}
165
- </Text>
171
+ </Text.Label4>
166
172
  )}
167
- <Text
173
+ <Text.Label1
168
174
  style={[
169
175
  style.dayText,
170
176
  this.isWeekEnd && style.weekendDay,
@@ -173,13 +179,29 @@ class Day extends Component {
173
179
  style.focusedText,
174
180
  ]}>
175
181
  {text}
176
- </Text>
182
+ </Text.Label1>
183
+ {this.isValid && this.isInScope && !!price ? (
184
+ <Text.Description3
185
+ style={[
186
+ style.price,
187
+ isBestPrice && {
188
+ color: Colors.pink_03,
189
+ },
190
+ (this.isStart || this.isEnd) && {
191
+ color: Colors.black_01,
192
+ },
193
+ ]}>
194
+ {price}
195
+ </Text.Description3>
196
+ ) : (
197
+ <View style={{ height: Spacing.S }} />
198
+ )}
177
199
  </>
178
200
  </TouchableHighlight>
179
201
  ) : (
180
202
  <View style={[style.day]}>
181
203
  {this.lunarDate && this.showLunar && text ? (
182
- <Text
204
+ <Text.Label4
183
205
  style={[
184
206
  style.lunarDayText,
185
207
  style.dayTextDisabled,
@@ -187,27 +209,28 @@ class Day extends Component {
187
209
  {this.lunarDate.lunarDay === 1
188
210
  ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
189
211
  : this.lunarDate.lunarDay}
190
- </Text>
212
+ </Text.Label4>
191
213
  ) : (
192
214
  <View />
193
215
  )}
194
- <Text
216
+ <Text.Label1
195
217
  style={[style.dayText, style.dayTextDisabled]}>
196
218
  {text}
197
- </Text>
219
+ </Text.Label1>
220
+ {this.isValid && this.isInScope && (
221
+ <Text.Description3
222
+ style={[
223
+ style.price,
224
+ isBestPrice && {
225
+ color: Colors.pink_03,
226
+ },
227
+ ]}>
228
+ {'1000'}
229
+ </Text.Description3>
230
+ )}
198
231
  </View>
199
232
  )}
200
233
  </View>
201
-
202
- {this.isValid && this.isInScope && !!price && (
203
- <Text
204
- style={[
205
- style.price,
206
- isBestPrice && { color: Colors.pink_05_b },
207
- ]}>
208
- {price}
209
- </Text>
210
- )}
211
234
  </View>
212
235
  );
213
236
  }
package/src/Day/style.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { Dimensions } from 'react-native';
2
- import { Colors } from '@momo-kits/core';
2
+ import { Spacing } from '@momo-kits/core';
3
+ import { Colors } from '@momo-kits/v2-core';
3
4
 
4
5
  const dayWidth = (Dimensions.get('window').width - 38) / 7;
5
6
  const SCREEN_WIDTH = Dimensions.get('window').width;
6
- const SCREEN_DPI_WIDTH = (SCREEN_WIDTH * Dimensions.get('window').scale);
7
+ const SCREEN_DPI_WIDTH = SCREEN_WIDTH * Dimensions.get('window').scale;
7
8
  const IPHONE_4_5_WIDTH = 640;
8
9
  const dayTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 13 : 15;
9
10
  const lunarTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
@@ -11,7 +12,8 @@ const priceTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
11
12
  const lineHeightDayText = 1.3 * dayTextSize;
12
13
  const lineHeightLunarText = 1.3 * lunarTextSize;
13
14
  const lineHeightPriceText = 1.3 * priceTextSize;
14
- const containerDayHeight = lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
15
+ const containerDayHeight =
16
+ lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
15
17
  const heightDefault = lineHeightDayText + lineHeightLunarText;
16
18
  export default {
17
19
  dayContainer: {
@@ -22,52 +24,46 @@ export default {
22
24
  },
23
25
  day: {
24
26
  width: dayWidth,
25
- paddingVertical: 5,
26
27
  overflow: 'hidden',
27
28
  justifyContent: 'center',
28
29
  alignItems: 'center',
29
30
  borderRadius: 4,
30
- height: heightDefault + 5
31
31
  },
32
32
  dayText: {
33
- fontSize: dayTextSize,
34
33
  textAlign: 'center',
35
- fontWeight: 'bold',
36
- color: '#222222'
37
34
  },
38
35
  lunarDayText: {
39
36
  width: dayWidth,
40
37
  textAlign: 'right',
41
- fontSize: SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10,
42
38
  paddingRight: 5,
43
- color: '#222222'
39
+ position: 'absolute',
40
+ top: Spacing.XXS,
44
41
  },
45
42
  todayText: {
46
- color: 'blue'
43
+ color: 'blue',
47
44
  },
48
45
  weekendDay: {
49
- color: '#e82956'
46
+ color: Colors.red_03,
50
47
  },
51
48
  dayTextDisabled: {
52
- opacity: 0.2
49
+ opacity: 0.2,
53
50
  },
54
51
  focused: {
55
- backgroundColor: Colors.pink_05_b
52
+ backgroundColor: Colors.pink_03,
56
53
  },
57
54
  focusedText: {
58
- color: 'white'
55
+ fontWeight: 'bold',
56
+ color: 'white',
59
57
  },
60
58
  dayStartContainer: {
61
59
  borderTopLeftRadius: 4,
62
60
  borderBottomLeftRadius: 4,
63
61
  backgroundColor: Colors.pink_09,
64
- // height: heightDefault
65
62
  },
66
63
  dayEndContainer: {
67
64
  borderTopRightRadius: 4,
68
65
  borderBottomRightRadius: 4,
69
66
  backgroundColor: Colors.pink_09,
70
- // height: heightDefault
71
67
  },
72
68
  mid: {
73
69
  backgroundColor: Colors.pink_09,
@@ -80,7 +76,7 @@ export default {
80
76
  height: 20,
81
77
  borderRadius: 10,
82
78
  justifyContent: 'center',
83
- alignItems: 'center'
79
+ alignItems: 'center',
84
80
  },
85
81
  returnLabel: {
86
82
  position: 'absolute',
@@ -91,7 +87,7 @@ export default {
91
87
  justifyContent: 'center',
92
88
  alignItems: 'center',
93
89
  top: 0,
94
- right: 0
90
+ right: 0,
95
91
  },
96
92
  containerDayHeight,
97
93
  txtBack: {
@@ -105,7 +101,7 @@ export default {
105
101
  width: 15,
106
102
  height: 15,
107
103
  justifyContent: 'center',
108
- alignItems: 'center'
104
+ alignItems: 'center',
109
105
  },
110
106
  txtGo: {
111
107
  position: 'absolute',
@@ -118,12 +114,10 @@ export default {
118
114
  width: 15,
119
115
  height: 15,
120
116
  justifyContent: 'center',
121
- alignItems: 'center'
117
+ alignItems: 'center',
122
118
  },
123
119
  price: {
124
- fontSize: priceTextSize,
125
- lineHeight: lineHeightPriceText,
126
- color: '#8d919d'
120
+ color: Colors.black_15,
127
121
  },
128
- lineHeightPriceText
122
+ lineHeightPriceText,
129
123
  };
package/src/HeaderControl.js CHANGED
@@ -1,79 +1,85 @@
1
1
  import React, { useState, forwardRef, useImperativeHandle } from 'react';
2
- import {
3
- View, TouchableOpacity, StyleSheet
4
- } from 'react-native';
2
+ import { View, TouchableOpacity, StyleSheet } from 'react-native';
5
3
  import moment from 'moment';
6
- import {
7
- Text, Icon, Colors
8
- } from '@momo-kits/core';
4
+ import { Icon, ScaleSize } from '@momo-kits/core';
5
+ import { Text, Colors, Spacing } from '@momo-kits/v2-core';
6
+
9
7
  import Util from './Util';
10
8
 
11
- const HeaderControl = forwardRef(({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
12
- const [info, setInfo] = useState({
13
- date: moment(selectedDate || new Date())
14
- });
9
+ const HeaderControl = forwardRef(
10
+ ({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
11
+ const [info, setInfo] = useState({
12
+ date: moment(selectedDate || new Date()),
13
+ });
15
14
 
16
- useImperativeHandle(ref, () => ({
17
- onUpdateInfo
18
- }));
15
+ useImperativeHandle(ref, () => ({
16
+ onUpdateInfo,
17
+ }));
19
18
 
20
- const onUpdateInfo = (date) => {
21
- setInfo(date);
22
- };
19
+ const onUpdateInfo = (date) => {
20
+ setInfo(date);
21
+ };
23
22
 
24
- if (info && info.date) {
25
- const headerFormat = `${Util.mapMonth(info.date.month() + 1)}/${info.date.year()}`;
26
- return (
27
- <View style={styles.container}>
28
- <TouchableOpacity
29
- style={styles.btnLeft}
30
- onPress={onPressBackArrow}
31
- >
32
- <Icon name="24_arrow_chevron_left_small" tintColor={Colors.black_17} style={styles.icon} />
33
- </TouchableOpacity>
34
- <Text.H4 style={styles.txtHeader}>
35
- {headerFormat}
36
- </Text.H4>
37
- <TouchableOpacity
38
- style={styles.btnRight}
39
- onPress={onPressNextArrow}
40
- >
41
- <Icon name="24_arrow_chevron_right_small" tintColor={Colors.black_17} style={styles.icon} />
42
- </TouchableOpacity>
43
- </View>
44
- );
45
- }
46
- return <View />;
47
- });
23
+ if (info && info.date) {
24
+ const headerFormat = `${Util.mapMonth(
25
+ info.date.month() + 1,
26
+ )}/${info.date.year()}`;
27
+ return (
28
+ <View style={styles.container}>
29
+ <TouchableOpacity
30
+ style={styles.btnLeft}
31
+ onPress={onPressBackArrow}>
32
+ <Icon
33
+ name="24_arrow_chevron_left_small"
34
+ tintColor={Colors.black_17}
35
+ style={styles.icon}
36
+ />
37
+ </TouchableOpacity>
38
+ <Text.HeaderText2 style={styles.txtHeader}>
39
+ {headerFormat}
40
+ </Text.HeaderText2>
41
+ <TouchableOpacity
42
+ style={styles.btnRight}
43
+ onPress={onPressNextArrow}>
44
+ <Icon
45
+ name="24_arrow_chevron_right_small"
46
+ tintColor={Colors.black_17}
47
+ style={styles.icon}
48
+ />
49
+ </TouchableOpacity>
50
+ </View>
51
+ );
52
+ }
53
+ return <View />;
54
+ },
55
+ );
48
56
 
49
57
  export default HeaderControl;
50
58
  const styles = StyleSheet.create({
51
59
  icon: { width: 24, height: 24, resizeMode: 'contain' },
52
60
  txtHeader: {
53
61
  // fontSize: 15,
54
- lineHeight: 19,
55
62
  fontWeight: 'bold',
56
63
  textAlign: 'center',
57
- color: Colors.black_17
58
64
  },
59
65
  btnRight: {
60
66
  width: 36,
61
67
  height: 36,
62
68
  justifyContent: 'center',
63
- alignItems: 'center'
69
+ alignItems: 'center',
64
70
  },
65
71
  btnLeft: {
66
72
  width: 36,
67
73
  height: 36,
68
74
  justifyContent: 'center',
69
- alignItems: 'center'
75
+ alignItems: 'center',
70
76
  },
71
77
  container: {
72
- height: 36,
78
+ height: ScaleSize(44),
73
79
  flexDirection: 'row',
74
80
  justifyContent: 'space-between',
75
- backgroundColor: '#edf6fe',
81
+ backgroundColor: Colors.blue_10,
76
82
  alignItems: 'center',
77
- borderRadius: 4
83
+ borderRadius: 4,
78
84
  },
79
85
  });
package/src/Month/index.js CHANGED
@@ -1,17 +1,21 @@
1
1
  import React, { PureComponent } from 'react';
2
2
 
3
- import {
4
- View
5
- } from 'react-native';
3
+ import { View, Dimensions } from 'react-native';
6
4
  import moment from 'moment';
7
5
  import Day from '../Day';
6
+ import { Spacing } from '@momo-kits/core';
7
+ import { ScaleSize } from '@momo-kits/v2-core';
8
+
9
+ const { width } = Dimensions.get('window');
8
10
 
9
11
  export default class Month extends PureComponent {
10
12
  constructor(props) {
11
13
  super(props);
12
14
  const { dateList } = props;
13
15
  this.rowArray = new Array(dateList.length / 7).fill('');
14
- this.temp = this.rowArray.map((item, i) => dateList.slice(i * 7, i * 7 + 7));
16
+ this.temp = this.rowArray.map((item, i) =>
17
+ dateList.slice(i * 7, i * 7 + 7),
18
+ );
15
19
  }
16
20
 
17
21
  findHoliday = (date) => {
@@ -19,7 +23,9 @@ export default class Month extends PureComponent {
19
23
  if (date && holidays && holidays.length > 0) {
20
24
  const day = date.date();
21
25
  const month = date.month() + 1;
22
- return holidays.find((item) => item.day === day && item.month === month);
26
+ return holidays.find(
27
+ (item) => item.day === day && item.month === month,
28
+ );
23
29
  }
24
30
  return null;
25
31
  };
@@ -28,7 +34,7 @@ export default class Month extends PureComponent {
28
34
  const holiday = this.findHoliday(date);
29
35
  return {
30
36
  isSolarHoliday: !!(holiday && !holiday.lunar),
31
- isLunarHoliday: !!(holiday && holiday.lunar)
37
+ isLunarHoliday: !!(holiday && holiday.lunar),
32
38
  };
33
39
  };
34
40
 
@@ -36,10 +42,9 @@ export default class Month extends PureComponent {
36
42
  <View
37
43
  style={{
38
44
  flexDirection: 'row',
39
- justifyContent: 'space-between'
45
+ justifyContent: 'space-between',
40
46
  }}
41
- key={`row${index}`}
42
- >
47
+ key={`row${index}`}>
43
48
  {dayList.map((item, i) => {
44
49
  const keyDay = moment(item.date).format('YYYY-MM-DD');
45
50
  const priceInfo = this.props?.priceListDate?.[keyDay];
@@ -56,25 +61,25 @@ export default class Month extends PureComponent {
56
61
  isBestPrice={priceInfo?.isBestPrice}
57
62
  />
58
63
  );
59
- }
60
- )}
64
+ })}
61
65
  </View>
62
66
  );
63
-
64
67
  render() {
65
- const {
66
- month
67
- } = this.props;
68
+ const { month } = this.props;
68
69
  if (month) {
69
70
  return (
70
71
  <View>
71
- <View style={{ paddingHorizontal: 7, paddingVertical: 5 }}>
72
- {this.temp.map((item, i) => this.renderDayRow(item, i)
73
- )}
72
+ <View
73
+ style={{
74
+ paddingHorizontal: Spacing.S,
75
+ paddingVertical: 5,
76
+ width: width - ScaleSize(24),
77
+ }}>
78
+ {this.temp.map((item, i) => this.renderDayRow(item, i))}
74
79
  </View>
75
80
  </View>
76
81
  );
77
82
  }
78
- return (<View />);
83
+ return <View />;
79
84
  }
80
85
  }
package/src/MonthList.js CHANGED
@@ -1,12 +1,13 @@
1
1
  /* eslint-disable react/no-did-update-set-state */
2
2
  import React, { Component } from 'react';
3
- import { FlatList, Dimensions, Platform } from 'react-native';
3
+ import { FlatList, Dimensions, Platform, View } from 'react-native';
4
4
  import moment from 'moment';
5
5
  import Month from './Month';
6
6
  import style from './Day/style';
7
7
  import LunarDateConverter from './LunarDateConverter';
8
+ import { ScaleSize } from '@momo-kits/core';
8
9
 
9
- const ITEM_WIDTH = Dimensions.get('window').width - 24;
10
+ const ITEM_WIDTH = Dimensions.get('window').width - ScaleSize(24);
10
11
  const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
11
12
 
12
13
  const converter = new LunarDateConverter();
package/src/TabHeader.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import React from 'react';
2
- import { TouchableWithoutFeedback, View, Text } from 'react-native';
2
+ import { TouchableWithoutFeedback, View } from 'react-native';
3
3
  import Moment from 'moment';
4
4
  import Util from './Util';
5
+ import { Colors, Text } from '@momo-kits/v2-core';
5
6
 
6
7
  export default class TabHeader extends React.Component {
7
8
  constructor(props) {
8
9
  super(props);
9
10
  this.state = {
10
- active: props.activeTab
11
+ active: props.activeTab,
11
12
  };
12
13
  this.label = props.label;
13
14
  this.defaultDate = props.date ? Moment(props.date) : '';
@@ -23,7 +24,7 @@ export default class TabHeader extends React.Component {
23
24
  updateView = (date, activeTab) => {
24
25
  this.setState({
25
26
  date: date ? Moment(date) : '',
26
- active: activeTab
27
+ active: activeTab,
27
28
  });
28
29
  };
29
30
 
@@ -35,43 +36,50 @@ export default class TabHeader extends React.Component {
35
36
  const { label, disabled } = this.props;
36
37
  const { date, active } = this.state;
37
38
  const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
38
- const formattedDateFromDefault = this.defaultDate ? this.defaultDate.format('DD/MM/YYYY') : '';
39
- const dayOfWeekFromState = date ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -` : '';
40
- const dayOfWeekFromDefault = this.defaultDate ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -` : '';
39
+ const formattedDateFromDefault = this.defaultDate
40
+ ? this.defaultDate.format('DD/MM/YYYY')
41
+ : '';
42
+ const dayOfWeekFromState = date
43
+ ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -`
44
+ : '';
45
+ const dayOfWeekFromDefault = this.defaultDate
46
+ ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -`
47
+ : '';
41
48
 
42
49
  return (
43
- <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
44
- <View style={{
45
- flex: 1,
46
- justifyContent: 'center',
47
- alignItems: 'center',
48
- backgroundColor: active ? 'white' : '#eeeeef',
49
- borderRadius: 8
50
- }}
51
- >
52
- <Text style={{
53
- fontSize: 12,
54
- // lineHeight: 14,
55
- color: active ? '#222222' : '#8d919d',
56
- fontWeight: 'bold'
57
- }}
58
- >
50
+ <TouchableWithoutFeedback
51
+ disabled={disabled}
52
+ onPress={this.onChangeTab}>
53
+ <View
54
+ style={{
55
+ flex: 1,
56
+ backgroundColor: Colors.white,
57
+ }}>
58
+ <Text.Description1
59
+ status="hint"
60
+ style={{
61
+ fontSize: 12,
62
+ lineHeight: 16,
63
+ }}>
59
64
  {label}
60
-
61
- </Text>
62
- <Text style={{
63
- marginTop: 3,
64
- fontSize: 12,
65
- // lineHeight: 14,
66
- color: '#8d919d'
67
- }}
68
- >
69
- <Text style={{ color: active ? '#b0006d' : '#8d919d', fontWeight: 'bold' }}>
70
- {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
71
-
72
- </Text>
73
- {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
74
- </Text>
65
+ </Text.Description1>
66
+ <Text.Description1
67
+ weight={active ? 'bold' : 'regular'}
68
+ style={{
69
+ marginTop: 3,
70
+ fontSize: 14,
71
+ }}>
72
+ <Text.Description1 weight={active ? 'bold' : 'regular'}>
73
+ {`${
74
+ dayOfWeekFromState ||
75
+ dayOfWeekFromDefault ||
76
+ '--'
77
+ } `}
78
+ </Text.Description1>
79
+ {formattedDateFromState ||
80
+ formattedDateFromDefault ||
81
+ '--/--/----'}
82
+ </Text.Description1>
75
83
  </View>
76
84
  </TouchableWithoutFeedback>
77
85
  );
package/src/calendarPicker/Day.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { Component } from 'react';
2
2
  import { TouchableOpacity, View } from 'react-native';
3
3
  import PropTypes from 'prop-types';
4
- import { Text } from '@momo-kits/core';
4
+ import { Text } from '@momo-kits/v2-core';
5
5
  import styles from './styles';
6
6
 
7
7
  export default class Day extends Component {
@@ -115,13 +115,13 @@ export default class Day extends Component {
115
115
  <View style={this.styleDouble} />
116
116
  {this.disableTouch || otherMonth ? (
117
117
  <View style={styles.dayButton}>
118
- <Text.Title1
118
+ <Text.Label1
119
119
  style={[
120
120
  styles.dayLabel,
121
121
  { color: this.colorTextDisable },
122
122
  ]}>
123
123
  {day}
124
- </Text.Title1>
124
+ </Text.Label1>
125
125
  </View>
126
126
  ) : (
127
127
  <View
@@ -132,13 +132,13 @@ export default class Day extends Component {
132
132
  <TouchableOpacity
133
133
  style={styles.dayButton}
134
134
  onPress={() => onDayChange(day, month, year)}>
135
- <Text.Title1
135
+ <Text.Label1
136
136
  style={[
137
137
  styles.dayLabel,
138
138
  { color: this.colorText },
139
139
  ]}>
140
140
  {day}
141
- </Text.Title1>
141
+ </Text.Label1>
142
142
  </TouchableOpacity>
143
143
  </View>
144
144
  )}