feat(datepicker): add support for custom styles with customStyles pro…

…perty
xgfe · May 6, 2016 · cb254e4 · cb254e4
1 parent 7ffbe43
commit cb254e4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -39,12 +39,13 @@ You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/ma
 | date | - | `string | date` | Specify the display date of DatePicker. `string` type value must match the specified format  |
 | mode | 'date' | `enum` | The `enum` of `date`, `datetime` and `time` |
 | format | 'YYYY-MM-DD' | `string` | Specify the display format of the date, which using [moment.js](http://momentjs.com/). The default value change according to the mode. |
-| confirmBtnText | - | `string` | Specify the text of confirm btn in ios. |
-| cancelBtnText | - | `string` | Specify the text of cancel btn in ios. |
+| confirmBtnText | '确定' | `string` | Specify the text of confirm btn in ios. |
+| cancelBtnText | '取消' | `string` | Specify the text of cancel btn in ios. |
 | iconSource | - | `{uri: string} | number` | Specify the icon. Same as the `source` of Image, always using `require()` |
 | minDate | - | `string | date` | Restricts the range of possible date values. |
 | maxDate | - | `string | date` | Restricts the range of possible date values. |
-| duration | 300 | `number` | Specify the animation duration of datepicker.
+| duration | 300 | `number` | Specify the animation duration of datepicker.|
+| customStyles | - | `number` | The hook of customize datepicker style, same as the native style. `dateTouchBody`, `dateInput`...|
 
 ## Methods
 

diff --git a/index.js b/index.js
@@ -45,6 +45,7 @@ class DatePicker extends Component {
   cancelBtnText = this.props.cancelBtnText || '取消';
 
   iconSource = this.props.iconSource || require('./date_icon.png');
+  customStyles = this.props.customStyles || {};
 
   state = {
     date: this.getDate(),
@@ -201,12 +202,12 @@ class DatePicker extends Component {
         underlayColor={'transparent'}
         onPress={this.onPressDate}
       >
-        <View style={Style.dateTouchBody}>
-          <View style={[Style.dateInput, this.state.disabled && Style.disabled]}>
-            <Text style={Style.dateText}>{this.getDateStr()}</Text>
+        <View style={[Style.dateTouchBody, this.customStyles.dateTouchBody]}>
+          <View style={[Style.dateInput, this.customStyles.dateInput, this.state.disabled && Style.disabled]}>
+            <Text style={[Style.dateText, this.customStyles.dateText]}>{this.getDateStr()}</Text>
           </View>
           <Image
-            style={Style.dateIcon}
+            style={[Style.dateIcon, this.customStyles.dateIcon]}
             source={this.iconSource}
           />
           {Platform.OS === 'ios' && <Modal
@@ -216,34 +217,35 @@ class DatePicker extends Component {
           >
             <TouchableHighlight
               style={Style.datePickerMask}
+              activeOpacity={1}
               underlayColor={'#00000077'}
               onPress={this.onPressCancel}
             >
               <TouchableHighlight
                 underlayColor={'#fff'}
               >
-                <Animated.View style={[Style.datePickerCon, {height: this.state.animatedHeight}]}>
+                <Animated.View style={[Style.datePickerCon, {height: this.state.animatedHeight}, this.customStyles.datePickerCon]}>
                   <DatePickerIOS
                     date={this.state.date}
                     mode={this.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}
+                    style={[Style.datePicker, this.customStyles.datePicker]}
                   />
                   <TouchableHighlight
                     underlayColor={'transparent'}
                     onPress={this.onPressCancel}
-                    style={[Style.btnText, Style.btnCancel]}
+                    style={[Style.btnText, Style.btnCancel, this.customStyles.btnCancel]}
                   >
-                    <Text style={[Style.btnTextText, Style.btnTextCancel]}>{this.cancelBtnText}</Text>
+                    <Text style={[Style.btnTextText, Style.btnTextCancel, this.customStyles.btnTextCancel]}>{this.cancelBtnText}</Text>
                   </TouchableHighlight>
                   <TouchableHighlight
                     underlayColor={'transparent'}
                     onPress={this.onPressConfirm}
-                    style={[Style.btnText, Style.btnConfirm]}
+                    style={[Style.btnText, Style.btnConfirm, this.customStyles.btnConfirm]}
                   >
-                    <Text style={Style.btnTextText}>{this.confirmBtnText}</Text>
+                    <Text style={[Style.btnTextText, this.customStyles.btnTextConfirm]}>{this.confirmBtnText}</Text>
                   </TouchableHighlight>
                 </Animated.View>
               </TouchableHighlight>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-datepicker",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS",
   "main": "index.js",
   "scripts": {