@momo-kits/calendar 0.0.74-beta → 0.72.1

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 (22) hide show
  1. package/index.js +1 -1
  2. package/package.json +17 -16
  3. package/publish.sh +2 -2
  4. package/src/Calendar.js +476 -343
  5. package/src/CalendarPro.js +391 -318
  6. package/src/Day/index.js +215 -175
  7. package/src/Day/style.js +114 -116
  8. package/src/HeaderControl.js +65 -61
  9. package/src/LunarDateConverter.js +186 -179
  10. package/src/LunarService.js +76 -40
  11. package/src/Month/index.js +74 -65
  12. package/src/MonthList.js +232 -237
  13. package/src/TabHeader.js +60 -67
  14. package/src/Util.js +273 -193
  15. package/src/calendarPicker/Day.js +120 -128
  16. package/src/calendarPicker/Days.js +208 -181
  17. package/src/calendarPicker/HeaderControls.js +145 -136
  18. package/src/calendarPicker/WeekDaysLabels.js +18 -13
  19. package/src/calendarPicker/index.js +100 -100
  20. package/src/calendarPicker/styles.js +175 -176
  21. package/src/calendarPicker/util.js +75 -41
  22. package/src/holidayData.js +121 -123
package/src/Calendar.js CHANGED
@@ -1,394 +1,527 @@
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 {Dimensions, ScrollView, StyleSheet, View} from 'react-native';
6
4
  import moment from 'moment';
7
- import { Text, SwitchLanguage } from '@momo-kits/core';
5
+ import {
6
+ Colors,
7
+ Radius,
8
+ ScaleSize,
9
+ SwitchLanguage,
10
+ Text,
11
+ } from '@momo-kits/core-v2';
12
+ import Switch from '@momo-kits/switch';
8
13
  import CalendarPro from './CalendarPro';
9
14
  import TabHeader from './TabHeader';
10
15
 
11
16
  const DOUBLE = 'doubleDate';
17
+
12
18
  // const SIGNLE = 'signleDate';
13
19
  class Calendar extends Component {
14
- constructor(props) {
15
- 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
- } : {};
20
- this.tabSelected = 0;
21
- this.selectedDate = props.selectedDate ? moment(props.selectedDate) : moment();
20
+ constructor(props) {
21
+ super(props);
22
+ this.doubleDate = props.doubleDate
23
+ ? {
24
+ first: props.doubleDate.first ? moment(props.doubleDate.first) : null,
25
+ second: props.doubleDate.second
26
+ ? moment(props.doubleDate.second)
27
+ : null,
28
+ }
29
+ : {};
30
+ this.tabSelected = 0;
22
31
 
23
- this.state = {
24
- isDoubleDateMode: props.mode === DOUBLE
25
- };
26
- this.calendarPicker = React.createRef();
27
- this.cellHeader1 = React.createRef();
28
- this.cellHeader2 = React.createRef();
29
- this.cellHeaderSingle = React.createRef();
30
- }
32
+ this.selectedDate = props.selectedDate
33
+ ? moment(props.selectedDate)
34
+ : moment();
31
35
 
32
- componentDidMount() {
33
- const { id } = this.props;
34
- this.tabSelected = id || 0;
35
- this.viewInit();
36
- }
36
+ this.state = {
37
+ isDoubleDateMode: props.mode === DOUBLE,
38
+ };
39
+ this.calendarPicker = React.createRef();
40
+ this.cellHeader1 = React.createRef();
41
+ this.cellHeader2 = React.createRef();
42
+ this.cellHeaderSingle = React.createRef();
43
+ }
37
44
 
38
- viewInit() {
39
- const { mode } = this.props;
40
- 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
- }
48
- } else if (this.calendarPicker.current) {
49
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
50
- }
45
+ componentDidMount() {
46
+ const {id} = this.props;
47
+ this.tabSelected = id || 0;
48
+ this.viewInit();
49
+ }
50
+
51
+ viewInit() {
52
+ const {mode} = this.props;
53
+ if (mode === DOUBLE) {
54
+ if (
55
+ this.cellHeader1.current &&
56
+ this.cellHeader2.current &&
57
+ this.calendarPicker.current
58
+ ) {
59
+ const start = this.doubleDate.first ? this.doubleDate.first : null;
60
+ const end = this.doubleDate.second ? this.doubleDate.second : null;
61
+ this.cellHeader1.current.updateView(start, this.tabSelected === 0);
62
+ this.cellHeader2.current.updateView(end, this.tabSelected === 1);
63
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
64
+ this.doubleDate.first,
65
+ this.doubleDate.second,
66
+ this.tabSelected,
67
+ );
68
+ }
69
+ } else if (this.calendarPicker.current) {
70
+ this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
51
71
  }
