@momo-kits/calendar 0.0.55-beta.2 → 0.0.55-beta.21

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/package.json +1 -1
  2. package/src/Calendar.js +10 -4
  3. package/src/CalendarPro.js +55 -45
  4. package/src/HeaderControl.js +3 -4
  5. package/src/calendarPicker/Day.js +4 -4
  6. package/src/calendarPicker/WeekDaysLabels.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.55-beta.2",
3
+ "version": "0.0.55-beta.21",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
package/src/Calendar.js CHANGED
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
2
2
  import React, { Component } from 'react';
3
3
  import { View, ScrollView, Platform, StyleSheet } from 'react-native';
4
4
  import moment from 'moment';
5
- import { Text, SwitchLanguage, Colors, Spacing } from '@momo-kits/core';
5
+ import { Text, SwitchLanguage, Colors, Spacing, Radius } from '@momo-kits/core';
6
6
  import Switch from '@momo-kits/switch';
7
7
  import CalendarPro from './CalendarPro';
8
8
  import TabHeader from './TabHeader';
@@ -419,9 +419,15 @@ class Calendar extends Component {
419
419
  } = this.props;
420
420
  const { isDoubleDateMode } = this.state;
421
421
  return (
422
- <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
423
- {!isHiddenSwitch && this.renderSwitchReturnSelection()}
424
- {!isHideHeaderPanel && this.renderHeaderPanel()}
422
+ <ScrollView style={{ flex: 1, backgroundColor: 'transparent' }}>
423
+ <View
424
+ style={{
425
+ backgroundColor: Colors.black_01,
426
+ borderRadius: Radius.XS,
427
+ }}>
428
+ {!isHiddenSwitch && this.renderSwitchReturnSelection()}
429
+ {!isHideHeaderPanel && this.renderHeaderPanel()}
430
+ </View>
425
431
  <CalendarPro
426
432
  ref={this.calendarPicker}
427
433
  startDate={doubleDate?.first}
package/src/CalendarPro.js CHANGED
@@ -18,6 +18,7 @@ import {
18
18
  Image,
19
19
  IconSource,
20
20
  Spacing,
21
+ Radius,
21
22
  } from '@momo-kits/core';
22
23
  import MonthList from './MonthList';
23
24
  import HeaderControl from './HeaderControl';
@@ -250,44 +251,46 @@ export default class CalendarPro extends Component {
250
251
  onPressNextArrow={this.onPressNextArrow}
251
252
  />
252
253
  <View style={styles.blueSeperator} />
253
- <View style={styles.viewDay}>
254
- {[1, 2, 3, 4, 5, 6, 7].map((item) => (
255
- <Text
256
- style={[
257
- styles.textDay,
258
- {
259
- color:
260
- item === 6 || item === 7
261
- ? Colors.red_05
262
- : Colors.black_12,
263
- },
264
- ]}
265
- key={item}>
266
- {Util.mapWeeKDate(item)}
267
- </Text>
268
- ))}
254
+ <View style={{ paddingHorizontal: Spacing.M }}>
255
+ <View style={styles.viewDay}>
256
+ {[1, 2, 3, 4, 5, 6, 7].map((item) => (
257
+ <Text
258
+ style={[
259
+ styles.textDay,
260
+ {
261
+ color:
262
+ item === 6 || item === 7
263
+ ? Colors.red_05
264
+ : Colors.black_12,
265
+ },
266
+ ]}
267
+ key={item}>
268
+ {Util.mapWeeKDate(item)}
269
+ </Text>
270
+ ))}
271
+ </View>
272
+ <MonthList
273
+ ref="MonthList"
274
+ today={this.today}
275
+ minDate={this.minDate}
276
+ maxDate={this.maxDate}
277
+ startDate={startDate}
278
+ endDate={endDate}
279
+ onChoose={this.onChoose}
280
+ i18n={i18n}
281
+ onScrollCalendar={this.onScrollCalendar}
282
+ isShowLunar={!isOffLunar && showLunar}
283
+ isDoubleDateMode={isDoubleDateMode}
284
+ tabSelected={tabSelected}
285
+ lunarConverter={this.converter}
286
+ holidays={holidays}
287
+ selectedDate={this.selectedDate}
288
+ priceList={priceListFormat}
289
+ labelFrom={labelFrom}
290
+ labelTo={labelTo}
291
+ isHideLabel={isHideLabel}
292
+ />
269
293
  </View>
270
- <MonthList
271
- ref="MonthList"
272
- today={this.today}
273
- minDate={this.minDate}
274
- maxDate={this.maxDate}
275
- startDate={startDate}
276
- endDate={endDate}
277
- onChoose={this.onChoose}
278
- i18n={i18n}
279
- onScrollCalendar={this.onScrollCalendar}
280
- isShowLunar={!isOffLunar && showLunar}
281
- isDoubleDateMode={isDoubleDateMode}
282
- tabSelected={tabSelected}
283
- lunarConverter={this.converter}
284
- holidays={holidays}
285
- selectedDate={this.selectedDate}
286
- priceList={priceListFormat}
287
- labelFrom={labelFrom}
288
- labelTo={labelTo}
289
- isHideLabel={isHideLabel}
290
- />
291
294
  </View>
292
295
  {!isOffLunar && (
293
296
  <View style={styles.viewLunar}>
@@ -302,11 +305,11 @@ export default class CalendarPro extends Component {
302
305
  style={styles.iconSelected}
303
306
  />
304
307
  </TouchableWithoutFeedback>
305
- <Text
308
+ <Text.SubTitle
306
309
  style={styles.txtLunar}
307
310
  onPress={this.toggleLunarDate}>
308
311
  {SwitchLanguage.showLunar}
309
- </Text>
312
+ </Text.SubTitle>
310
313
  </View>
311
314
  )}
312
315
 
@@ -334,10 +337,12 @@ export default class CalendarPro extends Component {
334
337
  <View
335
338
  style={styles.row}
336
339
  key={idx.toString()}>
337
- <Text style={styles.txtMonthLunar}>
340
+ <Text.SubTitle
341
+ style={styles.txtMonthLunar}>
338
342
  {labelDate}
339
- </Text>
340
- <Text style={styles.subTextLunar}>
343
+ </Text.SubTitle>
344
+ <Text.SubTitle
345
+ style={styles.subTextLunar}>
341
346
  {`${labelHoliday} `}
342
347
  {labelHighlight ? (
343
348
  <Text
@@ -349,7 +354,7 @@ export default class CalendarPro extends Component {
349
354
  ) : (
350
355
  ''
351
356
  )}
352
- </Text>
357
+ </Text.SubTitle>
353
358
  </View>
354
359
  );
355
360
  })}
@@ -409,7 +414,7 @@ const styles = StyleSheet.create({
409
414
  borderStyle: 'solid',
410
415
  borderColor: '#c7c7cd',
411
416
  },
412
- viewDate: { paddingHorizontal: 12 },
417
+ viewDate: {},
413
418
  textDay: {
414
419
  // fontSize: 14,
415
420
  lineHeight: 16,
@@ -424,7 +429,12 @@ const styles = StyleSheet.create({
424
429
  paddingTop: 15,
425
430
  paddingBottom: 10,
426
431
  },
427
- container: { flex: 1, backgroundColor: 'white', marginTop: 20 },
432
+ container: {
433
+ flex: 1,
434
+ backgroundColor: 'white',
435
+ marginTop: Spacing.S,
436
+ borderRadius: Radius.XS,
437
+ },
428
438
  blueSeperator: {
429
439
  height: 1,
430
440
  width: '100%',
package/src/HeaderControl.js CHANGED
@@ -1,7 +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 { Text, Icon, Colors, Spacing } from '@momo-kits/core';
4
+ import { Text, Icon, Colors, Spacing, ScaleSize } from '@momo-kits/core';
5
5
  import Util from './Util';
6
6
 
7
7
  const HeaderControl = forwardRef(
@@ -73,12 +73,11 @@ const styles = StyleSheet.create({
73
73
  alignItems: 'center',
74
74
  },
75
75
  container: {
76
- height: 36,
76
+ height: ScaleSize(44),
77
77
  flexDirection: 'row',
78
78
  justifyContent: 'space-between',
79
- backgroundColor: Colors.white,
79
+ backgroundColor: Colors.blue_10,
80
80
  alignItems: 'center',
81
81
  borderRadius: 4,
82
- marginBottom: Spacing.S,
83
82
  },
84
83
  });
package/src/calendarPicker/Day.js CHANGED
@@ -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.Title
119
119
  style={[
120
120
  styles.dayLabel,
121
121
  { color: this.colorTextDisable },
122
122
  ]}>
123
123
  {day}
124
- </Text.Title1>
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.Title1
135
+ <Text.Title
136
136
  style={[
137
137
  styles.dayLabel,
138
138
  { color: this.colorText },
139
139
  ]}>
140
140
  {day}
141
- </Text.Title1>
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
  );