Skip to content

Commit a0236f0

Browse files
feyyfeyy
committed
refactor(datepicker): refactor datepicker props with es6 destruction
1 parent c320e56 commit a0236f0

File tree

4 files changed

+88
-46
lines changed

4 files changed

+88
-46
lines changed

‎__tests__/index.android.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.android.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

‎__tests__/index.ios.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.ios.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

‎index.js‎

Lines changed: 62 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ class DatePicker extends Component {
2424
constructor(props) {
2525
super(props);
2626

27-
this.format = this.props.format || FORMATS[this.props.mode];
28-
2927
this.state = {
3028
date: this.getDate(),
3129
modalVisible: false,
@@ -52,15 +50,17 @@ class DatePicker extends Component {
5250
}
5351

5452
setModalVisible(visible) {
53+
const {height, duration} = this.props;
54+
5555
this.setState({modalVisible: visible});
5656

5757
// slide animation
5858
if (visible) {
5959
Animated.timing(
6060
this.state.animatedHeight,
6161
{
62-
toValue: this.props.height,
63-
duration: this.props.duration
62+
toValue: height,
63+
duration: duration
6464
}
6565
).start();
6666
} else {
@@ -88,22 +88,24 @@ class DatePicker extends Component {
8888
}
8989

9090
getDate(date = this.props.date) {
91+
const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props;
92+
9193
// date默认值
9294
if (!date) {
9395
let now = new Date();
94-
if (this.props.minDate) {
95-
let minDate = this.getDate(this.props.minDate);
96+
if (minDate) {
97+
let _minDate = this.getDate(minDate);
9698

97-
if (now < minDate) {
98-
return minDate;
99+
if (now < _minDate) {
100+
return _minDate;
99101
}
100102
}
101103

102-
if (this.props.maxDate) {
103-
let maxDate = this.getDate(this.props.maxDate);
104+
if (maxDate) {
105+
let _maxDate = this.getDate(maxDate);
104106

105-
if (now > maxDate) {
106-
return maxDate;
107+
if (now > _maxDate) {
108+
return _maxDate;
107109
}
108110
}
109111

@@ -114,14 +116,16 @@ class DatePicker extends Component {
114116
return date;
115117
}
116118

117-
return Moment(date, this.format).toDate();
119+
return Moment(date, format).toDate();
118120
}
119121

120122
getDateStr(date = this.props.date) {
123+
const {mode, format = FORMATS[mode]} = this.props;
124+
121125
if (date instanceof Date) {
122-
return Moment(date).format(this.format);
126+
return Moment(date).format(format);
123127
} else {
124-
return Moment(this.getDate(date)).format(this.format);
128+
return Moment(this.getDate(date)).format(format);
125129
}
126130
}
127131

@@ -132,11 +136,12 @@ class DatePicker extends Component {
132136
}
133137

134138
getTitleElement() {
135-
const {date, placeholder} = this.props;
139+
const {date, placeholder, customStyles} = this.props;
140+
136141
if (!date && placeholder) {
137-
return (<Text style={[Style.placeholderText, this.props.customStyles.placeholderText]}>{placeholder}</Text>);
142+
return (<Text style={[Style.placeholderText, customStyles.placeholderText]}>{placeholder}</Text>);
138143
}
139-
return (<Text style={[Style.dateText, this.props.customStyles.dateText]}>{this.getDateStr()}</Text>);
144+
return (<Text style={[Style.dateText, customStyles.dateText]}>{this.getDateStr()}</Text>);
140145
}
141146

142147
onDatePicked({action, year, month, day}) {
@@ -158,8 +163,9 @@ class DatePicker extends Component {
158163
}
159164

160165
onDatetimePicked({action, year, month, day}) {
166+
const {mode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props;
167+
161168
if (action !== DatePickerAndroid.dismissedAction) {
162-
const {is24Hour = !this.format.match(/h|a/)} = this.props;
163169
let timeMoment = Moment(this.state.date);
164170

165171
TimePickerAndroid.open({
@@ -192,16 +198,17 @@ class DatePicker extends Component {
192198
if (Platform.OS === 'ios') {
193199
this.setModalVisible(true);
194200
} else {
195-
const {is24Hour = !this.format.match(/h|a/)} = this.props;
201+
202+
const {mode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props;
196203

197204
// 选日期
198-
if (this.props.mode === 'date') {
205+
if (mode === 'date') {
199206
DatePickerAndroid.open({
200207
date: this.state.date,
201-
minDate: this.props.minDate && this.getDate(this.props.minDate),
202-
maxDate: this.props.maxDate && this.getDate(this.props.maxDate)
208+
minDate: minDate && this.getDate(minDate),
209+
maxDate: maxDate && this.getDate(maxDate)
203210
}).then(this.onDatePicked);
204-
} else if (this.props.mode === 'time') {
211+
} else if (mode === 'time') {
205212
// 选时间
206213

207214
let timeMoment = Moment(this.state.date);
@@ -211,42 +218,53 @@ class DatePicker extends Component {
211218
minute: timeMoment.minutes(),
212219
is24Hour: is24Hour
213220
}).then(this.onTimePicked);
214-
} else if (this.props.mode === 'datetime') {
221+
} else if (mode === 'datetime') {
215222
// 选日期和时间
216223

217224
DatePickerAndroid.open({
218225
date: this.state.date,
219-
minDate: this.props.minDate && this.getDate(this.props.minDate),
220-
maxDate: this.props.maxDate && this.getDate(this.props.maxDate)
226+
minDate: minDate && this.getDate(minDate),
227+
maxDate: maxDate && this.getDate(maxDate)
221228
}).then(this.onDatetimePicked);
222-
} else {
223-
throw new Error('The specified mode is not supported');
224229
}
225230
}
226231
}
227232

228233
render() {
229-
let customStyles = this.props.customStyles;
230-
this.format = this.props.format || FORMATS[this.props.mode];
234+
const {
235+
mode,
236+
style,
237+
customStyles,
238+
disabled,
239+
showIcon,
240+
iconSource,
241+
minDate,
242+
maxDate,
243+
minuteInterval,
244+
timeZoneOffsetInMinutes,
245+
cancelBtnText,
246+
confirmBtnText
247+
} = this.props;
248+
231249
const dateInputStyle = [
232250
Style.dateInput, customStyles.dateInput,
233-
this.props.disabled && Style.disabled,
234-
this.props.disabled && customStyles.disabled
251+
disabled && Style.disabled,
252+
disabled && customStyles.disabled
235253
];
236254

237255
return (
238256
<TouchableHighlight
239-
style={[Style.dateTouch, this.props.style]}
257+
style={[Style.dateTouch, style]}
240258
underlayColor={'transparent'}
241259
onPress={this.onPressDate}
242260
>
243261
<View style={[Style.dateTouchBody, customStyles.dateTouchBody]}>
244262
<View style={dateInputStyle}>
245263
{this.getTitleElement()}
246264
</View>
247-
{this.props.showIcon && <Image
265+
{showIcon && <Image
248266
style={[Style.dateIcon, customStyles.dateIcon]}
249-
source={this.props.iconSource}
267+
source={iconSource}
250268
/>}
251269
{Platform.OS === 'ios' && <Modal
252270
transparent={true}
@@ -271,12 +289,12 @@ class DatePicker extends Component {
271289
>
272290
<DatePickerIOS
273291
date={this.state.date}
274-
mode={this.props.mode}
275-
minimumDate={this.props.minDate && this.getDate(this.props.minDate)}
276-
maximumDate={this.props.maxDate && this.getDate(this.props.maxDate)}
292+
mode={mode}
293+
minimumDate={minDate && this.getDate(minDate)}
294+
maximumDate={maxDate && this.getDate(maxDate)}
277295
onDateChange={(date) => this.setState({date: date})}
278-
minuteInterval={this.props.minuteInterval}
279-
timeZoneOffsetInMinutes={this.props.timeZoneOffsetInMinutes}
296+
minuteInterval={minuteInterval}
297+
timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
280298
style={[Style.datePicker, customStyles.datePicker]}
281299
/>
282300
<TouchableHighlight
@@ -287,15 +305,15 @@ class DatePicker extends Component {
287305
<Text
288306
style={[Style.btnTextText, Style.btnTextCancel, customStyles.btnTextCancel]}
289307
>
290-
{this.props.cancelBtnText}
308+
{cancelBtnText}
291309
</Text>
292310
</TouchableHighlight>
293311
<TouchableHighlight
294312
underlayColor={'transparent'}
295313
onPress={this.onPressConfirm}
296314
style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
297315
>
298-
<Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{this.props.confirmBtnText}</Text>
316+
<Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{confirmBtnText}</Text>
299317
</TouchableHighlight>
300318
</Animated.View>
301319
</TouchableHighlight>
@@ -331,6 +349,7 @@ DatePicker.defaultProps = {
331349
DatePicker.propTypes = {
332350
mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
333351
date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
352+
format: React.PropTypes.string,
334353
minDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
335354
maxDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
336355
height: React.PropTypes.number,

‎test/index.test.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ describe('DatePicker:', () => {
5454
const datePicker = wrapper.instance();
5555

5656
expect(wrapper.prop('mode')).to.equal('date');
57-
expect(datePicker.format).to.equal('YYYY-MM-DD');
5857
expect(wrapper.prop('duration')).to.equal(300);
5958
expect(wrapper.prop('height')).to.above(200);
6059
expect(wrapper.prop('confirmBtnText')).to.equal('确定');
@@ -85,7 +84,7 @@ describe('DatePicker:', () => {
8584
const datePicker1 = wrapper1.instance();
8685

8786
expect(wrapper1.prop('mode')).to.equal('datetime');
88-
expect(datePicker1.format).to.equal('YYYY/MM/DD');
87+
expect(wrapper1.prop('format')).to.equal('YYYY/MM/DD');
8988
expect(wrapper1.prop('duration')).to.equal(400);
9089
expect(wrapper1.prop('confirmBtnText')).to.equal('Confirm');
9190
expect(wrapper1.prop('cancelBtnText')).to.equal('Cancel');
@@ -212,7 +211,7 @@ describe('DatePicker:', () => {
212211
expect(datePicker.getDateStr(new Date('2016-06-02'))).to.equal('2016-06-02');
213212
expect(datePicker.getDateStr('2016-06-03')).to.equal('2016-06-03');
214213

215-
datePicker.format = 'YYYY/MM/DD';
214+
wrapper.setProps({format: 'YYYY/MM/DD'});
216215
expect(datePicker.getDateStr(new Date('2016-06-02'))).to.equal('2016/06/02');
217216
});
218217

0 commit comments

Comments
 (0)