@momo-kits/date-picker 0.0.55-beta → 0.0.55-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 (7) hide show
  1. package/datePicker/DatePicker.js +337 -141
  2. package/datePicker/DatePickerInput.js +47 -16
  3. package/datePicker/ListPicker.js +51 -47
  4. package/datePicker/WheelPicker.js +130 -83
  5. package/datePicker/helper/DatePickerHelper.js +14 -6
  6. package/package.json +16 -14
  7. package/publish.sh +2 -2
package/datePicker/DatePicker.js CHANGED
@@ -1,12 +1,16 @@
1
1
  /* eslint-disable max-len */
2
2
  /* eslint-disable react/no-unused-prop-types */
3
3
  import React, { Component } from 'react';
4
- import {
5
- View, StyleSheet, Dimensions
6
- } from 'react-native';
4
+ import { View, StyleSheet, Dimensions } from 'react-native';
7
5
  import PropTypes from 'prop-types';
8
6
  import {
9
- BottomPopupHeader, Button, Text, ScreenUtils, SwitchLanguage, Spacing
7
+ BottomPopupHeader,
8
+ Button,
9
+ Text,
10
+ ScreenUtils,
11
+ SwitchLanguage,
12
+ Spacing,
13
+ Colors,
10
14
  } from '@momo-kits/core';
11
15
  import WheelPicker from './WheelPicker';
12
16
  import DatePickerHelper from './helper/DatePickerHelper';
@@ -26,33 +30,43 @@ const styles = StyleSheet.create({
26
30
  width: widthScreen,
27
31
  alignItems: 'center',
28
32
  justifyContent: 'center',
33
+ paddingHorizontal: 21,
34
+ paddingTop: 12,
29
35
  },
30
36
  column: {
31
37
  borderWidth: 2,
32
38
  borderColor: 'red',
33
39
  },
34
40
  header: {
35
- borderRadius: 16,
41
+ borderTopLeftRadius: 12,
42
+ borderTopRightRadius: 12,
43
+ //backgroundColor:'red',
44
+ height: 64,
45
+ borderBottomColor: Colors.black_04,
46
+ borderBottomWidth: 1,
47
+ alignItems: 'center',
48
+ justifyContent: 'center',
36
49
  marginBottom: 0, // Spacing.S,
37
50
  },
38
51
  view: {
39
52
  backgroundColor: 'white',
40
53
  borderTopRightRadius: 16,
41
54
  borderTopLeftRadius: 16,
42
- overflow: 'hidden'
55
+ overflow: 'hidden',
43
56
  },
44
57
  titleCancel: {
45
58
  fontSize: 17,
46
- color: '#4A90E2'
59
+ color: '#4A90E2',
47
60
  },
48
61
  titleConfirm: {
49
62
  fontSize: 17,
50
63
  color: '#4A90E2',
51
- textAlign: 'right'
52
- }
64
+ textAlign: 'right',
65
+ },
53
66
  });
54
67
 
