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