@momo-kits/calendar 0.0.53-beta → 0.0.53-beta.2

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 (5) hide show
  1. package/package.json +17 -16
  2. package/publish.sh +2 -2
  3. package/src/Calendar.js +193 -67
  4. package/src/Day/index.js +119 -96
  5. package/src/MonthList.js +81 -53
package/package.json CHANGED
@@ -1,18 +1,19 @@
1
1
  {
2
- "name": "@momo-kits/calendar",
3
- "version": "0.0.53-beta",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {
7
- "@momo-kits/date-picker": "latest",
8
- "moment": "^2.24.0"
9
- },
10
- "peerDependencies": {
11
- "react": "16.9.0",
12
- "react-native": ">=0.55",
13
- "prop-types": "^15.7.2",
14
- "@momo-kits/core": ">=0.0.5-beta"
15
- },
16
- "devDependencies": {},
17
- "license": "MoMo"
2
+ "name": "@momo-kits/calendar",
3
+ "version": "0.0.53-beta.2",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {
7
+ "@momo-kits/date-picker": "latest",
8
+ "moment": "^2.24.0",
9
+ "@momo-platform/versions": "4.0.2"
10
+ },
11
+ "peerDependencies": {
12
+ "react": "16.9.0",
13
+ "react-native": ">=0.55",
14
+ "prop-types": "^15.7.2",
15
+ "@momo-kits/core": ">=0.0.5-beta"
16
+ },
17
+ "devDependencies": {},
18
+ "license": "MoMo"
18
19
  }
package/publish.sh CHANGED
@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js' --exclude 'props-type
21
21
  #npm login
22
22
  #publish dist to npm
23
23
  cd dist
24
- npm publish --access=public
24
+ npm publish --tag beta --access=public --otp=982668
25
25
  cd ..
26
26
  rm -rf dist
27
27
 
28
28
 
29
- curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'
29
+ #curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'
package/src/Calendar.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import PropTypes from 'prop-types';
2
- import React, { Component, } from 'react';
3
- import {
4
- View, Switch, ScrollView, Platform, StyleSheet
5
- } from 'react-native';
2
+ import React, { Component } from 'react';
3
+ import { View, Switch, ScrollView, Platform, StyleSheet } from 'react-native';
6
4
  import moment from 'moment';
7
5
  import { Text, SwitchLanguage } from '@momo-kits/core';
8
6
  import CalendarPro from './CalendarPro';
