refactor(datepicker): refactor datepicker with official ES6 Classes pattern

feyy · feyy · commit fb5f6e2a6eda · 2016-07-25T17:45:26.000+08:00
xgfe#23
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ Check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/exa
   style={{width: 200}}
   date={this.state.date}
   mode="date"
+  placeholder="select date"
   format="YYYY-MM-DD"
   minDate="2016-05-01"
   maxDate="2016-06-01"
@@ -59,6 +60,7 @@ You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/ma
 | duration | 300 | `number` | Specify the animation duration of datepicker.|
 | customStyles | - | `number` | The hook of customize datepicker style, same as the native style. `dateTouchBody`, `dateInput`...|
 | showIcon | true | `boolean` | Controller whether or not show the icon |
+| placeholder | '' | `string` | The placeholder show when this.props.date is falsy |
 
 ## Methods
 
diff --git a/example/index.android.js b/example/index.android.js
@@ -18,7 +18,7 @@ class example extends Component {
     super(props);
 
     this.state = {
-      date: '2016-05-11',
+      date: '',
       time: '20:00',
       datetime: '2016-05-05 20:00',
       datetime1: '2016-05-05 20:00'
@@ -35,6 +35,7 @@ class example extends Component {
           style={{width: 200}}
           date={this.state.date}
           mode="date"
+          placeholder="placeholder"
           format="YYYY-MM-DD"
           minDate="2016-05-01"
           maxDate="2016-06-01"
diff --git a/index.js b/index.js
@@ -24,26 +24,7 @@ class DatePicker extends Component {
   constructor(props) {
     super(props);
 
-    this.mode = this.props.mode || 'date';
-
-    this.format = this.props.format || FORMATS[this.mode];
-    // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only
-    this.height = 259;
-    // slide animation duration time, default to 300ms, IOS only
-    this.duration = this.props.duration || 300;
-
-    this.confirmBtnText = this.props.confirmBtnText || '确定';
-    this.cancelBtnText = this.props.cancelBtnText || '取消';
-
-    this.iconSource = this.props.iconSource || require('./date_icon.png');
-    this.customStyles = this.props.customStyles || {};
-
-    // whether or not show the icon
-    if (typeof this.props.showIcon === 'boolean') {
-      this.showIcon = this.props.showIcon;
-    } else {
-      this.showIcon = true;
-    }
+    this.format = this.props.format || FORMATS[this.props.mode];
 
     this.state = {
       date: this.getDate(),
@@ -79,8 +60,8 @@ class DatePicker extends Component {
       Animated.timing(
         this.state.animatedHeight,
         {
-          toValue: this.height,
-          duration: this.duration
+          toValue: this.props.height,
+          duration: this.props.duration
         }
       ).start();
     } else {
@@ -120,15 +101,15 @@ class DatePicker extends Component {
       this.props.onDateChange(this.getDateStr(this.state.date), this.state.date);
     }
   }
-  
+
   getTitleElement() {
     const {date, placeholder} = this.props;
     if (!date && placeholder) {
-      return (<Text style={[Style.placeholderText, this.customStyles.placeholderText]}>{placeholder}</Text>);
+      return (<Text style={[Style.placeholderText, this.props.customStyles.placeholderText]}>{placeholder}</Text>);
     }
-    return (<Text style={[Style.dateText, this.customStyles.dateText]}>{this.getDateStr()}</Text>);
+    return (<Text style={[Style.dateText, this.props.customStyles.dateText]}>{this.getDateStr()}</Text>);
   }
-  
+
   onDatePicked({action, year, month, day}) {
     if (action !== DatePickerAndroid.dismissedAction) {
       this.setState({
@@ -183,13 +164,13 @@ class DatePicker extends Component {
     } else {
 
       // 选日期
-      if (this.mode === 'date') {
+      if (this.props.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)
         }).then(this.onDatePicked);
-      } else if (this.mode === 'time') {
+      } else if (this.props.mode === 'time') {
         // 选时间
 
         let timeMoment = Moment(this.state.date);
@@ -199,7 +180,7 @@ class DatePicker extends Component {
           minute: timeMoment.minutes(),
           is24Hour: !this.format.match(/h|a/)
         }).then(this.onTimePicked);
-      } else if (this.mode === 'datetime') {
+      } else if (this.props.mode === 'datetime') {
         // 选日期和时间
 
         DatePickerAndroid.open({
@@ -214,20 +195,22 @@ class DatePicker extends Component {
   }
 
   render() {
+    let customStyles = this.props.customStyles;
+    this.format = this.props.format || FORMATS[this.props.mode];
 
     return (
       <TouchableHighlight
         style={[Style.dateTouch, this.props.style]}
         underlayColor={'transparent'}
         onPress={this.onPressDate}
       >
-        <View style={[Style.dateTouchBody, this.customStyles.dateTouchBody]}>
-          <View style={[Style.dateInput, this.customStyles.dateInput, this.state.disabled && Style.disabled]}>
+        <View style={[Style.dateTouchBody, customStyles.dateTouchBody]}>
+          <View style={[Style.dateInput, customStyles.dateInput, this.state.disabled && Style.disabled]}>
             {this.getTitleElement()}
           </View>
-          {this.showIcon && <Image
-            style={[Style.dateIcon, this.customStyles.dateIcon]}
-            source={this.iconSource}
+          {this.props.showIcon && <Image
+            style={[Style.dateIcon, customStyles.dateIcon]}
+            source={this.props.iconSource}
           />}
           {Platform.OS === 'ios' && <Modal
             transparent={true}
@@ -245,33 +228,33 @@ class DatePicker extends Component {
                 style={{flex: 1}}
               >
                 <Animated.View
-                  style={[Style.datePickerCon, {height: this.state.animatedHeight}, this.customStyles.datePickerCon]}
+                  style={[Style.datePickerCon, {height: this.state.animatedHeight}, customStyles.datePickerCon]}
                 >
                   <DatePickerIOS
                     date={this.state.date}
-                    mode={this.mode}
+                    mode={this.props.mode}
                     minimumDate={this.props.minDate && this.getDate(this.props.minDate)}
                     maximumDate={this.props.maxDate && this.getDate(this.props.maxDate)}
                     onDateChange={(date) => this.setState({date: date})}
-                    style={[Style.datePicker, this.customStyles.datePicker]}
+                    style={[Style.datePicker, customStyles.datePicker]}
                   />
                   <TouchableHighlight
                     underlayColor={'transparent'}
                     onPress={this.onPressCancel}
-                    style={[Style.btnText, Style.btnCancel, this.customStyles.btnCancel]}
+                    style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
                   >
                     <Text
-                      style={[Style.btnTextText, Style.btnTextCancel, this.customStyles.btnTextCancel]}
+                      style={[Style.btnTextText, Style.btnTextCancel, customStyles.btnTextCancel]}
                     >
-                      {this.cancelBtnText}
+                      {this.props.cancelBtnText}
                     </Text>
                   </TouchableHighlight>
                   <TouchableHighlight
                     underlayColor={'transparent'}
                     onPress={this.onPressConfirm}
-                    style={[Style.btnText, Style.btnConfirm, this.customStyles.btnConfirm]}
+                    style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
                   >
-                    <Text style={[Style.btnTextText, this.customStyles.btnTextConfirm]}>{this.confirmBtnText}</Text>
+                    <Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{this.props.confirmBtnText}</Text>
                   </TouchableHighlight>
                 </Animated.View>
               </TouchableHighlight>
@@ -283,4 +266,42 @@ class DatePicker extends Component {
   }
 }
 
+DatePicker.defaultProps = {
+  mode: 'date',
+  date: '',
+  // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only
+  height: 259,
+
+  // slide animation duration time, default to 300ms, IOS only
+  duration: 300,
+  confirmBtnText: '确定',
+  cancelBtnText: '取消',
+  iconSource: require('./date_icon.png'),
+  customStyles: {},
+
+  // whether or not show the icon
+  showIcon: true,
+  disabled: false,
+  placeholder: ''
+};
+
+DatePicker.propTypes = {
+  mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
+  date: React.PropTypes.oneOfType([React.PropTypes.string, function(props, propName) {
+    if (!(props[propName] instanceof Date)) {
+      return new Error('Should be string or Date');
+    }
+  }]),
+  height: React.PropTypes.number,
+  duration: React.PropTypes.number,
+  confirmBtnText: React.PropTypes.string,
+  cancelBtnText: React.PropTypes.string,
+  iconSource: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object]),
+  customStyles: React.PropTypes.object,
+  showIcon: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
+  onDateChange: React.PropTypes.func,
+  placeholder: React.PropTypes.string
+};
+
 export default DatePicker;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-datepicker",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS",
   "main": "index.js",
   "scripts": {
@@ -33,14 +33,15 @@
     "chai": "^3.5.0",
     "coveralls": "^2.11.9",
     "cz-conventional-changelog": "^1.1.6",
-    "enzyme": "^2.3.0",
+    "enzyme": "^2.4.0",
     "istanbul": "^1.0.0-alpha.2",
+    "jsdom": "^9.4.1",
     "mocha": "^2.5.2",
     "pre-commit": "^1.1.3",
-    "react": "15.0.2",
-    "react-addons-test-utils": "15.0.2",
-    "react-dom": "15.0.2",
-    "react-native": "^0.26.0",
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-native": "^0.28.0",
     "react-native-mock": "^0.2.3",
     "sinon": "^1.17.4"
   },
diff --git a/test/index.test.js b/test/index.test.js
