Skip to content

Commit

Permalink
refactor(datepicker): refactor datepicker with official ES6 Classes p…
Browse files Browse the repository at this point in the history 
…attern

#23
  • Loading branch information
@feyy
feyy committed Jul 25, 2016
1 parent 1430f06 commit fb5f6e2
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 80 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Check [index.js](https://github.com/xgfe/react-native-datepicker/blob/master/exa
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
Expand Down Expand Up @@ -59,6 +60,7 @@ You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/ma
| 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 |
| placeholder | '' | `string` | The placeholder show when this.props.date is falsy |

## Methods

Expand Down
3 changes: 2 additions & 1 deletion example/index.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ class example extends Component {
super(props);

this.state = {
date: '2016-05-11',
date: '',
time: '20:00',
datetime: '2016-05-05 20:00',
datetime1: '2016-05-05 20:00'
Expand All @@ -35,6 +35,7 @@ class example extends Component {
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="placeholder"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
Expand Down
105 changes: 63 additions & 42 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,7 @@ 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.format = this.props.format || FORMATS[this.props.mode];

this.state = {
date: this.getDate(),
Expand Down Expand Up @@ -79,8 +60,8 @@ class DatePicker extends Component {
Animated.timing(
this.state.animatedHeight,
{
toValue: this.height,
duration: this.duration
toValue: this.props.height,
duration: this.props.duration
}
).start();
} else {
Expand Down Expand Up @@ -120,15 +101,15 @@ class DatePicker extends Component {
this.props.onDateChange(this.getDateStr(this.state.date), this.state.date);
}
}

getTitleElement() {
const {date, placeholder} = this.props;
if (!date && placeholder) {
return (<Text style={[Style.placeholderText, this.customStyles.placeholderText]}>{placeholder}</Text>);
return (<Text style={[Style.placeholderText, this.props.customStyles.placeholderText]}>{placeholder}</Text>);
}
return (<Text style={[Style.dateText, this.customStyles.dateText]}>{this.getDateStr()}</Text>);
return (<Text style={[Style.dateText, this.props.customStyles.dateText]}>{this.getDateStr()}</Text>);
}

onDatePicked({action, year, month, day}) {
if (action !== DatePickerAndroid.dismissedAction) {
this.setState({
Expand Down Expand Up @@ -183,13 +164,13 @@ class DatePicker extends Component {
} else {

// 选日期
if (this.mode === 'date') {
if (this.props.mode === 'date') {
DatePickerAndroid.open({
date: this.state.date,
minDate: this.props.minDate && this.getDate(this.props.minDate),
maxDate: this.props.maxDate && this.getDate(this.props.maxDate)
}).then(this.onDatePicked);
} else if (this.mode === 'time') {
} else if (this.props.mode === 'time') {
// 选时间

let timeMoment = Moment(this.state.date);
Expand All @@ -199,7 +180,7 @@ class DatePicker extends Component {
minute: timeMoment.minutes(),
is24Hour: !this.format.match(/h|a/)
}).then(this.onTimePicked);
} else if (this.mode === 'datetime') {
} else if (this.props.mode === 'datetime') {
// 选日期和时间

DatePickerAndroid.open({
Expand All @@ -214,20 +195,22 @@ class DatePicker extends Component {
}

render() {
let customStyles = this.props.customStyles;
this.format = this.props.format || FORMATS[this.props.mode];

return (
<TouchableHighlight
style={[Style.dateTouch, this.props.style]}
underlayColor={'transparent'}
onPress={this.onPressDate}
>
<View style={[Style.dateTouchBody, this.customStyles.dateTouchBody]}>
<View style={[Style.dateInput, this.customStyles.dateInput, this.state.disabled && Style.disabled]}>
<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}
/>}
{Platform.OS === 'ios' && <Modal
transparent={true}
Expand All @@ -245,33 +228,33 @@ class DatePicker extends Component {
style={{flex: 1}}
>
<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]}
/>
<TouchableHighlight
underlayColor={'transparent'}
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>
</TouchableHighlight>
<TouchableHighlight
underlayColor={'transparent'}
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>
</Animated.View>
</TouchableHighlight>
Expand All @@ -283,4 +266,42 @@ class DatePicker extends Component {
}
}

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, function(props, propName) {
if (!(props[propName] instanceof Date)) {
return new Error('Should be string or 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;
13 changes: 7 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"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",
"main": "index.js",
"scripts": {
Expand Down Expand Up @@ -33,14 +33,15 @@
"chai": "^3.5.0",
"coveralls": "^2.11.9",
"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",
"sinon": "^1.17.4"
},
Expand Down
Loading

0 comments on commit fb5f6e2

Please sign in to comment.