@momo-kits/date-picker 0.0.53-beta.66 → 0.0.54-beta.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.
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 style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
|
|
597
|
+
<Text.Title style={[{ marginBottom: Spacing.S }, descriptionStyle]}>
|
|
598
598
|
{description}
|
|
599
|
-
</Text>
|
|
599
|
+
</Text.Title>
|
|
600
600
|
) : null;
|
|
601
601
|
};
|
|
602
602
|
|
|
@@ -3,32 +3,13 @@ import React, { useState } from 'react';
|
|
|
3
3
|
import { StyleSheet } from 'react-native';
|
|
4
4
|
import { isEmpty } from 'lodash';
|
|
5
5
|
import {
|
|
6
|
-
IconSource,
|
|
7
|
-
TouchableOpacity,
|
|
8
|
-
Text,
|
|
9
|
-
Colors,
|
|
10
|
-
ValueUtil,
|
|
11
|
-
Image,
|
|
6
|
+
IconSource, TouchableOpacity, Text, Colors, ValueUtil, Image
|
|
12
7
|
} from '@momo-kits/core';
|
|
13
8
|
import DatePicker from './DatePicker';
|
|
14
9
|
|
|
15
10
|
const DatePickerInput = ({
|
|
16
|
-
navigator,
|
|
17
|
-
|
|
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,
|
|
11
|
+
navigator, defaultDate, maxDate, minDate, format = 'dd/MM/YYYY', onSelected, onClose,
|
|
12
|
+
style, textStyle, icon, iconStyle, error, disabled, minuteArray, title, showRightIcon
|
|
32
13
|
}) => {
|
|
33
14
|
const [selected, setSelected] = useState(defaultDate || '');
|
|
34
15
|
|
|
@@ -48,7 +29,7 @@ const DatePickerInput = ({
|
|
|
48
29
|
onSelected?.(dateSelected);
|
|
49
30
|
setSelected(dateSelected);
|
|
50
31
|
},
|
|
51
|
-
}
|
|
32
|
+
}
|
|
52
33
|
});
|
|
53
34
|
};
|
|
54
35
|
let otherStyle = {};
|
|
@@ -59,27 +40,15 @@ const DatePickerInput = ({
|
|
|
59
40
|
<TouchableOpacity
|
|
60
41
|
disabled={disabled}
|
|
61
42
|
onPress={onPress}
|
|
62
|
-
style={[
|
|
63
|
-
|
|
64
|
-
|
|
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>
|
|
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>
|
|
75
46
|
{showRightIcon ? (
|
|
76
47
|
<Image
|
|
77
48
|
source={icon || IconSource.ic_calendar}
|
|
78
49
|
style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
|
|
79
50
|
/>
|
|
80
|
-
) :
|
|
81
|
-
<View />
|
|
82
|
-
)}
|
|
51
|
+
) : <View />}
|
|
83
52
|
</TouchableOpacity>
|
|
84
53
|
);
|
|
85
54
|
};
|
|
@@ -100,10 +69,10 @@ DatePickerInput.propTypes = {
|
|
|
100
69
|
disabled: PropTypes.bool,
|
|
101
70
|
minuteArray: PropTypes.arrayOf(PropTypes.string),
|
|
102
71
|
showRightIcon: PropTypes.bool,
|
|
103
|
-
title: PropTypes.string
|
|
72
|
+
title: PropTypes.string
|
|
104
73
|
};
|
|
105
74
|
DatePickerInput.defaultProps = {
|
|
106
|
-
showRightIcon: true
|
|
75
|
+
showRightIcon: true
|
|
107
76
|
};
|
|
108
77
|
|
|
109
78
|
export default DatePickerInput;
|
|
@@ -113,7 +82,7 @@ const styles = StyleSheet.create({
|
|
|
113
82
|
width: 16,
|
|
114
83
|
height: 16,
|
|
115
84
|
resizeMode: 'contain',
|
|
116
|
-
tintColor: Colors.black_09
|
|
85
|
+
tintColor: Colors.black_09
|
|
117
86
|
},
|
|
118
87
|
container: {
|
|
119
88
|
flexDirection: 'row',
|
|
@@ -124,16 +93,16 @@ const styles = StyleSheet.create({
|
|
|
124
93
|
alignItems: 'center',
|
|
125
94
|
justifyContent: 'space-between',
|
|
126
95
|
paddingHorizontal: 12,
|
|
127
|
-
backgroundColor: Colors.black_01
|
|
96
|
+
backgroundColor: Colors.black_01
|
|
128
97
|
},
|
|
129
98
|
error: {
|
|
130
|
-
borderColor: Colors.red_05
|
|
99
|
+
borderColor: Colors.red_05
|
|
131
100
|
},
|
|
132
101
|
defaultText: {
|
|
133
102
|
// fontSize: 14
|
|
134
103
|
},
|
|
135
104
|
disabled: {
|
|
136
105
|
backgroundColor: Colors.black_05,
|
|
137
|
-
borderWidth: 0
|
|
138
|
-
}
|
|
139
|
-
});
|
|
106
|
+
borderWidth: 0
|
|
107
|
+
}
|
|
108
|
+
});
|
package/datePicker/ListPicker.js
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
|
-
import { Dimensions, StyleSheet, View } from 'react-native';
|
|
3
2
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Text,
|
|
8
|
-
Colors,
|
|
9
|
-
Image,
|
|
10
|
-
DeviceUtils,
|
|
11
|
-
SwitchLanguage,
|
|
3
|
+
Dimensions, StyleSheet, View
|
|
4
|
+
} from 'react-native';
|
|
5
|
+
import {
|
|
6
|
+
Button, IconSource, TouchableOpacity, Text, Colors, Image, DeviceUtils, SwitchLanguage
|
|
12
7
|
} from '@momo-kits/core';
|
|
13
8
|
import WheelPicker from './WheelPicker';
|
|
14
9
|
|
|
@@ -31,41 +26,41 @@ export default class ListPicker extends Component {
|
|
|
31
26
|
}
|
|
32
27
|
});
|
|
33
28
|
}
|
|
34
|
-
}
|
|
29
|
+
}
|
|
35
30
|
|
|
36
31
|
onBeginDrag = () => {
|
|
37
32
|
if (this.refs.picker) {
|
|
38
33
|
this.refs.picker.setScrollEnabled(false);
|
|
39
34
|
}
|
|
40
|
-
}
|
|
35
|
+
}
|
|
41
36
|
|
|
42
37
|
onEndDrag = () => {
|
|
43
38
|
if (this.refs.picker) {
|
|
44
39
|
this.refs.picker.setScrollEnabled(true);
|
|
45
40
|
}
|
|
46
|
-
}
|
|
41
|
+
}
|
|
47
42
|
|
|
48
43
|
onChangeValue = (value) => {
|
|
49
44
|
const { callback } = this.props;
|
|
50
45
|
if (typeof callback === 'function') {
|
|
51
46
|
callback(value);
|
|
52
47
|
}
|
|
53
|
-
}
|
|
48
|
+
}
|
|
54
49
|
|
|
55
50
|
onPressClear = () => {
|
|
56
51
|
this.hide();
|
|
57
|
-
}
|
|
52
|
+
}
|
|
58
53
|
|
|
59
54
|
onPressChoose = () => {
|
|
60
55
|
this.onChangeValue(this.data);
|
|
61
56
|
this.hide();
|
|
62
|
-
}
|
|
57
|
+
}
|
|
63
58
|
|
|
64
59
|
renderRight = () => (
|
|
65
|
-
<TouchableOpacity
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
</Text>
|
|
60
|
+
<TouchableOpacity
|
|
61
|
+
onPress={this.onPressChoose}
|
|
62
|
+
>
|
|
63
|
+
<Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>{SwitchLanguage.save}</Text.Title>
|
|
69
64
|
</TouchableOpacity>
|
|
70
65
|
);
|
|
71
66
|
|
|
@@ -83,12 +78,10 @@ export default class ListPicker extends Component {
|
|
|
83
78
|
return (
|
|
84
79
|
<View style={styles.header}>
|
|
85
80
|
{this.renderLeftIcon()}
|
|
86
|
-
<Text style={styles.title}>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
) :
|
|
90
|
-
<View style={{ width: 25 }} />
|
|
91
|
-
)}
|
|
81
|
+
<Text style={styles.title}>
|
|
82
|
+
{title}
|
|
83
|
+
</Text>
|
|
84
|
+
{this.props.typeStyle === 'aboveAction' ? this.renderRight() : <View style={{ width: 25 }} />}
|
|
92
85
|
</View>
|
|
93
86
|
);
|
|
94
87
|
}
|
|
@@ -110,6 +103,7 @@ export default class ListPicker extends Component {
|
|
|
110
103
|
this.data = value;
|
|
111
104
|
}}
|
|
112
105
|
/>
|
|
106
|
+
|
|
113
107
|
</View>
|
|
114
108
|
);
|
|
115
109
|
}
|
|
@@ -119,24 +113,26 @@ export default class ListPicker extends Component {
|
|
|
119
113
|
<View style={styles.view}>
|
|
120
114
|
{this.renderHeader()}
|
|
121
115
|
{this.renderContent()}
|
|
122
|
-
{
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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
|
+
}
|
|
140
136
|
</View>
|
|
141
137
|
);
|
|
142
138
|
}
|
|
@@ -147,7 +143,7 @@ const styles = StyleSheet.create({
|
|
|
147
143
|
flexDirection: 'row',
|
|
148
144
|
width: widthScreen,
|
|
149
145
|
alignItems: 'center',
|
|
150
|
-
justifyContent: 'center'
|
|
146
|
+
justifyContent: 'center'
|
|
151
147
|
},
|
|
152
148
|
contentStyle: {
|
|
153
149
|
height: 230,
|
|
@@ -169,29 +165,29 @@ const styles = StyleSheet.create({
|
|
|
169
165
|
},
|
|
170
166
|
view: {
|
|
171
167
|
backgroundColor: 'white',
|
|
172
|
-
paddingBottom: 10 + (isIphoneX() ? 10 : 0)
|
|
168
|
+
paddingBottom: 10 + (isIphoneX() ? 10 : 0)
|
|
173
169
|
},
|
|
174
170
|
title: {
|
|
175
171
|
fontWeight: 'bold',
|
|
176
172
|
color: Colors.black_17,
|
|
177
173
|
flex: 1,
|
|
178
174
|
fontSize: 16,
|
|
179
|
-
textAlign: 'center'
|
|
175
|
+
textAlign: 'center'
|
|
180
176
|
},
|
|
181
177
|
titleCancel: {
|
|
182
178
|
fontSize: 17,
|
|
183
|
-
color: '#4A90E2'
|
|
179
|
+
color: '#4A90E2'
|
|
184
180
|
},
|
|
185
181
|
titleConfirm: {
|
|
186
182
|
fontSize: 17,
|
|
187
183
|
color: '#4A90E2',
|
|
188
|
-
textAlign: 'right'
|
|
184
|
+
textAlign: 'right'
|
|
189
185
|
},
|
|
190
186
|
btnView: {
|
|
191
187
|
flexDirection: 'row',
|
|
192
188
|
justifyContent: 'space-between',
|
|
193
189
|
marginHorizontal: 15,
|
|
194
190
|
height: 60,
|
|
195
|
-
alignItems: 'center'
|
|
196
|
-
}
|
|
191
|
+
alignItems: 'center'
|
|
192
|
+
}
|
|
197
193
|
});
|
|
@@ -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.SubTitle
|
|
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.SubTitle>
|
|
199
199
|
<View
|
|
200
200
|
style={{
|
|
201
201
|
flex: 1,
|