@momo-kits/date-picker 0.0.59-beta → 0.0.59-beta.2

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 (7) hide show
  1. package/datePicker/DatePicker.js +337 -141
  2. package/datePicker/DatePickerInput.js +47 -16
  3. package/datePicker/ListPicker.js +51 -47
  4. package/datePicker/WheelPicker.js +129 -82
  5. package/datePicker/helper/DatePickerHelper.js +14 -6
  6. package/package.json +14 -14
  7. package/publish.sh +2 -2
package/datePicker/DatePickerInput.js CHANGED
@@ -3,13 +3,32 @@ import React, { useState } from 'react';
3
3
  import { StyleSheet } from 'react-native';
4
4
  import { isEmpty } from 'lodash';
5
5
  import {
6
- IconSource, TouchableOpacity, Text, Colors, ValueUtil, Image
6
+ IconSource,
7
+ TouchableOpacity,
8
+ Text,
9
+ Colors,
10
+ ValueUtil,
11
+ Image,
7
12
  } from '@momo-kits/core';
8
13
  import DatePicker from './DatePicker';
9
14
 
10
15
  const DatePickerInput = ({
11
- navigator, defaultDate, maxDate, minDate, format = 'dd/MM/YYYY', onSelected, onClose,
12
- style, textStyle, icon, iconStyle, error, disabled, minuteArray, title, showRightIcon
16
+ navigator,
17
+ defaultDate,
18
+ maxDate,
19
+ minDate,
20
+ format = 'dd/MM/YYYY',
21
+ onSelected,
22
+ onClose,
23
+ style,
24
+ textStyle,
25
+ icon,
26
+ iconStyle,
27
+ error,
28
+ disabled,
29
+ minuteArray,
30
+ title,
31
+ showRightIcon,
13
32
  }) => {
14
33
  const [selected, setSelected] = useState(defaultDate || '');
15
34
 
@@ -29,7 +48,7 @@ const DatePickerInput = ({
29
48
  onSelected?.(dateSelected);
30
49
  setSelected(dateSelected);
31
50
  },
32
- }
51
+ },
33
52
  });
34
53
  };
35
54
  let otherStyle = {};
@@ -40,15 +59,27 @@ const DatePickerInput = ({
40
59
  <TouchableOpacity
41
60
  disabled={disabled}
42
61
  onPress={onPress}
43
- style={[styles.container, ValueUtil.extractStyle(style), otherStyle]}
44
- >
45
- <Text.Title style={[styles.defaultText, ValueUtil.extractStyle(textStyle), isEmpty(selected) ? { color: Colors.black_09 } : {}]}>{isEmpty(selected) ? format : selected}</Text.Title>
62
+ style={[
63
+ styles.container,
64
+ ValueUtil.extractStyle(style),
65
+ otherStyle,
66
+ ]}>
67
+ <Text.Title
68
+ style={[
69
+ styles.defaultText,
70
+ ValueUtil.extractStyle(textStyle),
71
+ isEmpty(selected) ? { color: Colors.black_09 } : {},
72
+ ]}>
73
+ {isEmpty(selected) ? format : selected}
74
+ </Text.Title>
46
75
  {showRightIcon ? (
47
76
  <Image
48
77
  source={icon || IconSource.ic_calendar}
49
78
  style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
50
79
  />
51
- ) : <View />}
80
+ ) : (
81
+ <View />
82
+ )}
52
83
  </TouchableOpacity>
53
84
  );
54
85
  };
@@ -69,10 +100,10 @@ DatePickerInput.propTypes = {
69
100
  disabled: PropTypes.bool,
70
101
  minuteArray: PropTypes.arrayOf(PropTypes.string),
71
102
  showRightIcon: PropTypes.bool,
72
- title: PropTypes.string
103
+ title: PropTypes.string,
73
104
  };
74
105
  DatePickerInput.defaultProps = {
75
- showRightIcon: true
106
+ showRightIcon: true,
76
107
  };
77
108
 
78
109
  export default DatePickerInput;
