implement maja suggestions

react-dates · Aug 8, 2018 · 0ec2d72 · 0ec2d72
1 parent bc4cae4
commit 0ec2d72
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 30 deletions.
diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
@@ -25,14 +25,14 @@ import DayOfWeekShape from '../shapes/DayOfWeekShape';
 
 import {
   HORIZONTAL_ORIENTATION,
-  VERTICAL_ORIENTATION,
   VERTICAL_SCROLLABLE,
   DAY_SIZE,
 } from '../constants';
 
 const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   month: momentPropTypes.momentObj,
+  horizontalMonthPadding: nonNegativeInteger,
   isVisible: PropTypes.bool,
   enableOutsideDays: PropTypes.bool,
   modifiers: PropTypes.objectOf(ModifiersShape),
@@ -62,6 +62,7 @@ const propTypes = forbidExtraProps({
 
 const defaultProps = {
   month: moment(),
+  horizontalMonthPadding: 13,
   isVisible: true,
   enableOutsideDays: false,
   modifiers: {},
@@ -155,26 +156,27 @@ class CalendarMonth extends React.Component {
 
   render() {
     const {
-      month,
-      monthFormat,
-      orientation,
+      dayAriaLabelFormat,
+      daySize,
+      focusedDate,
+      horizontalMonthPadding,
+      isFocused,
       isVisible,
       modifiers,
+      month,
+      monthFormat,
       onDayClick,
       onDayMouseEnter,
       onDayMouseLeave,
       onMonthSelect,
       onYearSelect,
-      renderMonthText,
+      orientation,
+      phrases,
       renderCalendarDay,
       renderDayContents,
       renderMonthElement,
-      daySize,
-      focusedDate,
-      isFocused,
+      renderMonthText,
       styles,
-      phrases,
-      dayAriaLabelFormat,
       verticalBorderSpacing,
     } = this.props;
 
@@ -187,9 +189,7 @@ class CalendarMonth extends React.Component {
       <div
         {...css(
           styles.CalendarMonth,
-          orientation === HORIZONTAL_ORIENTATION && styles.CalendarMonth__horizontal,
-          orientation === VERTICAL_ORIENTATION && styles.CalendarMonth__vertical,
-          verticalScrollable && styles.CalendarMonth__verticalScrollable,
+          { padding: `0 ${horizontalMonthPadding}px` },
         )}
         data-visible={isVisible}
       >
@@ -203,7 +203,9 @@ class CalendarMonth extends React.Component {
           {renderMonthElement ? (
             renderMonthElement({ month, onMonthSelect, onYearSelect })
           ) : (
-            <strong>{monthTitle}</strong>
+            <strong>
+              {monthTitle}
+            </strong>
           )}
         </div>
 
@@ -249,7 +251,6 @@ export default withStyles(({ reactDates: { color, font, spacing } }) => ({
   CalendarMonth: {
     background: color.background,
     textAlign: 'center',
-    padding: `0 ${spacing.calendarMonthHorizontalPadding}px`,
     verticalAlign: 'top',
     userSelect: 'none',
   },

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
@@ -34,6 +34,7 @@ const propTypes = forbidExtraProps({
   ...withStylesPropTypes,
   enableOutsideDays: PropTypes.bool,
   firstVisibleMonthIndex: PropTypes.number,
+  horizontalMonthPadding: nonNegativeInteger,
   initialMonth: momentPropTypes.momentObj,
   isAnimating: PropTypes.bool,
   numberOfMonths: PropTypes.number,
@@ -68,6 +69,7 @@ const propTypes = forbidExtraProps({
 const defaultProps = {
   enableOutsideDays: false,
   firstVisibleMonthIndex: 0,
+  horizontalMonthPadding: 13,
   initialMonth: moment(),
   isAnimating: false,
   numberOfMonths: 1,
@@ -240,6 +242,7 @@ class CalendarMonthGrid extends React.Component {
     const {
       enableOutsideDays,
       firstVisibleMonthIndex,
+      horizontalMonthPadding,
       isAnimating,
       modifiers,
       numberOfMonths,
@@ -260,7 +263,6 @@ class CalendarMonthGrid extends React.Component {
       isFocused,
       isRTL,
       styles,
-      theme: { reactDates: theme },
       phrases,
       dayAriaLabelFormat,
       transitionDuration,
@@ -275,7 +277,7 @@ class CalendarMonthGrid extends React.Component {
 
     const calendarMonthWidth = getCalendarMonthWidth(
       daySize,
-      theme.spacing.calendarMonthHorizontalPadding,
+      horizontalMonthPadding,
     );
 
     const width = isVertical || isVerticalScrollable
@@ -355,6 +357,7 @@ class CalendarMonthGrid extends React.Component {
                 setMonthTitleHeight={setMonthTitleHeight}
                 dayAriaLabelFormat={dayAriaLabelFormat}
                 verticalBorderSpacing={verticalBorderSpacing}
+                horizontalMonthPadding={horizontalMonthPadding}
               />
             </div>
           );
@@ -397,13 +400,13 @@ export default withStyles(({
   CalendarMonthGrid__vertical_scrollable: {
     margin: '0 auto',
     overflowY: 'scroll',
-    ...noScrollBarOnVerticalScrollable && {
+    ...(noScrollBarOnVerticalScrollable && {
       '-webkitOverflowScrolling': 'touch',
       '::-webkit-scrollbar': {
         '-webkit-appearance': 'none',
         display: 'none',
       },
-    },
+    }),
   },
 
   CalendarMonthGrid_month__horizontal: {

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -70,6 +70,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   transitionDuration: nonNegativeInteger,
   verticalBorderSpacing: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -125,6 +126,7 @@ export const defaultProps = {
   noBorder: false,
   transitionDuration: undefined,
   verticalBorderSpacing: undefined,
+  horizontalMonthPadding: 13,
 
   // navigation props
   navPrev: null,
@@ -172,10 +174,10 @@ class DayPicker extends React.Component {
       focusedDate = props.getFirstFocusableDay(currentMonth);
     }
 
-    const { reactDates: { spacing: { calendarMonthHorizontalPadding } } } = props.theme;
+    const { horizontalMonthPadding } = props;
 
     const translationValue = props.isRTL && this.isHorizontal()
-      ? -getCalendarMonthWidth(props.daySize, calendarMonthHorizontalPadding)
+      ? -getCalendarMonthWidth(props.daySize, horizontalMonthPadding)
       : 0;
 
     this.hasSetInitialVisibleMonth = !props.hidden;
@@ -184,7 +186,7 @@ class DayPicker extends React.Component {
       monthTransition: null,
       translationValue,
       scrollableMonthMultiple: 1,
-      calendarMonthWidth: getCalendarMonthWidth(props.daySize, calendarMonthHorizontalPadding),
+      calendarMonthWidth: getCalendarMonthWidth(props.daySize, horizontalMonthPadding),
       focusedDate: (!props.hidden || props.isFocused) ? focusedDate : null,
       nextFocusedDate: null,
       showKeyboardShortcuts: props.showKeyboardShortcuts,
@@ -241,7 +243,7 @@ class DayPicker extends React.Component {
       showKeyboardShortcuts,
       onBlur,
       renderMonthText,
-      theme: { reactDates: { spacing: calendarMonthHorizontalPadding } },
+      horizontalMonthPadding,
     } = nextProps;
     const { currentMonth } = this.state;
 
@@ -262,8 +264,10 @@ class DayPicker extends React.Component {
 
     if (nextProps.daySize !== daySize) {
       this.setState({
-        calendarMonthWidth:
-          getCalendarMonthWidth(nextProps.daySize, calendarMonthHorizontalPadding),
+        calendarMonthWidth: getCalendarMonthWidth(
+          nextProps.daySize,
+          horizontalMonthPadding,
+        ),
       });
     }
 
@@ -816,6 +820,7 @@ class DayPicker extends React.Component {
   renderWeekHeader(index) {
     const {
       daySize,
+      horizontalMonthPadding,
       orientation,
       weekDayFormat,
       styles,
@@ -854,6 +859,7 @@ class DayPicker extends React.Component {
           this.isVertical() && styles.DayPicker_weekHeader__vertical,
           verticalScrollable && styles.DayPicker_weekHeader__verticalScrollable,
           weekHeaderStyle,
+          { padding: `0 ${horizontalMonthPadding}px` },
         )}
         key={`week-${index}`}
       >
@@ -909,6 +915,7 @@ class DayPicker extends React.Component {
       noBorder,
       transitionDuration,
       verticalBorderSpacing,
+      horizontalMonthPadding,
     } = this.props;
 
     const { reactDates: { spacing: { dayPickerHorizontalPadding } } } = theme;
@@ -1071,6 +1078,7 @@ class DayPicker extends React.Component {
                   dayAriaLabelFormat={dayAriaLabelFormat}
                   transitionDuration={transitionDuration}
                   verticalBorderSpacing={verticalBorderSpacing}
+                  horizontalMonthPadding={horizontalMonthPadding}
                 />
                 {verticalScrollable && this.renderNavigation()}
               </div>
@@ -1103,7 +1111,11 @@ export { DayPicker as PureDayPicker };
 
 export default withStyles(({
   reactDates: {
-    color, font, noScrollBarOnVerticalScrollable, spacing, zIndex,
+    color,
+    font,
+    noScrollBarOnVerticalScrollable,
+    spacing,
+    zIndex,
   },
 }) => ({
   DayPicker: {
@@ -1167,7 +1179,6 @@ export default withStyles(({
     position: 'absolute',
     top: 62,
     zIndex: zIndex + 2,
-    padding: `0 ${spacing.calendarMonthHorizontalPadding}px`,
     textAlign: 'left',
   },
 
@@ -1222,12 +1233,12 @@ export default withStyles(({
     right: 0,
     left: 0,
     overflowY: 'scroll',
-    ...noScrollBarOnVerticalScrollable && {
+    ...(noScrollBarOnVerticalScrollable && {
       '-webkitOverflowScrolling': 'touch',
       '::-webkit-scrollbar': {
         '-webkit-appearance': 'none',
         display: 'none',
       },
-    },
+    }),
   },
 }))(DayPicker);
diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
@@ -70,6 +70,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   noBorder: PropTypes.bool,
   verticalBorderSpacing: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -146,6 +147,7 @@ const defaultProps = {
   noBorder: false,
   transitionDuration: undefined,
   verticalBorderSpacing: undefined,
+  horizontalMonthPadding: 13,
 
   // accessibility
   onBlur() {},
@@ -1070,6 +1072,7 @@ export default class DayPickerRangeController extends React.Component {
       noBorder,
       transitionDuration,
       verticalBorderSpacing,
+      horizontalMonthPadding,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -1117,6 +1120,7 @@ export default class DayPickerRangeController extends React.Component {
         verticalBorderSpacing={verticalBorderSpacing}
         noBorder={noBorder}
         transitionDuration={transitionDuration}
+        horizontalMonthPadding={horizontalMonthPadding}
       />
     );
   }

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
@@ -59,6 +59,7 @@ const propTypes = forbidExtraProps({
   noBorder: PropTypes.bool,
   verticalBorderSpacing: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -112,6 +113,7 @@ const defaultProps = {
   noBorder: false,
   verticalBorderSpacing: undefined,
   transitionDuration: undefined,
+  horizontalMonthPadding: 13,
 
   navPrev: null,
   navNext: null,
@@ -670,6 +672,7 @@ export default class DayPickerSingleDateController extends React.Component {
       noBorder,
       transitionDuration,
       verticalBorderSpacing,
+      horizontalMonthPadding,
     } = this.props;
 
     const { currentMonth, visibleDays } = this.state;
@@ -715,6 +718,7 @@ export default class DayPickerSingleDateController extends React.Component {
         noBorder={noBorder}
         transitionDuration={transitionDuration}
         verticalBorderSpacing={verticalBorderSpacing}
+        horizontalMonthPadding={horizontalMonthPadding}
       />
     );
   }

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -86,6 +86,7 @@ const defaultProps = {
   isRTL: false,
   verticalHeight: null,
   transitionDuration: undefined,
+  horizontalMonthPadding: 13,
 
   // navigation related props
   navPrev: null,
@@ -427,6 +428,7 @@ class SingleDatePicker extends React.Component {
       verticalHeight,
       transitionDuration,
       verticalSpacing,
+      horizontalMonthPadding,
       small,
       theme: { reactDates },
     } = this.props;
@@ -501,6 +503,7 @@ class SingleDatePicker extends React.Component {
           weekDayFormat={weekDayFormat}
           verticalHeight={verticalHeight}
           transitionDuration={transitionDuration}
+          horizontalMonthPadding={horizontalMonthPadding}
         />
 
         {withFullScreenPortal && (

diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
@@ -62,6 +62,7 @@ export default {
   isRTL: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
   transitionDuration: nonNegativeInteger,
+  horizontalMonthPadding: nonNegativeInteger,
 
   // navigation related props
   navPrev: PropTypes.node,

diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
@@ -153,7 +153,6 @@ export default {
     },
 
     spacing: {
-      calendarMonthHorizontalPadding: 13,
       dayPickerHorizontalPadding: 9,
       captionPaddingTop: 22,
       captionPaddingBottom: 37,