Merge pull request #406 from moonboots/maja-add-calendarday-size-prop

DaySize update

constants.js

@@ -11,4 +11,6 @@ module.exports = {
 
   ANCHOR_LEFT: 'left',
   ANCHOR_RIGHT: 'right',
+
+  DAY_SIZE: 39,
 };

css/CalendarMonthGrid.scss

@@ -16,16 +16,13 @@
 .CalendarMonthGrid--horizontal {
   position: absolute;
   left: 9px;
-  width: 4 * $react-dates-width-day-picker;
 }
 
 .CalendarMonthGrid--vertical {
-  width: $react-dates-width-day-picker;
   margin: 0 auto;
 }
 
 .CalendarMonthGrid--vertical-scrollable {
-  width: $react-dates-width-day-picker;
   margin: 0 auto;
   overflow-y: scroll;
 }

css/DayPicker.scss

@@ -39,7 +39,6 @@
 .DayPicker__week-header {
   color: $react-dates-color-placeholder-text;
   position: absolute;
-  width: $react-dates-width-day-picker;
   top: 62px;
   z-index: 2;
   padding: 0 13px;
@@ -53,13 +52,11 @@
 
   li {
     display: inline-block;
-    width: 39px;
     text-align: center;
   }
 }
 
 .DayPicker--vertical .DayPicker__week-header {
-  margin-left: -1 * $react-dates-width-day-picker / 2;
   left: 50%;
 }
 

css/variables.scss

@@ -1,7 +1,6 @@
 $react-dates-width-input: 130px !default;
 $react-dates-width-arrow: 24px !default;
 $react-dates-width-tooltip-arrow: 20px !default;
-$react-dates-width-day-picker: 300px !default;
 $react-dates-spacing-vertical-picker: 72px !default;
 
 $react-dates-color-primary: #00a699 !default;

src/components/CalendarDay.jsx

@@ -1,12 +1,15 @@
 import React, { PropTypes } from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import moment from 'moment';
 import cx from 'classnames';
 
