@momo-kits/date-picker 0.0.74-beta → 0.72.1

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 +709 -543
  2. package/datePicker/DatePickerInput.js +118 -90
  3. package/datePicker/ListPicker.js +186 -171
  4. package/datePicker/WheelPicker.js +288 -260
  5. package/datePicker/helper/DatePickerHelper.js +65 -21
  6. package/package.json +14 -14
  7. package/publish.sh +2 -2
package/datePicker/DatePickerInput.js CHANGED
@@ -1,108 +1,136 @@
1
1
  import PropTypes from 'prop-types';
2
- import React, { useState } from 'react';
3
- import { StyleSheet } from 'react-native';
4
- import { isEmpty } from 'lodash';
2
+ import React, {useState} from 'react';
3
+ import {StyleSheet} from 'react-native';
4
+ import {isEmpty} from 'lodash';
5
5
  import {
6
- IconSource, TouchableOpacity, Text, Colors, ValueUtil, Image
7
- } from '@momo-kits/core';
6
+ IconSource,
7
+ TouchableOpacity,
8
+ Text,
9
+ Colors,
10
+ ValueUtil,
11
+ Image,
12
+ Radius,
13
+ } from '@momo-kits/core-v2';
8
14
  import DatePicker from './DatePicker';
9
15
 
10
16
  const DatePickerInput = ({
11
- navigator, defaultDate, maxDate, minDate, format = 'dd/MM/YYYY', onSelected, onClose,
12
- style, textStyle, icon, iconStyle, error, disabled, minuteArray, title, showRightIcon
17
+ navigator,
18
+ defaultDate,
19
+ maxDate,
20
+ minDate,
21
+ format = 'dd/MM/YYYY',
22
+ onSelected,
23
+ onClose,
24
+ style,
25
+ textStyle,
26
+ icon,
27
+ iconStyle,
28
+ error,
29
+ disabled,
30
+ minuteArray,
31
+ title,
32
+ showRightIcon,
13
33
  }) => {
14
- const [selected, setSelected] = useState(defaultDate || '');
34
+ const [selected, setSelected] = useState(defaultDate || '');
15
35
 
16
- const onPress = () => {
17
- navigator?.showBottom?.({
18
- screen: DatePicker,
19
- params: {
20
- dragDisabled: true,
21
- minDate,
22
- maxDate,
23
- format,
24
- title,
25
- selectedDate: selected,
26
- onClose,
27
- minuteArray,
28
- onSelected: (dateSelected) => {
29
- onSelected?.(dateSelected);
30
- setSelected(dateSelected);
31
- },
32
- }
33
- });
34
- };
35
- let otherStyle = {};
36
- if (error) otherStyle = styles.error;
37
- if (disabled) otherStyle = styles.disabled;
36
+ const onPress = () => {
37
+ navigator?.showBottom?.({
38
+ screen: DatePicker,
39
+ params: {
40
+ dragDisabled: true,
41
+ minDate,
42
+ maxDate,
43
+ format,
44
+ title,
45
+ selectedDate: selected,
46
+ onClose,
47
+ minuteArray,
48
+ onSelected: dateSelected => {
49
+ onSelected?.(dateSelected);
50
+ setSelected(dateSelected);
51
+ },
52
+ },
53
+ });
54
+ };
55
+ let otherStyle = {};
56
+ if (error) otherStyle = styles.error;
57
+ if (disabled) otherStyle = styles.disabled;
38
58
 
39
- return (
40
- <TouchableOpacity
41
- disabled={disabled}
42
- 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>
46
- {showRightIcon ? (
47
- <Image
48
- source={icon || IconSource.ic_calendar}
49
- style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
50
- />
51
- ) : <View />}
52
- </TouchableOpacity>
53
- );
59
+ return (
60
+ <TouchableOpacity
61
+ disabled={disabled}
62
+ onPress={onPress}
63
+ style={[styles.container, ValueUtil.extractStyle(style), otherStyle]}>
64
+ <Text.Paragraph
65
+ style={[
66
+ styles.defaultText,
67
+ ValueUtil.extractStyle(textStyle),
68
+ isEmpty(selected) ? {color: Colors.black_09} : {},
69
+ ]}>
70
+ {isEmpty(selected) ? format : selected}
71
+ </Text.Paragraph>
72
+ {showRightIcon ? (
73
+ <Image
74
+ source={icon || IconSource.ic_calendar}
75
+ style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
76
+ />
77
+ ) : (
78
+ <View />
79
+ )}
80
+ </TouchableOpacity>
81
+ );
54
82
  };
55
83
 
