@momo-kits/date-picker 0.0.44-beta.2 → 0.0.44-beta.5

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