@momo-kits/calendar 0.0.55-beta.9 → 0.0.56-alpha.13

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 +2 -3
  2. package/src/Calendar.js +14 -7
  3. package/src/CalendarPro.js +25 -16
  4. package/src/Day/index.js +57 -30
  5. package/src/Day/style.js +13 -9
  6. package/src/HeaderControl.js +4 -5
  7. package/src/Month/index.js +2 -2
  8. package/src/MonthList.js +1 -0
  9. package/src/TabHeader.js +8 -9
  10. package/src/calendarPicker/Day.js +5 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/calendar",
3
- "version": "0.0.55-beta.9",
3
+ "version": "0.0.56-alpha.13",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {
@@ -12,8 +12,7 @@
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",
16
- "@momo-kits/v2-core": "^0.0.51-beta.5"
15
+ "@momo-kits/core": ">=0.0.5-beta"
17
16
  },
18
17
  "devDependencies": {},
19
18
  "license": "MoMo"
package/src/Calendar.js CHANGED
@@ -121,14 +121,19 @@ class Calendar extends Component {
121
121
  if (
122
122
  this.doubleDate.first &&
123
123
  this.doubleDate.second &&
124
- this.selectedDate <= this.doubleDate.second
124
+ this.selectedDate <= this.doubleDate.first
125
125
  ) {
126
126
  this.doubleDate.first = this.selectedDate;
127
+ this.doubleDate.second = null;
127
128
  this.tabSelected = 1;
128
129
  this.cellHeader1.current.updateView(
129
130
  this.selectedDate,
130
131
  this.tabSelected === 0,
131
132
  );
133
+ this.cellHeader2.current.updateView(
134
+ this.doubleDate.second,
135
+ this.tabSelected === 1,
136
+ );
132
137
  this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
133
138
  this.calendarPicker.current.setDoubleDateAndTabIndex(
134
139
  this.doubleDate.first,
@@ -186,7 +191,10 @@ class Calendar extends Component {
186
191
 
187
192
  processDateSecond() {
188
193
  const { onDateChange, onCTAStateChange } = this.props;
189
- if (this.cellHeader2.current) {
194
+ if (
195
+ this.cellHeader2.current &&
196
+ this.selectedDate >= this.doubleDate.first
197
+ ) {
190
198
  this.cellHeader2.current.updateView(this.selectedDate, false);
191
199
  this.cellHeader1.current.setActiveTab(true);
192
200
  this.doubleDate.second = this.selectedDate;
@@ -513,11 +521,10 @@ Calendar.defaultProps = {
513
521
 
514
522
  const styles = StyleSheet.create({
515
523
  viewPanel_2: {
516
- paddingVertical: 10,
517
- alignItems: 'flex-start',
518
- backgroundColor: 'white',
519
- borderRadius: 8,
520
- paddingHorizontal: Spacing.M,
524
+ height: 50,
525
+ marginHorizontal: 12,
526
+ marginTop: 6,
527
+ flexDirection: 'row',
521
528
  },
522
529
  viewPanel: {
523
530
  height: 50,
package/src/CalendarPro.js CHANGED
@@ -15,8 +15,11 @@ import {
15
15
  LocalizedStrings,
16
16
  Image,
17
17
  IconSource,
18
+ Text,
19
+ Colors,
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';
@@ -251,7 +254,7 @@ export default class CalendarPro extends Component {
251
254
  <View>
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
@@ -295,7 +298,9 @@ export default class CalendarPro extends Component {
295
298
  onPress={this.toggleLunarDate}>
296
299
  <Image
297
300
  tintColor={
298
- showLunar ? Colors.pink_03 : Colors.black_17
301
+ showLunar
302
+ ? Colors.pink_05_b
303
+ : Colors.black_17
299
304
  }
300
305
  source={
301
306
  showLunar
@@ -305,11 +310,11 @@ export default class CalendarPro extends Component {
305
310
  style={styles.iconSelected}
306
311
  />
307
312
  </TouchableWithoutFeedback>
308
- <Text.Description1
313
+ <Text
309
314
  style={styles.txtLunar}
310
315
  onPress={this.toggleLunarDate}>
311
316
  {SwitchLanguage.showLunar}
312
- </Text.Description1>
317
+ </Text>
313
318
  </View>
314
319
  )}
315
320
 
@@ -327,21 +332,25 @@ export default class CalendarPro extends Component {
327
332
  const labelHighlight = showLunar
328
333
  ? item.highlight || ''
329
334
  : '';
330
- const labelDate = `${item.day}/${item.month}`;
335
+ const labelDate = `${
336
+ item.day > 9 ? item.day : `0${item.day}`
337
+ }/${
338
+ item.month > 9
339
+ ? item.month
340
+ : `0${item.month}`
341
+ }`;
331
342
  return (
332
343
  <View
333
344
  style={styles.row}
334
345
  key={idx.toString()}>
335
- <Text.Description2
336
- status="red"
346
+ <Text.SubTitle
337
347
  style={styles.txtMonthLunar}>
338
348
  {labelDate}
339
- </Text.Description2>
340
- <Text.Description2
341
- status="hint"
349
+ </Text.SubTitle>
350
+ <Text.SubTitle
342
351
  style={styles.subTextLunar}>
343
352
  {`${labelHoliday} `}
344
- </Text.Description2>
353
+ </Text.SubTitle>
345
354
  </View>
346
355
  );
347
356
  })}
@@ -389,7 +398,7 @@ const styles = StyleSheet.create({
389
398
  txtLunar: {
390
399
  paddingLeft: 6,
391
400
  color: '#222222',
392
- // fontSize: 12,
401
+ fontSize: 14,
393
402
  },
394
403
  viewLunar: {
395
404
  flexDirection: 'row',
@@ -398,11 +407,11 @@ const styles = StyleSheet.create({
398
407
  borderTopWidth: 1,
399
408
  paddingTop: Spacing.M,
400
409
  borderStyle: 'solid',
401
- borderColor: '#c7c7cd',
410
+ borderColor: Colors.black_04,
402
411
  },
403
412
  viewDate: {},
404
413
  textDay: {
405
- // fontSize: 14,
414
+ fontSize: 12,
406
415
  lineHeight: 16,
407
416
  width: (widthScreen - 38) / 7,
408
417
  textAlign: 'center',
package/src/Day/index.js CHANGED
@@ -2,10 +2,8 @@ import React, { Component } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import { View, TouchableHighlight } from 'react-native';
5
- import { Spacing, SwitchLanguage } from '@momo-kits/core';
6
- import { Colors, Text } from '@momo-kits/v2-core';
5
+ import { Spacing, SwitchLanguage, Colors, Text } from '@momo-kits/core';
7
6
  import style from './style';
8
- import styles from '../../../../core/components/modalize/styles';
9
7
 
10
8
  class Day extends Component {
11
9
  constructor(props) {
@@ -72,13 +70,14 @@ class Day extends Component {
72
70
  this.isLunarHoliday = isLunarHoliday;
73
71
  this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
74
72
  this.isSolarHoliday = isSolarHoliday;
75
- this.isInScope = isDoubleDateMode
76
- ? tabSelected === 0 ||
77
- (tabSelected === 1 &&
78
- startDate &&
79
- date &&
80
- date.isSameOrAfter(startDate, 'day'))
81
- : true;
73
+ this.isInScope = true;
74
+ // isDoubleDateMode
75
+ // ? tabSelected === 0 ||
76
+ // (tabSelected === 1 &&
77
+ // startDate &&
78
+ // date &&
79
+ // date.isSameOrAfter(startDate, 'day'))
80
+ // : true;
82
81
  return this.isFocus || this.diffPrice;
83
82
  };
84
83
 
@@ -157,7 +156,7 @@ class Day extends Component {
157
156
  onPress={this.chooseDay}>
158
157
  <>
159
158
  {this.lunarDate && this.showLunar && (
160
- <Text.Label4
159
+ <Text.Caption
161
160
  style={[
162
161
  style.lunarDayText,
163
162
  (this.isLunarHoliday ||
@@ -169,22 +168,25 @@ class Day extends Component {
169
168
  {this.lunarDate.lunarDay === 1
170
169
  ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
171
170
  : this.lunarDate.lunarDay}
172
- </Text.Label4>
171
+ </Text.Caption>
173
172
  )}
174
- <Text.Label1
173
+ <Text.Title
175
174
  style={[
176
175
  style.dayText,
176
+ { paddingTop: !!price ? 4 : 0 },
177
177
  this.isWeekEnd && style.weekendDay,
178
178
  this.isSolarHoliday && style.weekendDay,
179
179
  (this.isStart || this.isEnd) &&
180
180
  style.focusedText,
181
181
  ]}>
182
182
  {text}
183
- </Text.Label1>
184
- {this.isValid && this.isInScope && !!price ? (
185
- <Text.Description3
183
+ </Text.Title>
184
+ {!!price ? (
185
+ <Text.Caption
186
186
  style={[
187
- style.price,
187
+ this.isValid && this.isInScope
188
+ ? style.price
189
+ : style.dayTextDisabled,
188
190
  isBestPrice && {
189
191
  color: Colors.pink_03,
190
192
  },
@@ -193,16 +195,31 @@ class Day extends Component {
193
195
  },
194
196
  ]}>
195
197
  {price}
196
- </Text.Description3>
198
+ </Text.Caption>
197
199
  ) : (
198
- <View style={{ height: Spacing.S }} />
200
+ <View
201
+ style={{
202
+ paddingBottom: this.props
203
+ .havePriceList
204
+ ? Spacing.S
205
+ : 0,
206
+ }}
207
+ />
199
208
  )}
200
209
  </>
201
210
  </TouchableHighlight>
202
211
  ) : (
203
- <View style={[style.day]}>
212
+ <View
213
+ style={[
214
+ style.day,
215
+ {
216
+ paddingVertical: !!price
217
+ ? Spacing.XS + Spacing.XXS
218
+ : Spacing.S,
219
+ },
220
+ ]}>
204
221
  {this.lunarDate && this.showLunar && text ? (
205
- <Text.Label4
222
+ <Text.Caption
206
223
  style={[
207
224
  style.lunarDayText,
208
225
  style.dayTextDisabled,
@@ -210,24 +227,34 @@ class Day extends Component {
210
227
  {this.lunarDate.lunarDay === 1
211
228
  ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
212
229
  : this.lunarDate.lunarDay}
213
- </Text.Label4>
230
+ </Text.Caption>
214
231
  ) : (
215
232
  <View />
216
233
  )}
217
- <Text.Label1
234
+ <Text.Title
218
235
  style={[style.dayText, style.dayTextDisabled]}>
219
236
  {text}
220
- </Text.Label1>
221
- {this.isValid && this.isInScope && (
222
- <Text.Description3
237
+ </Text.Title>
238
+ {text && !!price ? (
239
+ <Text.Caption
223
240
  style={[
224
- style.price,
241
+ this.isValid && this.isInScope
242
+ ? style.price
243
+ : style.dayTextDisabled,
225
244
  isBestPrice && {
226
- color: Colors.pink_03,
245
+ color: Colors.pink_05_b,
227
246
  },
228
247
  ]}>
229
- {'1000'}
230
- </Text.Description3>
248
+ {price}
249
+ </Text.Caption>
250
+ ) : (
251
+ <View
252
+ style={{
253
+ paddingBottom: this.props.havePriceList
254
+ ? Spacing.S
255
+ : 0,
256
+ }}
257
+ />
231
258
  )}
232
259
  </View>
233
260
  )}
package/src/Day/style.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Dimensions } from 'react-native';
2
- import { Spacing } from '@momo-kits/core';
3
- import { Colors } from '@momo-kits/v2-core';
2
+ import { Spacing, 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;
@@ -30,26 +29,29 @@ export default {
30
29
  borderRadius: 4,
31
30
  },
32
31
  dayText: {
32
+ lineHeight: 24,
33
33
  textAlign: 'center',
34
34
  },
35
35
  lunarDayText: {
36
36
  width: dayWidth,
37
37
  textAlign: 'right',
38
- paddingRight: 5,
38
+ paddingRight: Spacing.XS,
39
39
  position: 'absolute',
40
40
  top: Spacing.XXS,
41
+ lineHeight: 14,
41
42
  },
42
43
  todayText: {
43
44
  color: 'blue',
44
45
  },
45
46
  weekendDay: {
46
- color: Colors.red_03,
47
+ color: Colors.red_05,
47
48
  },
48
49
  dayTextDisabled: {
49
- opacity: 0.2,
50
+ opacity: 0.4,
50
51
  },
52
+
51
53
  focused: {
52
- backgroundColor: Colors.pink_03,
54
+ backgroundColor: Colors.pink_05_b,
53
55
  },
54
56
  focusedText: {
55
57
  fontWeight: 'bold',
@@ -58,15 +60,15 @@ export default {
58
60
  dayStartContainer: {
59
61
  borderTopLeftRadius: 4,
60
62
  borderBottomLeftRadius: 4,
61
- backgroundColor: Colors.pink_09,
63
+ backgroundColor: Colors.pink_05_b,
62
64
  },
63
65
  dayEndContainer: {
64
66
  borderTopRightRadius: 4,
65
67
  borderBottomRightRadius: 4,
66
- backgroundColor: Colors.pink_09,
68
+ backgroundColor: Colors.pink_05_b,
67
69
  },
68
70
  mid: {
69
- backgroundColor: Colors.pink_09,
71
+ backgroundColor: Colors.pink_11,
70
72
  // height: heightDefault
71
73
  },
72
74
  departLabel: {
@@ -118,6 +120,8 @@ export default {
118
120
  },
119
121
  price: {
120
122
  color: Colors.black_15,
123
+ marginTop: -4,
124
+ lineHeight: 14,
121
125
  },
122
126
  lineHeightPriceText,
123
127
  };
package/src/HeaderControl.js CHANGED
@@ -1,8 +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';
4
+ import { Icon, ScaleSize, Text, Colors, Spacing } from '@momo-kits/core';
6
5
 
7
6
  import Util from './Util';
8
7
 
@@ -35,9 +34,9 @@ const HeaderControl = forwardRef(
35
34
  style={styles.icon}
36
35
  />
37
36
  </TouchableOpacity>
38
- <Text.HeaderText2 style={styles.txtHeader}>
37
+ <Text.Title style={styles.txtHeader}>
39
38
  {headerFormat}
40
- </Text.HeaderText2>
39
+ </Text.Title>
41
40
  <TouchableOpacity
42
41
  style={styles.btnRight}
43
42
  onPress={onPressNextArrow}>
@@ -78,7 +77,7 @@ const styles = StyleSheet.create({
78
77
  height: ScaleSize(44),
79
78
  flexDirection: 'row',
80
79
  justifyContent: 'space-between',
81
- backgroundColor: Colors.blue_10,
80
+ backgroundColor: Colors.blue_11,
82
81
  alignItems: 'center',
83
82
  borderRadius: 4,
84
83
  },
package/src/Month/index.js CHANGED
@@ -3,8 +3,7 @@ import React, { PureComponent } from 'react';
3
3
  import { View, Dimensions } from 'react-native';
4
4
  import moment from 'moment';
5
5
  import Day from '../Day';
6
- import { Spacing } from '@momo-kits/core';
7
- import { ScaleSize } from '@momo-kits/v2-core';
6
+ import { Spacing, ScaleSize } from '@momo-kits/core';
8
7
 
9
8
  const { width } = Dimensions.get('window');
10
9
 
@@ -53,6 +52,7 @@ export default class Month extends PureComponent {
53
52
  {...this.props}
54
53
  {...this.checkHoliday(item.date)}
55
54
  date={item.date}
55
+ havePriceList={!!this.props.priceListDate}
56
56
  lunarDate={item.lunarDate}
57
57
  empty={item.empty}
58
58
  key={`day${i.toString()}`}
package/src/MonthList.js CHANGED
@@ -267,6 +267,7 @@ export default class MonthList extends Component {
267
267
  onViewableItemsChanged={this.getCurrentVisibleMonth}
268
268
  onScrollToIndexFailed={() => {}}
269
269
  // removeClippedSubviews
270
+ scrollEnabled
270
271
  initialNumToRender={1}
271
272
  maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
272
273
  windowSize={3}
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,31 +55,30 @@ 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.SubTitle
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
65
+ </Text.SubTitle>
66
+ <Text.Title
67
67
  weight={active ? 'bold' : 'regular'}
68
68
  style={{
69
69
  marginTop: 3,
70
- fontSize: 14,
71
70
  }}>
72
- <Text.Description1 weight={active ? 'bold' : 'regular'}>
71
+ <Text.Title weight={active ? 'bold' : 'regular'}>
73
72
  {`${
74
73
  dayOfWeekFromState ||
75
74
  dayOfWeekFromDefault ||
76
75
  '--'
77
76
  } `}
78
- </Text.Description1>
77
+ </Text.Title>
79
78
  {formattedDateFromState ||
80
79
  formattedDateFromDefault ||
81
80
  '--/--/----'}
82
- </Text.Description1>
81
+ </Text.Title>
83
82
  </View>
84
83
  </TouchableWithoutFeedback>
85
84
  );
package/src/calendarPicker/Day.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, { Component } from 'react';
2
- import { TouchableOpacity, View } from 'react-native';
2
+ import { TouchableOpacity, View, Text } from 'react-native';
3
3
  import PropTypes from 'prop-types';
4
- import { Text } from '@momo-kits/v2-core';
5
4
  import styles from './styles';
6
5
 
7
6
  export default class Day extends Component {
@@ -115,13 +114,13 @@ export default class Day extends Component {
115
114
  <View style={this.styleDouble} />
116
115
  {this.disableTouch || otherMonth ? (
117
116
  <View style={styles.dayButton}>
118
- <Text.Label1
117
+ <Text.Title
119
118
  style={[
120
119
  styles.dayLabel,
121
120
  { color: this.colorTextDisable },
122
121
  ]}>
123
122
  {day}
124
- </Text.Label1>
123
+ </Text.Title>
125
124
  </View>
126
125
  ) : (
127
126
  <View
@@ -132,13 +131,13 @@ export default class Day extends Component {
132
131
  <TouchableOpacity
133
132
  style={styles.dayButton}
134
133
  onPress={() => onDayChange(day, month, year)}>
135
- <Text.Label1
134
+ <Text.Title
136
135
  style={[
137
136
  styles.dayLabel,
138
137
  { color: this.colorText },
139
138
  ]}>
140
139
  {day}
141
- </Text.Label1>
140
+ </Text.Title>
142
141
  </TouchableOpacity>
143
142
  </View>
144
143
  )}