56
84
  DatePickerInput.propTypes = {
57
- defaultDate: PropTypes.string,
58
- format: PropTypes.oneOf(['hh:mm', 'MM/YYYY', 'dd/MM', 'dd/MM/YYYY']),
59
- icon: PropTypes.any,
60
- maxDate: PropTypes.string,
61
- minDate: PropTypes.string,
62
- navigator: PropTypes.object,
63
- onClose: PropTypes.func,
64
- onSelected: PropTypes.func,
65
- iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
66
- style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
67
- textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
68
- error: PropTypes.bool,
69
- disabled: PropTypes.bool,
70
- minuteArray: PropTypes.arrayOf(PropTypes.string),
71
- showRightIcon: PropTypes.bool,
72
- title: PropTypes.string
85
+ defaultDate: PropTypes.string,
86
+ format: PropTypes.oneOf(['hh:mm', 'MM/YYYY', 'dd/MM', 'dd/MM/YYYY']),
87
+ icon: PropTypes.any,
88
+ maxDate: PropTypes.string,
89
+ minDate: PropTypes.string,
90
+ navigator: PropTypes.object,
91
+ onClose: PropTypes.func,
92
+ onSelected: PropTypes.func,
93
+ iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
94
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
95
+ textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
96
+ error: PropTypes.bool,
97
+ disabled: PropTypes.bool,
98
+ minuteArray: PropTypes.arrayOf(PropTypes.string),
99
+ showRightIcon: PropTypes.bool,
100
+ title: PropTypes.string,
73
101
  };
74
102
  DatePickerInput.defaultProps = {
75
- showRightIcon: true
103
+ showRightIcon: true,
76
104
  };
77
105
 
78
106
  export default DatePickerInput;
79
107
 
80
108
  const styles = StyleSheet.create({
81
- icon: {
82
- width: 16,
83
- height: 16,
84
- resizeMode: 'contain',
85
- tintColor: Colors.black_09
86
- },
87
- container: {
88
- flexDirection: 'row',
89
- height: 42,
90
- borderRadius: 4,
91
- borderColor: Colors.black_06,
92
- borderWidth: 1,
93
- alignItems: 'center',
94
- justifyContent: 'space-between',
95
- paddingHorizontal: 12,
96
- backgroundColor: Colors.black_01
97
- },
98
- error: {
99
- borderColor: Colors.red_05
100
- },
101
- defaultText: {
102
- // fontSize: 14
103
- },
104
- disabled: {
105
- backgroundColor: Colors.black_05,
106
- borderWidth: 0
107
- }
108
- });
109
+ icon: {
110
+ width: 16,
111
+ height: 16,
112
+ resizeMode: 'contain',
113
+ tintColor: Colors.black_09,
114
+ },
115
+ container: {
116
+ flexDirection: 'row',
117
+ height: 42,
118
+ borderRadius: Radius.S,
119
+ borderColor: Colors.black_06,
120
+ borderWidth: 1,
121
+ alignItems: 'center',
122
+ justifyContent: 'space-between',
123
+ paddingHorizontal: 12,
124
+ backgroundColor: Colors.black_01,
125
+ },
126
+ error: {
127
+ borderColor: Colors.red_03,
128
+ },
129
+ defaultText: {
130
+ // fontSize: 14
131
+ },
132
+ disabled: {
133
+ backgroundColor: Colors.black_05,
134
+ borderWidth: 0,
135
+ },
136
+ });
package/datePicker/ListPicker.js CHANGED
@@ -1,193 +1,208 @@
1
- import React, { Component } from 'react';
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
7
- } from '@momo-kits/core';
4
+ Button,
5
+ IconSource,
6
+ TouchableOpacity,
7
+ Text,
8
+ Colors,
9
+ Image,
10
+ DeviceUtils,
11
+ SwitchLanguage,
12
+ } from '@momo-kits/core-v2';
8
13
  import WheelPicker from './WheelPicker';
9
14
 
10
- const { isIphoneX } = DeviceUtils;
15
+ const {isIphoneX} = DeviceUtils;
11
16
 
12
17
  const widthScreen = Dimensions.get('window').width;
13
18
 