72
+ }
52
73
 
53
- onChangeTab = (idTab) => {
54
- this.tabSelected = idTab;
55
- if (this.cellHeader1.current && this.cellHeader2.current) {
56
- this.cellHeader1.current.setActiveTab(idTab === 0);
57
- this.cellHeader2.current.setActiveTab(idTab === 1);
58
- }
59
- this.updateViewFlowPicker();
60
- };
74
+ onChangeTab = idTab => {
75
+ this.props.onChangeTab && this.props.onChangeTab(idTab);
61
76
 
62
- updateViewFlowPicker() {
63
- if (this.calendarPicker.current) {
64
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
65
- }
77
+ this.tabSelected = idTab;
78
+ if (this.cellHeader1.current && this.cellHeader2.current) {
79
+ this.cellHeader1.current.setActiveTab(idTab === 0);
80
+ this.cellHeader2.current.setActiveTab(idTab === 1);
81
+ }
82
+ this.updateViewFlowPicker();
83
+ };
84
+
85
+ updateViewFlowPicker() {
86
+ if (this.calendarPicker.current) {
87
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
88
+ this.doubleDate.first,
89
+ this.doubleDate.second,
90
+ this.tabSelected,
91
+ );
66
92
  }
93
+ }
67
94
 
68
- processDateFirst() {
69
- 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) {
72
- this.doubleDate.first = this.selectedDate;
73
- this.tabSelected = 1;
74
- this.cellHeader1.current.updateView(this.selectedDate, this.tabSelected === 0);
75
- this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
76
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
77
- if (onDateChange) {
78
- // const cloned = {
79
- // first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
80
- // this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
81
- // second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
82
- // this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
83
- // };
84
- onDateChange({
85
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
86
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
87
- });
88
- }
89
- } else {
90
- this.doubleDate.first = this.selectedDate;
91
- this.doubleDate.second = null;
92
- this.cellHeader1.current.updateView(this.selectedDate, false);
93
- this.cellHeader2.current.updateView(null, true);
94
- this.tabSelected = 1;
95
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
96
- if (onDateChange) {
97
- onDateChange({
98
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
99
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
100
- });
101
- // const cloned = {
102
- // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
103
- // second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
104
- // };
105
- // onDateChange(cloned);
106
- }
107
- }
95
+ processDateFirst() {
96
+ const {onDateChange, onCTAStateChange} = this.props;
97
+ if (
98
+ this.cellHeader1.current &&
99
+ this.cellHeader2.current &&
100
+ this.calendarPicker.current
101
+ ) {
102
+ if (
103
+ this.doubleDate.first &&
104
+ this.doubleDate.second &&
105
+ this.selectedDate <= this.doubleDate.first
106
+ ) {
107
+ this.doubleDate.first = this.selectedDate;
108
+ this.doubleDate.second = null;
109
+ this.tabSelected = 1;
110
+ this.cellHeader1.current.updateView(
111
+ this.selectedDate,
112
+ this.tabSelected === 0,
113
+ );
114
+ this.cellHeader2.current.updateView(
115
+ this.doubleDate.second,
116
+ this.tabSelected === 1,
117
+ );
118
+ this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
119
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
120
+ this.doubleDate.first,
121
+ this.doubleDate.second,
122
+ this.tabSelected,
123
+ );
124
+ if (onDateChange) {
125
+ // const cloned = {
126
+ // first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
127
+ // this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
128
+ // second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
129
+ // this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
130
+ // };
131
+ onDateChange({
132
+ first: this.doubleDate.first
133
+ ? this.doubleDate.first.toDate()
134
+ : null,
135
+ second: this.doubleDate.second
136
+ ? this.doubleDate.second.toDate()
137
+ : null,
138
+ });
108
139
  }
109
- if (onCTAStateChange) {
110
- onCTAStateChange(!!(this.doubleDate.second));
140
+ } else {
141
+ this.doubleDate.first = this.selectedDate;
142
+ this.doubleDate.second = null;
143
+ this.cellHeader1.current.updateView(this.selectedDate, false);
144
+ this.cellHeader2.current.updateView(null, true);
145
+ this.tabSelected = 1;
146
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
147
+ this.doubleDate.first,
148
+ this.doubleDate.second,
149
+ this.tabSelected,
150
+ );
151
+ if (onDateChange) {
152
+ onDateChange({
153
+ first: this.doubleDate.first
154
+ ? this.doubleDate.first.toDate()
155
+ : null,
156
+ second: this.doubleDate.second
157
+ ? this.doubleDate.second.toDate()
158
+ : null,
159
+ });
160
+ // const cloned = {
161
+ // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
162
+ // second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
163
+ // };
164
+ // onDateChange(cloned);
111
165
  }
166
+ }
112
167
  }
