Skip to content

Commit

Permalink
feat(datepicker): add supoort of showIcon property
Browse files Browse the repository at this point in the history
Controller whether or not show the icon

#11
feyy committed Jun 22, 2016
1 parent 7bd2b7c commit f274179
Showing 4 changed files with 43 additions and 33 deletions.
13 changes: 7 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -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. |
1 change: 1 addition & 0 deletions example/index.android.js
Original file line number Diff line number Diff line change
@@ -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>
57 changes: 30 additions & 27 deletions index.js
Original file line number Diff line number Diff line change
@@ -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}
5 changes: 5 additions & 0 deletions test/index.test.js
Original file line number Diff line number Diff line change
@@ -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);

0 comments on commit f274179

Please sign in to comment.