react-native-datepicker - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

@@ -0,1 +1,13 @@
+<a name="1.3.1"></a>
+## [1.3.1](https://github.com/xgfe/react-native-datepicker/compare/v1.3.0...v1.3.1) (2016-07-25)
+
+
+### Features
+
+* **datepicker:** add placeholder when this.props.date is falsy([1430f06](https://github.com/xgfe/react-native-datepicker/commit/1430f06906906d408217bae8183395969f3cf51f))
+
+### Refactor
+
+* **datepicker:** refactor datepicker with official ES6 Classes pattern([fb5f6e2](https://github.com/xgfe/react-native-datepicker/commit/fb5f6e2))
+
 <a name="1.3.0"></a>
@@ -2,0 +14,0 @@ # [1.3.0](https://github.com/xgfe/react-native-datepicker/compare/v1.2.2...v1.3.0) (2016-07-11)

index.js

@@ -27,23 +27,4 @@ import React, {Component} from 'react';
 
-    this.mode = this.props.mode || 'date';
+    this.format = this.props.format || FORMATS[this.props.mode];
 
-    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.state = {
@@ -83,4 +64,4 @@ date: this.getDate(),
         {
-          toValue: this.height,
-          duration: this.duration
+          toValue: this.props.height,
+          duration: this.props.duration
         }
@@ -126,2 +107,10 @@ ).start();
 
+  getTitleElement() {
+    const {date, placeholder} = this.props;
+    if (!date && placeholder) {
+      return (<Text style={[Style.placeholderText, this.props.customStyles.placeholderText]}>{placeholder}</Text>);
+    }
+    return (<Text style={[Style.dateText, this.props.customStyles.dateText]}>{this.getDateStr()}</Text>);
+  }
+
   onDatePicked({action, year, month, day}) {
@@ -181,3 +170,3 @@ if (action !== DatePickerAndroid.dismissedAction) {
       // 选日期
-      if (this.mode === 'date') {
+      if (this.props.mode === 'date') {
         DatePickerAndroid.open({
@@ -188,3 +177,3 @@ date: this.state.date,
         }).then(this.onDatePicked);
-      } else if (this.mode === 'time') {
+      } else if (this.props.mode === 'time') {
         // 选时间
@@ -199,3 +188,3 @@
         }).then(this.onTimePicked);
-      } else if (this.mode === 'datetime') {
+      } else if (this.props.mode === 'datetime') {
         // 选日期和时间
@@ -215,2 +204,4 @@
   render() {
+    let customStyles = this.props.customStyles;
+    this.format = this.props.format || FORMATS[this.props.mode];
 
@@ -223,9 +214,9 @@ return (
       >
-        <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 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}
           />}
@@ -248,11 +239,11 @@ {Platform.OS === 'ios' && <Modal
                 <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]}
                   />
@@ -262,8 +253,8 @@ <TouchableHighlight
                     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>
@@ -274,5 +265,5 @@ </TouchableHighlight>
                     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>
@@ -289,2 +280,36 @@ </Animated.View>
 
+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, 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]),
+  customStyles: React.PropTypes.object,
+  showIcon: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
+  onDateChange: React.PropTypes.func,
+  placeholder: React.PropTypes.string
+};
+
 export default DatePicker;

package.json

 {
   "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",
@@ -36,10 +36,11 @@ "main": "index.js",
     "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",
@@ -46,0 +47,0 @@ "sinon": "^1.17.4"

README.md

@@ -23,2 +23,3 @@ # react-native-datepicker
   mode="date"
+  placeholder="select date"
   format="YYYY-MM-DD"
@@ -63,2 +64,3 @@ minDate="2016-05-01"
 | showIcon | true | `boolean` | Controller whether or not show the icon |
+| placeholder | '' | `string` | The placeholder show when this.props.date is falsy |
 
@@ -65,0 +67,0 @@ ## Methods

style.js

@@ -30,2 +30,5 @@ import {StyleSheet} from 'react-native';
   },
+  placeholderText: {
+    color: '#c9c9c9'
+  },
   datePickerMask: {
@@ -32,0 +35,0 @@ flex: 1,

test/index.test.js

@@ -1,9 +0,11 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {
   Animated,
-  Platform
+  Platform,
+  Image,
+  Text,
+  View
 } from 'react-native';
-import {shallow} from 'enzyme';
+import {shallow, mount} from 'enzyme';
 import Moment from 'moment';
-import DatePicker from '../index';
 import {expect} from 'chai';
@@ -24,25 +26,48 @@ import sinon from 'sinon';
 
+/*---------------- mock DOM ----------------*/
+import {jsdom} from 'jsdom';
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+global.ErrorUtils = {
+  setGlobalHandler: () => {}
+};
+
+var DatePicker = require('../index').default;
+
 describe('DatePicker:', () => {
 
   it('initialize', () => {
-    const wrapper = shallow(<DatePicker />);
+
+    const wrapper = mount(<DatePicker />);
     const datePicker = wrapper.instance();
 
-    expect(datePicker.mode).to.equal('date');
+    expect(wrapper.prop('mode')).to.equal('date');
     expect(datePicker.format).to.equal('YYYY-MM-DD');
-    expect(datePicker.duration).to.equal(300);
-    expect(datePicker.height).to.above(200);
-    expect(datePicker.confirmBtnText).to.equal('确定');
-    expect(datePicker.cancelBtnText).to.equal('取消');
-    expect(datePicker.iconSource).to.deep.equal(require('../date_icon.png'));
-    expect(datePicker.customStyles).to.deep.equal({});
-    expect(datePicker.showIcon).to.equal(true);
-    expect(wrapper.find('Image').length).to.equal(1);
+    expect(wrapper.prop('duration')).to.equal(300);
+    expect(wrapper.prop('height')).to.above(200);
+    expect(wrapper.prop('confirmBtnText')).to.equal('确定');
+    expect(wrapper.prop('cancelBtnText')).to.equal('取消');
+    expect(wrapper.prop('iconSource')).to.deep.equal(require('../date_icon.png'));
+    expect(wrapper.prop('customStyles')).to.deep.equal({});
+    expect(wrapper.prop('showIcon')).to.equal(true);
 
     expect(wrapper.state('date')).to.be.a('date');
-    expect(wrapper.state('disabled')).to.equal(undefined);
+    expect(wrapper.state('disabled')).to.equal(false);
     expect(wrapper.state('modalVisible')).to.equal(false);
     expect(wrapper.state('animatedHeight')).to.deep.equal(new Animated.Value(0));
 
-    const wrapper1 = shallow(
+    const wrapper1 = mount(
       <DatePicker
@@ -63,15 +88,22 @@ date="2016-05-11"
 
-
-    expect(datePicker1.mode).to.equal('datetime');
+    expect(wrapper1.prop('mode')).to.equal('datetime');
     expect(datePicker1.format).to.equal('YYYY/MM/DD');
-    expect(datePicker1.duration).to.equal(400);
-    expect(datePicker1.confirmBtnText).to.equal('Confirm');
-    expect(datePicker1.cancelBtnText).to.equal('Cancel');
-    expect(datePicker1.iconSource).to.deep.equal({});
-    expect(datePicker1.customStyles).to.deep.equal({testStyle: 123});
-    expect(datePicker1.showIcon).to.equal(false);
-    expect(wrapper1.find('Image').length).to.equal(0);
+    expect(wrapper1.prop('duration')).to.equal(400);
+    expect(wrapper1.prop('confirmBtnText')).to.equal('Confirm');
+    expect(wrapper1.prop('cancelBtnText')).to.equal('Cancel');
+    expect(wrapper1.prop('iconSource')).to.deep.equal({});
+    expect(wrapper1.prop('customStyles')).to.deep.equal({testStyle: 123});
+    expect(wrapper1.prop('showIcon')).to.equal(false);
 
     expect(wrapper1.state('date')).to.deep.equal(Moment('2016-05-11', 'YYYY-MM-DD').toDate());
     expect(wrapper1.state('disabled')).to.equal(true);
+
+    // find not work with mount, and defaultProps not work with shallow...
+    const wrapper2 = shallow(<DatePicker date={new Date('2016/09/09')}/>);
+    expect(wrapper2.find('Image')).to.have.length(1);
+    expect(wrapper2.instance().getDateStr()).to.equal('2016-09-09');
+
+    const wrapper3 = shallow(<DatePicker showIcon={false} date={{test: 123}}/>);
+    expect(wrapper3.find('Image')).to.have.length(0);
+    expect(wrapper3.instance().getDateStr()).to.equal('Invalid date');
   });
@@ -217,11 +249,26 @@
 
-    datePicker.mode = 'datetime';
+    wrapper.setProps({mode: 'datetime'});
     expect(datePicker.onPressDate).to.not.throw(Error);
 
-    datePicker.mode = 'time';
+    wrapper.setProps({mode: 'time'});
     expect(datePicker.onPressDate).to.not.throw(Error);
 
-    datePicker.mode = 'tttt';
+    wrapper.setProps({mode: 'tttt'});
     expect(datePicker.onPressDate).to.throw(Error);
   });
+
+  it('getTitleElement - with placeholder', () => {
+    const placeholder = 'Please pick a date';
+    const wrapper = mount(<DatePicker placeholder={placeholder} />);
+    const datePicker = wrapper.instance();
+
+    expect(datePicker.getTitleElement().props.children).to.equal(placeholder);
+  });
+
+  it('getTitleElement - without placeholder', () => {
+    const wrapper = mount(<DatePicker date="2016-06-04" />);
+    const datePicker = wrapper.instance();
+
+    expect(datePicker.getTitleElement().props.children).to.equal(datePicker.getDateStr());
+  });
 });
@@ -228,0 +275,0 @@

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

30657

increased by10.86%

Lines of code

573

increased by12.35%

Number of lines in readme file

71

increased by2.9%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes