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

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 +13 -8
  2. package/datePicker/DatePickerInput.js +120 -117
  3. package/datePicker/ListPicker.js +174 -185
  4. package/datePicker/WheelPicker.js +305 -286
  5. package/datePicker/helper/DatePickerHelper.js +22 -58
  6. package/package.json +15 -15
package/datePicker/WheelPicker.js CHANGED
@@ -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-v2';
1
+ import React, { Component } from 'react';
2
+ import { Dimensions, View } from 'react-native';
3
+ import { LinearGradient, Text, Colors, ScaleSize } from '@momo-kits/core';
4
4
  import ScrollCustom from './custom/ScrollCustom';
5
5
  import DatePickerHelper from './helper/DatePickerHelper';
6
6
 
@@ -8,321 +8,340 @@ 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 {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
- }
27
-
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
- }
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
+ }
38
32
 
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
- }
33
+ componentDidMount() {
34
+ const { value } = this.props;
35
+ this.scrollToPosition(value);
36
+ }
48
37
 
49
- update(param) {
50
- this.setState(
51
- {
52
- items: param.arrayValue,
53
- value: param.value,
54
- },
55
- () => {
38
+ componentWillUnmounted() {
39
+ clearTimeout(this.timer);
56
40
  clearTimeout(this.timerUpdate);
57
- this.timerUpdate = setTimeout(() => {
58
- this.scrollToPosition(param.value);
59
- }, 100);
60
- },
61
- );
62
- }
41
+ }
63
42
 
64
- setScrollEnabled(enable) {
65
- if (
66
- this.ScrollWheelPicker &&
67
- this.ScrollWheelPicker.setScrollEnabled &&
68
- !this.isDragging
69
- ) {
70
- this.ScrollWheelPicker.setScrollEnabled(enable);
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);
71
51
  }
72
- }
73
52
 
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) {
53
+ update(param) {
82
54
  this.setState(
83
- {
84
- value: position,
85
- },
86
- () => {
87
- this.scrollToPosition(position);
88
- },
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
+ },
89
65
  );
90
- }
91
- if (onValueChange) {
92
- onValueChange(position);
93
- }
94
- if (onEndDrag) {
95
- onEndDrag(refName);
96
- }
97
66
  }
98
- }
99
67
 
100
- parseInteger(number) {
101
- const mode = (number * 10) % 10;
102
- if (mode > 5) {
103
- return parseInt(number, 10) + 1;
68
+ setScrollEnabled(enable) {
69
+ if (
70
+ this.ScrollWheelPicker &&
71
+ this.ScrollWheelPicker.setScrollEnabled &&
72
+ !this.isDragging
73
+ ) {
74
+ this.ScrollWheelPicker.setScrollEnabled(enable);
75
+ }
104
76
  }
105
- return parseInt(number, 10);
106
- }
107
77
 
108
- checkEvenNumber(number) {
109
- const mode = number % 2;
110
- if (mode > 0) {
111
- return false;
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
+ }
112
102
  }
113
- return true;
114
- }
115
103
 
116
- convertNumberItem(number) {
117
- let numberItem = number;
118
- if (this.checkEvenNumber(numberItem)) {
119
- numberItem += 1;
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);
120
110
  }
121
111
 
122
- return numberItem;
123
- }
124
-
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
- );
112
+ checkEvenNumber(number) {
113
+ const mode = number % 2;
114
+ if (mode > 0) {
115
+ return false;
116
+ }
117
+ return true;
139
118
  }
140
119
 
141
- return view;
142
- }
120
+ convertNumberItem(number) {
121
+ let numberItem = number;
122
+ if (this.checkEvenNumber(numberItem)) {
123
+ numberItem += 1;
124
+ }
143
125
 
144
- onStartDrag(rawPosition) {
145
- this.currentPosition = rawPosition;
146
- const {onBeginDrag, refName} = this.props;
147
- this.isDragging = true;
148
- if (onBeginDrag) {
149
- onBeginDrag(refName);
126
+ return numberItem;
150
127
  }
151
- this.createCheckDragging();
152
- }
153
128
 
154
- onEndDrag() {
155
- if (this.isDragging) {
156
- this.isDragging = false;
157
- this.onValueChange();
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
+ }
144
+
145
+ return view;
158
146
  }
159
- if (this.checkEndDrag) {
160
- clearInterval(this.checkEndDrag);
147
+
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();
161
156
  }
162
- }
163
157
 
164
- createCheckDragging() {
165
- this.checkEndDrag = setInterval(() => {
166
- this.checkPosition();
167
- }, 50);
168
- }
158
+ onEndDrag() {
159
+ if (this.isDragging) {
160
+ this.isDragging = false;
161
+ this.onValueChange();
162
+ }
163
+ if (this.checkEndDrag) {
164
+ clearInterval(this.checkEndDrag);
165
+ }
166
+ }
169
167
 
170
- checkPosition() {
171
- if (this.currentPosition === this.prePosition) {
172
- this.onEndDrag();
173
- } else {
174
- this.prePosition = this.currentPosition;
168
+ createCheckDragging() {
169
+ this.checkEndDrag = setInterval(() => {
170
+ this.checkPosition();
171
+ }, 50);
175
172
  }
176
- }
177
173
 
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
- />
174
+ checkPosition() {
175
+ if (this.currentPosition === this.prePosition) {
176
+ this.onEndDrag();
177
+ } else {
178
+ this.prePosition = this.currentPosition;
179
+ }
180
+ }
234
181
 
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,
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
+ />
275
235
 
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
- }
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
+ }
317
336
  }
318
337
 
319
338
  WheelPicker.defaultProps = {
320
- arrayValue: [],
321
- preFix: '',
322
- value: 0,
323
- heightItem: 42,
324
- numberItem: 5,
325
- bottomOffset: 0,
339
+ arrayValue: [],
340
+ preFix: '',
341
+ value: 0,
342
+ heightItem: 42,
343
+ numberItem: 5,
344
+ bottomOffset: 0,
326
345
  };
327
346
 
328
347
  module.exports = WheelPicker;