@momo-kits/calendar 0.0.56-alpha.3 → 0.0.56-alpha.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 (11) hide show
  1. package/package.json +4 -6
  2. package/src/Calendar.js +4 -32
  3. package/src/CalendarPro.js +36 -28
  4. package/src/Day/index.js +20 -63
  5. package/src/Day/style.js +26 -22
  6. package/src/HeaderControl.js +4 -6
  7. package/src/Month/index.js +19 -25
  8. package/src/MonthList.js +2 -3
  9. package/src/TabHeader.js +15 -9
  10. package/src/calendarPicker/Day.js +5 -5
  11. package/src/calendarPicker/WeekDaysLabels.js +2 -2
package/package.json CHANGED
@@ -1,20 +1,18 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.56-alpha.3",
3
+ "version": "0.0.56-alpha.4",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
7
7
  "@momo-kits/date-picker": "latest",
8
- "moment": "^2.24.0",
9
- "@momo-platform/versions": "4.0.2"
8
+ "moment": "^2.24.0"
10
9
  },
11
10
  "peerDependencies": {
12
11
  "react": "16.9.0",
13
12
  "react-native": ">=0.55",
14
13
  "prop-types": "^15.7.2",
15
- "@momo-kits/core": ">=0.0.5-beta",
16
- "@momo-kits/v2-core": "^0.0.51-beta.5"
14
+ "@momo-kits/core": ">=0.0.5-beta"
17
15
  },
18
16
  "devDependencies": {},
19
17
  "license": "MoMo"
20
- }
18
+ }
package/src/Calendar.js CHANGED
@@ -1,21 +1,8 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import React, { Component } from 'react';
3
- import {
4
- View,
5
- ScrollView,
6
- Platform,
7
- StyleSheet,
8
- Dimensions,
9
- } from 'react-native';
3
+ import { View, ScrollView, Platform, StyleSheet } from 'react-native';
10
4
  import moment from 'moment';
11
- import {
12
- Text,
13
- SwitchLanguage,
14
- Colors,
15
- Spacing,
16
- Radius,
17
- ScaleSize,
18
- } from '@momo-kits/core';
5
+ import { Text, SwitchLanguage, Colors, Spacing, Radius } from '@momo-kits/core';
19
6
  import Switch from '@momo-kits/switch';
20
7
  import CalendarPro from './CalendarPro';
21
8
  import TabHeader from './TabHeader';
@@ -429,19 +416,10 @@ class Calendar extends Component {
429
416
  maxDate,
430
417
  doubleDate,
431
418
  isHideHeaderPanel,
432
- style,
433
419
  } = this.props;
434
420
  const { isDoubleDateMode } = this.state;