168
+ if (onCTAStateChange) {
169
+ onCTAStateChange(!!this.doubleDate.second);
170
+ }
171
+ }
113
172
 
114
- processDateSecond() {
115
- const { onDateChange, onCTAStateChange } = this.props;
116
- if (this.cellHeader2.current) {
117
- this.cellHeader2.current.updateView(this.selectedDate, false);
118
- this.cellHeader1.current.setActiveTab(true);
119
- this.doubleDate.second = this.selectedDate;
120
- this.tabSelected = 0;
121
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
122
- if (onCTAStateChange) {
123
- onCTAStateChange(!!(this.doubleDate.second));
124
- }
125
- if (onDateChange) {
126
- onDateChange({
127
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
128
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
129
- });
130
- // const cloned = {
131
- // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
132
- // second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
133
- // };
134
- // onDateChange(cloned);
135
- }
136
- }
173
+ processDateSecond() {
174
+ const {onDateChange, onCTAStateChange} = this.props;
175
+ if (
176
+ this.cellHeader2.current &&
177
+ this.selectedDate >= this.doubleDate.first
178
+ ) {
179
+ this.doubleDate.second = this.selectedDate;
180
+ this.cellHeader2.current.updateView(this.selectedDate, false);
181
+ this.cellHeader1.current.setActiveTab(true);
182
+ this.tabSelected = 0;
183
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
184
+ this.doubleDate.first,
185
+ this.doubleDate.second,
186
+ this.tabSelected,
187
+ );
188
+ if (onCTAStateChange) {
189
+ onCTAStateChange(!!this.doubleDate.second);
190
+ }
191
+ if (onDateChange) {
192
+ onDateChange({
193
+ first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
194
+ second: this.doubleDate.second
195
+ ? this.doubleDate.second.toDate()
196
+ : null,
197
+ });
198
+ // const cloned = {
199
+ // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
200
+ // second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
201
+ // };
202
+ // onDateChange(cloned);
203
+ }
204
+ } else {
205
+ this.doubleDate.first = this.selectedDate;
206
+ this.doubleDate.second = null;
207
+
208
+ this.cellHeader1.current.updateView(this.selectedDate, false);
209
+ this.cellHeader2.current.updateView(null, false);
137
210
  }
211
+ }
138
212
 