55
- const getStrings = (strings) => (strings?.length === 1 ? `0${strings}` : strings);
68
+ const getStrings = (strings) =>
69
+ strings?.length === 1 ? `0${strings}` : strings;
56
70
  class DatePicker extends Component {
57
71
  constructor(props) {
58
72
  super(props);
@@ -86,35 +100,60 @@ class DatePicker extends Component {
86
100
  if (props) {
87
101
  const propsMinDate = props.minDate ? props.minDate : props.minValue;
88
102
  const propsMaxDate = props.maxDate ? props.maxDate : props.maxValue;
89
- const propsSelectedDate = props.selectedDate ? props.selectedDate : props.value;
103
+ const propsSelectedDate = props.selectedDate
104
+ ? props.selectedDate
105
+ : props.value;
90
106
 
91
107
  if (propsMinDate) {
92
- this.minDate = DatePickerHelper.formatDate(propsMinDate, props.format);
108
+ this.minDate = DatePickerHelper.formatDate(
109
+ propsMinDate,
110
+ props.format,
111
+ );
93
112
  } else if (props.maxAge) {
94
- this.minDate = DatePickerHelper.calculateDateSinceYearAgo(props.maxAge);
113
+ this.minDate = DatePickerHelper.calculateDateSinceYearAgo(
114
+ props.maxAge,
115
+ );
95
116
  } else {
96
117
  this.minDate = null;
97
118
  }
98
119
 
99
120
  if (propsMaxDate) {
100
- this.maxDate = DatePickerHelper.formatDate(propsMaxDate, props.format);
121
+ this.maxDate = DatePickerHelper.formatDate(
122
+ propsMaxDate,
123
+ props.format,
124
+ );
101
125
  } else if (props.minAge) {
102
- this.maxDate = DatePickerHelper.calculateDateSinceYearAgo(props.minAge);
126
+ this.maxDate = DatePickerHelper.calculateDateSinceYearAgo(
127
+ props.minAge,
128
+ );
103
129
  } else {
104
130
  this.maxDate = null;
105
131
  }
106
132
 
107
- if (this.maxDate && this.minDate && this.maxDate.getTime() < this.minDate.getTime()) {
133
+ if (
134
+ this.maxDate &&
135
+ this.minDate &&
136
+ this.maxDate.getTime() < this.minDate.getTime()
137
+ ) {
108
138
  this.maxDate = null;
109
139
  this.minDate = null;
110
140
  }
111
141
 
112
142
  if (propsSelectedDate) {
113
- this.selectedDate = DatePickerHelper.formatDate(propsSelectedDate, props.format);
143
+ this.selectedDate = DatePickerHelper.formatDate(
144
+ propsSelectedDate,
145
+ props.format,
146
+ );
114
147
  if (this.selectedDate) {
115
- if (this.minDate && this.selectedDate.getTime() < this.minDate.getTime()) {
148
+ if (
149
+ this.minDate &&
150
+ this.selectedDate.getTime() < this.minDate.getTime()
151
+ ) {
116
152
  this.selectedDate = null;
117
- } else if (this.maxDate && this.maxDate.getTime() < this.selectedDate.getTime()) {
153
+ } else if (
154
+ this.maxDate &&
155
+ this.maxDate.getTime() < this.selectedDate.getTime()
156
+ ) {
118
157
  this.selectedDate = null;
119
158
  }
120
159
  }
@@ -122,17 +161,42 @@ class DatePicker extends Component {
122
161
  this.selectedDate = null;
123
162
  }
124
163
  if (props.format === 'hh:mm') {
125
- this.selectedDate = props.isRanged ? {
126
- from: DatePickerHelper.formatDate(propsSelectedDate.from, props.format),
127
- to: DatePickerHelper.formatDate(propsSelectedDate.to, props.format)
128
- } : DatePickerHelper.formatDate(propsSelectedDate, props.format);
164
+ this.selectedDate = props.isRanged
165
+ ? {
166
+ from: DatePickerHelper.formatDate(
167
+ propsSelectedDate.from,
168
+ props.format,
169
+ ),
170
+ to: DatePickerHelper.formatDate(
171
+ propsSelectedDate.to,
172
+ props.format,
173
+ ),
174
+ }
175
+ : DatePickerHelper.formatDate(
176
+ propsSelectedDate,
177
+ props.format,
178
+ );
129
179
  }
130
180
  }
131
- this.createDataDate(this.minDate, this.maxDate, props.minuteArray);
181
+ this.createDataDate(
182
+ this.minDate,
183
+ this.maxDate,
184
+ props.minuteArray,
185
+ props.startTime,
186
+ props.endTime,
187
+ props.rangeHour,
188
+ );
132
189
  this.selectedIndexDate();
133
190
  }
134
191
 
135
- createDataDate(minDate, maxDate, minuteArray) {
192
+ createDataDate(
193
+ minDate,
194
+ maxDate,
195
+ minuteArray,
196
+ startTime,
197
+ endTime,
198
+ rangeHour,
199
+ ) {
136
200
  this.minDay = 1;
137
201
  this.minMonth = 1;
138
202
  this.minYear = 1970;
@@ -159,7 +223,9 @@ class DatePicker extends Component {
159
223
  } else {
160
224
  this.minutes = DatePickerHelper.makeRange(0, 59, true);
161
225
  }
162
- this.ranged = DatePickerHelper.arrayRange;
226
+ this.ranged = rangeHour || DatePickerHelper.arrayRange;
227
+ this.startTime = startTime || DatePickerHelper.arrayRange;
228
+ this.endTime = endTime || DatePickerHelper.arrayRange;
163
229
  }
164
230
 
165
231
  selectedIndexDate() {
@@ -171,17 +237,35 @@ class DatePicker extends Component {
171
237
  current = this.maxDate;
172
238
  }
173
239
  if (format === 'hh:mm' && isRanged) {
174
- const valueHours_1 = this.selectedDate ? `${getStrings(this.selectedDate?.from?.getHours()?.toString())}:${getStrings(this.selectedDate?.from?.getMinutes()?.toString())}` : '';
175
-
176
- const valueHours_2 = this.selectedDate ? `${getStrings(this.selectedDate?.to?.getHours()?.toString())}:${getStrings(this.selectedDate?.to?.getMinutes()?.toString())}` : '';
177
-
178
- this.hourRangeIndex_1 = this.selectedDate
240
+ const valueHours_1 = this.selectedDate?.from
241
+ ? `${getStrings(
242
+ this.selectedDate?.from?.getHours()?.toString(),
243
+ )}:${getStrings(
244
+ this.selectedDate?.from?.getMinutes()?.toString(),
245
+ )}`
246
+ : '00:00';
247
+ const valueHours_2 = this.selectedDate?.to
248
+ ? `${getStrings(
249
+ this.selectedDate?.to?.getHours()?.toString(),
250
+ )}:${getStrings(
251
+ this.selectedDate?.to?.getMinutes()?.toString(),
252
+ )}`
253
+ : '00:00';
254
+ this.hourRangeIndex_1 = valueHours_1
179
255
  ? this.ranged.indexOf(valueHours_1)
180
- : this.ranged.indexOf(`${current.getHours().toString()}:${current.getMinutes().toString()}`);
256
+ : this.ranged.indexOf(
257
+ `${current.getHours().toString()}:${current
258
+ .getMinutes()
259
+ .toString()}`,
260
+ );
181
261
 
182
- this.hourRangeIndex_2 = this.selectedDate
262
+ this.hourRangeIndex_2 = valueHours_2
183
263
  ? this.ranged.indexOf(valueHours_2)
184
- : this.ranged.indexOf(`${current.getHours().toString()}:${current.getMinutes().toString()}`);
264
+ : this.ranged.indexOf(
265
+ `${current.getHours().toString()}:${current
266
+ .getMinutes()
267
+ .toString()}`,
268
+ );
185
269
  return;
186
270
  }
187
271
  this.dayIndex = this.selectedDate
@@ -197,40 +281,66 @@ class DatePicker extends Component {
197
281
  : this.years.indexOf(current.getFullYear().toString());
198
282
 
199
283
  if (format === 'hh:mm' && !isRanged) {
200
- const valueHours = this.selectedDate ? this.selectedDate?.getHours()?.toString()?.length === 1 ? `0${this.selectedDate.getHours().toString()}` : this.selectedDate?.getHours()?.toString() || '' : '';
201
- const valueMinute = this.selectedDate ? this.selectedDate?.getMinutes()?.toString()?.length === 1 ? `0${this.selectedDate.getMinutes().toString()}` : this.selectedDate?.getMinutes()?.toString() || '' : '';
284
+ const valueHours = this.selectedDate
285
+ ? this.selectedDate?.getHours()?.toString()?.length === 1
286
+ ? `0${this.selectedDate.getHours().toString()}`
287
+ : this.selectedDate?.getHours()?.toString() || ''
288
+ : '';
289
+ const valueMinute = this.selectedDate
290
+ ? this.selectedDate?.getMinutes()?.toString()?.length === 1
291
+ ? `0${this.selectedDate.getMinutes().toString()}`
292
+ : this.selectedDate?.getMinutes()?.toString() || ''
293
+ : '';
202
294
 
203
295
  this.hourIndex = this.selectedDate
204
296
  ? this.hours.indexOf(valueHours)
205
- : this.hours.indexOf(current.getHours().toString());
297
+ : this.hours.indexOf(
298
+ current.getHours().toString().length === 1
299
+ ? `0${current.getHours().toString()}`
300
+ : current.getHours().toString(),
301
+ );
206
302
 
207
303
  this.minuteIndex = this.selectedDate
208
304
  ? this.minutes.indexOf(valueMinute)
209
- : this.minutes.indexOf(current.getMinutes().toString());
305
+ : this.minutes.indexOf(
306
+ current.getMinutes().toString().length === 1
307
+ ? `0${current.getMinutes().toString()}`
308
+ : current.getMinutes().toString(),
309
+ );
210
310
  }
211
311
  }
212
312
 
213
313
  onBeginDrag = (refName) => {
214
314
  // eslint-disable-next-line no-restricted-syntax
215
315
  for (const i in this.arrayRef) {
216
- if (i && i !== refName && this.arrayRef && this.arrayRef[i] && this.arrayRef[i].update) {
316
+ if (
317
+ i &&
318
+ i !== refName &&
319
+ this.arrayRef &&
320
+ this.arrayRef[i] &&
321
+ this.arrayRef[i].update
322
+ ) {
217
323
  this.arrayRef[i].setScrollEnabled(false);
218
324
  }
219
325
  }
220
- }
326
+ };
221
327
 
222
328
  onEndDrag = (refName) => {
223
329
  // eslint-disable-next-line no-restricted-syntax
224
330
  for (const i in this.arrayRef) {
225
- if (i && i !== refName && this.arrayRef && this.arrayRef[i] && this.arrayRef[i].update) {
331
+ if (
332
+ i &&
333
+ i !== refName &&
334
+ this.arrayRef &&
335
+ this.arrayRef[i] &&
336
+ this.arrayRef[i].update
337
+ ) {
226
338
  this.arrayRef[i].setScrollEnabled(true);
227
339
  }
228
340
  }
229
- }
230
-
231
- show = () => {
341
+ };
232
342
 
233
- }
343
+ show = () => {};
234
344
 
235
345
  hide = () => {
236
346
  const { onClose, requestClose } = this.props;
@@ -241,12 +351,10 @@ class DatePicker extends Component {
241
351
  }
242
352
  });
243
353
  }
244
- }
354
+ };
245
355
 
246
356
  finish = () => {
247
- const {
248
- format, onSelected, isRanged, selectedDate
249
- } = this.props;
357
+ const { format, onSelected, isRanged, selectedDate } = this.props;
250
358
  if (isRanged && format === 'hh:mm') {
251
359
  const from = this.ranged[this.hourRangeIndex_1];
252
360
  const to = this.ranged[this.hourRangeIndex_2];
@@ -259,23 +367,32 @@ class DatePicker extends Component {
259
367
  const day = this.days[this.dayIndex];
260
368
  const month = this.months[this.monthIndex];
261
369
  const year = this.years[this.yearIndex];
262
- const hour = this.hours[this.hourIndex];
263
- const minute = this.minutes[this.minuteIndex];
264
-
265
- const selectedDateFormatted = DatePickerHelper.toString(day, month, year, hour, minute, format);
266
-
370
+ const hour = this.hours[this.hourIndex] || '00';
371
+ const minute = this.minutes[this.minuteIndex] || '00';
372
+ const selectedDateFormatted = DatePickerHelper.toString(
373
+ day,
374
+ month,
375
+ year,
376
+ hour,
377
+ minute,
378
+ format,
379
+ );
267
380
  if (onSelected && typeof onSelected === 'function') {
268
- onSelected(selectedDateFormatted || selectedDate || DatePickerHelper.getCurrentDate(format));
381
+ onSelected(
382
+ selectedDateFormatted ||
383
+ selectedDate ||
384
+ DatePickerHelper.getCurrentDate(format),
385
+ );
269
386
  }
270
387
  this.hide();
271
- }
388
+ };
272
389
 
273
390
  renderUpdate(param) {
274
391
  if (param && param.day != null) {
275
392
  this.dayIndex = param.day;
276
393
  this.updateWheelPiker('DayView', {
277
394
  arrayValue: this.days,
278
- value: param.day
395
+ value: param.day,
279
396
  });
280
397
  }
281
398
 
@@ -283,7 +400,7 @@ class DatePicker extends Component {
283
400
  this.monthIndex = param.month;
284
401
  this.updateWheelPiker('MonthView', {
285
402
  arrayValue: this.months,
286
- value: param.month
403
+ value: param.month,
287
404
  });
288
405
  }
289
406
 
@@ -291,7 +408,7 @@ class DatePicker extends Component {
291
408
  this.yearIndex = param.year;
292
409
  this.updateWheelPiker('YearView', {
293
410
  arrayValue: this.years,
294
- value: param.year
411
+ value: param.year,
295
412
  });
296
413
  }
297
414
 
@@ -299,7 +416,7 @@ class DatePicker extends Component {
299
416
  this.hourIndex = param.hour;
300
417
  this.updateWheelPiker('HourView', {
301
418
  arrayValue: this.hours,
302
- value: param.hour
419
+ value: param.hour,
303
420
  });
304
421
  }
305
422
 
@@ -307,7 +424,7 @@ class DatePicker extends Component {
307
424
  this.minuteIndex = param.minute;
308
425
  this.updateWheelPiker('MinuteView', {
309
426
  arrayValue: this.minutes,
310
- value: param.minute
427
+ value: param.minute,
311
428
  });
312
429
  }
313
430
 
@@ -315,7 +432,7 @@ class DatePicker extends Component {
315
432
  this.hourRangeIndex_1 = param.hourRange_1;
316
433
  this.updateWheelPiker('HourRange1', {
317
434
  arrayValue: this.ranged,
318
- value: param.hourRange_1
435
+ value: param.hourRange_1,
319
436
  });
320
437
  }
321
438
 
@@ -323,7 +440,7 @@ class DatePicker extends Component {
323
440
  this.hourRangeIndex_2 = param.hourRange_2;
324
441
  this.updateWheelPiker('HourRange2', {
325
442
  arrayValue: this.ranged,
326
- value: param.hourRange_2
443
+ value: param.hourRange_2,
327
444
  });
328
445
  }
329
446
  }
@@ -353,13 +470,18 @@ class DatePicker extends Component {
353
470
 
354
471
  if (isUpDate) {
355
472
  this.days = DatePickerHelper.makeRange(minDay, maxDay);
356
- index = day > maxDay ? this.days?.length - 1 : (day < minDay ? 0 : this.days.indexOf(day.toString()));
473
+ index =
474
+ day > maxDay
475
+ ? this.days?.length - 1
476
+ : day < minDay
477
+ ? 0
478
+ : this.days.indexOf(day.toString());
357
479
  }
358
480
 
359
481
  this.renderUpdate({
360
482
  day: index,
361
483
  month: monthIndex,
362
- year: yearIndex
484
+ year: yearIndex,
363
485
  });
364
486
  }
365
487
 
@@ -377,15 +499,21 @@ class DatePicker extends Component {
377
499
  if (this.minMonth && year === this.minYear) {
378
500
  minMonth = this.minMonth;
379
501
  }
380
- if (maxMonth !== this.months?.length || minMonth !== parseInt(this.months[0])) {
502
+ if (
503
+ maxMonth !== this.months?.length ||
504
+ minMonth !== parseInt(this.months[0])
505
+ ) {
381
506
  isUpDate = true;
382
507
  }
383
508
  let index = monthIndex;
384
509
  if (isUpDate) {
385
510
  this.months = DatePickerHelper.makeRange(minMonth, maxMonth);
386
- index = month > maxMonth
387
- ? this.months?.length - 1
388
- : (month < minMonth ? 0 : this.months?.indexOf(month.toString()));
511
+ index =
512
+ month > maxMonth
513
+ ? this.months?.length - 1
514
+ : month < minMonth
515
+ ? 0
516
+ : this.months?.indexOf(month.toString());
389
517
  }
390
518
  this.setStateDate(dayIndex, index, yearIndex);
391
519
  }
@@ -400,7 +528,15 @@ class DatePicker extends Component {
400
528
  }
401
529
  }
402
530
 
403
- renderColumn(refName, valueInput, arrayValue, label, bottomOffset, callback, reversePreFix) {
531
+ renderColumn(
532
+ refName,
533
+ valueInput,
534
+ arrayValue,
535
+ label,
536
+ bottomOffset,
537
+ callback,
538
+ reversePreFix,
539
+ ) {
404
540
  if (!this.arrayRef) {
405
541
  this.arrayRef = {};
406
542
  }
@@ -429,10 +565,19 @@ class DatePicker extends Component {
429
565
 
430
566
  renderHeader() {
431
567
  const {
432
- title, placeholder, body, buttonTitle, onButtonPress, headerStyle, iconClosePosition = 'right'
568
+ title,
569
+ placeholder,
570
+ body,
571
+ buttonTitle,
572
+ onButtonPress,
573
+ headerStyle,
574
+ iconClosePosition = 'right',
575
+ iconType,
576
+ headerButtonStyle,
433
577
  } = this.props;
434
578
  return (
435
579
  <BottomPopupHeader
580
+ iconType={iconType}
436
581
  iconClosePosition={iconClosePosition}
437
582
  body={body}
438
583
  onClose={this.hide}
@@ -440,53 +585,59 @@ class DatePicker extends Component {
440
585
  buttonTitle={buttonTitle}
441
586
  onButtonPress={onButtonPress}
442
587
  style={[styles.header, headerStyle]}
588
+ headerButtonStyle={headerButtonStyle}
443
589
  />
444
590
  );
445
- // return (
446
- // <View style={styles.header}>
447
- // <TouchableOpacity
448
- // onPress={this.hide}
449
- // >
450
- // <Text style={styles.titleCancel}>
451
- // {titleCancel}
452
- // </Text>
453
- // </TouchableOpacity>
454
- // <Text style={styles.title}>
455
- // {title || placeholder}
456
- // </Text>
457
- // <TouchableOpacity onPress={this.finish}>
458
- // <Text style={styles.titleConfirm}>
459
- // {titleConfirm}
460
-
461
- // </Text>
462
- // </TouchableOpacity>
463
- // </View>
464
- // );
465
591
  }
466
592
 
467
593
  renderDescription = () => {
468
594
  const { description, descriptionStyle, renderDescription } = this.props;
469
595
  if (renderDescription) return renderDescription;
470
596
  return description ? (
471
- <Text.Title style={[{ marginBottom: Spacing.S }, descriptionStyle]}>{description}</Text.Title>
597
+ <Text style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
598
+ {description}
599
+ </Text>
472
600
  ) : null;
473
601
  };
474
602
 
475
603
  renderContent() {
476
604
  const {
477
- format, labelDay, labelMonth, labelYear, bottomOffset, labelMinute, labelHour, isRanged
605
+ format,
606
+ labelDay,
607
+ labelMonth,
608
+ labelYear,
609
+ bottomOffset,
610
+ labelMinute,
611
+ labelHour,
612
+ isRanged,
478
613
  } = this.props;
479
614
  if (isRanged && format === 'hh:mm') {
480
615
  return (
481
616
  <View style={styles.container}>
482
617
  {this.renderDescription()}
483
618
  <View style={styles.content}>
484
- {this.renderColumn('HourRange1', this.hourRangeIndex_1, this.ranged, SwitchLanguage.from, bottomOffset, (value) => {
485
- this.renderUpdate({ hourRange_1: value });
486
- }, true)}
487
- {this.renderColumn('HourRange2', this.hourRangeIndex_2, this.ranged, SwitchLanguage.to, bottomOffset, (value) => {
488
- this.renderUpdate({ hourRange_2: value });
489
- }, true)}
619
+ {this.renderColumn(
620
+ 'HourRange1',
621
+ this.hourRangeIndex_1,
622
+ this.startTime,
623
+ SwitchLanguage.from,
624
+ bottomOffset,
625
+ (value) => {
626
+ this.renderUpdate({ hourRange_1: value });
627
+ },
628
+ true,
629
+ )}
630
+ {this.renderColumn(
631
+ 'HourRange2',
632
+ this.hourRangeIndex_2,
633
+ this.endTime,
634
+ SwitchLanguage.to,
635
+ bottomOffset,
636
+ (value) => {
637
+ this.renderUpdate({ hourRange_2: value });
638
+ },
639
+ true,
640
+ )}
490
641
  </View>
491
642
  </View>
492
643
  );
@@ -495,58 +646,99 @@ class DatePicker extends Component {
495
646
  <View style={styles.container}>
496
647
  {this.renderDescription()}
497
648
  <View style={styles.content}>
498
- {
499
- format.indexOf('dd') !== -1
500
- ? this.renderColumn('DayView', this.dayIndex, this.days, labelDay || SwitchLanguage.day, bottomOffset, (value) => {
501
- this.renderUpdate({ day: value });
502
- })
503
- : null
504
- }
505
- {
506
- format.indexOf('MM') !== -1
507
- ? this.renderColumn('MonthView', this.monthIndex, this.months, labelMonth || SwitchLanguage.month, bottomOffset, (value) => {
508
- this.setStateDate(this.dayIndex, value, this.yearIndex);
509
- })
510
- : null
511
- }
512
- {
513
- format.indexOf('YYYY') !== -1
514
- ? this.renderColumn('YearView', this.yearIndex, this.years, labelYear || SwitchLanguage.year, bottomOffset, (value) => {
515
- this.setStateMonth(this.dayIndex, this.monthIndex, value);
516
- })
517
- : null
518
- }
519
- {
520
- format.indexOf('hh') !== -1
521
- ? this.renderColumn('HourView', this.hourIndex, this.hours, labelHour || SwitchLanguage.hour, bottomOffset, (value) => {
522
- this.renderUpdate({ hour: value });
523
- }, true)
524
- : null
525
- }
526
- {
527
- format.indexOf('mm') !== -1
528
- ? this.renderColumn('MinuteView', this.minuteIndex, this.minutes, labelMinute || SwitchLanguage.minute, bottomOffset, (value) => {
529
- this.renderUpdate({ minute: value });
530
- }, true)
531
- : null
532
- }
649
+ {format.indexOf('dd') !== -1
650
+ ? this.renderColumn(
651
+ 'DayView',
652
+ this.dayIndex,
653
+ this.days,
654
+ labelDay || SwitchLanguage.day,
655
+ bottomOffset,
656
+ (value) => {
657
+ this.renderUpdate({ day: value });
658
+ },
659
+ )
660
+ : null}
661
+ {format.indexOf('MM') !== -1
662
+ ? this.renderColumn(
663
+ 'MonthView',
664
+ this.monthIndex,
665
+ this.months,
666
+ labelMonth || SwitchLanguage.month,
667
+ bottomOffset,
668
+ (value) => {
669
+ this.setStateDate(
670
+ this.dayIndex,
671
+ value,
672
+ this.yearIndex,
673
+ );
674
+ },
675
+ )
676
+ : null}
677
+ {format.indexOf('YYYY') !== -1
678
+ ? this.renderColumn(
679
+ 'YearView',
680
+ this.yearIndex,
681
+ this.years,
682
+ labelYear || SwitchLanguage.year,
683
+ bottomOffset,
684
+ (value) => {
685
+ this.setStateMonth(
686
+ this.dayIndex,
687
+ this.monthIndex,
688
+ value,
689
+ );
690
+ },
691
+ )
692
+ : null}
693
+ {format.indexOf('hh') !== -1
694
+ ? this.renderColumn(
695
+ 'HourView',
696
+ this.hourIndex,
697
+ this.hours,
698
+ labelHour || SwitchLanguage.hour,
699
+ bottomOffset,
700
+ (value) => {
701
+ this.renderUpdate({ hour: value });
702
+ },
703
+ true,
704
+ )
705
+ : null}
706
+ {format.indexOf('mm') !== -1
707
+ ? this.renderColumn(
708
+ 'MinuteView',
709
+ this.minuteIndex,
710
+ this.minutes,
711
+ labelMinute || SwitchLanguage.minute,
712
+ bottomOffset,
713
+ (value) => {
714
+ this.renderUpdate({ minute: value });
715
+ },
716
+ true,
717
+ )
718
+ : null}
533
719
  </View>
534
-
535
720
  </View>
536
721
  );
537
722
  }
538
723
 
539
724
  renderFooter() {
540
- const { titleFooter, renderFooter } = this.props;
541
- return renderFooter ? renderFooter() : (
542
- <View style={{ paddingHorizontal: 12, marginBottom: ifIphoneX(29, 11), marginTop: 28 }}>
725
+ const { titleFooter, renderFooter, footerButtonStyle } = this.props;
726
+ return renderFooter ? (
727
+ renderFooter()
728
+ ) : (
729
+ <View
730
+ style={{
731
+ paddingHorizontal: 12,
732
+ marginBottom: ifIphoneX(35, 12),
733
+ marginTop: 16,
734
+ }}>
543
735
  <Button
544
736
  onPress={this.finish}
737
+ buttonStyle={[footerButtonStyle]}
545
738
  title={titleFooter || SwitchLanguage.confirm}
546
739
  type="primary"
547
740
  />
548
741
  </View>
549
-
550
742
  );
551
743
  }
552
744
 
@@ -582,7 +774,12 @@ DatePicker.propTypes = {
582
774
  renderDescription: PropTypes.any,
583
775
  description: PropTypes.string,
584
776
  renderFooter: PropTypes.any,
585
- style: PropTypes.any
777
+ style: PropTypes.any,
778
+ rangeHour: PropTypes.array,
779
+ iconClosePosition: PropTypes.oneOf(['left', 'right']),
780
+ iconType: PropTypes.oneOf(['icon', 'text']),
781
+ startTime: PropTypes.array,
782
+ endTime: PropTypes.array,
586
783
  };
587
784
 
588
785
  DatePicker.defaultProps = {
@@ -600,4 +797,3 @@ DatePicker.defaultProps = {
600
797
  };
601
798
 
602
799
  export default DatePicker;
603
-