435
- const { width } = Dimensions.get('window');
436
421
  return (
437
- <ScrollView
438
- style={[
439
- styles.scrollView,
440
- {
441
- width: width - ScaleSize(24),
442
- },
443
- style,
444
- ]}>
422
+ <ScrollView style={{ flex: 1, backgroundColor: 'transparent' }}>
445
423
  <View
446
424
  style={{
447
425
  backgroundColor: Colors.black_01,
@@ -451,7 +429,6 @@ class Calendar extends Component {
451
429
  {!isHideHeaderPanel && this.renderHeaderPanel()}
452
430
  </View>
453
431
  <CalendarPro
454
- priceList={priceList}
455
432
  ref={this.calendarPicker}
456
433
  startDate={doubleDate?.first}
457
434
  endDate={doubleDate?.second}
@@ -460,6 +437,7 @@ class Calendar extends Component {
460
437
  selectedDate={this.selectedDate}
461
438
  isShowLunar={isShowLunar}
462
439
  onCallbackCalendar={onCallbackCalendar}
440
+ priceList={priceList}
463
441
  labelFrom={labelFrom}
464
442
  labelTo={labelTo}
465
443
  isHideLabel={isHideLabel}
@@ -503,7 +481,6 @@ Calendar.propTypes = {
503
481
  PropTypes.string,
504
482
  PropTypes.instanceOf(Date),
505
483
  ]),
506
- style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
507
484
  };
508
485
 
509
486
  Calendar.defaultProps = {
@@ -544,9 +521,4 @@ const styles = StyleSheet.create({
544
521
  paddingHorizontal: 12,
545
522
  paddingVertical: 8,
546
523
  },
547
- scrollView: {
548
- flex: 1,
549
- backgroundColor: 'transparent',
550
- alignSelf: 'center',
551
- },
552
524
  });
package/src/CalendarPro.js CHANGED
@@ -11,12 +11,15 @@ import {
11
11
  } from 'react-native';
12
12
  import Moment from 'moment';
13
13
  import {
14
+ Text,
14
15
  SwitchLanguage,
15
16
  LocalizedStrings,
17
+ Colors,
16
18
  Image,
17
19
  IconSource,
20
+ Spacing,
21
+ Radius,
18
22
  } from '@momo-kits/core';
19
- import { Text, Colors, Spacing, Radius } from '@momo-kits/v2-core';
20
23
  import MonthList from './MonthList';
21
24
  import HeaderControl from './HeaderControl';
22
25
  import LunarDateConverter from './LunarDateConverter';
@@ -248,10 +251,10 @@ export default class CalendarPro extends Component {
248
251
  onPressNextArrow={this.onPressNextArrow}
249
252
  />
250
253
  <View style={styles.blueSeperator} />
251
- <View>
254
+ <View style={{ paddingHorizontal: Spacing.M }}>
252
255
  <View style={styles.viewDay}>
253
256
  {[1, 2, 3, 4, 5, 6, 7].map((item) => (
254
- <Text.Label2
257
+ <Text
255
258
  style={[
256
259
  styles.textDay,
257
260
  {
@@ -263,7 +266,7 @@ export default class CalendarPro extends Component {
263
266
  ]}
264
267
  key={item}>
265
268
  {Util.mapWeeKDate(item)}
266
- </Text.Label2>
269
+ </Text>
267
270
  ))}
268
271
  </View>
269
272
  <MonthList
@@ -290,13 +293,10 @@ export default class CalendarPro extends Component {
290
293
  </View>
291
294
  </View>
292
295
  {!isOffLunar && (
293
- <View style={[styles.viewLunar]}>
296
+ <View style={styles.viewLunar}>
294
297
  <TouchableWithoutFeedback
295
298
  onPress={this.toggleLunarDate}>
296
299
  <Image
297
- tintColor={
298
- showLunar ? Colors.pink_03 : Colors.black_17
299
- }
300
300
  source={
301
301
  showLunar
302
302
  ? IconSource.ic_checkbox_checked_24
@@ -305,11 +305,11 @@ export default class CalendarPro extends Component {
305
305
  style={styles.iconSelected}
306
306
  />
307
307
  </TouchableWithoutFeedback>
308
- <Text.Description1
308
+ <Text.SubTitle
309
309
  style={styles.txtLunar}
310
310
  onPress={this.toggleLunarDate}>
311
311
  {SwitchLanguage.showLunar}
312
- </Text.Description1>
312
+ </Text.SubTitle>
313
313
  </View>
314
314
  )}
315
315
 
@@ -327,27 +327,34 @@ export default class CalendarPro extends Component {
327
327
  const labelHighlight = showLunar
328
328
  ? item.highlight || ''
329
329
  : '';
330
- const labelDate = `${
331
- item.day > 9 ? item.day : `0${item.day}`
332
- }/${
333
- item.month > 9
334
- ? item.month
335
- : `0${item.month}`
336
- }`;
330
+ const labelDate =
331
+ LocalizedStrings.defaultLanguage === 'en'
332
+ ? `${Util.mapMonthShorten(
333
+ item.month,
334
+ )} ${item.day}`
335
+ : `${item.day} tháng ${item.month}`;
337
336
  return (
338
337
  <View
339
338
  style={styles.row}
340
339
  key={idx.toString()}>
341
- <Text.Description2
342
- status="red"
340
+ <Text.SubTitle
343
341
  style={styles.txtMonthLunar}>
344
342
  {labelDate}
345
- </Text.Description2>
346
- <Text.Description2
347
- status="hint"
343
+ </Text.SubTitle>
344
+ <Text.SubTitle
348
345
  style={styles.subTextLunar}>
349
346
  {`${labelHoliday} `}
350
- </Text.Description2>
347
+ {labelHighlight ? (
348
+ <Text
349
+ style={{
350
+ color: Colors.red_05,
351
+ }}>
352
+ {labelHighlight}
353
+ </Text>
354
+ ) : (
355
+ ''
356
+ )}
357
+ </Text.SubTitle>
351
358
  </View>
352
359
  );
353
360
  })}
@@ -383,7 +390,7 @@ CalendarPro.defaultProps = {
383
390
 
384
391
  const styles = StyleSheet.create({
385
392
  row: { flexDirection: 'row' },
386
- txtMonthLunar: { color: Colors.red_05, marginRight: Spacing.S },
393
+ txtMonthLunar: { color: Colors.red_05, width: 80 },
387
394
  subTextLunar: {
388
395
  // fontSize: 12,
389
396
  color: '#222222',
@@ -396,15 +403,16 @@ const styles = StyleSheet.create({
396
403
  paddingLeft: 6,
397
404
  color: '#222222',
398
405
  // fontSize: 12,
406
+ lineHeight: 14,
399
407
  },
400
408
  viewLunar: {
401
409
  flexDirection: 'row',
402
410
  alignItems: 'center',
403
- marginHorizontal: Spacing.M,
404
- borderTopWidth: 1,
405
- paddingTop: Spacing.M,
411
+ marginHorizontal: 12,
412
+ paddingVertical: 12,
413
+ borderBottomWidth: 1,
406
414
  borderStyle: 'solid',
407
- borderColor: Colors.black_04,
415
+ borderColor: '#c7c7cd',
408
416
  },
409
417
  viewDate: {},
410
418
  textDay: {
package/src/Day/index.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import React, { Component } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- import { View, TouchableHighlight } from 'react-native';
5
- import { Spacing, SwitchLanguage } from '@momo-kits/core';
6
- import { Colors, Text } from '@momo-kits/v2-core';
4
+ import { View, TouchableHighlight, Text } from 'react-native';
5
+ import { Colors, SwitchLanguage } from '@momo-kits/core';
7
6
  import style from './style';
8
7
 
9
8
  class Day extends Component {
@@ -145,18 +144,13 @@ class Day extends Component {
145
144
  <TouchableHighlight
146
145
  style={[
147
146
  style.day,
148
- {
149
- paddingVertical: !!price
150
- ? Spacing.XS
151
- : Spacing.S,
152
- },
153
147
  (this.isStart || this.isEnd) && style.focused,
154
148
  ]}
155
149
  underlayColor="rgba(255, 255, 255, 0.35)"
156
150
  onPress={this.chooseDay}>
157
151
  <>
158
152
  {this.lunarDate && this.showLunar && (
159
- <Text.Label4
153
+ <Text
160
154
  style={[
161
155
  style.lunarDayText,
162
156
  (this.isLunarHoliday ||
@@ -168,50 +162,24 @@ class Day extends Component {
168
162
  {this.lunarDate.lunarDay === 1
169
163
  ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
170
164
  : this.lunarDate.lunarDay}
171
- </Text.Label4>
165
+ </Text>
172
166
  )}
173
- <Text.Label1
167
+ <Text
174
168
  style={[
175
169
  style.dayText,
176
- { paddingTop: !!price ? 4 : 0 },
177
170
  this.isWeekEnd && style.weekendDay,
178
171
  this.isSolarHoliday && style.weekendDay,
179
172
  (this.isStart || this.isEnd) &&
180
173
  style.focusedText,
181
174
  ]}>
182
175
  {text}
183
- </Text.Label1>
184
- {!!price ? (
185
- <Text.Description3
186
- style={[
187
- this.isValid && this.isInScope
188
- ? style.price
189
- : style.dayTextDisabled,
190
- isBestPrice && {
191
- color: Colors.pink_03,
192
- },
193
- (this.isStart || this.isEnd) && {
194
- color: Colors.black_01,
195
- },
196
- ]}>
197
- {price}
198
- </Text.Description3>
199
- ) : (
200
- <View
201
- style={{
202
- paddingBottom: this.props
203
- .havePriceList
204
- ? Spacing.S
205
- : 0,
206
- }}
207
- />
208
- )}
176
+ </Text>
209
177
  </>
210
178
  </TouchableHighlight>
211
179
  ) : (
212
180
  <View style={[style.day]}>
213
181
  {this.lunarDate && this.showLunar && text ? (
214
- <Text.Label4
182
+ <Text
215
183
  style={[
216
184
  style.lunarDayText,
217
185
  style.dayTextDisabled,
@@ -219,38 +187,27 @@ class Day extends Component {
219
187
  {this.lunarDate.lunarDay === 1
220
188
  ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
221
189
  : this.lunarDate.lunarDay}
222
- </Text.Label4>
190
+ </Text>
223
191
  ) : (
224
192
  <View />
225
193
  )}
226
- <Text.Label1
194
+ <Text
227
195
  style={[style.dayText, style.dayTextDisabled]}>
228
196
  {text}
229
- </Text.Label1>
230
- {!!price ? (
231
- <Text.Description3
232
- style={[
233
- this.isValid && this.isInScope
234
- ? style.price
235
- : style.dayTextDisabled,
236
- isBestPrice && {
237
- color: Colors.pink_03,
238
- },
239
- ]}>
240
- {price}
241
- </Text.Description3>
242
- ) : (
243
- <View
244
- style={{
245
- paddingBottom: this.props.havePriceList
246
- ? Spacing.S
247
- : 0,
248
- }}
249
- />
250
- )}
197
+ </Text>
251
198
  </View>
252
199
  )}
253
200
  </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
+ )}
254
211
  </View>
255
212
  );
256
213
  }
package/src/Day/style.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { Dimensions } from 'react-native';
2
- import { Spacing } from '@momo-kits/core';
3
- import { Colors } from '@momo-kits/v2-core';
2
+ import { Colors } from '@momo-kits/core';
4
3
 
5
4
  const dayWidth = (Dimensions.get('window').width - 38) / 7;
6
5
  const SCREEN_WIDTH = Dimensions.get('window').width;
7
- const SCREEN_DPI_WIDTH = SCREEN_WIDTH * Dimensions.get('window').scale;
6
+ const SCREEN_DPI_WIDTH = (SCREEN_WIDTH * Dimensions.get('window').scale);
8
7
  const IPHONE_4_5_WIDTH = 640;
9
8
  const dayTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 13 : 15;
10
9
  const lunarTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
@@ -12,8 +11,7 @@ const priceTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
12
11
  const lineHeightDayText = 1.3 * dayTextSize;
13
12
  const lineHeightLunarText = 1.3 * lunarTextSize;
14
13
  const lineHeightPriceText = 1.3 * priceTextSize;
15
- const containerDayHeight =
16
- lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
14
+ const containerDayHeight = lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
17
15
  const heightDefault = lineHeightDayText + lineHeightLunarText;
18
16
  export default {
19
17
  dayContainer: {
@@ -24,47 +22,52 @@ export default {
24
22
  },
25
23
  day: {
26
24
  width: dayWidth,
25
+ paddingVertical: 5,
27
26
  overflow: 'hidden',
28
27
  justifyContent: 'center',
29
28
  alignItems: 'center',
30
29
  borderRadius: 4,
30
+ height: heightDefault + 5
31
31
  },
32
32
  dayText: {
33
+ fontSize: dayTextSize,
33
34
  textAlign: 'center',
35
+ fontWeight: 'bold',
36
+ color: '#222222'
34
37
  },
35
38
  lunarDayText: {
36
39
  width: dayWidth,
37
40
  textAlign: 'right',
38
- paddingRight: Spacing.XS,
39
- position: 'absolute',
40
- top: Spacing.XXS,
41
+ fontSize: SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10,
42
+ paddingRight: 5,
43
+ color: '#222222'
41
44
  },
42
45
  todayText: {
43
- color: 'blue',
46
+ color: 'blue'
44
47
  },
45
48
  weekendDay: {
46
- color: Colors.red_03,
49
+ color: '#e82956'
47
50
  },
48
51
  dayTextDisabled: {
49
- opacity: 0.4,
52
+ opacity: 0.2
50
53
  },
51
-
52
54
  focused: {
53
- backgroundColor: Colors.pink_03,
55
+ backgroundColor: Colors.pink_05_b
54
56
  },
55
57
  focusedText: {
56
- fontWeight: 'bold',
57
- color: 'white',
58
+ color: 'white'
58
59
  },
59
60
  dayStartContainer: {
60
61
  borderTopLeftRadius: 4,
61
62
  borderBottomLeftRadius: 4,
62
63
  backgroundColor: Colors.pink_09,
64
+ // height: heightDefault
63
65
  },
64
66
  dayEndContainer: {
65
67
  borderTopRightRadius: 4,
66
68
  borderBottomRightRadius: 4,
67
69
  backgroundColor: Colors.pink_09,
70
+ // height: heightDefault
68
71
  },
69
72
  mid: {
70
73
  backgroundColor: Colors.pink_09,
@@ -77,7 +80,7 @@ export default {
77
80
  height: 20,
78
81
  borderRadius: 10,
79
82
  justifyContent: 'center',
80
- alignItems: 'center',
83
+ alignItems: 'center'
81
84
  },
82
85
  returnLabel: {
83
86
  position: 'absolute',
@@ -88,7 +91,7 @@ export default {
88
91
  justifyContent: 'center',
89
92
  alignItems: 'center',
90
93
  top: 0,
91
- right: 0,
94
+ right: 0
92
95
  },
93
96
  containerDayHeight,
94
97
  txtBack: {
@@ -102,7 +105,7 @@ export default {
102
105
  width: 15,
103
106
  height: 15,
104
107
  justifyContent: 'center',
105
- alignItems: 'center',
108
+ alignItems: 'center'
106
109
  },
107
110
  txtGo: {
108
111
  position: 'absolute',
@@ -115,11 +118,12 @@ export default {
115
118
  width: 15,
116
119
  height: 15,
117
120
  justifyContent: 'center',
118
- alignItems: 'center',
121
+ alignItems: 'center'
119
122
  },
120
123
  price: {
121
- color: Colors.black_15,
122
- marginTop: -4,
124
+ fontSize: priceTextSize,
125
+ lineHeight: lineHeightPriceText,
126
+ color: '#8d919d'
123
127
  },
124
- lineHeightPriceText,
128
+ lineHeightPriceText
125
129
  };
package/src/HeaderControl.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import React, { useState, forwardRef, useImperativeHandle } from 'react';
2
2
  import { View, TouchableOpacity, StyleSheet } from 'react-native';
3
3
  import moment from 'moment';
4
- import { Icon, ScaleSize } from '@momo-kits/core';
5
- import { Text, Colors, Spacing } from '@momo-kits/v2-core';
6
-
4
+ import { Text, Icon, Colors, Spacing, ScaleSize } from '@momo-kits/core';
7
5
  import Util from './Util';
8
6
 
9
7
  const HeaderControl = forwardRef(
@@ -35,9 +33,7 @@ const HeaderControl = forwardRef(
35
33
  style={styles.icon}
36
34
  />
37
35
  </TouchableOpacity>
38
- <Text.HeaderText2 style={styles.txtHeader}>
39
- {headerFormat}
40
- </Text.HeaderText2>
36
+ <Text.H4 style={styles.txtHeader}>{headerFormat}</Text.H4>
41
37
  <TouchableOpacity
42
38
  style={styles.btnRight}
43
39
  onPress={onPressNextArrow}>
@@ -59,8 +55,10 @@ const styles = StyleSheet.create({
59
55
  icon: { width: 24, height: 24, resizeMode: 'contain' },
60
56
  txtHeader: {
61
57
  // fontSize: 15,
58
+ lineHeight: 19,
62
59
  fontWeight: 'bold',
63
60
  textAlign: 'center',
61
+ color: Colors.black_17,
64
62
  },
65
63
  btnRight: {
66
64
  width: 36,
package/src/Month/index.js CHANGED
@@ -1,21 +1,17 @@
1
1
  import React, { PureComponent } from 'react';
2
2
 
3
- import { View, Dimensions } from 'react-native';
3
+ import {
4
+ View
5
+ } from 'react-native';
4
6
  import moment from 'moment';
5
7
  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');
10
8
 
11
9
  export default class Month extends PureComponent {
12
10
  constructor(props) {
13
11
  super(props);
14
12
  const { dateList } = props;
15
13
  this.rowArray = new Array(dateList.length / 7).fill('');
16
- this.temp = this.rowArray.map((item, i) =>
17
- dateList.slice(i * 7, i * 7 + 7),
18
- );
14
+ this.temp = this.rowArray.map((item, i) => dateList.slice(i * 7, i * 7 + 7));
19
15
  }
20
16
 
21
17
  findHoliday = (date) => {
@@ -23,9 +19,7 @@ export default class Month extends PureComponent {
23
19
  if (date && holidays && holidays.length > 0) {
24
20
  const day = date.date();
25
21
  const month = date.month() + 1;
26
- return holidays.find(
27
- (item) => item.day === day && item.month === month,
28
- );
22
+ return holidays.find((item) => item.day === day && item.month === month);
29
23
  }
30
24
  return null;
31
25
  };
@@ -34,7 +28,7 @@ export default class Month extends PureComponent {
34
28
  const holiday = this.findHoliday(date);
35
29
  return {
36
30
  isSolarHoliday: !!(holiday && !holiday.lunar),
37
- isLunarHoliday: !!(holiday && holiday.lunar),
31
+ isLunarHoliday: !!(holiday && holiday.lunar)
38
32
  };
39
33
  };
40
34
 
@@ -42,9 +36,10 @@ export default class Month extends PureComponent {
42
36
  <View
43
37
  style={{
44
38
  flexDirection: 'row',
45
- justifyContent: 'space-between',
39
+ justifyContent: 'space-between'
46
40
  }}
47
- key={`row${index}`}>
41
+ key={`row${index}`}
42
+ >
48
43
  {dayList.map((item, i) => {
49
44
  const keyDay = moment(item.date).format('YYYY-MM-DD');
50
45
  const priceInfo = this.props?.priceListDate?.[keyDay];
@@ -53,7 +48,6 @@ export default class Month extends PureComponent {
53
48
  {...this.props}
54
49
  {...this.checkHoliday(item.date)}
55
50
  date={item.date}
56
- havePriceList={!!this.props.priceListDate}
57
51
  lunarDate={item.lunarDate}
58
52
  empty={item.empty}
59
53
  key={`day${i.toString()}`}
@@ -62,25 +56,25 @@ export default class Month extends PureComponent {
62
56
  isBestPrice={priceInfo?.isBestPrice}
63
57
  />
64
58
  );
65
- })}
59
+ }
60
+ )}
66
61
  </View>
67
62
  );
63
+
68
64
  render() {
69
- const { month } = this.props;
65
+ const {
66
+ month
67
+ } = this.props;
70
68
  if (month) {
71
69
  return (
72
70
  <View>
73
- <View
74
- style={{
75
- paddingHorizontal: Spacing.S,
76
- paddingVertical: 5,
77
- width: width - ScaleSize(24),
78
- }}>
79
- {this.temp.map((item, i) => this.renderDayRow(item, i))}
71
+ <View style={{ paddingHorizontal: 7, paddingVertical: 5 }}>
72
+ {this.temp.map((item, i) => this.renderDayRow(item, i)
73
+ )}
80
74
  </View>
81
75
  </View>
82
76
  );
83
77
  }
84
- return <View />;
78
+ return (<View />);
85
79
  }
86
80
  }
package/src/MonthList.js CHANGED
@@ -1,13 +1,12 @@
1
1
  /* eslint-disable react/no-did-update-set-state */
2
2
  import React, { Component } from 'react';
3
- import { FlatList, Dimensions, Platform, View } from 'react-native';
3
+ import { FlatList, Dimensions, Platform } 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';
9
8
 
10
- const ITEM_WIDTH = Dimensions.get('window').width - ScaleSize(24);
9
+ const ITEM_WIDTH = Dimensions.get('window').width - 24;
11
10
  const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
12
11
 
13
12
  const converter = new LunarDateConverter();
package/src/TabHeader.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
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
+ import { Colors, Text } from '@momo-kits/core';
6
6
 
7
7
  export default class TabHeader extends React.Component {
8
8
  constructor(props) {
@@ -55,30 +55,36 @@ export default class TabHeader extends React.Component {
55
55
  flex: 1,
56
56
  backgroundColor: Colors.white,
57
57
  }}>
58
- <Text.Description1
59
- status="hint"
58
+ <Text
60
59
  style={{
61
60
  fontSize: 12,
62
61
  lineHeight: 16,
62
+ color: Colors.black_09,
63
63
  }}>
64
64
  {label}
65
- </Text.Description1>
66
- <Text.Description1
67
- weight={active ? 'bold' : 'regular'}
65
+ </Text>
66
+ <Text
67
+ weight={active ? 'semibold' : 'regular'}
68
68
  style={{
69
69
  marginTop: 3,
70
+ fontSize: 14,
71
+ color: Colors.black_17,
70
72
  }}>
71
- <Text.Description1 weight={active ? 'bold' : 'regular'}>
73
+ <Text
74
+ weight={active ? 'semibold' : 'regular'}
75
+ style={{
76
+ color: Colors.black_17,
77
+ }}>
72
78
  {`${
73
79
  dayOfWeekFromState ||
74
80
  dayOfWeekFromDefault ||
75
81
  '--'
76
82
  } `}
77
- </Text.Description1>
83
+ </Text>
78
84
  {formattedDateFromState ||
79
85
  formattedDateFromDefault ||
80
86
  '--/--/----'}
81
- </Text.Description1>
87
+ </Text>
82
88
  </View>
83
89
  </TouchableWithoutFeedback>
84
90
  );
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/v2-core';
4
+ import { Text } from '@momo-kits/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.Label1
118
+ <Text.Title
119
119
  style={[
120
120
  styles.dayLabel,
121
121
  { color: this.colorTextDisable },
122
122
  ]}>
123
123
  {day}
124
- </Text.Label1>
124
+ </Text.Title>
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.Label1
135
+ <Text.Title
136
136
  style={[
137
137
  styles.dayLabel,
138
138
  { color: this.colorText },
139
139
  ]}>
140
140
  {day}
141
- </Text.Label1>
141
+ </Text.Title>
142
142
  </TouchableOpacity>
143
143
  </View>
144
144
  )}
package/src/calendarPicker/WeekDaysLabels.js CHANGED
@@ -9,11 +9,11 @@ const colorDay = '#9199a2';
9
9
  const WeekDaysLabels = () => (
10
10
  <View style={styles.dayLabelsWrapper}>
11
11
  {WEEKDAYS.map((day, key) => (
12
- <Text.Title1
12
+ <Text.Title
13
13
  key={key.toString()}
14
14
  style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}>
15
15
  {day}
16
- </Text.Title1>
16
+ </Text.Title>
17
17
  ))}
18
18
  </View>
19
19
  );