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: () => {},
};