From cec3c8aed609ff91a44d39729dbbff93a01db24b Mon Sep 17 00:00:00 2001 From: rainie <463103063@qq.com> Date: Mon, 3 Jul 2017 20:42:33 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20[feature]=20add=20feature=20of?= =?UTF-8?q?=20button=20customized.(https://github.com/lanjingling0510/reac?= =?UTF-8?q?t-mobile-datepicker/issues/3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +++- lib/DatePicker.js | 8 +++++--- lib/DatePickerItem.js | 9 +++++++-- lib/index.js | 4 ++++ 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b23444d..dc59e14 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,9 @@ ReactDOM.render(, document.getElementById('react-box')); | dateFormat | Array | ['YYYY', 'M', 'D'] | according to year, month, day format specified display text. E.g ['YYYY年', 'MM月', 'DD日']| | value | Date | new Date() | date value | | min | Date | new Date(1970, 0, 1) | minimum date | -| max | Date | new Date(2050, 0, 1) | maximum date | +| max | Date | new Date(2050, 0, 1) | maximum date | +| confirmText | String | 完成 | customize the selection time button text | +| cancelText | String | 取消 | customize the cancel button text | | onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter | | onCancel | Function | () => {} | the callback function after click button of cancel | diff --git a/lib/DatePicker.js b/lib/DatePicker.js index b67e870..ae52fac 100644 --- a/lib/DatePicker.js +++ b/lib/DatePicker.js @@ -65,7 +65,7 @@ class DatePicker extends Component { * @return {Object} JSX对象 */ render() { - const { min, max, theme, dateFormat } = this.props; + const { min, max, theme, dateFormat, confirmText, cancelText } = this.props; const value = this.state.value; const themeClassName = ['default', 'dark', 'ios', 'android', 'android-dark'].indexOf(theme) === -1 ? @@ -101,10 +101,10 @@ class DatePicker extends Component {
完成 + onClick={this.handleFinishBtnClick}>{confirmText} 取消 + onClick={this.props.onCancel}>{cancelText}
); @@ -117,6 +117,8 @@ DatePicker.propTypes = { min: PropTypes.object, max: PropTypes.object, dateFormat: PropTypes.array, + confirmText: PropTypes.string, + cancelText: PropTypes.string, onSelect: PropTypes.func, onCancel: PropTypes.func, }; diff --git a/lib/DatePickerItem.js b/lib/DatePickerItem.js index 543d70a..39f17b4 100644 --- a/lib/DatePickerItem.js +++ b/lib/DatePickerItem.js @@ -12,6 +12,7 @@ const DATE_LENGTH = 10; // 日期的个数 const MIDDLE_INDEX = Math.floor(DATE_LENGTH / 2); // 日期数组中间值的索引 const MIDDLE_Y = - DATE_HEIGHT * MIDDLE_INDEX; // translateY值 +const isUndefined = val => typeof val === 'undefined'; /** * Class Date组件类 @@ -171,7 +172,9 @@ class DatePickerItem extends Component { handleStart(event) { this.touchY = - (event.targetTouches && event.targetTouches[0] && event.targetTouches[0].pageY) || + (!isUndefined(event.targetTouches) && + !isUndefined(event.targetTouches[0])) ? + event.targetTouches[0].pageY : event.pageY; this.translateY = this.state.translateY; @@ -180,7 +183,9 @@ class DatePickerItem extends Component { handleMove(event) { const touchY = - (event.targetTouches && event.targetTouches[0] && event.targetTouches[0].pageY) || + (!isUndefined(event.targetTouches) && + !isUndefined(event.targetTouches[0])) ? + event.targetTouches[0].pageY : event.pageY; const dir = touchY - this.touchY; diff --git a/lib/index.js b/lib/index.js index 9cc8f56..91afd9e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -42,6 +42,8 @@ ModalDatePicker.propTypes = { min: PropTypes.object, max: PropTypes.object, dateFormat: PropTypes.array, + confirmText: PropTypes.string, + cancelText: PropTypes.string, onSelect: PropTypes.func, onCancel: PropTypes.func, }; @@ -54,6 +56,8 @@ ModalDatePicker.defaultProps = { min: new Date(1970, 0, 1), max: new Date(2050, 0, 1), dateFormat: ['YYYY', 'M', 'D'], + confirmText: '完成', + cancelText: '取消', onSelect: () => {}, onCancel: () => {}, };