✨ [feature] add feature of button customized.(#3)

Author: lanjingling0510

README.md

@@ -112,7 +112,9 @@ ReactDOM.render(<App />, 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 |
 

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 {
                 <div className="datepicker-navbar">
                     <a
                         className="datepicker-navbar-btn"
-                        onClick={this.handleFinishBtnClick}>完成</a>
+                        onClick={this.handleFinishBtnClick}>{confirmText}</a>
                     <a
                         className="datepicker-navbar-btn"
-                        onClick={this.props.onCancel}>取消</a>
+                        onClick={this.props.onCancel}>{cancelText}</a>
                 </div>
             </div>
         );
@@ -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,
 };

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;

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