14
19
  export default class ListPicker extends Component {
15
- constructor(props) {
16
- super(props);
17
- this.data = 0;
18
- }
19
-
20
- hide = () => {
21
- const { onClose, requestClose } = this.props;
22
- if (requestClose && typeof requestClose === 'function') {
23
- requestClose(() => {
24
- if (onClose && typeof onClose === 'function') {
25
- onClose();
26
- }
27
- });
20
+ constructor(props) {
21
+ super(props);
22
+ this.data = 0;
23
+ }
24
+
25
+ hide = () => {
26
+ const {onClose, requestClose} = this.props;
27
+ if (requestClose && typeof requestClose === 'function') {
28
+ requestClose(() => {
29
+ if (onClose && typeof onClose === 'function') {
30
+ onClose();
28
31
  }
32
+ });
29
33
  }
34
+ };
30
35
 
31
- onBeginDrag = () => {
32
- if (this.refs.picker) {
33
- this.refs.picker.setScrollEnabled(false);
34
- }
36
+ onBeginDrag = () => {
37
+ if (this.refs.picker) {
38
+ this.refs.picker.setScrollEnabled(false);
35
39
  }
40
+ };
36
41
 
37
- onEndDrag = () => {
38
- if (this.refs.picker) {
39
- this.refs.picker.setScrollEnabled(true);
40
- }
42
+ onEndDrag = () => {
43
+ if (this.refs.picker) {
44
+ this.refs.picker.setScrollEnabled(true);
41
45
  }
46
+ };
42
47
 
43
- onChangeValue = (value) => {
44
- const { callback } = this.props;
45
- if (typeof callback === 'function') {
46
- callback(value);
47
- }
48
+ onChangeValue = value => {
49
+ const {callback} = this.props;
50
+ if (typeof callback === 'function') {
51
+ callback(value);
48
52
  }
49
-
50
- onPressClear = () => {
51
- this.hide();
52
- }
53
-
54
- onPressChoose = () => {
55
- this.onChangeValue(this.data);
56
- this.hide();
57
- }
58
-
59
- renderRight = () => (
60
- <TouchableOpacity
61
- onPress={this.onPressChoose}
62
- >
63
- <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>{SwitchLanguage.save}</Text.Title>
64
- </TouchableOpacity>
53
+ };
54
+
55
+ onPressClear = () => {
56
+ this.hide();
57
+ };
58
+
59
+ onPressChoose = () => {
60
+ this.onChangeValue(this.data);
61
+ this.hide();
62
+ };
63
+
64
+ renderRight = () => (
65
+ <TouchableOpacity onPress={this.onPressChoose}>
66
+ <Text.Paragraph
67
+ style={{
68
+ fontWeight: 'bold',
69
+ color: Colors.pink_05,
70
+ }}>
71
+ {SwitchLanguage.save}
72
+ </Text.Paragraph>
73
+ </TouchableOpacity>
74
+ );
75
+
76
+ renderLeftIcon = () => (
77
+ <TouchableOpacity onPress={() => this.hide()}>
78
+ <Image
79
+ source={IconSource.ic_close_x_24}
80
+ style={{
81
+ width: 25,
82
+ height: 25,
83
+ tintColor: Colors.black_17,
84
+ }}
85
+ />
86
+ </TouchableOpacity>
87
+ );
88
+
89
+ renderHeader() {
90
+ const {title = ''} = this.props;
91
+ return (
92
+ <View style={styles.header}>
93
+ {this.renderLeftIcon()}
94
+ <Text style={styles.title}>{title}</Text>
95
+ {this.props.typeStyle === 'aboveAction' ? (
96
+ this.renderRight()
97
+ ) : (
98
+ <View style={{width: 25}} />
99
+ )}
100
+ </View>
65
101
  );
66
-
67
- renderLeftIcon = () => (
68
- <TouchableOpacity onPress={() => this.hide()}>
69
- <Image
70
- source={IconSource.ic_close_x_24}
71
- style={{ width: 25, height: 25, tintColor: Colors.black_17 }}
102
+ }
103
+
104
+ renderContent() {
105
+ const {arrData = [], stylePicker, initValue} = this.props;
106
+ return (
107
+ <View style={styles.contentStyle}>
108
+ <WheelPicker
109
+ stylePicker={stylePicker}
110
+ bottomOffset={1}
111
+ value={initValue}
112
+ key="picker"
113
+ ref="picker"
114
+ arrayValue={arrData}
115
+ onBeginDrag={this.onBeginDrag}
116
+ onEndDrag={this.onEndDrag}
117
+ onValueChange={value => {
118
+ this.data = value;
119
+ }}
120
+ />
121
+ </View>
122
+ );
123
+ }
124
+
125
+ render() {
126
+ return (
127
+ <View style={styles.view}>
128
+ {this.renderHeader()}
129
+ {this.renderContent()}
130
+ {this.props.typeStyle === 'aboveAction' ? null : (
131
+ <View style={styles.btnView}>
132
+ <Button
133
+ style={{flex: 1}}
134
+ title={SwitchLanguage.cancel}
135
+ buttonStyle={{
136
+ backgroundColor: Colors.second_text_color,
137
+ }}
138
+ onPress={this.onPressClear}
139
+ />
140
+ <Button
141
+ style={{
142
+ flex: 1,
143
+ marginLeft: 15,
144
+ }}
145
+ title={SwitchLanguage.choose}
146
+ type="primary"
147
+ onPress={this.onPressChoose}
72
148
  />
73
- </TouchableOpacity>
149
+ </View>
150
+ )}
151
+ </View>
74
152
  );
75
-
76
- renderHeader() {
77
- const { title = '' } = this.props;
78
- return (
79
- <View style={styles.header}>
80
- {this.renderLeftIcon()}
81
- <Text style={styles.title}>
82
- {title}
83
- </Text>
84
- {this.props.typeStyle === 'aboveAction' ? this.renderRight() : <View style={{ width: 25 }} />}
85
- </View>
86
- );
87
- }
88
-
89
- renderContent() {
90
- const { arrData = [], stylePicker, initValue } = this.props;
91
- return (
92
- <View style={styles.contentStyle}>
93
- <WheelPicker
94
- stylePicker={stylePicker}
95
- bottomOffset={1}
96
- value={initValue}
97
- key="picker"
98
- ref="picker"
99
- arrayValue={arrData}
100
- onBeginDrag={this.onBeginDrag}
101
- onEndDrag={this.onEndDrag}
102
- onValueChange={(value) => {
103
- this.data = value;
104
- }}
105
- />
106
-
107
- </View>
108
- );
109
- }
110
-
111
- render() {
112
- return (
113
- <View style={styles.view}>
114
- {this.renderHeader()}
115
- {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
- }
136
- </View>
137
- );
138
- }
153
+ }
139
154
  }
140
155
 
141
156
  const styles = StyleSheet.create({
142
- container: {
143
- flexDirection: 'row',
144
- width: widthScreen,
145
- alignItems: 'center',
146
- justifyContent: 'center'
147
- },
148
- contentStyle: {
149
- height: 200,
150
- },
151
- column: {
152
- borderWidth: 2,
153
- borderColor: 'red',
154
- },
155
- header: {
156
- flexDirection: 'row',
157
- height: 50,
158
- width: widthScreen,
159
- paddingHorizontal: 16,
160
- alignItems: 'center',
161
- justifyContent: 'space-between',
162
- backgroundColor: '#fff',
163
- borderBottomWidth: 1,
164
- borderColor: '#DADADA',
165
- },
166
- view: {
167
- backgroundColor: 'white',
168
- paddingBottom: 10 + (isIphoneX() ? 10 : 0)
169
- },
170
- title: {
171
- fontWeight: 'bold',
172
- color: Colors.black_17,
173
- flex: 1,
174
- fontSize: 16,
175
- textAlign: 'center'
176
- },
177
- titleCancel: {
178
- fontSize: 17,
179
- color: '#4A90E2'
180
- },
181
- titleConfirm: {
182
- fontSize: 17,
183
- color: '#4A90E2',
184
- textAlign: 'right'
185
- },
186
- btnView: {
187
- flexDirection: 'row',
188
- justifyContent: 'space-between',
189
- marginHorizontal: 15,
190
- height: 60,
191
- alignItems: 'center'
192
- }
157
+ container: {
158
+ flexDirection: 'row',
159
+ width: widthScreen,
160
+ alignItems: 'center',
161
+ justifyContent: 'center',
162
+ },
163
+ contentStyle: {
164
+ height: 230,
165
+ },
166
+ column: {
167
+ borderWidth: 2,
168
+ borderColor: 'red',
169
+ },
170
+ header: {
171
+ flexDirection: 'row',
172
+ height: 50,
173
+ width: widthScreen,
174
+ paddingHorizontal: 16,
175
+ alignItems: 'center',
176
+ justifyContent: 'space-between',
177
+ backgroundColor: '#fff',
178
+ borderBottomWidth: 1,
179
+ borderColor: '#DADADA',
180
+ },
181
+ view: {
182
+ backgroundColor: 'white',
183
+ paddingBottom: 10 + (isIphoneX() ? 10 : 0),
184
+ },
185
+ title: {
186
+ fontWeight: 'bold',
187
+ color: Colors.black_17,
188
+ flex: 1,
189
+ fontSize: 16,
190
+ textAlign: 'center',
191
+ },
192
+ titleCancel: {
193
+ fontSize: 17,
194
+ color: '#4A90E2',
195
+ },
196
+ titleConfirm: {
197
+ fontSize: 17,
198
+ color: '#4A90E2',
199
+ textAlign: 'right',
200
+ },
201
+ btnView: {
202
+ flexDirection: 'row',
203
+ justifyContent: 'space-between',
204
+ marginHorizontal: 15,
205
+ height: 60,
206
+ alignItems: 'center',
207
+ },
193
208
  });