139
- processDoubleDate() {
140
- if (this.tabSelected === 0) {
141
- this.processDateFirst();
142
- } else {
143
- this.processDateSecond();
144
- }
213
+ processDoubleDate() {
214
+ if (this.tabSelected === 0) {
215
+ this.processDateFirst();
216
+ } else {
217
+ this.processDateSecond();
145
218
  }
219
+ }
146
220
 
147
- updateView() {
148
- const { onDateChange } = this.props;
149
- const { isDoubleDateMode } = this.state;
221
+ updateView() {
222
+ const {onDateChange} = this.props;
223
+ const {isDoubleDateMode} = this.state;
150
224
 
151
- if (isDoubleDateMode) {
152
- this.processDoubleDate();
153
- } else {
154
- if (this.cellHeaderSingle.current) {
155
- this.cellHeaderSingle.current.updateView(this.selectedDate, true);
156
- }
157
- if (onDateChange) {
158
- const date = new Date(this.selectedDate.toDate());
159
- onDateChange(date);
160
- }
161
- }
225
+ if (isDoubleDateMode) {
226
+ this.processDoubleDate();
227
+ } else {
228
+ if (this.cellHeaderSingle.current) {
229
+ this.cellHeaderSingle.current.updateView(this.selectedDate, true);
230
+ }
231
+ if (onDateChange) {
232
+ const date = new Date(this.selectedDate.toDate());
233
+ onDateChange(date);
234
+ }
162
235
  }
236
+ }
163
237
 
164
- onDateChange = (date) => {
165
- this.selectedDate = date;
166
- this.updateView();
167
- }
238
+ onDateChange = date => {
239
+ this.selectedDate = date;
240
+ this.updateView();
241
+ };
168
242
 
169
- updateHeaderView = () => {
170
- const { onDateChange, onCTAStateChange } = this.props;
171
- const { isDoubleDateMode } = this.state;
172
- if (isDoubleDateMode) {
173
- if (this.cellHeader1.current && this.cellHeader2.current) {
174
- this.cellHeader1.current.updateView(this.selectedDate, true);
175
- this.cellHeader2.current.updateView(null, false);
176
- this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate, null, this.tabSelected);
177
- this.doubleDate.first = moment(this.selectedDate);
178
- this.doubleDate.second = null;
179
- this.tabSelected = 0;
243
+ updateHeaderView = () => {
244
+ const {onDateChange, onCTAStateChange} = this.props;
245
+ const {isDoubleDateMode} = this.state;
246
+ if (isDoubleDateMode) {
247
+ if (this.cellHeader1.current && this.cellHeader2.current) {
248
+ this.cellHeader1.current.updateView(this.selectedDate, true);
249
+ this.cellHeader2.current.updateView(null, false);
250
+ this.calendarPicker.current.setDoubleDateAndTabIndex(
251
+ this.selectedDate,
252
+ null,
253
+ this.tabSelected,
254
+ );
255
+ this.doubleDate.first = moment(this.selectedDate);
256
+ this.doubleDate.second = null;
257
+ this.tabSelected = 0;
180
258
 
181
- if (onCTAStateChange) {
182
- onCTAStateChange(false);
183
- }
184
- if (onDateChange) {
185
- onDateChange({
186
- first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
187
- second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
188
- });
189
- // const cloned = {
190
- // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
191
- // second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
192
- // };
193
- // onDateChange(cloned);
194
- }
195
- }
259
+ if (onCTAStateChange) {
260
+ onCTAStateChange(false);
261
+ }
262
+ if (onDateChange) {
263
+ onDateChange({
264
+ first: this.doubleDate.first
265
+ ? this.doubleDate.first.toDate()
266
+ : null,
267
+ second: this.doubleDate.second
268
+ ? this.doubleDate.second.toDate()
269
+ : null,
270
+ });
271
+ // const cloned = {
272
+ // first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
273
+ // second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
274
+ // };
275
+ // onDateChange(cloned);
276
+ }
277
+ }
278
+ } else {
279
+ if (onCTAStateChange) {
280
+ onCTAStateChange(true);
281
+ }
282
+ if (this.cellHeaderSingle.current) {
283
+ if (this.doubleDate.first) {
284
+ this.cellHeaderSingle.current.updateView(this.doubleDate.first, true);
285
+ this.selectedDate = this.doubleDate.first;
196
286
  } else {
197
- if (onCTAStateChange) {
198
- onCTAStateChange(true);
199
- }
200
- if (this.cellHeaderSingle.current) {
201
- if (this.doubleDate.first) {
202
- this.cellHeaderSingle.current.updateView(this.doubleDate.first, true);
203
- this.selectedDate = this.doubleDate.first;
204
- } else {
205
- this.cellHeaderSingle.current.updateView(this.selectedDate, true);
206
- }
287
+ this.cellHeaderSingle.current.updateView(this.selectedDate, true);
288
+ }
207
289
 
208
- if (onDateChange) {
209
- // const clone = moment(this.selectedDate);
210
- // const cloned = new Date(clone.year(), clone.month(), clone.date());
211
- onDateChange(this.selectedDate.toDate());
212
- }
213
- }
290
+ if (onDateChange) {
291
+ // const clone = moment(this.selectedDate);
292
+ // const cloned = new Date(clone.year(), clone.month(), clone.date());
293
+ onDateChange(this.selectedDate.toDate());
214
294
  }
215
- };
295
+ }
296
+ }
297
+ };
216
298
 
217
- toggleSelectionDateMode = () => {
218
- 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
- });
226
- };
299
+ toggleSelectionDateMode = () => {
300
+ const {onCallbackCalendar} = this.props;
301
+ this.setState(
302
+ preState => ({isDoubleDateMode: !preState.isDoubleDateMode}),
303
+ () => {
304
+ const {isDoubleDateMode} = this.state;
305
+ this.updateHeaderView();
306
+ if (onCallbackCalendar && typeof onCallbackCalendar === 'function') {
307
+ onCallbackCalendar('switch', isDoubleDateMode);
308
+ }
309
+ },
310
+ );
311
+ };
227
312
 
