Skip to content

Commit

Permalink
Merge pull request react-dates#291 from moonboots/simplify-calendar-d…
Browse files Browse the repository at this point in the history 
…ay-dom

Simplify CalendarDay dom
  • Loading branch information
@majapw
majapw committed Feb 7, 2017
2 parents 6478599 + d5cfcd7 commit 629d8c0
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 180 deletions.
114 changes: 103 additions & 11 deletions css/CalendarDay.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,108 @@
@import "variables";

// This order is important.
.CalendarDay {
position: relative;
display: table;
height: 100%;
width: 100%;
border: 1px solid lighten($react-dates-color-border-light, 3);
padding: 0;
box-sizing: border-box;
color: $react-dates-color-gray;
cursor: pointer;
width: 39px;
height: 38px;

&:active {
background: darken($react-dates-color-white, 5%);
}
}

.CalendarDay--highlighted-calendar {
background: $react-dates-color-highlighted;
color: $react-dates-color-gray;
cursor: default;

&:active {
background: $react-dates-color-secondary;
}
}

.CalendarDay--outside {
border: 0;
cursor: default;

&:active {
background: $react-dates-color-white;
}
}

.CalendarDay--hovered {
background: lighten($react-dates-color-border-light, 3);
border: 1px double darken($react-dates-color-border-light, 3);
color: inherit;
}

.CalendarDay--blocked-minimum-nights {
color: $react-dates-color-gray-lighter;
background: $react-dates-color-white;
border: 1px solid lighten($react-dates-color-border-light, 3);
cursor: default;

&:active {
background: $react-dates-color-white;
}
}

.CalendarDay--selected-span {
background: $react-dates-color-primary-shade-2;
border: 1px double $react-dates-color-primary-shade-1;
color: $react-dates-color-white;

&.CalendarDay--hovered,
&:active {
background: $react-dates-color-primary-shade-1;
border: 1px double $react-dates-color-primary;
}

&.CalendarDay--last-in-range {
border-right: $react-dates-color-primary;
}
}

.CalendarDay--hovered-span,
.CalendarDay--after-hovered-start {
background: $react-dates-color-primary-shade-4;
border: 1px double $react-dates-color-primary-shade-3;
color: $react-dates-color-secondary;
}

.CalendarDay--selected-start,
.CalendarDay--selected-end,
.CalendarDay--selected {
background: $react-dates-color-primary;
border: 1px double $react-dates-color-primary;
color: $react-dates-color-white;

&:active {
background: $react-dates-color-primary;
}
}

.CalendarDay--blocked-calendar {
background: $react-dates-color-gray-lighter;
color: $react-dates-color-gray-light;
cursor: default;

&:active {
background: $react-dates-color-gray-lighter;
}
}

.CalendarDay__day {
display: table-cell;
vertical-align: middle;
.CalendarDay--blocked-out-of-range {
color: $react-dates-color-gray-lighter;
background: $react-dates-color-white;
border: 1px solid lighten($react-dates-color-border-light, 3);
cursor: default;

user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
&:active {
background: $react-dates-color-white;
}
}
112 changes: 5 additions & 107 deletions css/CalendarMonth.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@
border-collapse: collapse;
border-spacing: 0;
}

user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