@@ -13,15 +11,23 @@ const DOUBLE = 'doubleDate';
13
11
  class Calendar extends Component {
14
12
  constructor(props) {
15
13
  super(props);
16
- this.doubleDate = props.doubleDate ? {
17
- first: props.doubleDate.first ? moment(props.doubleDate.first) : null,
18
- second: props.doubleDate.second ? moment(props.doubleDate.second) : null
19
- } : {};
14
+ this.doubleDate = props.doubleDate
15
+ ? {
16
+ first: props.doubleDate.first
17
+ ? moment(props.doubleDate.first)
18
+ : null,
19
+ second: props.doubleDate.second
20
+ ? moment(props.doubleDate.second)
21
+ : null,
22
+ }
23
+ : {};
20
24
  this.tabSelected = 0;
21
- this.selectedDate = props.selectedDate ? moment(props.selectedDate) : moment();
25
+ this.selectedDate = props.selectedDate
26
+ ? moment(props.selectedDate)
27
+ : moment();
22
28
 
23
29
  this.state = {
24
- isDoubleDateMode: props.mode === DOUBLE
30
+ isDoubleDateMode: props.mode === DOUBLE,
25
31
  };
26
32
  this.calendarPicker = React.createRef();
27
33
  this.cellHeader1 = React.createRef();
@@ -38,19 +44,41 @@ class Calendar extends Component {
38
44
  viewInit() {
39
45
  const { mode } = this.props;
40
46
  if (mode === DOUBLE) {
41
- if (this.cellHeader1.current && this.cellHeader2.current && this.calendarPicker.current) {
42
- const start = this.doubleDate.first ? this.doubleDate.first : null;
43
- const end = this.doubleDate.second ? this.doubleDate.second : null;
44
- this.cellHeader1.current.updateView(start, this.tabSelected === 0);
45
- this.cellHeader2.current.updateView(end, this.tabSelected === 1);
46
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
47
+ if (
48
+ this.cellHeader1.current &&
49
+ this.cellHeader2.current &&
50
+ this.calendarPicker.current
51
+ ) {
52
+ const start = this.doubleDate.first
53
+ ? this.doubleDate.first
54
+ : null;
55
+ const end = this.doubleDate.second
56
+ ? this.doubleDate.second
57
+ : null;
58
+ this.cellHeader1.current.updateView(
59
+ start,
60
+ this.tabSelected === 0,
61
+ );
62
+ this.cellHeader2.current.updateView(
63
+ end,
64
+ this.tabSelected === 1,
65
+ );
66
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
67
+ this.doubleDate.first,
68
+ this.doubleDate.second,
69
+ this.tabSelected,
70
+ );
47
71
  }
48
72
  } else if (this.calendarPicker.current) {
49
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
73
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
74
+ this.selectedDate,
75
+ );
50
76
  }
51
77
  }
52
78
 
53
79
  onChangeTab = (idTab) => {
80
+ this.props.onChangeTab && this.props.onChangeTab(idTab);
81
+
54
82
  this.tabSelected = idTab;
55
83
  if (this.cellHeader1.current && this.cellHeader2.current) {
56
84
  this.cellHeader1.current.setActiveTab(idTab === 0);
@@ -61,19 +89,38 @@ class Calendar extends Component {
61
89
 
62
90
  updateViewFlowPicker() {
63
91
  if (this.calendarPicker.current) {
64
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
92
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
93
+ this.doubleDate.first,
94
+ this.doubleDate.second,
95
+ this.tabSelected,
96
+ );
65
97
  }
66
98
  }
67
99
 
68
100
  processDateFirst() {
69
101
  const { onDateChange, onCTAStateChange } = this.props;
70
- if (this.cellHeader1.current && this.cellHeader2.current && this.calendarPicker.current) {
71
- if (this.doubleDate.first && this.doubleDate.second && this.selectedDate <= this.doubleDate.second) {
102
+ if (
103
+ this.cellHeader1.current &&
104
+ this.cellHeader2.current &&
105
+ this.calendarPicker.current
106
+ ) {
107
+ if (
108
+ this.doubleDate.first &&
109
+ this.doubleDate.second &&
110
+ this.selectedDate <= this.doubleDate.second
111
+ ) {
72
112
  this.doubleDate.first = this.selectedDate;
73
113
  this.tabSelected = 1;
74
- this.cellHeader1.current.updateView(this.selectedDate, this.tabSelected === 0);
114
+ this.cellHeader1.current.updateView(
115
+ this.selectedDate,
116
+ this.tabSelected === 0,
117
+ );
75
118
  this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
76
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
119
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
120
+ this.doubleDate.first,
121
+ this.doubleDate.second,
122
+ this.tabSelected,
123
+ );
77
124
  if (onDateChange) {
78
125
  // const cloned = {
79
126
  // first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
@@ -82,8 +129,12 @@ class Calendar extends Component {
82
129
  // this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
83
130
  // };
84
131
  onDateChange({
85
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
86
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
132
+ first: this.doubleDate.first
133
+ ? this.doubleDate.first.toDate()
134
+ : null,
135
+ second: this.doubleDate.second
136
+ ? this.doubleDate.second.toDate()
137
+ : null,
87
138
  });
88
139
  }
89
140
  } else {
@@ -92,11 +143,19 @@ class Calendar extends Component {
92
143
  this.cellHeader1.current.updateView(this.selectedDate, false);
93
144
  this.cellHeader2.current.updateView(null, true);
94
145
  this.tabSelected = 1;
95
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
146
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
147
+ this.doubleDate.first,
148
+ this.doubleDate.second,
149
+ this.tabSelected,
150
+ );
96
151
  if (onDateChange) {
97
152
  onDateChange({
98
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
99
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
153
+ first: this.doubleDate.first
154
+ ? this.doubleDate.first.toDate()
155
+ : null,
156
+ second: this.doubleDate.second
157
+ ? this.doubleDate.second.toDate()
158
+ : null,
100
159
  });
101
160
  // const cloned = {
102
161
  // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
@@ -107,7 +166,7 @@ class Calendar extends Component {
107
166
  }
108
167
  }
109
168
  if (onCTAStateChange) {
110
- onCTAStateChange(!!(this.doubleDate.second));
169
+ onCTAStateChange(!!this.doubleDate.second);
111
170
  }
112
171
  }
113
172
 
@@ -118,14 +177,22 @@ class Calendar extends Component {
118
177
  this.cellHeader1.current.setActiveTab(true);
119
178
  this.doubleDate.second = this.selectedDate;
120
179
  this.tabSelected = 0;
121
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
180
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
181
+ this.doubleDate.first,
182
+ this.doubleDate.second,
183
+ this.tabSelected,
184
+ );
122
185
  if (onCTAStateChange) {
123
- onCTAStateChange(!!(this.doubleDate.second));
186
+ onCTAStateChange(!!this.doubleDate.second);
124
187
  }
125
188
  if (onDateChange) {
126
189
  onDateChange({
127
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
128
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
190
+ first: this.doubleDate.first
191
+ ? this.doubleDate.first.toDate()
192
+ : null,
193
+ second: this.doubleDate.second
194
+ ? this.doubleDate.second.toDate()
195
+ : null,
129
196
  });
130
197
  // const cloned = {
131
198
  // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
@@ -152,7 +219,10 @@ class Calendar extends Component {
152
219
  this.processDoubleDate();
153
220
  } else {
154
221
  if (this.cellHeaderSingle.current) {
155
- this.cellHeaderSingle.current.updateView(this.selectedDate, true);
222
+ this.cellHeaderSingle.current.updateView(
223
+ this.selectedDate,
224
+ true,
225
+ );
156
226
  }
157
227
  if (onDateChange) {
158
228
  const date = new Date(this.selectedDate.toDate());
@@ -164,7 +234,7 @@ class Calendar extends Component {
164
234
  onDateChange = (date) => {
165
235
  this.selectedDate = date;
166
236
  this.updateView();
167
- }
237
+ };
168
238
 
169
239
  updateHeaderView = () => {
170
240
  const { onDateChange, onCTAStateChange } = this.props;
@@ -173,7 +243,11 @@ class Calendar extends Component {
173
243
  if (this.cellHeader1.current && this.cellHeader2.current) {
174
244
  this.cellHeader1.current.updateView(this.selectedDate, true);
175
245
  this.cellHeader2.current.updateView(null, false);
176
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate, null, this.tabSelected);
246
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
247
+ this.selectedDate,
248
+ null,
249
+ this.tabSelected,
250
+ );
177
251
  this.doubleDate.first = moment(this.selectedDate);
178
252
  this.doubleDate.second = null;
179
253
  this.tabSelected = 0;
@@ -183,8 +257,12 @@ class Calendar extends Component {
183
257
  }
184
258
  if (onDateChange) {
185
259
  onDateChange({
186
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
187
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
260
+ first: this.doubleDate.first
261
+ ? this.doubleDate.first.toDate()
262
+ : null,
263
+ second: this.doubleDate.second
264
+ ? this.doubleDate.second.toDate()
265
+ : null,
188
266
  });
189
267
  // const cloned = {
190
268
  // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
@@ -199,10 +277,16 @@ class Calendar extends Component {
199
277
  }
200
278
  if (this.cellHeaderSingle.current) {
201
279
  if (this.doubleDate.first) {
202
- this.cellHeaderSingle.current.updateView(this.doubleDate.first, true);
280
+ this.cellHeaderSingle.current.updateView(
281
+ this.doubleDate.first,
282
+ true,
283
+ );
203
284
  this.selectedDate = this.doubleDate.first;
204
285
  } else {
205
- this.cellHeaderSingle.current.updateView(this.selectedDate, true);
286
+ this.cellHeaderSingle.current.updateView(
287
+ this.selectedDate,
288
+ true,
289
+ );
206
290
  }
207
291
 
208
292
  if (onDateChange) {
@@ -216,13 +300,19 @@ class Calendar extends Component {
216
300
 
217
301
  toggleSelectionDateMode = () => {
218
302
  const { onCallbackCalendar } = this.props;
219
- this.setState((preState) => ({ isDoubleDateMode: !preState.isDoubleDateMode }), () => {
220
- const { isDoubleDateMode } = this.state;
221
- this.updateHeaderView();
222
- if (onCallbackCalendar && typeof onCallbackCalendar === 'function') {
223
- onCallbackCalendar('switch', isDoubleDateMode);
224
- }
225
- });
303
+ this.setState(
304
+ (preState) => ({ isDoubleDateMode: !preState.isDoubleDateMode }),
305
+ () => {
306
+ const { isDoubleDateMode } = this.state;
307
+ this.updateHeaderView();
308
+ if (
309
+ onCallbackCalendar &&
310
+ typeof onCallbackCalendar === 'function'
311
+ ) {
312
+ onCallbackCalendar('switch', isDoubleDateMode);
313
+ }
314
+ },
315
+ );
226
316
  };
227
317
 
228
318
  renderSwitchReturnSelection = () => {
@@ -237,7 +327,11 @@ class Calendar extends Component {
237
327
  onValueChange={this.toggleSelectionDateMode}
238
328
  thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
239
329
  trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
240
- style={[Platform.OS === 'ios' && { transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }]}
330
+ style={[
331
+ Platform.OS === 'ios' && {
332
+ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
333
+ },
334
+ ]}
241
335
  />
242
336
  </View>
243
337
  );
@@ -246,7 +340,7 @@ class Calendar extends Component {
246
340
  renderHeaderPanel = () => {
247
341
  const { isDoubleDateMode } = this.state;
248
342
  const { headerFrom, headerTo } = this.props;
249
- return (isDoubleDateMode ? (
343
+ return isDoubleDateMode ? (
250
344
  <View style={styles.viewPanel}>
251
345
  <TabHeader
252
346
  id={0}
@@ -277,26 +371,52 @@ class Calendar extends Component {
277
371
  date={this.selectedDate}
278
372
  />
279
373
  </View>
280
- ));
374
+ );
281
375
  };
282
376
 
283
377
  setDateRange = (dateRange, isScrollToStartDate) => {
284
378
  const { mode, doubleDate = {} } = this.props;
285
379
  if (mode === 'doubleDate') {
286
- this.cellHeader1.current.updateView(dateRange.startDate, this.tabSelected === 0);
287
- this.cellHeader2.current.updateView(dateRange.endDate, this.tabSelected === 1);
288
- this.calendarPicker?.current?.setDateRange(dateRange, isScrollToStartDate);
289
- this.doubleDate = doubleDate ? {
290
- first: dateRange.startDate ? moment(dateRange.startDate) : null,
291
- second: dateRange.endDate ? moment(dateRange.endDate) : null
292
- } : {};
380
+ this.cellHeader1.current.updateView(
381
+ dateRange.startDate,
382
+ this.tabSelected === 0,
383
+ );
384
+ this.cellHeader2.current.updateView(
385
+ dateRange.endDate,
386
+ this.tabSelected === 1,
387
+ );
388
+ this.calendarPicker?.current?.setDateRange(
389
+ dateRange,
390
+ isScrollToStartDate,
391
+ );
392
+ this.doubleDate = doubleDate
393
+ ? {
394
+ first: dateRange.startDate
395
+ ? moment(dateRange.startDate)
396
+ : null,
397
+ second: dateRange.endDate
398
+ ? moment(dateRange.endDate)
399
+ : null,
400
+ }
401
+ : {};
293
402
  }
294
- }
403
+ };
295
404
 
296
405
  render() {
297
406
  const {
298
- isOffLunar, isHideHoliday, isHiddenSwitch, isShowLunar, onCallbackCalendar, priceList, labelFrom, labelTo, isHideLabel, minDate, maxDate, doubleDate,
299
- isHideHeaderPanel
407
+ isOffLunar,
408
+ isHideHoliday,
409
+ isHiddenSwitch,
410
+ isShowLunar,
411
+ onCallbackCalendar,
412
+ priceList,
413
+ labelFrom,
414
+ labelTo,
415
+ isHideLabel,
416
+ minDate,
417
+ maxDate,
418
+ doubleDate,
419
+ isHideHeaderPanel,
300
420
  } = this.props;
301
421
  const { isDoubleDateMode } = this.state;
302
422
  return (
@@ -331,7 +451,7 @@ export default Calendar;
331
451
  Calendar.propTypes = {
332
452
  doubleDate: PropTypes.shape({
333
453
  first: PropTypes.any,
334
- second: PropTypes.any
454
+ second: PropTypes.any,
335
455
  }),
336
456
  id: PropTypes.any,
337
457
  isHiddenSwitch: PropTypes.bool,
@@ -348,13 +468,19 @@ Calendar.propTypes = {
348
468
  headerTo: PropTypes.string,
349
469
  isHideLabel: PropTypes.bool,
350
470
  isHideHoliday: PropTypes.bool,
351
- minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
352
- maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
471
+ minDate: PropTypes.oneOfType([
472
+ PropTypes.string,
473
+ PropTypes.instanceOf(Date),
474
+ ]),
475
+ maxDate: PropTypes.oneOfType([
476
+ PropTypes.string,
477
+ PropTypes.instanceOf(Date),
478
+ ]),
353
479
  };
354
480
 
355
481
  Calendar.defaultProps = {
356
482
  mode: 'single',
357
- isHiddenSwitch: false
483
+ isHiddenSwitch: false,
358
484
  };
359
485
 
360
486
  const styles = StyleSheet.create({
@@ -364,7 +490,7 @@ const styles = StyleSheet.create({
364
490
  justifyContent: 'center',
365
491
  alignItems: 'center',
366
492
  backgroundColor: 'white',
367
- borderRadius: 8
493
+ borderRadius: 8,
368
494
  },
369
495
  viewPanel: {
370
496
  height: 50,
@@ -375,12 +501,12 @@ const styles = StyleSheet.create({
375
501
  flexDirection: 'row',
376
502
  backgroundColor: '#eeeeef',
377
503
  justifyContent: 'space-around',
378
- borderRadius: 8
504
+ borderRadius: 8,
379
505
  },
380
506
  textSwitch: {
381
507
  // fontSize: 10,
382
508
  fontWeight: 'bold',
383
- color: '#222222'
509
+ color: '#222222',
384
510
  },
385
511
  viewSwitch: {
386
512
  flexDirection: 'row',
@@ -389,6 +515,6 @@ const styles = StyleSheet.create({
389
515
  alignItems: 'center',
390
516
  backgroundColor: '#f2f3f5',
391
517
  paddingVertical: 9,
392
- height: 42
518
+ height: 42,
393
519
  },
394
520
  });
package/src/Day/index.js CHANGED
@@ -1,11 +1,7 @@
1
1
  import React, { Component } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
- import {
5
- View,
6
- TouchableHighlight,
7
- Text
8
- } from 'react-native';
4
+ import { View, TouchableHighlight, Text } from 'react-native';
9
5
  import { Colors, SwitchLanguage } from '@momo-kits/core';
10
6
  import style from './style';
11
7
 
@@ -24,7 +20,9 @@ class Day extends Component {
24
20
  if (date && holidays && holidays.length > 0) {
25
21
  const day = date.date();
26
22
  const month = date.month() + 1;
27
- return holidays.find((item) => item.day === day && item.month === month);
23
+ return holidays.find(
24
+ (item) => item.day === day && item.month === month,
25
+ );
28
26
  }
29
27
  return null;
30
28
  };
@@ -33,7 +31,7 @@ class Day extends Component {
33
31
  const holiday = this.findHoliday(date, holidays);
34
32
  return {
35
33
  solarHoliday: !!(holiday && !holiday.lunar),
36
- lunarHoliday: !!(holiday && holiday.lunar)
34
+ lunarHoliday: !!(holiday && holiday.lunar),
37
35
  };
38
36
  };
39
37
 
@@ -52,11 +50,15 @@ class Day extends Component {
52
50
  lunarDate,
53
51
  isSolarHoliday,
54
52
  isLunarHoliday,
55
- price
53
+ price,
56
54
  } = props || this.props;
57
- this.isValid = date && (date >= minDate || date.isSame(minDate, 'day')) && (date <= maxDate || date.isSame(maxDate, 'day'));
58
- this.isMid = isDoubleDateMode && date > startDate && date < endDate
59
- || (!date && empty >= startDate && empty <= endDate);
55
+ this.isValid =
56
+ date &&
57
+ (date >= minDate || date.isSame(minDate, 'day')) &&
58
+ (date <= maxDate || date.isSame(maxDate, 'day'));
59
+ this.isMid =
60
+ (isDoubleDateMode && date > startDate && date < endDate) ||
61
+ (!date && empty >= startDate && empty <= endDate);
60
62
  this.isStart = date && date.isSame(startDate, 'd');
61
63
  this.isStartPart = this.isStart && endDate;
62
64
  this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
@@ -68,123 +70,144 @@ class Day extends Component {
68
70
  this.isLunarHoliday = isLunarHoliday;
69
71
  this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
70
72
  this.isSolarHoliday = isSolarHoliday;
71
- this.isInScope = isDoubleDateMode ? (tabSelected === 0 || (tabSelected === 1 && startDate && date && date.isSameOrAfter(startDate, 'day'))) : true;
73
+ this.isInScope = isDoubleDateMode
74
+ ? tabSelected === 0 ||
75
+ (tabSelected === 1 &&
76
+ startDate &&
77
+ date &&
78
+ date.isSameOrAfter(startDate, 'day'))
79
+ : true;
72
80
  return this.isFocus || this.diffPrice;
73
81
  };
74
82
 
75
83
  shouldComponentUpdate(nextProps) {
76
84
  const {
77
- isDoubleDateMode, isShowLunar, tabSelected, isSolarHoliday,
85
+ isDoubleDateMode,
86
+ isShowLunar,
87
+ tabSelected,
88
+ isSolarHoliday,
78
89
  isLunarHoliday,
79
90
  price,
80
91
  isBestPrice,
81
92
  startDate,
82
- endDate
93
+ endDate,
83
94
  } = this.props;
84
95
  const prevStatus = this.isFocus;
85
- const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
96
+ const selectionModeChange =
97
+ isDoubleDateMode !== nextProps.isDoubleDateMode;
86
98
  const lunarChange = isShowLunar !== nextProps.isShowLunar;
87
99
  const nextStatus = this.statusCheck(nextProps);
88
100
  const tabChange = tabSelected !== nextProps.tabSelected;
89
101
  const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
90
102
  const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
91
- const diffPrice = price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
92
- const startDateChange = startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
93
- const endDateChange = endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
94
- return !!(prevStatus !== nextStatus || selectionModeChange || lunarChange || tabChange || solarHoliday || lunarHoliday || diffPrice || startDateChange || endDateChange);
103
+ const diffPrice =
104
+ price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
105
+ const startDateChange =
106
+ startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
107
+ const endDateChange =
108
+ endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
109
+ return !!(
110
+ prevStatus !== nextStatus ||
111
+ selectionModeChange ||
112
+ lunarChange ||
113
+ tabChange ||
114
+ solarHoliday ||
115
+ lunarHoliday ||
116
+ diffPrice ||
117
+ startDateChange ||
118
+ endDateChange
119
+ );
95
120
  }
96
121
 
97
122
  render() {
98
123
  const {
99
- date, empty, isDoubleDateMode, price, isBestPrice, isShowPrice, labelFrom, labelTo, isHideLabel
124
+ date,
125
+ empty,
126
+ isDoubleDateMode,
127
+ price,
128
+ isBestPrice,
129
+ isShowPrice,
130
+ labelFrom,
131
+ labelTo,
132
+ isHideLabel,
100
133
  } = this.props;
101
134
  const text = date ? date.date() : '';
102
135
  return (
103
136
  <View style={style.dayContainer}>
104
- <View style={[
105
- this.isMid && !empty && style.mid,
106
- this.isStartPart && style.dayStartContainer,
107
- this.isEnd && style.dayEndContainer
108
-
109
- ]}
110
- >
111
- {this.isValid && this.isInScope
112
- ? (
113
- <TouchableHighlight
114
- style={[
115
- style.day,
116
- (this.isStart || this.isEnd) && style.focused
117
- ]}
118
- underlayColor="rgba(255, 255, 255, 0.35)"
119
- onPress={this.chooseDay}
120
- >
121
- <>
122
- <Text style={[
137
+ <View
138
+ style={[
139
+ this.isMid && !empty && style.mid,
140
+ this.isStartPart && style.dayStartContainer,
141
+ this.isEnd && style.dayEndContainer,
142
+ ]}>
143
+ {this.isValid && this.isInScope ? (
144
+ <TouchableHighlight
145
+ style={[
146
+ style.day,
147
+ (this.isStart || this.isEnd) && style.focused,
148
+ ]}
149
+ underlayColor="rgba(255, 255, 255, 0.35)"
150
+ onPress={this.chooseDay}>
151
+ <>
152
+ {this.lunarDate && this.showLunar && (
153
+ <Text
154
+ style={[
155
+ style.lunarDayText,
156
+ (this.isLunarHoliday ||
157
+ this.isLunarDayStart) &&
158
+ style.weekendDay,
159
+ (this.isStart || this.isEnd) &&
160
+ style.focusedText,
161
+ ]}>
162
+ {this.lunarDate.lunarDay === 1
163
+ ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
164
+ : this.lunarDate.lunarDay}
165
+ </Text>
166
+ )}
167
+ <Text
168
+ style={[
123
169
  style.dayText,
124
170
  this.isWeekEnd && style.weekendDay,
125
171
  this.isSolarHoliday && style.weekendDay,
126
- (this.isStart || this.isEnd) && style.focusedText,
127
- ]}
128
- >
129
- {text}
130
- </Text>
131
- {
132
- this.lunarDate && this.showLunar && (
133
- <Text style={[
134
- style.lunarDayText,
135
- (this.isLunarHoliday || this.isLunarDayStart) && style.weekendDay,
136
- (this.isStart || this.isEnd) && style.focusedText,
137
- ]}
138
- >
139
- {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
140
- </Text>
141
- )
142
- }
143
- </>
144
- </TouchableHighlight>
145
- )
146
- : (
147
- <View style={[style.day]}>
148
- <Text style={[
149
- style.dayText,
150
- style.dayTextDisabled,
151
- ]}
152
- >
172
+ (this.isStart || this.isEnd) &&
173
+ style.focusedText,
174
+ ]}>
153
175
  {text}
154
176
  </Text>
155
- {
156
- this.lunarDate && this.showLunar && text ? (
157
- <Text style={[
158
- style.lunarDayText,
159
- style.dayTextDisabled,
160
- ]}
161
- >
162
- {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
163
- </Text>
164
- ) : <View />
165
- }
166
- </View>
167
- )}
177
+ </>
178
+ </TouchableHighlight>
179
+ ) : (
180
+ <View style={[style.day]}>
181
+ {this.lunarDate && this.showLunar && text ? (
182
+ <Text
183
+ style={[
184
+ style.lunarDayText,
185
+ style.dayTextDisabled,
186
+ ]}>
187
+ {this.lunarDate.lunarDay === 1
188
+ ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
189
+ : this.lunarDate.lunarDay}
190
+ </Text>
191
+ ) : (
192
+ <View />
193
+ )}
194
+ <Text
195
+ style={[style.dayText, style.dayTextDisabled]}>
196
+ {text}
197
+ </Text>
198
+ </View>
199
+ )}
168
200
  </View>
169
201
 
170
- {(isDoubleDateMode && this.isStart && !isHideLabel) && (
171
- <View style={style.txtGo}>
172
- <Text style={{ fontSize: 8, color: 'white' }}>
173
- {labelFrom || SwitchLanguage.departing}
174
- </Text>
175
- </View>
176
- )}
177
- {(isDoubleDateMode && this.isEnd && !isHideLabel) && (
178
- <View style={style.txtBack}>
179
- <Text style={{ fontSize: 8, color: 'white' }}>
180
- {labelTo || SwitchLanguage.returning}
181
- </Text>
182
- </View>
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>
183
210
  )}
184
- {this.isValid
185
- && this.isInScope
186
- && !!(price)
187
- && <Text style={[style.price, isBestPrice && { color: Colors.pink_05_b }]}>{price}</Text>}
188
211
  </View>
189
212
  );
190
213
  }
package/src/MonthList.js CHANGED
@@ -1,17 +1,15 @@
1
1
  /* eslint-disable react/no-did-update-set-state */
2
2
  import React, { Component } from 'react';
3
- import {
4
- FlatList,
5
- Dimensions,
6
- Platform
7
- } from 'react-native';
3
+ import { FlatList, Dimensions, Platform } from 'react-native';
8
4
  import moment from 'moment';
9
5
  import Month from './Month';
10
6
  import style from './Day/style';
11
- import { convertSolar2Lunar } from './LunarService';
7
+ import LunarDateConverter from './LunarDateConverter';
12
8
 
13
9
  const ITEM_WIDTH = Dimensions.get('window').width - 24;
14
10
  const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
11
+
12
+ const converter = new LunarDateConverter();
15
13
  export default class MonthList extends Component {
16
14
  constructor(props) {
17
15
  super(props);
@@ -21,7 +19,10 @@ export default class MonthList extends Component {
21
19
  // };
22
20
  this.currentDate = moment();
23
21
  this.data = this.getMonthList();
24
- this.currentScrollIndex = this.getIndexOfMonth(moment(props.selectedDate), this.data);
22
+ this.currentScrollIndex = this.getIndexOfMonth(
23
+ moment(props.selectedDate),
24
+ this.data,
25
+ );
25
26
  this.list = React.createRef();
26
27
  this.heightStyle = {};
27
28
  this.holidays = props.holidays;
@@ -55,33 +56,39 @@ export default class MonthList extends Component {
55
56
 
56
57
  checkRange = (date, start, end) => {
57
58
  if (!date || !start) return false;
58
- if (!end) return date.year() === start.year() && date.month() === start.month();
59
- if (date.year() < start.year() || (date.year() === start.year() && date.month() < start.month())) return false;
60
- return !(date.year() > end.year() || (date.year() === end.year() && date.month() > end.month()));
59
+ if (!end)
60
+ return (
61
+ date.year() === start.year() && date.month() === start.month()
62
+ );
63
+ if (
64
+ date.year() < start.year() ||
65
+ (date.year() === start.year() && date.month() < start.month())
66
+ )
67
+ return false;
68
+ return !(
69
+ date.year() > end.year() ||
70
+ (date.year() === end.year() && date.month() > end.month())
71
+ );
61
72
  };
62
73
 
63
74
  shouldUpdate = (month, props) => {
64
75
  if (!props) return false;
65
- const {
66
- startDate,
67
- endDate
68
- } = props;
76
+ const { startDate, endDate } = props;
69
77
  const { startDate: curStartDate, endDate: curEndDate } = this.props;
70
- const {
71
- date
72
- } = month;
78
+ const { date } = month;
73
79
  const next = this.checkRange(date, startDate, endDate);
74
80
  const prev = this.checkRange(date, curStartDate, curEndDate);
75
81
  return !!(prev || next);
76
82
  };
77
83
 
78
84
  convertLunarToSolar(date) {
79
- return date && convertSolar2Lunar ? convertSolar2Lunar(
80
- date.date(),
81
- date.month() + 1,
82
- date.year(),
83
- 7
84
- ) : {};
85
+ return date
86
+ ? converter.SolarToLunar({
87
+ solarDay: date.date(),
88
+ solarMonth: date.month() + 1,
89
+ solarYear: date.year(),
90
+ })
91
+ : {};
85
92
  }
86
93
 
87
94
  findHoliday = (date) => {
@@ -89,7 +96,9 @@ export default class MonthList extends Component {
89
96
  if (date && holidays && holidays.length > 0) {
90
97
  const day = date.date();
91
98
  const month = date.month() + 1;
92
- return holidays.find((item) => item.day === day && item.month === month);
99
+ return holidays.find(
100
+ (item) => item.day === day && item.month === month,
101
+ );
93
102
  }
94
103
  return null;
95
104
  };
@@ -98,7 +107,7 @@ export default class MonthList extends Component {
98
107
  const holiday = this.findHoliday(date, holidays);
99
108
  return {
100
109
  isSolarHoliday: !!(holiday && !holiday.lunar),
101
- isLunarHoliday: !!(holiday && holiday.lunar)
110
+ isLunarHoliday: !!(holiday && holiday.lunar),
102
111
  };
103
112
  };
104
113
 
@@ -112,7 +121,7 @@ export default class MonthList extends Component {
112
121
  dayList = new Array(weekday - 1).fill({
113
122
  empty: moment(date).subtract(1, 'h'),
114
123
  lunarDate: this.convertLunarToSolar(date),
115
- ...this.checkHoliday(date)
124
+ ...this.checkHoliday(date),
116
125
  });
117
126
  }
118
127
  while (date.month() === month) {
@@ -120,22 +129,26 @@ export default class MonthList extends Component {
120
129
  dayList.push({
121
130
  date: cloned,
122
131
  lunarDate: this.convertLunarToSolar(cloned),
123
- ...this.checkHoliday(date)
132
+ ...this.checkHoliday(date),
124
133
  });
125
134
  date.add(1, 'days');
126
135
  }
127
136
  date.subtract(1, 'days');
128
137
  weekday = date.isoWeekday();
129
138
  if (weekday === 1) {
130
- return dayList.concat(new Array(6).fill({
131
- empty: moment(date).hour(1),
132
- lunarDate: this.convertLunarToSolar(date)
133
- }));
139
+ return dayList.concat(
140
+ new Array(6).fill({
141
+ empty: moment(date).hour(1),
142
+ lunarDate: this.convertLunarToSolar(date),
143
+ }),
144
+ );
134
145
  }
135
- return dayList.concat(new Array(Math.abs(7 - weekday)).fill({
136
- empty: moment(date).hour(1),
137
- lunarDate: this.convertLunarToSolar(date)
138
- }));
146
+ return dayList.concat(
147
+ new Array(Math.abs(7 - weekday)).fill({
148
+ empty: moment(date).hour(1),
149
+ lunarDate: this.convertLunarToSolar(date),
150
+ }),
151
+ );
139
152
  };
140
153
 
141
154
  getMonthList = (props) => {
@@ -143,14 +156,15 @@ export default class MonthList extends Component {
143
156
  const maxDate = moment((props || this.props).maxDate);
144
157
  const monthList = [];
145
158
  if (!maxDate || !minDate) return monthList;
146
- while (maxDate > minDate || (
147
- maxDate.year() === minDate.year()
148
- && maxDate.month() === minDate.month()
149
- )) {
159
+ while (
160
+ maxDate > minDate ||
161
+ (maxDate.year() === minDate.year() &&
162
+ maxDate.month() === minDate.month())
163
+ ) {
150
164
  const d = moment(minDate);
151
165
  const month = {
152
166
  date: d,
153
- dateList: this.getDayList(d)
167
+ dateList: this.getDayList(d),
154
168
  };
155
169
  month.shouldUpdate = this.shouldUpdate(month, props);
156
170
  monthList.push(month);
@@ -159,7 +173,8 @@ export default class MonthList extends Component {
159
173
  return monthList;
160
174
  };
161
175
 
162
- getIndexOfMonth = (month, data) => data.findIndex((item) => item.date.isSame(month, 'month'));
176
+ getIndexOfMonth = (month, data) =>
177
+ data.findIndex((item) => item.date.isSame(month, 'month'));
163
178
 
164
179
  // componentDidMount() {
165
180
  // const {
@@ -191,16 +206,27 @@ export default class MonthList extends Component {
191
206
  if (onScrollCalendar && item && this.currentKey !== key) {
192
207
  this.currentKey = key;
193
208
  try {
194
- this.heightStyle = this.data && this.data[index] && this.data[index].dateList
195
- ? {
196
- height: (style.containerDayHeight * this.data[index].dateList.length / 7) + 10
197
- }
198
- : {};
209
+ this.heightStyle =
210
+ this.data &&
211
+ this.data[index] &&
212
+ this.data[index].dateList
213
+ ? {
214
+ height:
215
+ (style.containerDayHeight *
216
+ this.data[index].dateList.length) /
217
+ 7 +
218
+ 10,
219
+ }
220
+ : {};
199
221
  } catch (e) {
200
222
  this.heightStyle = {};
201
223
  }
202
224
  if (onScrollCalendar) {
203
- onScrollCalendar({ date: item.date, key, currentIndex: index });
225
+ onScrollCalendar({
226
+ date: item.date,
227
+ key,
228
+ currentIndex: index,
229
+ });
204
230
  }
205
231
  }
206
232
  }
@@ -213,14 +239,16 @@ export default class MonthList extends Component {
213
239
  if (this.list.current && index !== -1) {
214
240
  this.list.current.scrollToIndex({
215
241
  index,
216
- animated: true
242
+ animated: true,
217
243
  });
218
244
  }
219
245
  };
220
246
 
221
- getItemLayout = (data, index) => (
222
- { length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index }
223
- )
247
+ getItemLayout = (data, index) => ({
248
+ length: ITEM_WIDTH,
249
+ offset: ITEM_WIDTH * index,
250
+ index,
251
+ });
224
252
 
225
253
  render() {
226
254
  const { priceList } = this.props;
@@ -237,7 +265,7 @@ export default class MonthList extends Component {
237
265
  keyExtractor={this.keyExtractor}
238
266
  onViewableItemsChanged={this.getCurrentVisibleMonth}
239
267
  onScrollToIndexFailed={() => {}}
240
- removeClippedSubviews
268
+ // removeClippedSubviews
241
269
  initialNumToRender={1}
242
270
  maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
243
271
  windowSize={3}
@@ -245,7 +273,7 @@ export default class MonthList extends Component {
245
273
  initialScrollIndex={this.currentScrollIndex}
246
274
  getItemLayout={this.getItemLayout}
247
275
  viewabilityConfig={{
248
- itemVisiblePercentThreshold: 50
276
+ itemVisiblePercentThreshold: 50,
249
277
  }}
250
278
  />
251
279
  );