+import { DAY_SIZE } from '../../constants';
+
 const propTypes = forbidExtraProps({
   day: momentPropTypes.momentObj,
+  daySize: nonNegativeInteger,
   isOutsideDay: PropTypes.bool,
   modifiers: PropTypes.object,
   onDayClick: PropTypes.func,
@@ -17,6 +20,7 @@ const propTypes = forbidExtraProps({
 
 const defaultProps = {
   day: moment(),
+  daySize: DAY_SIZE,
   isOutsideDay: false,
   modifiers: {},
   onDayClick() {},
@@ -52,6 +56,7 @@ export default class CalendarDay extends React.Component {
   render() {
     const {
       day,
+      daySize,
       isOutsideDay,
       modifiers,
       renderDay,
@@ -61,9 +66,15 @@ export default class CalendarDay extends React.Component {
       'CalendarDay--outside': !day || isOutsideDay,
     }, getModifiersForDay(modifiers, day).map(mod => `CalendarDay--${mod}`));
 
+    const daySizeStyles = {
+      width: daySize,
+      height: daySize - 1,
+    };
+
     return (day ?
       <td
         className={className}
+        style={daySizeStyles}
         onMouseEnter={e => this.onDayMouseEnter(day, e)}
         onMouseLeave={e => this.onDayMouseLeave(day, e)}
         onClick={e => this.onDayClick(day, e)}

src/components/CalendarMonth.jsx

@@ -3,7 +3,7 @@
 import React, { PropTypes } from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import moment from 'moment';
 import cx from 'classnames';
 
@@ -17,6 +17,7 @@ import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
+  DAY_SIZE,
 } from '../../constants';
 
 const propTypes = forbidExtraProps({
@@ -25,6 +26,7 @@ const propTypes = forbidExtraProps({
   enableOutsideDays: PropTypes.bool,
   modifiers: PropTypes.object,
   orientation: ScrollableOrientationShape,
+  daySize: nonNegativeInteger,
   onDayClick: PropTypes.func,
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
@@ -40,6 +42,7 @@ const defaultProps = {
   enableOutsideDays: false,
   modifiers: {},
   orientation: HORIZONTAL_ORIENTATION,
+  daySize: DAY_SIZE,
   onDayClick() {},
   onDayMouseEnter() {},
   onDayMouseLeave() {},
@@ -81,6 +84,7 @@ export default class CalendarMonth extends React.Component {
       onDayMouseEnter,
       onDayMouseLeave,
       renderDay,
+      daySize,
     } = this.props;
 
     const { weeks } = this.state;
@@ -105,6 +109,7 @@ export default class CalendarMonth extends React.Component {
                 {week.map((day, dayOfWeek) => (
                   <CalendarDay
                     day={day}
+                    daySize={daySize}
                     isOutsideDay={!day || day.month() !== month.month()}
                     modifiers={modifiers}
                     key={dayOfWeek}

src/components/CalendarMonthGrid.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 import momentPropTypes from 'react-moment-proptypes';
-import { forbidExtraProps } from 'airbnb-prop-types';
+import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
 import moment from 'moment';
 import cx from 'classnames';
 import { addEventListener, removeEventListener } from 'consolidated-events';
@@ -10,13 +10,15 @@ import CalendarMonth from './CalendarMonth';
 
 import isTransitionEndSupported from '../utils/isTransitionEndSupported';
 import getTransformStyles from '../utils/getTransformStyles';
+import getCalendarMonthWidth from '../utils/getCalendarMonthWidth';
 
 import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape';
 
 import {
   HORIZONTAL_ORIENTATION,
   VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
+  DAY_SIZE,
 } from '../../constants';
 
 const propTypes = forbidExtraProps({
@@ -33,6 +35,7 @@ const propTypes = forbidExtraProps({
   onMonthTransitionEnd: PropTypes.func,
   renderDay: PropTypes.func,
   transformValue: PropTypes.string,
+  daySize: nonNegativeInteger,
 
   // i18n
   monthFormat: PropTypes.string,
@@ -52,6 +55,7 @@ const defaultProps = {
   onMonthTransitionEnd() {},
   renderDay: null,
   transformValue: 'none',
+  daySize: DAY_SIZE,
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
@@ -147,28 +151,41 @@ export default class CalendarMonthGrid extends React.Component {
       monthFormat,
       orientation,
       transformValue,
+      daySize,
       onDayMouseEnter,
       onDayMouseLeave,
       onDayClick,
       renderDay,
       onMonthTransitionEnd,
     } = this.props;
 
-
     const { months } = this.state;
+    const isVertical = orientation === VERTICAL_ORIENTATION;
+    const isVerticalScrollable = orientation === VERTICAL_SCROLLABLE;
 
     const className = cx('CalendarMonthGrid', {
       'CalendarMonthGrid--horizontal': orientation === HORIZONTAL_ORIENTATION,
-      'CalendarMonthGrid--vertical': orientation === VERTICAL_ORIENTATION,
-      'CalendarMonthGrid--vertical-scrollable': orientation === VERTICAL_SCROLLABLE,
+      'CalendarMonthGrid--vertical': isVertical,
+      'CalendarMonthGrid--vertical-scrollable': isVerticalScrollable,
       'CalendarMonthGrid--animating': isAnimating,
     });
 
+    const calendarMonthWidth = getCalendarMonthWidth(daySize);
+
+    const width = isVertical || isVerticalScrollable ?
+      calendarMonthWidth :
+      (numberOfMonths + 2) * calendarMonthWidth;
+
+    const style = {
+      ...getTransformStyles(transformValue),
+      width,
+    };
+
     return (
       <div
         ref={(ref) => { this.container = ref; }}
         className={className}
-        style={getTransformStyles(transformValue)}
+        style={style}
         onTransitionEnd={onMonthTransitionEnd}
       >
         {months.map((month, i) => {
@@ -187,6 +204,7 @@ export default class CalendarMonthGrid extends React.Component {
               onDayMouseLeave={onDayMouseLeave}
               onDayClick={onDayClick}
               renderDay={renderDay}
+              daySize={daySize}
             />
           );
         })}

src/components/DateRangePicker.jsx

@@ -29,6 +29,7 @@ import {
   VERTICAL_ORIENTATION,
   ANCHOR_LEFT,
   ANCHOR_RIGHT,
+  DAY_SIZE,
 } from '../../constants';
 
 const propTypes = forbidExtraProps(DateRangePickerShape);
@@ -64,10 +65,12 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   renderCalendarInfo: null,
+  daySize: DAY_SIZE,
 
   // navigation related props
   navPrev: null,
   navNext: null,
+
   onPrevMonthClick() {},
   onNextMonthClick() {},
 
@@ -266,6 +269,7 @@ export default class DateRangePicker extends React.Component {
       onFocusChange,
       withPortal,
       withFullScreenPortal,
+      daySize,
       enableOutsideDays,
       focusedInput,
       startDate,
@@ -307,6 +311,7 @@ export default class DateRangePicker extends React.Component {
           endDate={endDate}
           monthFormat={monthFormat}
           withPortal={withPortal || withFullScreenPortal}
+          daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
           onOutsideClick={onOutsideClick}
           navPrev={navPrev}