@momo-kits/date-picker 0.0.44-beta.11 → 0.0.44-beta.12
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 +21 -4
- package/datePicker/WheelPicker.js +80 -124
- package/package.json +1 -1
package/datePicker/DatePicker.js
CHANGED
|
@@ -573,7 +573,6 @@ class DatePicker extends Component {
|
|
|
573
573
|
headerStyle,
|
|
574
574
|
iconClosePosition = 'right',
|
|
575
575
|
iconType,
|
|
576
|
-
headerButtonStyle,
|
|
577
576
|
} = this.props;
|
|
578
577
|
return (
|
|
579
578
|
<BottomPopupHeader
|
|
@@ -585,9 +584,28 @@ class DatePicker extends Component {
|
|
|
585
584
|
buttonTitle={buttonTitle}
|
|
586
585
|
onButtonPress={onButtonPress}
|
|
587
586
|
style={[styles.header, headerStyle]}
|
|
588
|
-
headerButtonStyle={headerButtonStyle}
|
|
589
587
|
/>
|
|
590
588
|
);
|
|
589
|
+
// return (
|
|
590
|
+
// <View style={styles.header}>
|
|
591
|
+
// <TouchableOpacity
|
|
592
|
+
// onPress={this.hide}
|
|
593
|
+
// >
|
|
594
|
+
// <Text style={styles.titleCancel}>
|
|
595
|
+
// {titleCancel}
|
|
596
|
+
// </Text>
|
|
597
|
+
// </TouchableOpacity>
|
|
598
|
+
// <Text style={styles.title}>
|
|
599
|
+
// {title || placeholder}
|
|
600
|
+
// </Text>
|
|
601
|
+
// <TouchableOpacity onPress={this.finish}>
|
|
602
|
+
// <Text style={styles.titleConfirm}>
|
|
603
|
+
// {titleConfirm}
|
|
604
|
+
|
|
605
|
+
// </Text>
|
|
606
|
+
// </TouchableOpacity>
|
|
607
|
+
// </View>
|
|
608
|
+
// );
|
|
591
609
|
}
|
|
592
610
|
|
|
593
611
|
renderDescription = () => {
|
|
@@ -722,7 +740,7 @@ class DatePicker extends Component {
|
|
|
722
740
|
}
|
|
723
741
|
|
|
724
742
|
renderFooter() {
|
|
725
|
-
const { titleFooter, renderFooter
|
|
743
|
+
const { titleFooter, renderFooter } = this.props;
|
|
726
744
|
return renderFooter ? (
|
|
727
745
|
renderFooter()
|
|
728
746
|
) : (
|
|
@@ -734,7 +752,6 @@ class DatePicker extends Component {
|
|
|
734
752
|
}}>
|
|
735
753
|
<Button
|
|
736
754
|
onPress={this.finish}
|
|
737
|
-
buttonStyle={[footerButtonStyle]}
|
|
738
755
|
title={titleFooter || SwitchLanguage.confirm}
|
|
739
756
|
type="primary"
|
|
740
757
|
/>
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
Dimensions, View
|
|
4
|
+
} from 'react-native';
|
|
5
|
+
import {
|
|
6
|
+
LinearGradient, Text, Colors, ScaleSize
|
|
7
|
+
} from '@momo-kits/core';
|
|
4
8
|
import ScrollCustom from './custom/ScrollCustom';
|
|
5
9
|
import DatePickerHelper from './helper/DatePickerHelper';
|
|
6
10
|
|
|
@@ -11,10 +15,7 @@ export default class WheelPicker extends Component {
|
|
|
11
15
|
constructor(props) {
|
|
12
16
|
super(props);
|
|
13
17
|
const {
|
|
14
|
-
heightItem,
|
|
15
|
-
value: valueItem,
|
|
16
|
-
numberItem,
|
|
17
|
-
arrayValue,
|
|
18
|
+
heightItem, value: valueItem, numberItem, arrayValue
|
|
18
19
|
} = this.props;
|
|
19
20
|
const value = valueItem === -1 ? 0 : valueItem;
|
|
20
21
|
this.heightItem = heightItem;
|
|
@@ -26,7 +27,7 @@ export default class WheelPicker extends Component {
|
|
|
26
27
|
// height: 100,
|
|
27
28
|
width: widthScreen / 3,
|
|
28
29
|
value,
|
|
29
|
-
items: arrayValue
|
|
30
|
+
items: arrayValue
|
|
30
31
|
};
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -47,30 +48,23 @@ export default class WheelPicker extends Component {
|
|
|
47
48
|
if (this.ScrollWheelPicker && this.ScrollWheelPicker.scrollTo) {
|
|
48
49
|
this.ScrollWheelPicker.scrollTo({ y: this.currentPosition });
|
|
49
50
|
}
|
|
50
|
-
},
|
|
51
|
+
}, 500);
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
update(param) {
|
|
54
|
-
this.setState(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
() => {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}, 100);
|
|
64
|
-
},
|
|
65
|
-
);
|
|
55
|
+
this.setState({
|
|
56
|
+
items: param.arrayValue,
|
|
57
|
+
value: param.value
|
|
58
|
+
}, () => {
|
|
59
|
+
clearTimeout(this.timerUpdate);
|
|
60
|
+
this.timerUpdate = setTimeout(() => {
|
|
61
|
+
this.scrollToPosition(param.value);
|
|
62
|
+
}, 100);
|
|
63
|
+
});
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
setScrollEnabled(enable) {
|
|
69
|
-
if (
|
|
70
|
-
this.ScrollWheelPicker &&
|
|
71
|
-
this.ScrollWheelPicker.setScrollEnabled &&
|
|
72
|
-
!this.isDragging
|
|
73
|
-
) {
|
|
67
|
+
if (this.ScrollWheelPicker && this.ScrollWheelPicker.setScrollEnabled && !this.isDragging) {
|
|
74
68
|
this.ScrollWheelPicker.setScrollEnabled(enable);
|
|
75
69
|
}
|
|
76
70
|
}
|
|
@@ -79,18 +73,13 @@ export default class WheelPicker extends Component {
|
|
|
79
73
|
if (this.currentPosition != null) {
|
|
80
74
|
const { value } = this.state;
|
|
81
75
|
const { onValueChange, onEndDrag, refName } = this.props;
|
|
82
|
-
const position = this.parseInteger(
|
|
83
|
-
this.currentPosition / this.heightItem,
|
|
84
|
-
);
|
|
76
|
+
const position = this.parseInteger(this.currentPosition / this.heightItem);
|
|
85
77
|
if (position !== value) {
|
|
86
|
-
this.setState(
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
this.scrollToPosition(position);
|
|
92
|
-
},
|
|
93
|
-
);
|
|
78
|
+
this.setState({
|
|
79
|
+
value: position
|
|
80
|
+
}, () => {
|
|
81
|
+
this.scrollToPosition(position);
|
|
82
|
+
});
|
|
94
83
|
}
|
|
95
84
|
if (onValueChange) {
|
|
96
85
|
onValueChange(position);
|
|
@@ -131,15 +120,13 @@ export default class WheelPicker extends Component {
|
|
|
131
120
|
const view = [];
|
|
132
121
|
// eslint-disable-next-line no-plusplus
|
|
133
122
|
for (let i = 0; i < numberItemTop; i++) {
|
|
134
|
-
view.push(
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
/>,
|
|
142
|
-
);
|
|
123
|
+
view.push(<View
|
|
124
|
+
key={`itemTop${i}`}
|
|
125
|
+
style={{
|
|
126
|
+
flex: 1,
|
|
127
|
+
height: heightItem,
|
|
128
|
+
}}
|
|
129
|
+
/>);
|
|
143
130
|
}
|
|
144
131
|
|
|
145
132
|
return view;
|
|
@@ -187,13 +174,10 @@ export default class WheelPicker extends Component {
|
|
|
187
174
|
const { preFix, bottomOffset } = this.props;
|
|
188
175
|
return (
|
|
189
176
|
<View style={{ flex: 1, height: heightContain + 40 }}>
|
|
190
|
-
<Text.SubTitle
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
marginLeft: 6,
|
|
195
|
-
marginBottom: 3,
|
|
196
|
-
}}>
|
|
177
|
+
<Text.SubTitle weight='bold' style={{
|
|
178
|
+
color: Colors.black_17, marginLeft: 6, marginBottom: 3
|
|
179
|
+
}}
|
|
180
|
+
>
|
|
197
181
|
{DatePickerHelper.capitalizeFirstLetter(preFix || '')}
|
|
198
182
|
</Text.SubTitle>
|
|
199
183
|
<View
|
|
@@ -206,31 +190,26 @@ export default class WheelPicker extends Component {
|
|
|
206
190
|
borderWidth: 1,
|
|
207
191
|
borderColor: Colors.black_04,
|
|
208
192
|
borderRadius: 8,
|
|
209
|
-
overflow: 'hidden'
|
|
193
|
+
overflow: 'hidden'
|
|
210
194
|
}}
|
|
211
195
|
onLayout={(event) => {
|
|
212
|
-
if (
|
|
213
|
-
event &&
|
|
214
|
-
event.nativeEvent &&
|
|
215
|
-
event.nativeEvent.layout &&
|
|
216
|
-
event.nativeEvent.layout.height &&
|
|
217
|
-
event.nativeEvent.layout.width
|
|
218
|
-
) {
|
|
196
|
+
if (event && event.nativeEvent && event.nativeEvent.layout
|
|
197
|
+
&& event.nativeEvent.layout.height && event.nativeEvent.layout.width) {
|
|
219
198
|
this.setState({
|
|
220
199
|
// height: event.nativeEvent.layout.height,
|
|
221
|
-
width: event.nativeEvent.layout.width
|
|
200
|
+
width: event.nativeEvent.layout.width
|
|
222
201
|
});
|
|
223
202
|
}
|
|
224
|
-
}}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
203
|
+
}}
|
|
204
|
+
>
|
|
205
|
+
<View style={{
|
|
206
|
+
position: 'absolute',
|
|
207
|
+
top: positionCenter,
|
|
208
|
+
left: 0,
|
|
209
|
+
height: this.heightItem, // + 12,
|
|
210
|
+
width,
|
|
211
|
+
backgroundColor: '#f2f8ff',
|
|
212
|
+
}}
|
|
234
213
|
/>
|
|
235
214
|
|
|
236
215
|
<ScrollCustom
|
|
@@ -238,33 +217,22 @@ export default class WheelPicker extends Component {
|
|
|
238
217
|
this.ScrollWheelPicker = refName;
|
|
239
218
|
}}
|
|
240
219
|
onScrollEndDrag={(event) => {
|
|
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
|
+
if (event && event.nativeEvent && event.nativeEvent.contentOffset
|
|
221
|
+
&& event.nativeEvent.contentOffset.y != null && !this.isDragging) {
|
|
222
|
+
this.onStartDrag(event.nativeEvent.contentOffset.y);
|
|
251
223
|
}
|
|
252
224
|
}}
|
|
253
225
|
onScroll={(event) => {
|
|
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
|
+
if (event && event.nativeEvent && event.nativeEvent.contentOffset
|
|
227
|
+
&& event.nativeEvent.contentOffset.y != null) {
|
|
228
|
+
this.currentPosition = event.nativeEvent.contentOffset.y;
|
|
262
229
|
}
|
|
263
|
-
}}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
230
|
+
}}
|
|
231
|
+
>
|
|
232
|
+
|
|
233
|
+
{
|
|
234
|
+
this.renderHiddenItem(this.numberItem, this.heightItem)
|
|
235
|
+
}
|
|
268
236
|
{items.map((valueItem, index) => (
|
|
269
237
|
<View
|
|
270
238
|
// eslint-disable-next-line react/no-array-index-key
|
|
@@ -274,63 +242,51 @@ export default class WheelPicker extends Component {
|
|
|
274
242
|
height: this.heightItem,
|
|
275
243
|
justifyContent: 'center',
|
|
276
244
|
alignItems: 'center',
|
|
277
|
-
}}
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
value === index ? 'bold' : '700',
|
|
286
|
-
fontSize:
|
|
287
|
-
value === index
|
|
288
|
-
? ScaleSize(20)
|
|
289
|
-
: ScaleSize(16),
|
|
290
|
-
}}>
|
|
245
|
+
}}
|
|
246
|
+
>
|
|
247
|
+
<Text style={{
|
|
248
|
+
color: value === index ? Colors.black_17 : '#909090',
|
|
249
|
+
fontWeight: value === index ? 'bold' : '700',
|
|
250
|
+
fontSize: value === index ? ScaleSize(20) : ScaleSize(16),
|
|
251
|
+
}}
|
|
252
|
+
>
|
|
291
253
|
{valueItem}
|
|
292
254
|
{/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
|
|
293
255
|
</Text>
|
|
294
256
|
</View>
|
|
295
257
|
))}
|
|
296
|
-
{
|
|
297
|
-
this.numberItem,
|
|
298
|
-
|
|
299
|
-
bottomOffset,
|
|
300
|
-
)}
|
|
258
|
+
{
|
|
259
|
+
this.renderHiddenItem(this.numberItem, this.heightItem, bottomOffset)
|
|
260
|
+
}
|
|
301
261
|
</ScrollCustom>
|
|
302
262
|
<LinearGradient
|
|
303
263
|
pointerEvents="none"
|
|
304
264
|
locations={[0.2, 0.85]}
|
|
305
|
-
colors={[
|
|
306
|
-
'rgba(255, 255, 255, 1)',
|
|
307
|
-
'rgba(255, 255, 255, 0)',
|
|
308
|
-
]}
|
|
265
|
+
colors={['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)']}
|
|
309
266
|
style={{
|
|
310
267
|
height: this.heightItem * 2,
|
|
311
268
|
width,
|
|
312
269
|
position: 'absolute',
|
|
313
270
|
top: 0,
|
|
314
|
-
overflow: 'hidden'
|
|
271
|
+
overflow: 'hidden'
|
|
272
|
+
|
|
315
273
|
}}
|
|
316
274
|
/>
|
|
317
275
|
<LinearGradient
|
|
318
276
|
pointerEvents="none"
|
|
319
277
|
locations={[0, 0.85]}
|
|
320
|
-
colors={[
|
|
321
|
-
'rgba(255, 255, 255, 0)',
|
|
322
|
-
'rgba(255, 255, 255, 1)',
|
|
323
|
-
]}
|
|
278
|
+
colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']}
|
|
324
279
|
style={{
|
|
325
280
|
height: this.heightItem * 2,
|
|
326
281
|
width,
|
|
327
282
|
position: 'absolute',
|
|
328
283
|
bottom: 0,
|
|
329
|
-
overflow: 'hidden'
|
|
284
|
+
overflow: 'hidden'
|
|
330
285
|
}}
|
|
331
286
|
/>
|
|
332
287
|
</View>
|
|
333
288
|
</View>
|
|
289
|
+
|
|
334
290
|
);
|
|
335
291
|
}
|
|
336
292
|
}
|
|
@@ -341,7 +297,7 @@ WheelPicker.defaultProps = {
|
|
|
341
297
|
value: 0,
|
|
342
298
|
heightItem: 42,
|
|
343
299
|
numberItem: 5,
|
|
344
|
-
bottomOffset: 0
|
|
300
|
+
bottomOffset: 0
|
|
345
301
|
};
|
|
346
302
|
|
|
347
303
|
module.exports = WheelPicker;
|