forked from lanjingling0510/react-mobile-datepicker
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[changed] ✅ update version,An increase of five theme,A slide can move…
… multiple dates.
- Loading branch information
1 parent
b58f041
commit 14b868c
Showing
20 changed files
with
1,212 additions
and
800 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,7 +24,6 @@ | |
| &.sm { | ||
| margin: .5rem .5rem; | ||
| padding: .5rem; | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,125 +1,124 @@ | ||
| /** | ||
| * @module DatePicker组件 | ||
| * @module DatePicker Component | ||
| */ | ||
|
|
||
| import React, { Component, PropTypes } from 'react'; | ||
| import DatePickerItem from './DatePickerItem.js'; | ||
| import { nextDate, getTime } from './time.js'; | ||
| import PureRender from './pureRender.js'; | ||
| import { convertDate, nextDate } from './time.js'; | ||
|
|
||
| /** | ||
| * Class DatePicker组件类 | ||
| * Class DatePicker Component Class | ||
| * @extends Component | ||
| */ | ||
| class DatePicker extends Component { | ||
| constructor(props) { | ||
| super(props); // 容器转过的角度 | ||
| super(props); | ||
| this.state = { | ||
| date: this._productDate(props.date), | ||
| minDate: this._productDate(props.minDate), | ||
| maxDate: this._productDate(props.maxDate), | ||
| value: nextDate(this.props.value), | ||
| }; | ||
|
|
||
| this.handleFinishBtnClick = this.handleFinishBtnClick.bind(this); | ||
| this.handleDateSelect = this.handleDateSelect.bind(this); | ||
| } | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| this.setState({ | ||
| date: this._productDate(nextProps.date), | ||
| minDate: this._productDate(nextProps.minDate), | ||
| maxDate: this._productDate(nextProps.maxDate), | ||
| }); | ||
| // update value of state | ||
| const date = nextDate(nextProps.value); | ||
| if (date.getTime() !== this.state.value.getTime()) { | ||
| this.setState({ value: date }); | ||
| } | ||
| } | ||
|
|
||
| _productDate(date) { | ||
| const nDate = nextDate(date, 0); | ||
| return { | ||
| value: nDate, | ||
| timestamp: nDate.getTime(), | ||
| Year: getTime(nDate, 'Year'), | ||
| Month: getTime(nDate, 'Month'), | ||
| Date: getTime(nDate, 'Date'), | ||
| }; | ||
| /** | ||
| * Optimization component, Prevents unnecessary rendering | ||
| * Only props or state change or value before re-rendering | ||
| * | ||
| * @param {Object} nextProps next props | ||
| * @param {Object} nextState next state | ||
| * @return {Boolean} Whether re-rendering | ||
| */ | ||
| shouldComponentUpdate(nextProps, nextState) { | ||
| const date = nextDate(nextState.value); | ||
| return date.getTime() !== this.state.value.getTime() || | ||
| PureRender.shouldComponentUpdate(nextProps, nextState, this.props, this.state); | ||
| } | ||
|
|
||
| /** | ||
| * 点击完成按钮事件 | ||
| * @return {undefined} | ||
| */ | ||
| handleFinishBtnClick() { | ||
| this.props.onSelect(this.state.date.value); | ||
| this.props.onSelect(this.state.value); | ||
| } | ||
|
|
||
| /** | ||
| * 选择下一个日期 | ||
| * @return {undefined} | ||
| */ | ||
| handleDateSelect(date) { | ||
| this.setState({ date: this._productDate(date) }); | ||
| handleDateSelect(value) { | ||
| this.setState({ value }); | ||
| } | ||
|
|
||
| /** | ||
| * render函数 | ||
| * @return {Object} JSX对象 | ||
| */ | ||
| render() { | ||
| const { layerBackground, btnColor, touchLen, dateColor } = this.props; | ||
| const { date, minDate, maxDate } = this.state; | ||
| const datePickerStyle = { | ||
| backgroundColor: layerBackground, | ||
| }; | ||
| const { min, max, theme, dateFormat } = this.props; | ||
| const value = this.state.value; | ||
| const themeClassName = | ||
| ['default', 'dark', 'ios', 'android', 'android-dark'].indexOf(theme) === -1 ? | ||
| 'default' : theme; | ||
|
|
||
| return ( | ||
| <div | ||
| className="datepicker" | ||
| style={datePickerStyle}> | ||
| <p className="datepicker-navbar"> | ||
| <span | ||
| style={{ color: btnColor }} | ||
| className="datepicker-finish-btn" | ||
| onClick={this.handleFinishBtnClick}>完成</span> | ||
| </p> | ||
| className={`datepicker ${themeClassName}`}> | ||
| <div className="datepicker-header">{convertDate(value, 'YYYY/MM/DD')}</div> | ||
| <div className="datepicker-content"> | ||
| <DatePickerItem | ||
| date={date} | ||
| value={value} | ||
| min={min} | ||
| max={max} | ||
| typeName="Year" | ||
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| touchLen={touchLen} | ||
| dateColor={dateColor} | ||
| format={dateFormat[0]} | ||
| onSelect={this.handleDateSelect} /> | ||
| <DatePickerItem | ||
| date={date} | ||
| value={value} | ||
| min={min} | ||
| max={max} | ||
| typeName="Month" | ||
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| touchLen={touchLen} | ||
| dateColor={dateColor} | ||
| format={dateFormat[1]} | ||
| onSelect={this.handleDateSelect} /> | ||
| <DatePickerItem | ||
| date={date} | ||
| value={value} | ||
| min={min} | ||
| max={max} | ||
| typeName="Date" | ||
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| touchLen={touchLen} | ||
| dateColor={dateColor} | ||
| format={dateFormat[2]} | ||
| onSelect={this.handleDateSelect} /> | ||
| </div> | ||
| <div className="datepicker-navbar"> | ||
| <a | ||
| className="datepicker-navbar-btn" | ||
| onClick={this.handleFinishBtnClick}>完成</a> | ||
| <a | ||
| className="datepicker-navbar-btn" | ||
| onClick={this.props.onCancel}>取消</a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| DatePicker.propTypes = { | ||
| touchLen: PropTypes.number, | ||
| btnColor: PropTypes.string, | ||
| dateColor: PropTypes.string, | ||
| layerBackground: PropTypes.string, | ||
| date: PropTypes.object, | ||
| minDate: PropTypes.object, | ||
| maxDate: PropTypes.object, | ||
| theme: PropTypes.string, | ||
| value: PropTypes.object, | ||
| min: PropTypes.object, | ||
| max: PropTypes.object, | ||
| dateFormat: PropTypes.array, | ||
| onSelect: PropTypes.func, | ||
| onCancel: PropTypes.func, | ||
| }; | ||
|
|
||
|
|
||
| export default DatePicker; |
Oops, something went wrong.