@@ -82,7 +113,7 @@ const styles = StyleSheet.create({
82
113
  width: 16,
83
114
  height: 16,
84
115
  resizeMode: 'contain',
85
- tintColor: Colors.black_09
116
+ tintColor: Colors.black_09,
86
117
  },
87
118
  container: {
88
119
  flexDirection: 'row',
@@ -93,16 +124,16 @@ const styles = StyleSheet.create({
93
124
  alignItems: 'center',
94
125
  justifyContent: 'space-between',
95
126
  paddingHorizontal: 12,
96
- backgroundColor: Colors.black_01
127
+ backgroundColor: Colors.black_01,
97
128
  },
98
129
  error: {
99
- borderColor: Colors.red_05
130
+ borderColor: Colors.red_05,
100
131
  },
101
132
  defaultText: {
102
133
  // fontSize: 14
103
134
  },
104
135
  disabled: {
105
136
  backgroundColor: Colors.black_05,
106
- borderWidth: 0
107
- }
108
- });
137
+ borderWidth: 0,
138
+ },
139
+ });
package/datePicker/ListPicker.js CHANGED
@@ -1,9 +1,14 @@
1
1
  import React, { Component } from 'react';
2
+ import { Dimensions, StyleSheet, View } from 'react-native';
2
3
  import {
3
- Dimensions, StyleSheet, View
4
- } from 'react-native';
5
- import {
6
- Button, IconSource, TouchableOpacity, Text, Colors, Image, DeviceUtils, SwitchLanguage
4
+ Button,
5
+ IconSource,
6
+ TouchableOpacity,
7
+ Text,
8
+ Colors,
9
+ Image,
10
+ DeviceUtils,
11
+ SwitchLanguage,
7
12
  } from '@momo-kits/core';
8
13
  import WheelPicker from './WheelPicker';
9
14
 
@@ -26,41 +31,41 @@ export default class ListPicker extends Component {
26
31
  }
27
32
  });
28
33
  }
29
- }
34
+ };
30
35
 
31
36
  onBeginDrag = () => {
32
37
  if (this.refs.picker) {
33
38
  this.refs.picker.setScrollEnabled(false);
34
39
  }
35
- }
40
+ };
36
41
 
37
42
  onEndDrag = () => {
38
43
  if (this.refs.picker) {
39
44
  this.refs.picker.setScrollEnabled(true);
40
45
  }
41
- }
46
+ };
42
47
 
43
48
  onChangeValue = (value) => {
44
49
  const { callback } = this.props;
45
50
  if (typeof callback === 'function') {
46
51
  callback(value);
47
52
  }
48
- }
53
+ };
49
54
 
50
55
  onPressClear = () => {
51
56
  this.hide();
52
- }
57
+ };
53
58
 
54
59
  onPressChoose = () => {
55
60
  this.onChangeValue(this.data);
56
61
  this.hide();
57
- }
62
+ };
58
63
 
59
64
  renderRight = () => (
60
- <TouchableOpacity
61
- onPress={this.onPressChoose}
62
- >
63
- <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>{SwitchLanguage.save}</Text.Title>
65
+ <TouchableOpacity onPress={this.onPressChoose}>
66
+ <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>
67
+ {SwitchLanguage.save}
68
+ </Text.Title>
64
69
  </TouchableOpacity>
65
70
  );
66
71
 
@@ -78,10 +83,12 @@ export default class ListPicker extends Component {
78
83
  return (
79
84
  <View style={styles.header}>
80
85
  {this.renderLeftIcon()}
81
- <Text style={styles.title}>
82
- {title}
83
- </Text>
84
- {this.props.typeStyle === 'aboveAction' ? this.renderRight() : <View style={{ width: 25 }} />}
86
+ <Text style={styles.title}>{title}</Text>
87
+ {this.props.typeStyle === 'aboveAction' ? (
88
+ this.renderRight()
89
+ ) : (
90
+ <View style={{ width: 25 }} />
91
+ )}
85
92
  </View>
86
93
  );
87
94
  }