.CalendarMonth--horizontal {
Expand Down Expand Up @@ -44,110 +49,3 @@
.CalendarMonth--vertical-scrollable .CalendarMonth__caption {
padding: 5px 0;
}

// This order is important.
.CalendarMonth__day {
border: 1px solid lighten($react-dates-color-border-light, 3);
padding: 0;
box-sizing: border-box;
color: $react-dates-color-gray;
cursor: pointer;
width: 39px;
height: 38px;

&:active {
background: darken($react-dates-color-white, 5%);
}
}

.CalendarMonth__day--highlighted-calendar {
background: $react-dates-color-highlighted;
color: $react-dates-color-gray;
cursor: default;

&:active {
background: $react-dates-color-secondary;
}
}

.CalendarMonth__day--outside {
border: 0;
cursor: default;

&:active {
background: $react-dates-color-white;
}
}

.CalendarMonth__day--hovered {
background: lighten($react-dates-color-border-light, 3);
border: 1px double darken($react-dates-color-border-light, 3);
color: inherit;
}

.CalendarMonth__day--blocked-minimum-nights {
color: $react-dates-color-gray-lighter;
background: $react-dates-color-white;
border: 1px solid lighten($react-dates-color-border-light, 3);
cursor: default;

&:active {
background: $react-dates-color-white;
}
}

.CalendarMonth__day--selected-span {
background: $react-dates-color-primary-shade-2;
border: 1px double $react-dates-color-primary-shade-1;
color: $react-dates-color-white;

&.CalendarMonth__day--hovered,
&:active {
background: $react-dates-color-primary-shade-1;
border: 1px double $react-dates-color-primary;
}

&.CalendarMonth__day--last-in-range {
border-right: $react-dates-color-primary;
}
}

.CalendarMonth__day--hovered-span,
.CalendarMonth__day--after-hovered-start {
background: $react-dates-color-primary-shade-4;
border: 1px double $react-dates-color-primary-shade-3;
color: $react-dates-color-secondary;
}

.CalendarMonth__day--selected-start,
.CalendarMonth__day--selected-end,
.CalendarMonth__day--selected {
background: $react-dates-color-primary;
border: 1px double $react-dates-color-primary;
color: $react-dates-color-white;

&:active {
background: $react-dates-color-primary;
}
}

.CalendarMonth__day--blocked-calendar {
background: $react-dates-color-gray-lighter;
color: $react-dates-color-gray-light;
cursor: default;

&:active {
background: $react-dates-color-gray-lighter;
}
}

.CalendarMonth__day--blocked-out-of-range {
color: $react-dates-color-gray-lighter;
background: $react-dates-color-white;
border: 1px solid lighten($react-dates-color-border-light, 3);
cursor: default;

&:active {
background: $react-dates-color-white;
}
}
31 changes: 25 additions & 6 deletions src/components/CalendarDay.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,30 @@ import React, { PropTypes } from 'react';
import shallowCompare from 'react-addons-shallow-compare';
import momentPropTypes from 'react-moment-proptypes';
import moment from 'moment';
import cx from 'classnames';

const propTypes = {
day: momentPropTypes.momentObj,
isOutsideDay: PropTypes.bool,
onDayClick: PropTypes.func,
onDayMouseEnter: PropTypes.func,
onDayMouseLeave: PropTypes.func,
modifiers: PropTypes.object,
};

const defaultProps = {
day: moment(),
isOutsideDay: false,
onDayClick() {},
onDayMouseEnter() {},
onDayMouseLeave() {},
modifiers: {},
};

export function getModifiersForDay(modifiers, day) {
return day ? Object.keys(modifiers).filter(key => modifiers[key](day)) : [];
}

export default class CalendarDay extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
Expand All @@ -38,17 +47,27 @@ export default class CalendarDay extends React.Component {
}

render() {
const { day } = this.props;
const {
day,
isOutsideDay,
modifiers,
} = this.props;

const className = cx('CalendarDay', {
'CalendarDay--outside': !day || isOutsideDay,
}, getModifiersForDay(modifiers, day).map(mod => `CalendarDay--${mod}`));

return (
<div
className="CalendarDay"
return (day ?
<td
className={className}
onMouseEnter={e => this.onDayMouseEnter(day, e)}
onMouseLeave={e => this.onDayMouseLeave(day, e)}
onClick={e => this.onDayClick(day, e)}
>
<span className="CalendarDay__day">{day.format('D')}</span>
</div>
{day.format('D')}
</td>
:
<td />
);
}
}
Expand Down
34 changes: 11 additions & 23 deletions src/components/CalendarMonth.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@ const defaultProps = {
monthFormat: 'MMMM YYYY', // english locale
};

export function getModifiersForDay(modifiers, day) {
return day ? Object.keys(modifiers).filter(key => modifiers[key](day)) : [];
}

export default class CalendarMonth extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -102,25 +98,17 @@ export default class CalendarMonth extends React.Component {
<tbody className="js-CalendarMonth__grid">
{weeks.map((week, i) => (
<tr key={i}>
{week.map((day, dayOfWeek) => {
const modifiersForDay = getModifiersForDay(modifiers, day);
const className = cx('CalendarMonth__day', {
'CalendarMonth__day--outside': !day || day.month() !== month.month(),
}, modifiersForDay.map(mod => `CalendarMonth__day--${mod}`));

return (
<td className={className} key={dayOfWeek}>
{day &&
<CalendarDay
day={day}
onDayMouseEnter={onDayMouseEnter}
onDayMouseLeave={onDayMouseLeave}
onDayClick={onDayClick}
/>
}
</td>
);
})}
{week.map((day, dayOfWeek) => (
<CalendarDay
day={day}
isOutsideDay={!day || day.month() !== month.month()}
modifiers={modifiers}
key={dayOfWeek}
onDayMouseEnter={onDayMouseEnter}
onDayMouseLeave={onDayMouseLeave}
onDayClick={onDayClick}
/>
))}
</tr>
))}
</tbody>
Expand Down
Loading

0 comments on commit 629d8c0

Please sign in to comment.