@momo-kits/date-picker 0.0.53-beta.48 → 0.0.53-beta.52
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.
package/datePicker/DatePicker.js
CHANGED
|
@@ -594,9 +594,9 @@ class DatePicker extends Component {
|
|
|
594
594
|
const { description, descriptionStyle, renderDescription } = this.props;
|
|
595
595
|
if (renderDescription) return renderDescription;
|
|
596
596
|
return description ? (
|
|
597
|
-
<Text
|
|
597
|
+
<Text style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
|
|
598
598
|
{description}
|
|
599
|
-
</Text
|
|
599
|
+
</Text>
|
|
600
600
|
) : null;
|
|
601
601
|
};
|
|
602
602
|
|
|
@@ -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,
|
|
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,
|
|
12
|
-
|
|
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={[
|
|
44
|
-
|
|
45
|
-
|
|
62
|
+
style={[
|
|
63
|
+
styles.container,
|
|
64
|
+
ValueUtil.extractStyle(style),
|
|
65
|
+
otherStyle,
|
|
66
|
+
]}>
|
|
67
|
+
<Text
|
|
68
|
+
style={[
|
|
69
|
+
styles.defaultText,
|
|
70
|
+
ValueUtil.extractStyle(textStyle),
|
|
71
|
+
isEmpty(selected) ? { color: Colors.black_09 } : {},
|
|
72
|
+
]}>
|
|
73
|
+
{isEmpty(selected) ? format : selected}
|
|
74
|
+
</Text>
|
|
46
75
|
{showRightIcon ? (
|
|
47
76
|
<Image
|
|
48
77
|
source={icon || IconSource.ic_calendar}
|
|
49
78
|
style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
|
|
50
79
|
/>
|
|
51
|
-
) :
|
|
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
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
65
|
+
<TouchableOpacity onPress={this.onPressChoose}>
|
|
66
|
+
<Text style={{ fontWeight: 'bold', color: Colors.pink_05 }}>
|
|
67
|
+
{SwitchLanguage.save}
|
|
68
|
+
</Text>
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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,7 +147,7 @@ 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
153
|
height: 230,
|
|
@@ -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
|
});
|
|
@@ -187,7 +187,7 @@ export default class WheelPicker extends Component {
|
|
|
187
187
|
const { preFix, bottomOffset } = this.props;
|
|
188
188
|
return (
|
|
189
189
|
<View style={{ flex: 1, height: heightContain + 40 }}>
|
|
190
|
-
<Text
|
|
190
|
+
<Text
|
|
191
191
|
weight="bold"
|
|
192
192
|
style={{
|
|
193
193
|
color: Colors.black_17,
|
|
@@ -195,7 +195,7 @@ export default class WheelPicker extends Component {
|
|
|
195
195
|
marginBottom: 3,
|
|
196
196
|
}}>
|
|
197
197
|
{DatePickerHelper.capitalizeFirstLetter(preFix || '')}
|
|
198
|
-
</Text
|
|
198
|
+
</Text>
|
|
199
199
|
<View
|
|
200
200
|
style={{
|
|
201
201
|
flex: 1,
|