@@ -103,7 +110,6 @@ export default class ListPicker extends Component {
103
110
  this.data = value;
104
111
  }}
105
112
  />
106
-
107
113
  </View>
108
114
  );
109
115
  }
@@ -113,26 +119,24 @@ export default class ListPicker extends Component {
113
119
  <View style={styles.view}>
114
120
  {this.renderHeader()}
115
121
  {this.renderContent()}
116
- {
117
- this.props.typeStyle === 'aboveAction'
118
- ? null
119
- : (
120
- <View style={styles.btnView}>
121
- <Button
122
- style={{ flex: 1 }}
123
- title={SwitchLanguage.cancel}
124
- buttonStyle={{ backgroundColor: Colors.second_text_color }}
125
- onPress={this.onPressClear}
126
- />
127
- <Button
128
- style={{ flex: 1, marginLeft: 15 }}
129
- title={SwitchLanguage.choose}
130
- type="primary"
131
- onPress={this.onPressChoose}
132
- />
133
- </View>
134
- )
135
- }
122
+ {this.props.typeStyle === 'aboveAction' ? null : (
123
+ <View style={styles.btnView}>
124
+ <Button
125
+ style={{ flex: 1 }}
126
+ title={SwitchLanguage.cancel}
127
+ buttonStyle={{
128
+ backgroundColor: Colors.second_text_color,
129
+ }}
130
+ onPress={this.onPressClear}
131
+ />
132
+ <Button
133
+ style={{ flex: 1, marginLeft: 15 }}
134
+ title={SwitchLanguage.choose}
135
+ type="primary"
136
+ onPress={this.onPressChoose}
137
+ />
138
+ </View>
139
+ )}
136
140
  </View>
137
141
  );
138
142
  }
@@ -143,10 +147,10 @@ const styles = StyleSheet.create({
143
147
  flexDirection: 'row',
144
148
  width: widthScreen,
145
149
  alignItems: 'center',
146
- justifyContent: 'center'
150
+ justifyContent: 'center',
147
151
  },
148
152
  contentStyle: {
149
- height: 200,
153
+ height: 230,
150
154
  },
151
155
  column: {
152
156
  borderWidth: 2,
@@ -165,29 +169,29 @@ const styles = StyleSheet.create({
165
169
  },
166
170
  view: {
167
171
  backgroundColor: 'white',
168
- paddingBottom: 10 + (isIphoneX() ? 10 : 0)
172
+ paddingBottom: 10 + (isIphoneX() ? 10 : 0),
169
173
  },
170
174
  title: {
171
175
  fontWeight: 'bold',
172
176
  color: Colors.black_17,
173
177
  flex: 1,
174
178
  fontSize: 16,
175
- textAlign: 'center'
179
+ textAlign: 'center',
176
180
  },
177
181
  titleCancel: {
178
182
  fontSize: 17,
179
- color: '#4A90E2'
183
+ color: '#4A90E2',
180
184
  },
181
185
  titleConfirm: {
182
186
  fontSize: 17,
183
187
  color: '#4A90E2',
184
- textAlign: 'right'
188
+ textAlign: 'right',
185
189
  },
186
190
  btnView: {
187
191
  flexDirection: 'row',
188
192
  justifyContent: 'space-between',
189
193
  marginHorizontal: 15,
190
194
  height: 60,
191
- alignItems: 'center'
192
- }
195
+ alignItems: 'center',
196
+ },
193
197
  });
package/datePicker/WheelPicker.js CHANGED
@@ -1,11 +1,8 @@
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';
5
+ import DatePickerHelper from './helper/DatePickerHelper';
9
6
 
10
7
  const widthScreen = Dimensions.get('window').width;
11
8
  // var heightScreen = Dimensions.get('window').height;
