@momo-kits/date-picker 0.0.44-beta → 0.0.44-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.
- package/datePicker/DatePicker.js +333 -120
- package/datePicker/ListPicker.js +1 -1
- package/datePicker/WheelPicker.js +8 -5
- package/datePicker/helper/DatePickerHelper.js +14 -6
- package/package.json +4 -4
- 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,
|
|
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
|
-
|
|
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) =>
|
|
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
|
|
103
|
+
const propsSelectedDate = props.selectedDate
|
|
104
|
+
? props.selectedDate
|
|
105
|
+
: props.value;
|
|
90
106
|
|
|
91
107
|
if (propsMinDate) {
|
|
92
|
-
this.minDate = DatePickerHelper.formatDate(
|
|
108
|
+
this.minDate = DatePickerHelper.formatDate(
|
|
109
|
+
propsMinDate,
|
|
110
|
+
props.format,
|
|
111
|
+
);
|
|
93
112
|
} else if (props.maxAge) {
|
|
94
|
-
this.minDate = DatePickerHelper.calculateDateSinceYearAgo(
|
|
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(
|
|
121
|
+
this.maxDate = DatePickerHelper.formatDate(
|
|
122
|
+
propsMaxDate,
|
|
123
|
+
props.format,
|
|
124
|
+
);
|
|
101
125
|
} else if (props.minAge) {
|
|
102
|
-
this.maxDate = DatePickerHelper.calculateDateSinceYearAgo(
|
|
126
|
+
this.maxDate = DatePickerHelper.calculateDateSinceYearAgo(
|
|
127
|
+
props.minAge,
|
|
128
|
+
);
|
|
103
129
|
} else {
|
|
104
130
|
this.maxDate = null;
|
|
105
131
|
}
|
|
106
132
|
|
|
107
|
-
if (
|
|
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(
|
|
143
|
+
this.selectedDate = DatePickerHelper.formatDate(
|
|
144
|
+
propsSelectedDate,
|
|
145
|
+
props.format,
|
|
146
|
+
);
|
|
114
147
|
if (this.selectedDate) {
|
|
115
|
-
if (
|
|
148
|
+
if (
|
|
149
|
+
this.minDate &&
|
|
150
|
+
this.selectedDate.getTime() < this.minDate.getTime()
|
|
151
|
+
) {
|
|
116
152
|
this.selectedDate = null;
|
|
117
|
-
} else if (
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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(
|
|
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(
|
|
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
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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(
|
|
256
|
+
: this.ranged.indexOf(
|
|
257
|
+
`${current.getHours().toString()}:${current
|
|
258
|
+
.getMinutes()
|
|
259
|
+
.toString()}`,
|
|
260
|
+
);
|
|
181
261
|
|
|
182
|
-
this.hourRangeIndex_2 =
|
|
262
|
+
this.hourRangeIndex_2 = valueHours_2
|
|
183
263
|
? this.ranged.indexOf(valueHours_2)
|
|
184
|
-
: this.ranged.indexOf(
|
|
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
|
|
201
|
-
|
|
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(
|
|
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(
|
|
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 (
|
|
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 (
|
|
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
|
-
|
|
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(
|
|
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 =
|
|
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 (
|
|
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 =
|
|
387
|
-
|
|
388
|
-
|
|
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(
|
|
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,18 @@ class DatePicker extends Component {
|
|
|
429
565
|
|
|
430
566
|
renderHeader() {
|
|
431
567
|
const {
|
|
432
|
-
title,
|
|
568
|
+
title,
|
|
569
|
+
placeholder,
|
|
570
|
+
body,
|
|
571
|
+
buttonTitle,
|
|
572
|
+
onButtonPress,
|
|
573
|
+
headerStyle,
|
|
574
|
+
iconClosePosition = 'right',
|
|
575
|
+
iconType,
|
|
433
576
|
} = this.props;
|
|
434
577
|
return (
|
|
435
578
|
<BottomPopupHeader
|
|
579
|
+
iconType={iconType}
|
|
436
580
|
iconClosePosition={iconClosePosition}
|
|
437
581
|
body={body}
|
|
438
582
|
onClose={this.hide}
|
|
@@ -468,25 +612,50 @@ class DatePicker extends Component {
|
|
|
468
612
|
const { description, descriptionStyle, renderDescription } = this.props;
|
|
469
613
|
if (renderDescription) return renderDescription;
|
|
470
614
|
return description ? (
|
|
471
|
-
<Text.Title style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
|
|
615
|
+
<Text.Title style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
|
|
616
|
+
{description}
|
|
617
|
+
</Text.Title>
|
|
472
618
|
) : null;
|
|
473
619
|
};
|
|
474
620
|
|
|
475
621
|
renderContent() {
|
|
476
622
|
const {
|
|
477
|
-
format,
|
|
623
|
+
format,
|
|
624
|
+
labelDay,
|
|
625
|
+
labelMonth,
|
|
626
|
+
labelYear,
|
|
627
|
+
bottomOffset,
|
|
628
|
+
labelMinute,
|
|
629
|
+
labelHour,
|
|
630
|
+
isRanged,
|
|
478
631
|
} = this.props;
|
|
479
632
|
if (isRanged && format === 'hh:mm') {
|
|
480
633
|
return (
|
|
481
634
|
<View style={styles.container}>
|
|
482
635
|
{this.renderDescription()}
|
|
483
636
|
<View style={styles.content}>
|
|
484
|
-
{this.renderColumn(
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
637
|
+
{this.renderColumn(
|
|
638
|
+
'HourRange1',
|
|
639
|
+
this.hourRangeIndex_1,
|
|
640
|
+
this.startTime,
|
|
641
|
+
SwitchLanguage.from,
|
|
642
|
+
bottomOffset,
|
|
643
|
+
(value) => {
|
|
644
|
+
this.renderUpdate({ hourRange_1: value });
|
|
645
|
+
},
|
|
646
|
+
true,
|
|
647
|
+
)}
|
|
648
|
+
{this.renderColumn(
|
|
649
|
+
'HourRange2',
|
|
650
|
+
this.hourRangeIndex_2,
|
|
651
|
+
this.endTime,
|
|
652
|
+
SwitchLanguage.to,
|
|
653
|
+
bottomOffset,
|
|
654
|
+
(value) => {
|
|
655
|
+
this.renderUpdate({ hourRange_2: value });
|
|
656
|
+
},
|
|
657
|
+
true,
|
|
658
|
+
)}
|
|
490
659
|
</View>
|
|
491
660
|
</View>
|
|
492
661
|
);
|
|
@@ -495,58 +664,98 @@ class DatePicker extends Component {
|
|
|
495
664
|
<View style={styles.container}>
|
|
496
665
|
{this.renderDescription()}
|
|
497
666
|
<View style={styles.content}>
|
|
498
|
-
{
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
{
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
667
|
+
{format.indexOf('dd') !== -1
|
|
668
|
+
? this.renderColumn(
|
|
669
|
+
'DayView',
|
|
670
|
+
this.dayIndex,
|
|
671
|
+
this.days,
|
|
672
|
+
labelDay || SwitchLanguage.day,
|
|
673
|
+
bottomOffset,
|
|
674
|
+
(value) => {
|
|
675
|
+
this.renderUpdate({ day: value });
|
|
676
|
+
},
|
|
677
|
+
)
|
|
678
|
+
: null}
|
|
679
|
+
{format.indexOf('MM') !== -1
|
|
680
|
+
? this.renderColumn(
|
|
681
|
+
'MonthView',
|
|
682
|
+
this.monthIndex,
|
|
683
|
+
this.months,
|
|
684
|
+
labelMonth || SwitchLanguage.month,
|
|
685
|
+
bottomOffset,
|
|
686
|
+
(value) => {
|
|
687
|
+
this.setStateDate(
|
|
688
|
+
this.dayIndex,
|
|
689
|
+
value,
|
|
690
|
+
this.yearIndex,
|
|
691
|
+
);
|
|
692
|
+
},
|
|
693
|
+
)
|
|
694
|
+
: null}
|
|
695
|
+
{format.indexOf('YYYY') !== -1
|
|
696
|
+
? this.renderColumn(
|
|
697
|
+
'YearView',
|
|
698
|
+
this.yearIndex,
|
|
699
|
+
this.years,
|
|
700
|
+
labelYear || SwitchLanguage.year,
|
|
701
|
+
bottomOffset,
|
|
702
|
+
(value) => {
|
|
703
|
+
this.setStateMonth(
|
|
704
|
+
this.dayIndex,
|
|
705
|
+
this.monthIndex,
|
|
706
|
+
value,
|
|
707
|
+
);
|
|
708
|
+
},
|
|
709
|
+
)
|
|
710
|
+
: null}
|
|
711
|
+
{format.indexOf('hh') !== -1
|
|
712
|
+
? this.renderColumn(
|
|
713
|
+
'HourView',
|
|
714
|
+
this.hourIndex,
|
|
715
|
+
this.hours,
|
|
716
|
+
labelHour || SwitchLanguage.hour,
|
|
717
|
+
bottomOffset,
|
|
718
|
+
(value) => {
|
|
719
|
+
this.renderUpdate({ hour: value });
|
|
720
|
+
},
|
|
721
|
+
true,
|
|
722
|
+
)
|
|
723
|
+
: null}
|
|
724
|
+
{format.indexOf('mm') !== -1
|
|
725
|
+
? this.renderColumn(
|
|
726
|
+
'MinuteView',
|
|
727
|
+
this.minuteIndex,
|
|
728
|
+
this.minutes,
|
|
729
|
+
labelMinute || SwitchLanguage.minute,
|
|
730
|
+
bottomOffset,
|
|
731
|
+
(value) => {
|
|
732
|
+
this.renderUpdate({ minute: value });
|
|
733
|
+
},
|
|
734
|
+
true,
|
|
735
|
+
)
|
|
736
|
+
: null}
|
|
533
737
|
</View>
|
|
534
|
-
|
|
535
738
|
</View>
|
|
536
739
|
);
|
|
537
740
|
}
|
|
538
741
|
|
|
539
742
|
renderFooter() {
|
|
540
743
|
const { titleFooter, renderFooter } = this.props;
|
|
541
|
-
return renderFooter ?
|
|
542
|
-
|
|
744
|
+
return renderFooter ? (
|
|
745
|
+
renderFooter()
|
|
746
|
+
) : (
|
|
747
|
+
<View
|
|
748
|
+
style={{
|
|
749
|
+
paddingHorizontal: 12,
|
|
750
|
+
marginBottom: ifIphoneX(35, 12),
|
|
751
|
+
marginTop: 16,
|
|
752
|
+
}}>
|
|
543
753
|
<Button
|
|
544
754
|
onPress={this.finish}
|
|
545
755
|
title={titleFooter || SwitchLanguage.confirm}
|
|
546
756
|
type="primary"
|
|
547
757
|
/>
|
|
548
758
|
</View>
|
|
549
|
-
|
|
550
759
|
);
|
|
551
760
|
}
|
|
552
761
|
|
|
@@ -582,7 +791,12 @@ DatePicker.propTypes = {
|
|
|
582
791
|
renderDescription: PropTypes.any,
|
|
583
792
|
description: PropTypes.string,
|
|
584
793
|
renderFooter: PropTypes.any,
|
|
585
|
-
style: PropTypes.any
|
|
794
|
+
style: PropTypes.any,
|
|
795
|
+
rangeHour: PropTypes.array,
|
|
796
|
+
iconClosePosition: PropTypes.oneOf(['left', 'right']),
|
|
797
|
+
iconType: PropTypes.oneOf(['icon', 'text']),
|
|
798
|
+
startTime: PropTypes.array,
|
|
799
|
+
endTime: PropTypes.array,
|
|
586
800
|
};
|
|
587
801
|
|
|
588
802
|
DatePicker.defaultProps = {
|
|
@@ -600,4 +814,3 @@ DatePicker.defaultProps = {
|
|
|
600
814
|
};
|
|
601
815
|
|
|
602
816
|
export default DatePicker;
|
|
603
|
-
|
package/datePicker/ListPicker.js
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
LinearGradient, Text, Colors, ScaleSize
|
|
7
7
|
} from '@momo-kits/core';
|
|
8
8
|
import ScrollCustom from './custom/ScrollCustom';
|
|
9
|
+
import DatePickerHelper from './helper/DatePickerHelper';
|
|
9
10
|
|
|
10
11
|
const widthScreen = Dimensions.get('window').width;
|
|
11
12
|
// var heightScreen = Dimensions.get('window').height;
|
|
@@ -14,8 +15,9 @@ export default class WheelPicker extends Component {
|
|
|
14
15
|
constructor(props) {
|
|
15
16
|
super(props);
|
|
16
17
|
const {
|
|
17
|
-
heightItem, value, numberItem, arrayValue
|
|
18
|
+
heightItem, value: valueItem, numberItem, arrayValue
|
|
18
19
|
} = this.props;
|
|
20
|
+
const value = valueItem === -1 ? 0 : valueItem;
|
|
19
21
|
this.heightItem = heightItem;
|
|
20
22
|
this.currentPosition = value * this.heightItem;
|
|
21
23
|
this.prePosition = this.currentPosition;
|
|
@@ -171,19 +173,20 @@ export default class WheelPicker extends Component {
|
|
|
171
173
|
const { items, value, width } = this.state;
|
|
172
174
|
const { preFix, bottomOffset } = this.props;
|
|
173
175
|
return (
|
|
174
|
-
<View style={{ flex: 1, height: heightContain +
|
|
175
|
-
<Text.SubTitle style={{
|
|
176
|
+
<View style={{ flex: 1, height: heightContain + 40 }}>
|
|
177
|
+
<Text.SubTitle weight='bold' style={{
|
|
176
178
|
color: Colors.black_17, marginLeft: 6, marginBottom: 3
|
|
177
179
|
}}
|
|
178
180
|
>
|
|
179
|
-
{preFix
|
|
181
|
+
{DatePickerHelper.capitalizeFirstLetter(preFix || '')}
|
|
180
182
|
</Text.SubTitle>
|
|
181
183
|
<View
|
|
182
184
|
style={{
|
|
183
185
|
flex: 1,
|
|
184
186
|
height: heightContain,
|
|
185
|
-
//
|
|
187
|
+
//backgroundColor: 'blue',
|
|
186
188
|
marginHorizontal: 6,
|
|
189
|
+
paddingBottom: 20,
|
|
187
190
|
borderWidth: 1,
|
|
188
191
|
borderColor: Colors.black_04,
|
|
189
192
|
borderRadius: 8,
|
|
@@ -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(
|
|
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)
|
|
167
|
-
|| (months30.indexOf(month)
|
|
168
|
-
|| (
|
|
169
|
-
|| (months28.indexOf(month)
|
|
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,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@momo-kits/date-picker",
|
|
3
|
-
"version": "0.0.44-beta",
|
|
3
|
+
"version": "0.0.44-beta.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"dependencies": {},
|
|
7
7
|
"peerDependencies": {
|
|
8
|
-
"
|
|
8
|
+
"@momo-kits/core": ">=0.0.5-beta",
|
|
9
|
+
"lodash": "^4.17.15",
|
|
9
10
|
"prop-types": "^15.7.2",
|
|
10
11
|
"react": "16.9.0",
|
|
11
|
-
"
|
|
12
|
-
"@momo-kits/core": ">=0.0.5-beta"
|
|
12
|
+
"react-native": ">=0.55"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {},
|
|
15
15
|
"license": "MoMo"
|
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
|
-
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"}'
|
|
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"}'
|