react-native-datepicker - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+<a name="1.6.0"></a>
+# [1.6.0](https://github.com/xgfe/react-native-datepicker/compare/v1.5.1...v1.6.0) (2017-06-12)
+
+### Features
+
+* **datepicker:** adding testIds to elements ([#138](https://github.com/xgfe/react-native-datepicker/issues/138)
+* **datepicker:** add `hideText` property to hide the Date Text ([#127](https://github.com/xgfe/react-native-datepicker/issues/127)
+* **datepicker:** add `TouchableComponent` property to support custom touchable components ([#128](https://github.com/xgfe/react-native-datepicker/issues/128)
+
+
 <a name="1.5.1"></a>
@@ -2,0 +12,0 @@ ## [1.5.1](https://github.com/xgfe/react-native-datepicker/compare/v1.5.0...v1.5.1) (2017-05-16)

index.js

 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {
@@ -12,3 +13,4 @@ View,
   Platform,
-  Animated
+  Animated,
+  Keyboard
 } from 'react-native';
@@ -37,2 +39,4 @@ import Style from './style';
 
+    this.getDate = this.getDate.bind(this);
+    this.getDateStr = this.getDateStr.bind(this);
     this.datePicked = this.datePicked.bind(this);
@@ -249,2 +253,4 @@ this.onPressDate = this.onPressDate.bind(this);
 
+    Keyboard.dismiss();
+
     // reset state
@@ -330,3 +336,7 @@ this.setState({
       cancelBtnText,
-      confirmBtnText
+      confirmBtnText,
+      TouchableComponent,
+      testID,
+      cancelBtnTestID,
+      confirmBtnTestID
     } = this.props;
@@ -341,11 +351,17 @@
     return (
-      <TouchableHighlight
+      <TouchableComponent
         style={[Style.dateTouch, style]}
         underlayColor={'transparent'}
         onPress={this.onPressDate}
+        testID={testID}
       >
         <View style={[Style.dateTouchBody, customStyles.dateTouchBody]}>
-          <View style={dateInputStyle}>
-            {this.getTitleElement()}
-          </View>
+          {
+            !this.props.hideText ?
+              <View style={dateInputStyle}>
+                {this.getTitleElement()}
+              </View>
+            :
+              <View/>
+          }
           {this._renderIcon()}
@@ -362,3 +378,3 @@ {Platform.OS === 'ios' && <Modal
             >
-              <TouchableHighlight
+              <TouchableComponent
                 style={Style.datePickerMask}
@@ -369,3 +385,3 @@ activeOpacity={1}
               >
-                <TouchableHighlight
+                <TouchableComponent
                   underlayColor={'#fff'}
@@ -389,6 +405,7 @@ style={{flex: 1}}
                     </View>
-                    <TouchableHighlight
+                    <TouchableComponent
                       underlayColor={'transparent'}
                       onPress={this.onPressCancel}
                       style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
+                      testID={cancelBtnTestID}
                     >
@@ -400,17 +417,18 @@ <Text
                       </Text>
-                    </TouchableHighlight>
-                    <TouchableHighlight
+                    </TouchableComponent>
+                    <TouchableComponent
                       underlayColor={'transparent'}
                       onPress={this.onPressConfirm}
                       style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
+                      testID={confirmBtnTestID}
                     >
                       <Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{confirmBtnText}</Text>
-                    </TouchableHighlight>
+                    </TouchableComponent>
                   </Animated.View>
-                </TouchableHighlight>
-              </TouchableHighlight>
+                </TouchableComponent>
+              </TouchableComponent>
             </View>
           </Modal>}
         </View>
-      </TouchableHighlight>
+      </TouchableComponent>
     );
@@ -437,3 +455,5 @@ }
   disabled: false,
+  hideText: false,
   placeholder: '',
+  TouchableComponent: TouchableHighlight,
   modalOnResponderTerminationRequest: e => true
@@ -443,26 +463,26 @@ };
 DatePicker.propTypes = {
-  mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
-  androidMode: React.PropTypes.oneOf(['calendar', 'spinner', 'default']),
-  date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
-  format: React.PropTypes.string,
-  minDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(Date)]),
-  maxDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.instanceOf(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]),
-  iconComponent: React.PropTypes.element,
-  customStyles: React.PropTypes.object,
-  showIcon: React.PropTypes.bool,
-  disabled: React.PropTypes.bool,
-  onDateChange: React.PropTypes.func,
-  onOpenModal: React.PropTypes.func,
-  onCloseModal: React.PropTypes.func,
-  onPressMask: React.PropTypes.func,
-  placeholder: React.PropTypes.string,
-  modalOnResponderTerminationRequest: React.PropTypes.func,
-  is24Hour: React.PropTypes.bool
+  mode: PropTypes.oneOf(['date', 'datetime', 'time']),
+  androidMode: PropTypes.oneOf(['calendar', 'spinner', 'default']),
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  format: PropTypes.string,
+  minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  height: PropTypes.number,
+  duration: PropTypes.number,
+  confirmBtnText: PropTypes.string,
+  cancelBtnText: PropTypes.string,
+  iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  iconComponent: PropTypes.element,
+  customStyles: PropTypes.object,
+  showIcon: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onDateChange: PropTypes.func,
+  onOpenModal: PropTypes.func,
+  onCloseModal: PropTypes.func,
+  onPressMask: PropTypes.func,
+  placeholder: PropTypes.string,
+  modalOnResponderTerminationRequest: PropTypes.func,
+  is24Hour: PropTypes.bool
 };
 
 export default DatePicker;

package.json

 {
   "name": "react-native-datepicker",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS",
@@ -32,17 +32,20 @@ "main": "index.js",
   "devDependencies": {
-    "react": "~15.4.0",
-    "react-native": "~0.39.0",
-    "cz-conventional-changelog": "^1.1.6",
-    "pre-commit": "^1.1.3",
-
     "babel-core": "^6.5.2",
+    "babel-eslint": "^7.2.3",
     "babel-preset-react-native": "^1.8.0",
     "chai": "^3.5.0",
     "coveralls": "^2.11.9",
+    "cz-conventional-changelog": "^1.1.6",
     "enzyme": "^2.4.0",
+    "eslint": "^3.19.0",
+    "eslint-plugin-react": "^7.0.1",
     "istanbul": "^1.0.0-alpha.2",
     "jsdom": "^9.4.1",
     "mocha": "^2.5.2",
+    "pre-commit": "^1.1.3",
+    "prop-types": "^15.5.10",
+    "react": "~15.4.0",
     "react-addons-test-utils": "~15.4.0",
     "react-dom": "~15.4.0",
+    "react-native": "~0.39.0",
     "react-native-mock": "^0.2.8",
@@ -49,0 +52,0 @@ "sinon": "^1.17.4"

README.md

@@ -73,3 +73,3 @@ # react-native-datepicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads](https://img.shields.io/npm/dt/react-native-datepicker.svg)](https://img.shields.io/npm/dt/react-native-datepicker.svg)
 | style | - | `object` | Specify the style of the DatePicker, eg. width, height...  |
-| date | - | `string | date` | Specify the display date of DatePicker. `string` type value must match the specified format  |
+| date | - | <code>string &#124; date</code> | Specify the display date of DatePicker. `string` type value must match the specified format |
 | mode | 'date' | `enum` | The `enum` of `date`, `datetime` and `time` |
@@ -80,8 +80,9 @@ | androidMode | 'default' | `enum` | The `enum` of `default`, `calendar` and `spinner` (only Android) |
 | 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. |
+| iconSource | - | <code>{uri: string} &#124; number</code> | Specify the icon. Same as the `source` of Image, always using `require()` |
+| minDate | - | <code>string &#124; date</code> | Restricts the range of possible date values. |
+| maxDate | - | <code>string &#124; date</code> | Restricts the range of possible date values. |
 | 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 |
+| hideText | false | `boolean` | Controller whether or not show the `dateText` |
 | iconComponent | - | `element` | Set the custom icon |
@@ -96,2 +97,3 @@ | disabled | false | `boolean` | Controller whether or not disable the picker |
 | modalOnResponderTerminationRequest | - | `function` | Set the callback for React Native's [Gesture Responder System](https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle)'s call to `onResponderTerminationRequest`. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases.  |
+| TouchableComponent | `TouchableHighlight` | `Component` | Replace the `TouchableHighlight` with a custom `Component`. For example : `TouchableOpacity` |
 
@@ -98,0 +100,0 @@ ### Property `customStyles` available keys

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45719

increased by2.97%

Lines of code

783

increased by2.49%

Number of lines in readme file

109

increased by1.87%

Worsened metrics

Dev dependency count

20

increased by25%

No dependency changes