228
- renderSwitchReturnSelection = () => {
229
- const { isDoubleDateMode } = this.state;
230
- return (
231
- <View style={styles.viewSwitch}>
232
- <Text.Caption style={styles.textSwitch}>
233
- {SwitchLanguage.chooseRoundtrip}
234
- </Text.Caption>
235
- <Switch
236
- value={isDoubleDateMode}
237
- onValueChange={this.toggleSelectionDateMode}
238
- thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
239
- trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
240
- style={[Platform.OS === 'ios' && { transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }]}
241
- />
242
- </View>
243
- );
244
- };
313
+ renderSwitchReturnSelection = () => {
314
+ const {isDoubleDateMode} = this.state;
315
+ return (
316
+ <View style={styles.headerContainer}>
317
+ <View style={styles.viewSwitch}>
318
+ <Text.Label1 weight="medium" style={styles.textSwitch}>
319
+ {SwitchLanguage.chooseRoundtrip}
320
+ </Text.Label1>
321
+ <Switch
322
+ value={isDoubleDateMode}
323
+ onChange={this.toggleSelectionDateMode}
324
+ thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
325
+ trackColor={{
326
+ false: '#e5e7ec',
327
+ true: '#e5e7ec',
328
+ }}
329
+ />
330
+ </View>
331
+ <View style={styles.seperator} />
332
+ </View>
333
+ );
334
+ };
245
335
 
246
- renderHeaderPanel = () => {
247
- const { isDoubleDateMode } = this.state;
248
- const { headerFrom, headerTo } = this.props;
249
- return (isDoubleDateMode ? (
250
- <View style={styles.viewPanel}>
251
- <TabHeader
252
- id={0}
253
- ref={this.cellHeader1}
254
- onChangeTab={this.onChangeTab}
255
- label={headerFrom || SwitchLanguage.depart}
256
- activeTab
257
- date={this.doubleDate.first}
258
- />
336
+ renderHeaderPanel = () => {
337
+ const {isDoubleDateMode} = this.state;
338
+ const {headerFrom, headerTo} = this.props;
339
+ return isDoubleDateMode ? (
340
+ <View style={styles.viewPanel}>
341
+ <TabHeader
342
+ id={0}
343
+ ref={this.cellHeader1}
344
+ onChangeTab={this.onChangeTab}
345
+ label={headerFrom || SwitchLanguage.depart}
346
+ activeTab
347
+ date={this.doubleDate.first}
348
+ />
259
349
 
260
- <TabHeader
261
- id={1}
262
- ref={this.cellHeader2}
263
- onChangeTab={this.onChangeTab}
264
- label={headerTo || SwitchLanguage.return}
265
- activeTab={false}
266
- date=""
267
- />
268
- </View>
269
- ) : (
270
- <View style={styles.viewPanel_2}>
271
- <TabHeader
272
- id={1}
273
- disabled
274
- ref={this.cellHeaderSingle}
275
- label={headerFrom || SwitchLanguage.depart}
276
- activeTab
277
- date={this.selectedDate}
278
- />
279
- </View>
280
- ));
281
- };
350
+ <TabHeader
351
+ id={1}
352
+ ref={this.cellHeader2}
353
+ onChangeTab={this.onChangeTab}
354
+ label={headerTo || SwitchLanguage.return}
355
+ activeTab={false}
356
+ date=""
357
+ />
358
+ </View>
359
+ ) : (
360
+ <View style={styles.viewPanel_2}>
361
+ <TabHeader
362
+ id={1}
363
+ disabled
364
+ ref={this.cellHeaderSingle}
365
+ label={headerFrom || SwitchLanguage.depart}
366
+ activeTab
367
+ date={this.selectedDate}
368
+ />
369
+ </View>
370
+ );
371
+ };
282
372
 
