@momo-kits/date-picker 0.0.52-beta → 0.0.52-beta.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 (6) hide show
  1. package/datePicker/DatePicker.js +337 -141
  2. package/datePicker/ListPicker.js +1 -1
  3. package/datePicker/WheelPicker.js +129 -82
  4. package/datePicker/helper/DatePickerHelper.js +14 -6
  5. package/package.json +16 -14
  6. 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.Title style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
598
+ {description}
599
+ </Text.Title>
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
-
package/datePicker/ListPicker.js CHANGED
@@ -146,7 +146,7 @@ const styles = StyleSheet.create({
146
146
  justifyContent: 'center'
147
147
  },
148
148
  contentStyle: {
149
- height: 200,
149
+ height: 230,
150
150
  },
151
151
  column: {
152
152
  borderWidth: 2,
package/datePicker/WheelPicker.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import React, { Component } from 'react';
2
- import {
3
- Dimensions, View
4
- } from 'react-native';
5
- import {
6
- LinearGradient, Text, Colors, ScaleSize
7
- } from '@momo-kits/core';
2
+ import { Dimensions, View } from 'react-native';
3
+ import { LinearGradient, Text, Colors, ScaleSize } from '@momo-kits/core';
8
4
  import ScrollCustom from './custom/ScrollCustom';
5
+ import DatePickerHelper from './helper/DatePickerHelper';
9
6
 
10
7
  const widthScreen = Dimensions.get('window').width;
11
8
  // var heightScreen = Dimensions.get('window').height;
@@ -14,8 +11,12 @@ export default class WheelPicker extends Component {
14
11
  constructor(props) {
15
12
  super(props);
16
13
  const {
17
- heightItem, value, numberItem, arrayValue
14
+ heightItem,
15
+ value: valueItem,
16
+ numberItem,
17
+ arrayValue,
18
18
  } = this.props;
19
+ const value = valueItem === -1 ? 0 : valueItem;
19
20
  this.heightItem = heightItem;
20
21
  this.currentPosition = value * this.heightItem;
21
22
  this.prePosition = this.currentPosition;
@@ -25,7 +26,7 @@ export default class WheelPicker extends Component {
25
26
  // height: 100,
26
27
  width: widthScreen / 3,
27
28
  value,
28
- items: arrayValue
29
+ items: arrayValue,
29
30
  };
30
31
  }
31
32
 
@@ -50,19 +51,26 @@ export default class WheelPicker extends Component {
50
51
  }
51
52
 
52
53
  update(param) {
53
- this.setState({
54
- items: param.arrayValue,
55
- value: param.value
56
- }, () => {
57
- clearTimeout(this.timerUpdate);
58
- this.timerUpdate = setTimeout(() => {
59
- this.scrollToPosition(param.value);
60
- }, 100);
61
- });
54
+ this.setState(
55
+ {
56
+ items: param.arrayValue,
57
+ value: param.value,
58
+ },
59
+ () => {
60
+ clearTimeout(this.timerUpdate);
61
+ this.timerUpdate = setTimeout(() => {
62
+ this.scrollToPosition(param.value);
63
+ }, 100);
64
+ },
65
+ );
62
66
  }
63
67
 
64
68
  setScrollEnabled(enable) {
65
- if (this.ScrollWheelPicker && this.ScrollWheelPicker.setScrollEnabled && !this.isDragging) {
69
+ if (
70
+ this.ScrollWheelPicker &&
71
+ this.ScrollWheelPicker.setScrollEnabled &&
72
+ !this.isDragging
73
+ ) {
66
74
  this.ScrollWheelPicker.setScrollEnabled(enable);
67
75
  }
68
76
  }
@@ -71,13 +79,18 @@ export default class WheelPicker extends Component {
71
79
  if (this.currentPosition != null) {
72
80
  const { value } = this.state;
73
81
  const { onValueChange, onEndDrag, refName } = this.props;
74
- const position = this.parseInteger(this.currentPosition / this.heightItem);
82
+ const position = this.parseInteger(
83
+ this.currentPosition / this.heightItem,
84
+ );
75
85
  if (position !== value) {
76
- this.setState({
77
- value: position
78
- }, () => {
79
- this.scrollToPosition(position);
80
- });
86
+ this.setState(
87
+ {
88
+ value: position,
89
+ },
90
+ () => {
91
+ this.scrollToPosition(position);
92
+ },
93
+ );
81
94
  }
82
95
  if (onValueChange) {
83
96
  onValueChange(position);
@@ -118,13 +131,15 @@ export default class WheelPicker extends Component {
118
131
  const view = [];
119
132
  // eslint-disable-next-line no-plusplus
120
133
  for (let i = 0; i < numberItemTop; i++) {
121
- view.push(<View
122
- key={`itemTop${i}`}
123
- style={{
124
- flex: 1,
125
- height: heightItem,
126
- }}
127
- />);
134
+ view.push(
135
+ <View
136
+ key={`itemTop${i}`}
137
+ style={{
138
+ flex: 1,
139
+ height: heightItem,
140
+ }}
141
+ />,
142
+ );
128
143
  }
129
144
 
130
145
  return view;
@@ -171,42 +186,51 @@ export default class WheelPicker extends Component {
171
186
  const { items, value, width } = this.state;
172
187
  const { preFix, bottomOffset } = this.props;
173
188
  return (
174
- <View style={{ flex: 1, height: heightContain + 20 }}>
175
- <Text.SubTitle style={{
176
- color: Colors.black_17, marginLeft: 6, marginBottom: 3
177
- }}
178
- >
179
- {preFix?.toUpperCase()}
189
+ <View style={{ flex: 1, height: heightContain + 40 }}>
190
+ <Text.SubTitle
191
+ weight="bold"
192
+ style={{
193
+ color: Colors.black_17,
194
+ marginLeft: 6,
195
+ marginBottom: 3,
196
+ }}>
197
+ {DatePickerHelper.capitalizeFirstLetter(preFix || '')}
180
198
  </Text.SubTitle>
181
199
  <View
182
200
  style={{
183
201
  flex: 1,
184
202
  height: heightContain,
185
- // backgroundColor: 'blue',
203
+ //backgroundColor: 'blue',
186
204
  marginHorizontal: 6,
205
+ paddingBottom: 20,
187
206
  borderWidth: 1,
188
207
  borderColor: Colors.black_04,
189
208
  borderRadius: 8,
190
- overflow: 'hidden'
209
+ overflow: 'hidden',
191
210
  }}
192
211
  onLayout={(event) => {
193
- if (event && event.nativeEvent && event.nativeEvent.layout
194
- && event.nativeEvent.layout.height && event.nativeEvent.layout.width) {
212
+ if (
213
+ event &&
214
+ event.nativeEvent &&
215
+ event.nativeEvent.layout &&
216
+ event.nativeEvent.layout.height &&
217
+ event.nativeEvent.layout.width
218
+ ) {
195
219
  this.setState({
196
220
  // height: event.nativeEvent.layout.height,
197
- width: event.nativeEvent.layout.width
221
+ width: event.nativeEvent.layout.width,
198
222
  });
199
223
  }
200
- }}
201
- >
202
- <View style={{
203
- position: 'absolute',
204
- top: positionCenter,
205
- left: 0,
206
- height: this.heightItem, // + 12,
207
- width,
208
- backgroundColor: '#f2f8ff',
209
- }}
224
+ }}>
225
+ <View
226
+ style={{
227
+ position: 'absolute',
228
+ top: positionCenter,
229
+ left: 0,
230
+ height: this.heightItem, // + 12,
231
+ width,
232
+ backgroundColor: '#f2f8ff',
233
+ }}
210
234
  />
211
235
 
212
236
  <ScrollCustom
@@ -214,22 +238,33 @@ export default class WheelPicker extends Component {
214
238
  this.ScrollWheelPicker = refName;
215
239
  }}
216
240
  onScrollEndDrag={(event) => {
217
- if (event && event.nativeEvent && event.nativeEvent.contentOffset
218
- && event.nativeEvent.contentOffset.y != null && !this.isDragging) {
219
- this.onStartDrag(event.nativeEvent.contentOffset.y);
241
+ if (
242
+ event &&
243
+ event.nativeEvent &&
244
+ event.nativeEvent.contentOffset &&
245
+ event.nativeEvent.contentOffset.y != null &&
246
+ !this.isDragging
247
+ ) {
248
+ this.onStartDrag(
249
+ event.nativeEvent.contentOffset.y,
250
+ );
220
251
  }
221
252
  }}
222
253
  onScroll={(event) => {
223
- if (event && event.nativeEvent && event.nativeEvent.contentOffset
224
- && event.nativeEvent.contentOffset.y != null) {
225
- this.currentPosition = event.nativeEvent.contentOffset.y;
254
+ if (
255
+ event &&
256
+ event.nativeEvent &&
257
+ event.nativeEvent.contentOffset &&
258
+ event.nativeEvent.contentOffset.y != null
259
+ ) {
260
+ this.currentPosition =
261
+ event.nativeEvent.contentOffset.y;
226
262
  }
227
- }}
228
- >
229
-
230
- {
231
- this.renderHiddenItem(this.numberItem, this.heightItem)
232
- }
263
+ }}>
264
+ {this.renderHiddenItem(
265
+ this.numberItem,
266
+ this.heightItem,
267
+ )}
233
268
  {items.map((valueItem, index) => (
234
269
  <View
235
270
  // eslint-disable-next-line react/no-array-index-key
@@ -239,51 +274,63 @@ export default class WheelPicker extends Component {
239
274
  height: this.heightItem,
240
275
  justifyContent: 'center',
241
276
  alignItems: 'center',
242
- }}
243
- >
244
- <Text style={{
245
- color: value === index ? Colors.black_17 : '#909090',
246
- fontWeight: value === index ? 'bold' : '700',
247
- fontSize: value === index ? ScaleSize(20) : ScaleSize(16),
248
- }}
249
- >
277
+ }}>
278
+ <Text
279
+ style={{
280
+ color:
281
+ value === index
282
+ ? Colors.black_17
283
+ : '#909090',
284
+ fontWeight:
285
+ value === index ? 'bold' : '700',
286
+ fontSize:
287
+ value === index
288
+ ? ScaleSize(20)
289
+ : ScaleSize(16),
290
+ }}>
250
291
  {valueItem}
251
292
  {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
252
293
  </Text>
253
294
  </View>
254
295
  ))}
255
- {
256
- this.renderHiddenItem(this.numberItem, this.heightItem, bottomOffset)
257
- }
296
+ {this.renderHiddenItem(
297
+ this.numberItem,
298
+ this.heightItem,
299
+ bottomOffset,
300
+ )}
258
301
  </ScrollCustom>
259
302
  <LinearGradient
260
303
  pointerEvents="none"
261
304
  locations={[0.2, 0.85]}
262
- colors={['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)']}
305
+ colors={[
306
+ 'rgba(255, 255, 255, 1)',
307
+ 'rgba(255, 255, 255, 0)',
308
+ ]}
263
309
  style={{
264
310
  height: this.heightItem * 2,
265
311
  width,
266
312
  position: 'absolute',
267
313
  top: 0,
268
- overflow: 'hidden'
269
-
314
+ overflow: 'hidden',
270
315
  }}
271
316
  />
272
317
  <LinearGradient
273
318
  pointerEvents="none"
274
319
  locations={[0, 0.85]}
275
- colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']}
320
+ colors={[
321
+ 'rgba(255, 255, 255, 0)',
322
+ 'rgba(255, 255, 255, 1)',
323
+ ]}
276
324
  style={{
277
325
  height: this.heightItem * 2,
278
326
  width,
279
327
  position: 'absolute',
280
328
  bottom: 0,
281
- overflow: 'hidden'
329
+ overflow: 'hidden',
282
330
  }}
283
331
  />
284
332
  </View>
285
333
  </View>
286
-
287
334
  );
288
335
  }
289
336
  }
@@ -294,7 +341,7 @@ WheelPicker.defaultProps = {
294
341
  value: 0,
295
342
  heightItem: 42,
296
343
  numberItem: 5,
297
- bottomOffset: 0
344
+ bottomOffset: 0,
298
345
  };
299
346
 
300
347
  module.exports = WheelPicker;
package/datePicker/helper/DatePickerHelper.js CHANGED
@@ -77,7 +77,7 @@ export default class DatePickerHelper {
77
77
  static formatDate(date, format) {
78
78
  if (date && format) {
79
79
  const {
80
- year, month, day, hour, minute, second
80
+ year, month, day, hour, minute, second = 0
81
81
  } = DatePickerHelper.getDateTimeFromFormat(date, format);
82
82
  if (DatePickerHelper.checkValidDate(year, month, day)
83
83
  && DatePickerHelper.checkValidTime(hour, minute, second)) {
@@ -156,17 +156,21 @@ export default class DatePickerHelper {
156
156
  return null;
157
157
  }
158
158
 
159
- static checkValidDate(year, month, day) {
159
+ static checkValidDate(y, m, d) {
160
+ const year = parseInt(y);
161
+ const month = parseInt(m);
162
+ const day = parseInt(d);
160
163
  const months31 = [0, 2, 4, 6, 7, 9, 11];
161
164
  const months30 = [3, 5, 8, 10];
162
165
  const months28 = [1];
163
166
  const isLeap = ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
164
167
  if (year != null && month != null && day != null) {
165
168
  const isDayValid = day > 0;
166
- const isMonthValid = (months31.indexOf(month) !== -1 && day <= 31)
167
- || (months30.indexOf(month) !== -1 && day <= 30)
168
- || (months28.indexOf(month) !== -1 && day <= 28)
169
- || (months28.indexOf(month) !== -1 && day <= 29 && isLeap);
169
+ const isMonthValid = (months31.indexOf(parseInt(month)) != -1 && day <= 31)
170
+ || (months30.indexOf(month) != -1 && day <= 30)
171
+ || (months30.indexOf(month) != -1 && day <= 31)
172
+ || (months28.indexOf(month) != -1 && day <= 28)
173
+ || (months28.indexOf(month) != -1 && day <= 29 && isLeap);
170
174
  return isDayValid && isMonthValid;
171
175
  }
172
176
  return false;
@@ -194,4 +198,8 @@ export default class DatePickerHelper {
194
198
 
195
199
  return monthLength[month - 1];
196
200
  }
201
+
202
+ static capitalizeFirstLetter(string) {
203
+ return string.charAt(0).toUpperCase() + string.slice(1);
204
+ }
197
205
  }
package/package.json CHANGED
@@ -1,16 +1,18 @@
1
1
  {
2
- "name": "@momo-kits/date-picker",
3
- "version": "0.0.52-beta",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {},
7
- "peerDependencies": {
8
- "react-native": ">=0.55",
9
- "prop-types": "^15.7.2",
10
- "react": "16.9.0",
11
- "lodash": "^4.17.15",
12
- "@momo-kits/core": ">=0.0.5-beta"
13
- },
14
- "devDependencies": {},
15
- "license": "MoMo"
2
+ "name": "@momo-kits/date-picker",
3
+ "version": "0.0.52-beta.1",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {
7
+ "@momo-platform/versions": "4.0.2"
8
+ },
9
+ "peerDependencies": {
10
+ "@momo-kits/core": ">=0.0.5-beta",
11
+ "lodash": "^4.17.15",
12
+ "prop-types": "^15.7.2",
13
+ "react": "16.9.0",
14
+ "react-native": ">=0.55"
15
+ },
16
+ "devDependencies": {},
17
+ "license": "MoMo"
16
18
  }
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 --tag beta
25
25
  cd ..
26
26
  rm -rf dist
27
27
 
28
28
 
29
- # -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/date-picker new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/date-picker"}'
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/date-picker new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/date-picker"}'