@momo-kits/date-picker 0.0.65-beta.23 → 0.0.65-beta.25

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.
@@ -1,6 +1,6 @@
1
- import React, { Component } from 'react';
2
- import { Dimensions, View } from 'react-native';
3
- import { LinearGradient, Text, Colors, ScaleSize } from '@momo-kits/core';
1
+ import React, {Component} from 'react';
2
+ import {Dimensions, View} from 'react-native';
3
+ import {LinearGradient, Text, Colors, ScaleSize} from '@momo-kits/core-v2';
4
4
  import ScrollCustom from './custom/ScrollCustom';
5
5
  import DatePickerHelper from './helper/DatePickerHelper';
6
6
 
@@ -8,340 +8,321 @@ const widthScreen = Dimensions.get('window').width;
8
8
  // var heightScreen = Dimensions.get('window').height;
9
9
 
10
10
  export default class WheelPicker extends Component {
11
- constructor(props) {
12
- super(props);
13
- const {
14
- heightItem,
15
- value: valueItem,
16
- numberItem,
17
- arrayValue,
18
- } = this.props;
19
- const value = valueItem === -1 ? 0 : valueItem;
20
- this.heightItem = heightItem;
21
- this.currentPosition = value * this.heightItem;
22
- this.prePosition = this.currentPosition;
23
- this.numberItem = this.convertNumberItem(numberItem);
24
- this.isDragging = false;
25
- this.state = {
26
- // height: 100,
27
- width: widthScreen / 3,
28
- value,
29
- items: arrayValue,
30
- };
31
- }
11
+ constructor(props) {
12
+ super(props);
13
+ const {heightItem, value: valueItem, numberItem, arrayValue} = this.props;
14
+ const value = valueItem === -1 ? 0 : valueItem;
15
+ this.heightItem = heightItem;
16
+ this.currentPosition = value * this.heightItem;
17
+ this.prePosition = this.currentPosition;
18
+ this.numberItem = this.convertNumberItem(numberItem);
19
+ this.isDragging = false;
20
+ this.state = {
21
+ // height: 100,
22
+ width: widthScreen / 3,
23
+ value,
24
+ items: arrayValue,
25
+ };
26
+ }
32
27
 
33
- componentDidMount() {
34
- const { value } = this.props;
35
- this.scrollToPosition(value);
36
- }
28
+ componentDidMount() {
29
+ const {value} = this.props;
30
+ console.log(value);
31
+ this.scrollToPosition(value);
32
+ }
33
+
34
+ componentWillUnmounted() {
35
+ clearTimeout(this.timer);
36
+ clearTimeout(this.timerUpdate);
37
+ }
37
38
 
38
- componentWillUnmounted() {
39
- clearTimeout(this.timer);
39
+ scrollToPosition(position) {
40
+ this.currentPosition = position * this.heightItem;
41
+ clearTimeout(this.timer);
42
+ this.timer = setTimeout(() => {
43
+ if (this.ScrollWheelPicker && this.ScrollWheelPicker.scrollTo) {
44
+ this.ScrollWheelPicker.scrollTo({y: this.currentPosition});
45
+ }
46
+ }, 500);
47
+ }
48
+
49
+ update(param) {
50
+ this.setState(
51
+ {
52
+ items: param.arrayValue,
53
+ value: param.value,
54
+ },
55
+ () => {
40
56
  clearTimeout(this.timerUpdate);
41
- }
57
+ this.timerUpdate = setTimeout(() => {
58
+ this.scrollToPosition(param.value);
59
+ }, 100);
60
+ },
61
+ );
62
+ }
42
63
 
43
- scrollToPosition(position) {
44
- this.currentPosition = position * this.heightItem;
45
- clearTimeout(this.timer);
46
- this.timer = setTimeout(() => {
47
- if (this.ScrollWheelPicker && this.ScrollWheelPicker.scrollTo) {
48
- this.ScrollWheelPicker.scrollTo({ y: this.currentPosition });
49
- }
50
- }, 500);
64
+ setScrollEnabled(enable) {
65
+ if (
66
+ this.ScrollWheelPicker &&
67
+ this.ScrollWheelPicker.setScrollEnabled &&
68
+ !this.isDragging
69
+ ) {
70
+ this.ScrollWheelPicker.setScrollEnabled(enable);
51
71
  }
72
+ }
52
73
 
53
- update(param) {
74
+ onValueChange() {
75
+ if (this.currentPosition != null) {
76
+ const {value} = this.state;
77
+ const {onValueChange, onEndDrag, refName} = this.props;
78
+ const position = this.parseInteger(
79
+ this.currentPosition / this.heightItem,
80
+ );
81
+ if (position !== value) {
54
82
  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
- },
83
+ {
84
+ value: position,
85
+ },
86
+ () => {
87
+ this.scrollToPosition(position);
88
+ },
65
89
  );
90
+ }
91
+ if (onValueChange) {
92
+ onValueChange(position);
93
+ }
94
+ if (onEndDrag) {
95
+ onEndDrag(refName);
96
+ }
66
97
  }
98
+ }
67
99
 
68
- setScrollEnabled(enable) {
69
- if (
70
- this.ScrollWheelPicker &&
71
- this.ScrollWheelPicker.setScrollEnabled &&
72
- !this.isDragging
73
- ) {
74
- this.ScrollWheelPicker.setScrollEnabled(enable);
75
- }
100
+ parseInteger(number) {
101
+ const mode = (number * 10) % 10;
102
+ if (mode > 5) {
103
+ return parseInt(number, 10) + 1;
76
104
  }
105
+ return parseInt(number, 10);
106
+ }
77
107
 
78
- onValueChange() {
79
- if (this.currentPosition != null) {
80
- const { value } = this.state;
81
- const { onValueChange, onEndDrag, refName } = this.props;
82
- const position = this.parseInteger(
83
- this.currentPosition / this.heightItem,
84
- );
85
- if (position !== value) {
86
- this.setState(
87
- {
88
- value: position,
89
- },
90
- () => {
91
- this.scrollToPosition(position);
92
- },
93
- );
94
- }
95
- if (onValueChange) {
96
- onValueChange(position);
97
- }
98
- if (onEndDrag) {
99
- onEndDrag(refName);
100
- }
101
- }
108
+ checkEvenNumber(number) {
109
+ const mode = number % 2;
110
+ if (mode > 0) {
111
+ return false;
102
112
  }
113
+ return true;
114
+ }
103
115
 
104
- parseInteger(number) {
105
- const mode = (number * 10) % 10;
106
- if (mode > 5) {
107
- return parseInt(number, 10) + 1;
108
- }
109
- return parseInt(number, 10);
116
+ convertNumberItem(number) {
117
+ let numberItem = number;
118
+ if (this.checkEvenNumber(numberItem)) {
119
+ numberItem += 1;
110
120
  }
111
121
 
112
- checkEvenNumber(number) {
113
- const mode = number % 2;
114
- if (mode > 0) {
115
- return false;
116
- }
117
- return true;
118
- }
119
-
120
- convertNumberItem(number) {
121
- let numberItem = number;
122
- if (this.checkEvenNumber(numberItem)) {
123
- numberItem += 1;
124
- }
122
+ return numberItem;
123
+ }
125
124
 
126
- return numberItem;
125
+ renderHiddenItem(numberItem, heightItem, offset = 0) {
126
+ const numberItemTop = parseInt(numberItem / 2, 10) - offset;
127
+ const view = [];
128
+ // eslint-disable-next-line no-plusplus
129
+ for (let i = 0; i < numberItemTop; i++) {
130
+ view.push(
131
+ <View
132
+ key={`itemTop${i}`}
133
+ style={{
134
+ flex: 1,
135
+ height: heightItem,
136
+ }}
137
+ />,
138
+ );
127
139
  }
128
140
 
129
- renderHiddenItem(numberItem, heightItem, offset = 0) {
130
- const numberItemTop = parseInt(numberItem / 2, 10) - offset;
131
- const view = [];
132
- // eslint-disable-next-line no-plusplus
133
- for (let i = 0; i < numberItemTop; i++) {
134
- view.push(
135
- <View
136
- key={`itemTop${i}`}
137
- style={{
138
- flex: 1,
139
- height: heightItem,
140
- }}
141
- />,
142
- );
143
- }
141
+ return view;
142
+ }
144
143
 
145
- return view;
144
+ onStartDrag(rawPosition) {
145
+ this.currentPosition = rawPosition;
146
+ const {onBeginDrag, refName} = this.props;
147
+ this.isDragging = true;
148
+ if (onBeginDrag) {
149
+ onBeginDrag(refName);
146
150
  }
151
+ this.createCheckDragging();
152
+ }
147
153
 
148
- onStartDrag(rawPosition) {
149
- this.currentPosition = rawPosition;
150
- const { onBeginDrag, refName } = this.props;
151
- this.isDragging = true;
152
- if (onBeginDrag) {
153
- onBeginDrag(refName);
154
- }
155
- this.createCheckDragging();
154
+ onEndDrag() {
155
+ if (this.isDragging) {
156
+ this.isDragging = false;
157
+ this.onValueChange();
156
158
  }
157
-
158
- onEndDrag() {
159
- if (this.isDragging) {
160
- this.isDragging = false;
161
- this.onValueChange();
162
- }
163
- if (this.checkEndDrag) {
164
- clearInterval(this.checkEndDrag);
165
- }
159
+ if (this.checkEndDrag) {
160
+ clearInterval(this.checkEndDrag);
166
161
  }
162
+ }
167
163
 
168
- createCheckDragging() {
169
- this.checkEndDrag = setInterval(() => {
170
- this.checkPosition();
171
- }, 50);
172
- }
164
+ createCheckDragging() {
165
+ this.checkEndDrag = setInterval(() => {
166
+ this.checkPosition();
167
+ }, 50);
168
+ }
173
169
 
174
- checkPosition() {
175
- if (this.currentPosition === this.prePosition) {
176
- this.onEndDrag();
177
- } else {
178
- this.prePosition = this.currentPosition;
179
- }
170
+ checkPosition() {
171
+ if (this.currentPosition === this.prePosition) {
172
+ this.onEndDrag();
173
+ } else {
174
+ this.prePosition = this.currentPosition;
180
175
  }
176
+ }
181
177
 
182
- render() {
183
- const numberHiddenItem = parseInt(this.numberItem / 2, 10);
184
- const positionCenter = parseInt(this.heightItem * numberHiddenItem, 10);
185
- const heightContain = parseInt(this.heightItem * this.numberItem, 10);
186
- const { items, value, width } = this.state;
187
- const { preFix, bottomOffset } = this.props;
188
- return (
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 || '')}
198
- </Text.SubTitle>
199
- <View
200
- style={{
201
- flex: 1,
202
- height: heightContain,
203
- //backgroundColor: 'blue',
204
- marginHorizontal: 6,
205
- paddingBottom: 20,
206
- borderWidth: 1,
207
- borderColor: Colors.black_04,
208
- borderRadius: 8,
209
- overflow: 'hidden',
210
- }}
211
- onLayout={(event) => {
212
- if (
213
- event &&
214
- event.nativeEvent &&
215
- event.nativeEvent.layout &&
216
- event.nativeEvent.layout.height &&
217
- event.nativeEvent.layout.width
218
- ) {
219
- this.setState({
220
- // height: event.nativeEvent.layout.height,
221
- width: event.nativeEvent.layout.width,
222
- });
223
- }
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
- }}
234
- />
178
+ render() {
179
+ const numberHiddenItem = parseInt(this.numberItem / 2, 10);
180
+ const positionCenter = parseInt(this.heightItem * numberHiddenItem, 10);
181
+ const heightContain = parseInt(this.heightItem * this.numberItem, 10);
182
+ const {items, value, width} = this.state;
183
+ const {preFix, bottomOffset} = this.props;
184
+ return (
185
+ <View
186
+ style={{
187
+ flex: 1,
188
+ height: heightContain + 40,
189
+ }}>
190
+ <Text.Description2
191
+ weight="semibold"
192
+ style={{
193
+ color: Colors.black_17,
194
+ marginLeft: 6,
195
+ marginBottom: 3,
196
+ }}>
197
+ {DatePickerHelper.capitalizeFirstLetter(preFix || '')}
198
+ </Text.Description2>
199
+ <View
200
+ style={{
201
+ flex: 1,
202
+ height: heightContain,
203
+ marginHorizontal: 6,
204
+ paddingBottom: 20,
205
+ borderWidth: 1,
206
+ borderColor: Colors.black_04,
207
+ borderRadius: 8,
208
+ overflow: 'hidden',
209
+ }}
210
+ onLayout={event => {
211
+ if (
212
+ event &&
213
+ event.nativeEvent &&
214
+ event.nativeEvent.layout &&
215
+ event.nativeEvent.layout.height &&
216
+ event.nativeEvent.layout.width
217
+ ) {
218
+ this.setState({
219
+ // height: event.nativeEvent.layout.height,
220
+ width: event.nativeEvent.layout.width,
221
+ });
222
+ }
223
+ }}>
224
+ <View
225
+ style={{
226
+ position: 'absolute',
227
+ top: positionCenter,
228
+ left: 0,
229
+ height: this.heightItem, // + 12,
230
+ width,
231
+ backgroundColor: '#f2f8ff',
232
+ }}
233
+ />
235
234
 
236
- <ScrollCustom
237
- ref={(refName) => {
238
- this.ScrollWheelPicker = refName;
239
- }}
240
- 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
- );
251
- }
252
- }}
253
- 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;
262
- }
263
- }}>
264
- {this.renderHiddenItem(
265
- this.numberItem,
266
- this.heightItem,
267
- )}
268
- {items.map((valueItem, index) => (
269
- <View
270
- // eslint-disable-next-line react/no-array-index-key
271
- key={index}
272
- style={{
273
- flex: 1,
274
- height: this.heightItem,
275
- justifyContent: 'center',
276
- alignItems: 'center',
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
- }}>
291
- {valueItem}
292
- {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
293
- </Text>
294
- </View>
295
- ))}
296
- {this.renderHiddenItem(
297
- this.numberItem,
298
- this.heightItem,
299
- bottomOffset,
300
- )}
301
- </ScrollCustom>
302
- <LinearGradient
303
- pointerEvents="none"
304
- locations={[0.2, 0.85]}
305
- colors={[
306
- 'rgba(255, 255, 255, 1)',
307
- 'rgba(255, 255, 255, 0)',
308
- ]}
309
- style={{
310
- height: this.heightItem * 2,
311
- width,
312
- position: 'absolute',
313
- top: 0,
314
- overflow: 'hidden',
315
- }}
316
- />
317
- <LinearGradient
318
- pointerEvents="none"
319
- locations={[0, 0.85]}
320
- colors={[
321
- 'rgba(255, 255, 255, 0)',
322
- 'rgba(255, 255, 255, 1)',
323
- ]}
324
- style={{
325
- height: this.heightItem * 2,
326
- width,
327
- position: 'absolute',
328
- bottom: 0,
329
- overflow: 'hidden',
330
- }}
331
- />
332
- </View>
333
- </View>
334
- );
335
- }
235
+ <ScrollCustom
236
+ ref={refName => {
237
+ this.ScrollWheelPicker = refName;
238
+ }}
239
+ onScrollEndDrag={event => {
240
+ if (
241
+ event &&
242
+ event.nativeEvent &&
243
+ event.nativeEvent.contentOffset &&
244
+ event.nativeEvent.contentOffset.y != null &&
245
+ !this.isDragging
246
+ ) {
247
+ this.onStartDrag(event.nativeEvent.contentOffset.y);
248
+ }
249
+ }}
250
+ onScroll={event => {
251
+ if (
252
+ event &&
253
+ event.nativeEvent &&
254
+ event.nativeEvent.contentOffset &&
255
+ event.nativeEvent.contentOffset.y != null
256
+ ) {
257
+ this.currentPosition = event.nativeEvent.contentOffset.y;
258
+ }
259
+ }}>
260
+ {this.renderHiddenItem(this.numberItem, this.heightItem)}
261
+ {items.map((valueItem, index) => (
262
+ <View
263
+ // eslint-disable-next-line react/no-array-index-key
264
+ key={index}
265
+ style={{
266
+ flex: 1,
267
+ height: this.heightItem,
268
+ justifyContent: 'center',
269
+ alignItems: 'center',
270
+ }}>
271
+ <Text.Action2
272
+ weight={value === index ? 'bold' : 'semibold'}
273
+ style={{
274
+ color: value === index ? Colors.black_17 : Colors.black_12,
275
+
276
+ fontSize: 15,
277
+ }}>
278
+ {valueItem}
279
+ {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
280
+ </Text.Action2>
281
+ </View>
282
+ ))}
283
+ {this.renderHiddenItem(
284
+ this.numberItem,
285
+ this.heightItem,
286
+ bottomOffset,
287
+ )}
288
+ </ScrollCustom>
289
+ <LinearGradient
290
+ pointerEvents="none"
291
+ locations={[0.2, 0.85]}
292
+ colors={['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)']}
293
+ style={{
294
+ height: this.heightItem * 2,
295
+ width,
296
+ position: 'absolute',
297
+ top: 0,
298
+ overflow: 'hidden',
299
+ }}
300
+ />
301
+ <LinearGradient
302
+ pointerEvents="none"
303
+ locations={[0, 0.85]}
304
+ colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']}
305
+ style={{
306
+ height: this.heightItem * 2,
307
+ width,
308
+ position: 'absolute',
309
+ bottom: 0,
310
+ overflow: 'hidden',
311
+ }}
312
+ />
313
+ </View>
314
+ </View>
315
+ );
316
+ }
336
317
  }
337
318
 
338
319
  WheelPicker.defaultProps = {
339
- arrayValue: [],
340
- preFix: '',
341
- value: 0,
342
- heightItem: 42,
343
- numberItem: 5,
344
- bottomOffset: 0,
320
+ arrayValue: [],
321
+ preFix: '',
322
+ value: 0,
323
+ heightItem: 42,
324
+ numberItem: 5,
325
+ bottomOffset: 0,
345
326
  };
346
327
 
347
328
  module.exports = WheelPicker;