283
- setDateRange = (dateRange, isScrollToStartDate) => {
284
- const { mode, doubleDate = {} } = this.props;
285
- 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
- } : {};
293
- }
373
+ setDateRange = (dateRange, isScrollToStartDate) => {
374
+ const {mode, doubleDate = {}} = this.props;
375
+ if (mode === 'doubleDate') {
376
+ this.cellHeader1.current.updateView(
377
+ dateRange.startDate,
378
+ this.tabSelected === 0,
379
+ );
380
+ this.cellHeader2.current.updateView(
381
+ dateRange.endDate,
382
+ this.tabSelected === 1,
383
+ );
384
+ this.calendarPicker?.current?.setDateRange(
385
+ dateRange,
386
+ isScrollToStartDate,
387
+ );
388
+ this.doubleDate = doubleDate
389
+ ? {
390
+ first: dateRange.startDate ? moment(dateRange.startDate) : null,
391
+ second: dateRange.endDate ? moment(dateRange.endDate) : null,
392
+ }
393
+ : {};
294
394
  }
395
+ };
295
396
 
296
- render() {
297
- const {
298
- isOffLunar, isHideHoliday, isHiddenSwitch, isShowLunar, onCallbackCalendar, priceList, labelFrom, labelTo, isHideLabel, minDate, maxDate, doubleDate,
299
- isHideHeaderPanel
300
- } = this.props;
301
- const { isDoubleDateMode } = this.state;
302
- return (
303
- <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
304
- {!isHiddenSwitch && this.renderSwitchReturnSelection()}
305
- {!isHideHeaderPanel && this.renderHeaderPanel()}
306
- <CalendarPro
307
- ref={this.calendarPicker}
308
- startDate={doubleDate?.first}
309
- endDate={doubleDate?.second}
310
- onDateChange={this.onDateChange}
311
- isDoubleDateMode={isDoubleDateMode}
312
- selectedDate={this.selectedDate}
313
- isShowLunar={isShowLunar}
314
- onCallbackCalendar={onCallbackCalendar}
315
- priceList={priceList}
316
- labelFrom={labelFrom}
317
- labelTo={labelTo}
318
- isHideLabel={isHideLabel}
319
- minDate={minDate}
320
- maxDate={maxDate}
321
- isHideHoliday={isHideHoliday}
322
- isOffLunar={isOffLunar}
323
- />
324
- </ScrollView>
325
- );
326
- }
397
+ render() {
398
+ const {
399
+ isOffLunar,
400
+ isHideHoliday,
401
+ isHiddenSwitch,
402
+ isShowLunar,
403
+ onCallbackCalendar,
404
+ priceList,
405
+ labelFrom,
406
+ labelTo,
407
+ isHideLabel,
408
+ minDate,
409
+ maxDate,
410
+ doubleDate,
411
+ isHideHeaderPanel,
412
+ disabledWeekend,
413
+ style,
414
+ } = this.props;
415
+ const {isDoubleDateMode} = this.state;
416
+ const {width} = Dimensions.get('window');
417
+ return (
418
+ <ScrollView
419
+ style={[
420
+ styles.scrollView,
421
+ {
422
+ width: width - ScaleSize(24),
423
+ },
424
+ style,
425
+ ]}>
426
+ <View
427
+ style={{
428
+ backgroundColor: Colors.black_01,
429
+ borderRadius: Radius.XS,
430
+ }}>
431
+ {!isHiddenSwitch && this.renderSwitchReturnSelection()}
432
+ {!isHideHeaderPanel && this.renderHeaderPanel()}
433
+ </View>
434
+ <CalendarPro
435
+ disabledWeekend={disabledWeekend}
436
+ priceList={priceList}
437
+ ref={this.calendarPicker}
438
+ startDate={doubleDate?.first}
439
+ endDate={doubleDate?.second}
440
+ onDateChange={this.onDateChange}
441
+ isDoubleDateMode={isDoubleDateMode}
442
+ selectedDate={this.selectedDate}
443
+ isShowLunar={isShowLunar}
444
+ onCallbackCalendar={onCallbackCalendar}
445
+ labelFrom={labelFrom}
446
+ labelTo={labelTo}
447
+ isHideLabel={isHideLabel}
448
+ minDate={minDate}
449
+ maxDate={maxDate}
450
+ isHideHoliday={isHideHoliday}
451
+ isOffLunar={isOffLunar}
452
+ />
453
+ </ScrollView>
454
+ );
455
+ }
327
456
  }
