feat(datepicker): add supoort of showIcon property

Controller whether or not show the icon

#11

Author: feyy

README.md

@@ -1,5 +1,5 @@
-# react-native-datepicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg)](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)
-React Native datePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickeriOS.
+# react-native-datepicker
+react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
 
 ## Install
 
@@ -8,7 +8,7 @@ npm install react-native-datepicker --save
 ```
 
 ## Example
-Check [index.android.js](example/index.android.js) in the Example folder.
+Check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/example/index.android.js) in the Example folder.
 
 ![android](http://7xtixz.com2.z0.glb.clouddn.com/react-native-datepicker-android.gif)
 ![android](http://7xtixz.com2.z0.glb.clouddn.com/react-native-datepicker-ios.gif)
@@ -29,7 +29,7 @@ Check [index.android.js](example/index.android.js) in the Example folder.
 />
 ```
 
-You can check [index.js](example/index.android.js) in the Example folder for detail.
+You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/example/index.android.js) in the Example folder for detail.
 
 ## Properties
 
@@ -46,10 +46,11 @@ You can check [index.js](example/index.android.js) in the Example folder for det
 | maxDate | - | `string | date` | 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`...|
-| onDateChange | - | `function(date:string)` | This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by [moment.js](http://momentjs.com/) with the given format property. |
+| showIcon | true | `boolean` | Controller whether or not show the icon |
 
 ## Methods
 
+
 | Method  | Params  | Description |
 | :------------ |:---------------:| :---------------:|
-| onPressDate | - | Manual call this method could open the DatePicker with js. |
+| onDateChange | date:string | This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by [moment.js](http://momentjs.com/) with the given format property. |

example/index.android.js

@@ -60,6 +60,7 @@ class example extends Component {
           format="YYYY-MM-DD HH:mm"
           confirmBtnText="Confirm"
           cancelBtnText="Cancel"
+          showIcon={false}
           onDateChange={(datetime) => {this.setState({datetime: datetime});}}
         />
         <Text style={styles.instructions}>datetime: {this.state.datetime}</Text>

index.js

@@ -24,6 +24,34 @@ 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.state = {
+      date: this.getDate(),
+      modalVisible: false,
+      disabled: this.props.disabled,
+      animatedHeight: new Animated.Value(0)
+    };
+
     this.datePicked = this.datePicked.bind(this);
     this.onPressDate = this.onPressDate.bind(this);
     this.onPressCancel = this.onPressCancel.bind(this);
@@ -35,37 +63,12 @@ class DatePicker extends Component {
     this.setModalVisible = this.setModalVisible.bind(this);
   }
 
-  format = this.props.format;
-  mode = this.props.mode || 'date';
-  // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only
-  height = 259;
-  // slide animation duration time, default to 300ms, IOS only
-  duration = this.props.duration || 300;
-
-  confirmBtnText = this.props.confirmBtnText || '确定';
-  cancelBtnText = this.props.cancelBtnText || '取消';
-
-  iconSource = this.props.iconSource || require('./date_icon.png');
-  customStyles = this.props.customStyles || {};
-
-  state = {
-    date: this.getDate(),
-    modalVisible: false,
-    disabled: this.props.disabled,
-    animatedHeight: new Animated.Value(0)
-  };
-
   componentWillMount() {
     // ignore the warning of Failed propType for date of DatePickerIOS, will remove after being fixed by official
     console.ignoredYellowBox = [
       'Warning: Failed propType'
       // Other warnings you don't want like 'jsSchedulingOverhead',
     ];
-
-    // init format according to mode
-    if (!this.format) {
-      this.format = FORMATS[this.mode];
-    }
   }
 
   setModalVisible(visible) {
@@ -214,10 +217,10 @@ class DatePicker extends Component {
           <View style={[Style.dateInput, this.customStyles.dateInput, this.state.disabled && Style.disabled]}>
             <Text style={[Style.dateText, this.customStyles.dateText]}>{this.getDateStr()}</Text>
           </View>
-          <Image
+          {this.showIcon && <Image
             style={[Style.dateIcon, this.customStyles.dateIcon]}
             source={this.iconSource}
-          />
+          />}
           {Platform.OS === 'ios' && <Modal
             transparent={true}
             visible={this.state.modalVisible}

test/index.test.js

@@ -35,6 +35,8 @@ describe('DatePicker:', () => {
     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.state('date')).to.be.a('date');
     expect(wrapper.state('disabled')).to.equal(undefined);
@@ -52,6 +54,7 @@ describe('DatePicker:', () => {
         iconSource={{}}
         customStyles={{testStyle: 123}}
         disabled={true}
+        showIcon={false}
       />
     );
     const datePicker1 = wrapper1.instance();
@@ -64,6 +67,8 @@ describe('DatePicker:', () => {
     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.state('date')).to.deep.equal(Moment('2016-05-11', 'YYYY-MM-DD').toDate());
     expect(wrapper1.state('disabled')).to.equal(true);