@@ -14,8 +11,12 @@ export default class WheelPicker extends Component {
14
11
  constructor(props) {
15
12
  super(props);
16
13
  const {
17
- heightItem, value, numberItem, arrayValue
14
+ heightItem,
15
+ value: valueItem,
16
+ numberItem,
17
+ arrayValue,
18
18
  } = this.props;
19
+ const value = valueItem === -1 ? 0 : valueItem;
19
20
  this.heightItem = heightItem;
20
21
  this.currentPosition = value * this.heightItem;
21
22
  this.prePosition = this.currentPosition;
@@ -25,7 +26,7 @@ export default class WheelPicker extends Component {
25
26
  // height: 100,
26
27
  width: widthScreen / 3,
27
28
  value,
28
- items: arrayValue
29
+ items: arrayValue,
29
30
  };
30
31
  }
31
32
 
@@ -50,19 +51,26 @@ export default class WheelPicker extends Component {
50
51
  }
51
52
 
52
53
  update(param) {
53
- this.setState({
54
- items: param.arrayValue,
55
- value: param.value
56
- }, () => {
57
- clearTimeout(this.timerUpdate);
58
- this.timerUpdate = setTimeout(() => {
59
- this.scrollToPosition(param.value);
60
- }, 100);
61
- });
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
+ );
62
66
  }
63
67
 
64
68
  setScrollEnabled(enable) {
65
- if (this.ScrollWheelPicker && this.ScrollWheelPicker.setScrollEnabled && !this.isDragging) {
69
+ if (
70
+ this.ScrollWheelPicker &&
71
+ this.ScrollWheelPicker.setScrollEnabled &&
72
+ !this.isDragging
73
+ ) {
66
74
  this.ScrollWheelPicker.setScrollEnabled(enable);
67
75
  }
68
76
  }
@@ -71,13 +79,18 @@ export default class WheelPicker extends Component {
71
79
  if (this.currentPosition != null) {
72
80
  const { value } = this.state;
73
81
  const { onValueChange, onEndDrag, refName } = this.props;
74
- const position = this.parseInteger(this.currentPosition / this.heightItem);
82
+ const position = this.parseInteger(
83
+ this.currentPosition / this.heightItem,
84
+ );
75
85
  if (position !== value) {
76
- this.setState({
77
- value: position
78
- }, () => {
79
- this.scrollToPosition(position);
80
- });
86
+ this.setState(
87
+ {
88
+ value: position,
89
+ },
90
+ () => {
91
+ this.scrollToPosition(position);
92
+ },
93
+ );
81
94
  }
82
95
  if (onValueChange) {
83
96
  onValueChange(position);
@@ -118,13 +131,15 @@ export default class WheelPicker extends Component {
118
131
  const view = [];
119
132
  // eslint-disable-next-line no-plusplus
120
133
  for (let i = 0; i < numberItemTop; i++) {
121
- view.push(<View
122
- key={`itemTop${i}`}
123
- style={{
124
- flex: 1,
125
- height: heightItem,
126
- }}
127
- />);
134
+ view.push(
135
+ <View
136
+ key={`itemTop${i}`}
137
+ style={{
138
+ flex: 1,
139
+ height: heightItem,
140
+ }}
141
+ />,
142
+ );
128
143
  }
129
144
 
130
145
  return view;
@@ -171,42 +186,51 @@ export default class WheelPicker extends Component {
171
186
  const { items, value, width } = this.state;
172
187
  const { preFix, bottomOffset } = this.props;
173
188
  return (
174
- <View style={{ flex: 1, height: heightContain + 20 }}>
175
- <Text.SubTitle style={{
176
- color: Colors.black_17, marginLeft: 6, marginBottom: 3
177
- }}
178
- >
179
- {preFix?.toUpperCase()}
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 || '')}
180
198
  </Text.SubTitle>
181
199
  <View
182
200
  style={{
183
201
  flex: 1,
184
202
  height: heightContain,
185
- // backgroundColor: 'blue',
203
+ //backgroundColor: 'blue',
186
204
  marginHorizontal: 6,
205
+ paddingBottom: 20,
187
206
  borderWidth: 1,
188
207
  borderColor: Colors.black_04,
189
208
  borderRadius: 8,
190
- overflow: 'hidden'
209
+ overflow: 'hidden',
191
210
  }}
192
211
  onLayout={(event) => {
193
- if (event && event.nativeEvent && event.nativeEvent.layout
194
- && 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
+ ) {
195
219
  this.setState({
196
220
  // height: event.nativeEvent.layout.height,
197
- width: event.nativeEvent.layout.width
221
+ width: event.nativeEvent.layout.width,
198
222
  });
199
223
  }
200
- }}
201
- >
202
- <View style={{
203
- position: 'absolute',
204
- top: positionCenter,
205
- left: 0,
206
- height: this.heightItem, // + 12,
207
- width,
208
- backgroundColor: '#f2f8ff',
209
- }}
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
+ }}
210
234
  />
211
235
 
212
236
  <ScrollCustom
@@ -214,22 +238,33 @@ export default class WheelPicker extends Component {
214
238
  this.ScrollWheelPicker = refName;
215
239
  }}
216
240
  onScrollEndDrag={(event) => {
217
- if (event && event.nativeEvent && event.nativeEvent.contentOffset
218
- && event.nativeEvent.contentOffset.y != null && !this.isDragging) {
219
- 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
+ );
220
251
  }
221
252
  }}
222
253
  onScroll={(event) => {
223
- if (event && event.nativeEvent && event.nativeEvent.contentOffset
224
- && event.nativeEvent.contentOffset.y != null) {
225
- 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;
226
262
  }
227
- }}
228
- >
229
-
230
- {
231
- this.renderHiddenItem(this.numberItem, this.heightItem)
232
- }
263
+ }}>
264
+ {this.renderHiddenItem(
265
+ this.numberItem,
266
+ this.heightItem,
267
+ )}
233
268
  {items.map((valueItem, index) => (
234
269
  <View
235
270
  // eslint-disable-next-line react/no-array-index-key
@@ -239,51 +274,63 @@ export default class WheelPicker extends Component {
239
274
  height: this.heightItem,
240
275
  justifyContent: 'center',
241
276
  alignItems: 'center',
242
- }}
243
- >
244
- <Text style={{
245
- color: value === index ? Colors.black_17 : '#909090',
246
- fontWeight: value === index ? 'bold' : '700',
247
- fontSize: value === index ? ScaleSize(20) : ScaleSize(16),
248
- }}
249
- >
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
+ }}>
250
291
  {valueItem}
