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