328
457
 
329
458
  export default Calendar;
330
459
 
331
460
  Calendar.propTypes = {
332
- doubleDate: PropTypes.shape({
333
- first: PropTypes.any,
334
- second: PropTypes.any
335
- }),
336
- id: PropTypes.any,
337
- isHiddenSwitch: PropTypes.bool,
338
- isShowLunar: PropTypes.bool,
339
- mode: PropTypes.string,
340
- onCTAStateChange: PropTypes.func,
341
- onCallbackCalendar: PropTypes.func,
342
- onDateChange: PropTypes.func,
343
- selectedDate: PropTypes.any,
344
- priceList: PropTypes.any,
345
- labelFrom: PropTypes.string,
346
- labelTo: PropTypes.string,
347
- headerFrom: PropTypes.string,
348
- headerTo: PropTypes.string,
349
- isHideLabel: PropTypes.bool,
350
- isHideHoliday: PropTypes.bool,
351
- minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
352
- maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
461
+ doubleDate: PropTypes.shape({
462
+ first: PropTypes.any,
463
+ second: PropTypes.any,
464
+ }),
465
+ id: PropTypes.any,
466
+ isHiddenSwitch: PropTypes.bool,
467
+ isShowLunar: PropTypes.bool,
468
+ mode: PropTypes.string,
469
+ onCTAStateChange: PropTypes.func,
470
+ onCallbackCalendar: PropTypes.func,
471
+ onDateChange: PropTypes.func,
472
+ selectedDate: PropTypes.any,
473
+ priceList: PropTypes.any,
474
+ labelFrom: PropTypes.string,
475
+ labelTo: PropTypes.string,
476
+ headerFrom: PropTypes.string,
477
+ headerTo: PropTypes.string,
478
+ isHideLabel: PropTypes.bool,
479
+ isHideHoliday: PropTypes.bool,
480
+ minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
481
+ maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
482
+ style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
353
483
  };
354
484
 
355
485
  Calendar.defaultProps = {
356
- mode: 'single',
357
- isHiddenSwitch: false
486
+ mode: 'single',
487
+ isHiddenSwitch: false,
358
488
  };
359
489
 
360
490
  const styles = StyleSheet.create({
361
- viewPanel_2: {
362
- height: 46,
363
- paddingVertical: 10,
364
- justifyContent: 'center',
365
- alignItems: 'center',
366
- backgroundColor: 'white',
367
- borderRadius: 8
368
- },
369
- viewPanel: {
370
- height: 50,
371
- marginHorizontal: 12,
372
- marginTop: 6,
373
- marginBottom: 25,
374
- padding: 2,
375
- flexDirection: 'row',
376
- backgroundColor: '#eeeeef',
377
- justifyContent: 'space-around',
378
- borderRadius: 8
379
- },
380
- textSwitch: {
381
- // fontSize: 10,
382
- fontWeight: 'bold',
383
- color: '#222222'
384
- },
385
- viewSwitch: {
386
- flexDirection: 'row',
387
- justifyContent: 'space-between',
388
- paddingHorizontal: 12,
389
- alignItems: 'center',
390
- backgroundColor: '#f2f3f5',
391
- paddingVertical: 9,
392
- height: 42
393
- },
491
+ viewPanel_2: {
492
+ height: 50,
493
+ marginHorizontal: 12,
494
+ marginTop: 6,
495
+ flexDirection: 'row',
496
+ },
497
+ viewPanel: {
498
+ height: 50,
499
+ marginHorizontal: 12,
500
+ marginTop: 6,
501
+ flexDirection: 'row',
502
+ },
503
+ textSwitch: {
504
+ color: Colors.black_15,
505
+ },
506
+ viewSwitch: {
507
+ flexDirection: 'row',
508
+ justifyContent: 'space-between',
509
+ alignItems: 'center',
510
+ backgroundColor: Colors.white,
511
+ height: 42,
512
+ },
513
+ seperator: {
514
+ height: 1,
515
+ width: '100%',
516
+ backgroundColor: Colors.black_04,
517
+ },
518
+ headerContainer: {
519
+ paddingHorizontal: 12,
520
+ paddingVertical: 8,
521
+ },
522
+ scrollView: {
523
+ flex: 1,
524
+ backgroundColor: 'transparent',
525
+ alignSelf: 'center',
526
+ },
394
527
  });