251
292
  {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
252
293
  </Text>
253
294
  </View>
254
295
  ))}
255
- {
256
- this.renderHiddenItem(this.numberItem, this.heightItem, bottomOffset)
257
- }
296
+ {this.renderHiddenItem(
297
+ this.numberItem,
298
+ this.heightItem,
299
+ bottomOffset,
300
+ )}
258
301
  </ScrollCustom>
259
302
  <LinearGradient
260
303
  pointerEvents="none"
261
304
  locations={[0.2, 0.85]}
262
- 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
+ ]}
263
309
  style={{
264
310
  height: this.heightItem * 2,
265
311
  width,
266
312
  position: 'absolute',
267
313
  top: 0,
268
- overflow: 'hidden'
269
-
314
+ overflow: 'hidden',
270
315
  }}
271
316
  />
272
317
  <LinearGradient
273
318
  pointerEvents="none"
274
319
  locations={[0, 0.85]}
275
- 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
+ ]}
276
324
  style={{
277
325
  height: this.heightItem * 2,
278
326
  width,
279
327
  position: 'absolute',
280
328
  bottom: 0,
281
- overflow: 'hidden'
329
+ overflow: 'hidden',
282
330
  }}
283
331
  />
284
332
  </View>
285
333
  </View>
286
-
287
334
  );
288
335
  }
289
336
  }
@@ -294,7 +341,7 @@ WheelPicker.defaultProps = {
294
341
  value: 0,
295
342
  heightItem: 42,
296
343
  numberItem: 5,
297
- bottomOffset: 0
344
+ bottomOffset: 0,
298
345
  };
299
346
 
300
347
  module.exports = WheelPicker;