From a0236f0bd4a12b9f265773f0df3b37e56746c884 Mon Sep 17 00:00:00 2001 From: feyy Date: Wed, 14 Dec 2016 00:28:53 +0800 Subject: [PATCH] refactor(datepicker): refactor datepicker props with es6 destruction --- __tests__/index.android.js | 12 +++++ __tests__/index.ios.js | 12 +++++ index.js | 105 ++++++++++++++++++++++--------------- test/index.test.js | 5 +- 4 files changed, 88 insertions(+), 46 deletions(-) create mode 100644 __tests__/index.android.js create mode 100644 __tests__/index.ios.js diff --git a/__tests__/index.android.js b/__tests__/index.android.js new file mode 100644 index 0000000000..b49b9087f4 --- /dev/null +++ b/__tests__/index.android.js @@ -0,0 +1,12 @@ +import 'react-native'; +import React from 'react'; +import Index from '../index.android.js'; + +// Note: test renderer must be required after react-native. +import renderer from 'react-test-renderer'; + +it('renders correctly', () => { + const tree = renderer.create( + + ); +}); diff --git a/__tests__/index.ios.js b/__tests__/index.ios.js new file mode 100644 index 0000000000..ba7c5b5e16 --- /dev/null +++ b/__tests__/index.ios.js @@ -0,0 +1,12 @@ +import 'react-native'; +import React from 'react'; +import Index from '../index.ios.js'; + +// Note: test renderer must be required after react-native. +import renderer from 'react-test-renderer'; + +it('renders correctly', () => { + const tree = renderer.create( + + ); +}); diff --git a/index.js b/index.js index ebb4e8a152..fb02549b8b 100644 --- a/index.js +++ b/index.js @@ -24,8 +24,6 @@ class DatePicker extends Component { constructor(props) { super(props); - this.format = this.props.format || FORMATS[this.props.mode]; - this.state = { date: this.getDate(), modalVisible: false, @@ -52,6 +50,8 @@ class DatePicker extends Component { } setModalVisible(visible) { + const {height, duration} = this.props; + this.setState({modalVisible: visible}); // slide animation @@ -59,8 +59,8 @@ class DatePicker extends Component { Animated.timing( this.state.animatedHeight, { - toValue: this.props.height, - duration: this.props.duration + toValue: height, + duration: duration } ).start(); } else { @@ -88,22 +88,24 @@ class DatePicker extends Component { } getDate(date = this.props.date) { + const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; + // date默认值 if (!date) { let now = new Date(); - if (this.props.minDate) { - let minDate = this.getDate(this.props.minDate); + if (minDate) { + let _minDate = this.getDate(minDate); - if (now < minDate) { - return minDate; + if (now < _minDate) { + return _minDate; } } - if (this.props.maxDate) { - let maxDate = this.getDate(this.props.maxDate); + if (maxDate) { + let _maxDate = this.getDate(maxDate); - if (now > maxDate) { - return maxDate; + if (now > _maxDate) { + return _maxDate; } } @@ -114,14 +116,16 @@ class DatePicker extends Component { return date; } - return Moment(date, this.format).toDate(); + return Moment(date, format).toDate(); } getDateStr(date = this.props.date) { + const {mode, format = FORMATS[mode]} = this.props; + if (date instanceof Date) { - return Moment(date).format(this.format); + return Moment(date).format(format); } else { - return Moment(this.getDate(date)).format(this.format); + return Moment(this.getDate(date)).format(format); } } @@ -132,11 +136,12 @@ class DatePicker extends Component { } getTitleElement() { - const {date, placeholder} = this.props; + const {date, placeholder, customStyles} = this.props; + if (!date && placeholder) { - return ({placeholder}); + return ({placeholder}); } - return ({this.getDateStr()}); + return ({this.getDateStr()}); } onDatePicked({action, year, month, day}) { @@ -158,8 +163,9 @@ class DatePicker extends Component { } onDatetimePicked({action, year, month, day}) { + const {mode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props; + if (action !== DatePickerAndroid.dismissedAction) { - const {is24Hour = !this.format.match(/h|a/)} = this.props; let timeMoment = Moment(this.state.date); TimePickerAndroid.open({ @@ -192,16 +198,17 @@ class DatePicker extends Component { if (Platform.OS === 'ios') { this.setModalVisible(true); } else { - const {is24Hour = !this.format.match(/h|a/)} = this.props; + + const {mode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props; // 选日期 - if (this.props.mode === 'date') { + if (mode === 'date') { DatePickerAndroid.open({ date: this.state.date, - minDate: this.props.minDate && this.getDate(this.props.minDate), - maxDate: this.props.maxDate && this.getDate(this.props.maxDate) + minDate: minDate && this.getDate(minDate), + maxDate: maxDate && this.getDate(maxDate) }).then(this.onDatePicked); - } else if (this.props.mode === 'time') { + } else if (mode === 'time') { // 选时间 let timeMoment = Moment(this.state.date); @@ -211,32 +218,43 @@ class DatePicker extends Component { minute: timeMoment.minutes(), is24Hour: is24Hour }).then(this.onTimePicked); - } else if (this.props.mode === 'datetime') { + } else if (mode === 'datetime') { // 选日期和时间 DatePickerAndroid.open({ date: this.state.date, - minDate: this.props.minDate && this.getDate(this.props.minDate), - maxDate: this.props.maxDate && this.getDate(this.props.maxDate) + minDate: minDate && this.getDate(minDate), + maxDate: maxDate && this.getDate(maxDate) }).then(this.onDatetimePicked); - } else { - throw new Error('The specified mode is not supported'); } } } render() { - let customStyles = this.props.customStyles; - this.format = this.props.format || FORMATS[this.props.mode]; + const { + mode, + style, + customStyles, + disabled, + showIcon, + iconSource, + minDate, + maxDate, + minuteInterval, + timeZoneOffsetInMinutes, + cancelBtnText, + confirmBtnText + } = this.props; + const dateInputStyle = [ Style.dateInput, customStyles.dateInput, - this.props.disabled && Style.disabled, - this.props.disabled && customStyles.disabled + disabled && Style.disabled, + disabled && customStyles.disabled ]; return ( @@ -244,9 +262,9 @@ class DatePicker extends Component { {this.getTitleElement()} - {this.props.showIcon && } {Platform.OS === 'ios' && this.setState({date: date})} - minuteInterval={this.props.minuteInterval} - timeZoneOffsetInMinutes={this.props.timeZoneOffsetInMinutes} + minuteInterval={minuteInterval} + timeZoneOffsetInMinutes={timeZoneOffsetInMinutes} style={[Style.datePicker, customStyles.datePicker]} /> - {this.props.cancelBtnText} + {cancelBtnText} - {this.props.confirmBtnText} + {confirmBtnText} @@ -331,6 +349,7 @@ DatePicker.defaultProps = { DatePicker.propTypes = { mode: React.PropTypes.oneOf(['date', 'datetime', 'time']), date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]), + format: React.PropTypes.string, minDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]), maxDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]), height: React.PropTypes.number, diff --git a/test/index.test.js b/test/index.test.js index 5f029a0334..131d586678 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -54,7 +54,6 @@ describe('DatePicker:', () => { const datePicker = wrapper.instance(); expect(wrapper.prop('mode')).to.equal('date'); - expect(datePicker.format).to.equal('YYYY-MM-DD'); expect(wrapper.prop('duration')).to.equal(300); expect(wrapper.prop('height')).to.above(200); expect(wrapper.prop('confirmBtnText')).to.equal('确定'); @@ -85,7 +84,7 @@ describe('DatePicker:', () => { const datePicker1 = wrapper1.instance(); expect(wrapper1.prop('mode')).to.equal('datetime'); - expect(datePicker1.format).to.equal('YYYY/MM/DD'); + expect(wrapper1.prop('format')).to.equal('YYYY/MM/DD'); expect(wrapper1.prop('duration')).to.equal(400); expect(wrapper1.prop('confirmBtnText')).to.equal('Confirm'); expect(wrapper1.prop('cancelBtnText')).to.equal('Cancel'); @@ -212,7 +211,7 @@ describe('DatePicker:', () => { expect(datePicker.getDateStr(new Date('2016-06-02'))).to.equal('2016-06-02'); expect(datePicker.getDateStr('2016-06-03')).to.equal('2016-06-03'); - datePicker.format = 'YYYY/MM/DD'; + wrapper.setProps({format: 'YYYY/MM/DD'}); expect(datePicker.getDateStr(new Date('2016-06-02'))).to.equal('2016/06/02'); });