Skip to content

Commit

Permalink
Merge pull request mui#1266 from callemall/update-datepicker
Browse files Browse the repository at this point in the history 
[DatePicker] Update DatePicker
  • Loading branch information
Hai Nguyen committed Sep 7, 2015
2 parents 28403c3 + 6a155ff commit b2faa18
Show file tree
Hide file tree
Showing 10 changed files with 140 additions and 316 deletions.
34 changes: 12 additions & 22 deletions docs/src/app/components/pages/components/date-picker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,11 @@ class DatePickerPage extends React.Component {
minDate: minDate,
maxDate: maxDate,
autoOk: false,
showYearSelector: false,
controlledDate: new Date('2015/07/15')
};
}

render() {

let componentInfo = [
{
name: 'Props',
Expand All @@ -44,20 +42,19 @@ class DatePickerPage extends React.Component {
desc: 'This is the initial date value of the component. If either `value` or `valueLink` ' +
'is provided they will override this prop with `value` taking precedence.'
},
{
name: 'disableYearSelection',
type: 'bool',
header: 'optional',
desc: 'If true, year selection will be disabled, otherwise, year selection will be enabled.'
},
{
name: 'formatDate',
type: 'function',
header: 'default: formats to M/D/YYYY',
desc: 'This function is called to format the date to display in ' +
'the input box. By default, date objects are formatted to M/D/YYYY.'
},
{
name: 'hideToolbarYearChange',
type: 'boolean',
header: 'optional',
desc: 'Hide year change buttons on calendar; good for short time spans. Clicking ' +
'the year will always result in selecting a year.'
},
{
name: 'maxDate',
type: 'date object',
Expand Down Expand Up @@ -85,13 +82,6 @@ class DatePickerPage extends React.Component {
desc: 'Called during render time of a given day. If this method returns false ' +
'the day is disabled otherwise it is displayed normally.'
},
{
name: 'showYearSelector',
type: 'boolean',
header: 'default: false',
desc: 'Determines whether or not a DatePicker has a year selection capability. ' +
'If false, the year change buttons in the toolbar are hidden.'
},
{
name: 'style',
type: 'object',
Expand Down Expand Up @@ -195,12 +185,12 @@ class DatePickerPage extends React.Component {
defaultToggled={this.state.autoOk}
onToggle={this._handleToggle.bind(this)} />

<Toggle
name="showYearSelector"
value="showYearSelector"
label="Show Year Selector"
defaultToggled={this.state.showYearSelector}
onToggle={this._handleToggle.bind(this)} />
<Toggle
name="disableYearSelection"
value="disableYearSelection"
label="Disable Year Selection"
defaultToggled={this.state.disableYearSelection}
onToggle={this._handleToggle.bind(this)} />
</div>
</CodeExample>
</ComponentDoc>
Expand Down
8 changes: 4 additions & 4 deletions src/date-picker/calendar-month.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ let CalendarMonth = React.createClass({

propTypes: {
displayDate: React.PropTypes.object.isRequired,
onDayTouchTap: React.PropTypes.func,
selectedDate: React.PropTypes.object.isRequired,
minDate: React.PropTypes.object,
autoOk: React.PropTypes.bool,
maxDate: React.PropTypes.object,
minDate: React.PropTypes.object,
onDayTouchTap: React.PropTypes.func,
shouldDisableDate: React.PropTypes.func,
autoOk: React.PropTypes.bool,
},

render() {
let styles = {
lineHeight: '32px',
textAlign: 'center',
padding: '8px 14px 0 14px',
padding: '16px 14px 0 14px',
};

return (
Expand Down
57 changes: 2 additions & 55 deletions src/date-picker/calendar-toolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,23 @@ let IconButton = require('../icon-button');
let Toolbar = require('../toolbar/toolbar');
let ToolbarGroup = require('../toolbar/toolbar-group');
let NavigationChevronLeft = require('../svg-icons/navigation/chevron-left');
let NavigationChevronLeftDouble = require('../svg-icons/navigation-chevron-left-double');
let NavigationChevronRight = require('../svg-icons/navigation/chevron-right');
let NavigationChevronRightDouble = require('../svg-icons/navigation-chevron-right-double');
let SlideInTransitionGroup = require('../transition-groups/slide-in');


let CalendarToolbar = React.createClass({

propTypes: {
displayDate: React.PropTypes.object.isRequired,
nextMonth: React.PropTypes.bool,
onMonthChange: React.PropTypes.func,
onYearChange: React.PropTypes.func,
prevYear: React.PropTypes.bool,
nextYear: React.PropTypes.bool,
prevMonth: React.PropTypes.bool,
nextMonth: React.PropTypes.bool,
hideYearChangeButtons: React.PropTypes.bool,
},

getDefaultProps() {
return {
prevYear: true,
nextYear: true,
prevMonth: true,
nextMonth: true,
hideYearChangeButtons: false,
prevMonth: true,
};
},

Expand Down Expand Up @@ -74,8 +65,6 @@ let CalendarToolbar = React.createClass({
render() {
let month = DateTime.getFullMonth(this.props.displayDate);
let year = this.props.displayDate.getFullYear();
let prevYearChangeButton = this._getPrevYearChangeButton();
let nextYearChangeButton = this._getNextYearChangeButton();
let styles = this._styles();

return (
Expand All @@ -87,8 +76,6 @@ let CalendarToolbar = React.createClass({
</SlideInTransitionGroup>

<ToolbarGroup key={0} float="left">
{prevYearChangeButton}

<IconButton
style={styles.button}
disabled={!this.props.prevMonth}
Expand All @@ -104,51 +91,11 @@ let CalendarToolbar = React.createClass({
onTouchTap={this._nextMonthTouchTap}>
<NavigationChevronRight />
</IconButton>

{nextYearChangeButton}
</ToolbarGroup>
</Toolbar>
);
},

_getPrevYearChangeButton() {
let style = {
display: this.props.hideYearChangeButtons ? 'none' : '',
};

return (
<IconButton
style={style}
disabled={!this.props.prevYear}
onTouchTap={this._prevYearTouchTap}>
<NavigationChevronLeftDouble />
</IconButton>
);
},

_getNextYearChangeButton() {
let style = {
display: this.props.hideYearChangeButtons ? 'none' : '',
};

return (
<IconButton
style={style}
disabled={!this.props.nextYear}
onTouchTap={this._nextYearTouchTap}>
<NavigationChevronRightDouble />
</IconButton>
);
},

_prevYearTouchTap() {
if (this.props.onYearChange && this.props.prevYear) this.props.onYearChange(-1);
},

_nextYearTouchTap() {
if (this.props.onYearChange && this.props.nextYear) this.props.onYearChange(1);
},

_prevMonthTouchTap() {
if (this.props.onMonthChange && this.props.prevMonth) this.props.onMonthChange(-1);
},
Expand Down
73 changes: 30 additions & 43 deletions src/date-picker/calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,14 @@ let Calendar = React.createClass({
mixins: [StylePropable, WindowListenable],

propTypes: {
disableYearSelection: React.PropTypes.bool,
initialDate: React.PropTypes.object,
isActive: React.PropTypes.bool,
minDate: React.PropTypes.object,
maxDate: React.PropTypes.object,
onDayTouchTap: React.PropTypes.func,
shouldDisableDate: React.PropTypes.func,
hideToolbarYearChange: React.PropTypes.bool,
shouldShowMonthDayPickerFirst: React.PropTypes.bool,
shouldShowYearPickerFirst: React.PropTypes.bool,
showYearSelector: React.PropTypes.bool,
onDayTouchTap: React.PropTypes.func,
},

windowListeners: {
Expand All @@ -35,22 +33,20 @@ let Calendar = React.createClass({

getDefaultProps() {
return {
disableYearSelection: false,
initialDate: new Date(),
minDate: DateTime.addYears(new Date(), -100),
maxDate: DateTime.addYears(new Date(), 100),
hideToolbarYearChange: false,
shouldShowMonthDayPickerFirst: true,
shouldShowYearPickerFirst: false,
showYearSelector: false,
};
},

getInitialState() {
return {
displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate),
displayMonthDay: this.props.shouldShowMonthDayPickerFirst || true,
selectedDate: this.props.initialDate,
transitionDirection: 'left',
displayMonthDay: this.props.shouldShowMonthDayPickerFirst || this.props.shouldShowYearPickerFirst || true,
transitionEnter: true,
};
},
Expand All @@ -73,17 +69,15 @@ let Calendar = React.createClass({
let yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1;
let weekCount = DateTime.getWeekArray(this.state.displayDate).length;
let toolbarInteractions = this._getToolbarInteractions();
let hideYearChangeButtons = this.props.hideToolbarYearChange || !this.props.showYearSelector;
let isMultiYearRange = yearCount > 2; // Want a year range greater than 1. Ex. [2014,2016] has a count of 3
let isLandscape = this.props.mode === 'landscape';
let styles = {
root: {
fontSize: 12,
},
calendarContainer: {
width: isLandscape ? 280 : '100%',
height: weekCount === 5 ? 268 :
weekCount === 6 ? 308 : 228,
width: isLandscape ? 320 : '100%',
height: weekCount === 5 ? 284 :
weekCount === 6 ? 324 : 244,
float: isLandscape ? 'right' : 'none',
transition: Transitions.easeOut('150ms', 'height'),
overflow: 'hidden',
Expand All @@ -92,13 +86,16 @@ let Calendar = React.createClass({
width: 280,
overflow: 'hidden',
height: yearCount < 6 ? yearCount * 56 + 10 :
weekCount === 5 ? 268 :
weekCount === 6 ? 308 : 228,
weekCount === 5 ? 284 :
weekCount === 6 ? 324 : 244,
float: isLandscape ? 'right' : 'none',
},
dateDisplay: {
width: isLandscape ? 280 : '100%',
height: '100%',
width: isLandscape ? 120 : '',
height: isLandscape ?
weekCount === 5 ? 238 :
weekCount === 6 ? 278 :
198 : '100%',
float: isLandscape ? 'left' : 'none',
},
weekTitle: {
Expand All @@ -112,13 +109,13 @@ let Calendar = React.createClass({
weekTitleDay: {
listStyle: 'none',
float: 'left',
width: 32,
width: 37,
textAlign: 'center',
margin: '0 2px',
},
};

if (this.state.displayMonthDay || !this.props.showYearSelector) {
if (this.state.displayMonthDay) {
styles.yearContainer.display = 'none';
}
else {
Expand All @@ -129,11 +126,11 @@ let Calendar = React.createClass({
<ClearFix style={this.mergeAndPrefix(styles.root)}>

<DateDisplay
disableYearSelection={this.props.disableYearSelection}
style={styles.dateDisplay}
selectedDate={this.state.selectedDate}
handleMonthDayClick={this._handleMonthDayClick}
handleYearClick={this._handleYearClick}
yearSelectionAvailable={this.props.showYearSelector && isMultiYearRange}
monthDaySelected={this.state.displayMonthDay}
mode={this.props.mode}
weekCount={weekCount} />
Expand All @@ -142,12 +139,8 @@ let Calendar = React.createClass({
<CalendarToolbar
displayDate={this.state.displayDate}
onMonthChange={this._handleMonthChange}
onYearChange={this._handleYearChange}
prevMonth={toolbarInteractions.prevMonth}
nextMonth={toolbarInteractions.nextMonth}
prevYear={toolbarInteractions.prevYear}
nextYear={toolbarInteractions.nextYear}
hideYearChangeButtons={hideYearChangeButtons} />
nextMonth={toolbarInteractions.nextMonth} />

<ClearFix
elementType="ul"
Expand Down Expand Up @@ -184,17 +177,17 @@ let Calendar = React.createClass({
},

_yearSelector() {
if (this.props.showYearSelector) {
return (
<CalendarYear
key={'years'}
displayDate={this.state.displayDate}
onYearTouchTap={this._handleYearTouchTap}
selectedDate={this.state.selectedDate}
minDate={this.props.minDate}
maxDate={this.props.maxDate} />
);
}
if (this.props.disableYearSelection) return;

return (
<CalendarYear
key={'years'}
displayDate={this.state.displayDate}
onYearTouchTap={this._handleYearTouchTap}
selectedDate={this.state.selectedDate}
minDate={this.props.minDate}
maxDate={this.props.maxDate} />
);
},

getSelectedDate() {
Expand Down Expand Up @@ -256,11 +249,7 @@ let Calendar = React.createClass({
},

_handleMonthChange(months) {
this._addSelectedMonths(months);
},

_handleYearChange(years) {
this._addSelectedYears(years);
this.setState({displayDate: DateTime.addMonths(this.state.displayDate, months)});
},

_handleYearTouchTap(e, year) {
Expand All @@ -273,8 +262,6 @@ let Calendar = React.createClass({
return {
prevMonth: DateTime.monthDiff(this.state.selectedDate, this.props.minDate) > 0,
nextMonth: DateTime.monthDiff(this.state.selectedDate, this.props.maxDate) < 0,
prevYear: DateTime.yearDiff(this.state.selectedDate, this.props.minDate) > 0,
nextYear: DateTime.yearDiff(this.state.selectedDate, this.props.maxDate) < 0,
};
},

Expand Down
Loading

0 comments on commit b2faa18

Please sign in to comment.