Add openDirection prop

Addresses #648. * Add `openDirection` prop to `<DateRangePicker/>`, `<SingleDatePicker/>`, `<DateRangePickerInputController/>`, `<DateRangePickerInput/>`, `<SingleDatePickerInput/>`, `<DateInput/> * Add SCSS variables for input font size, padding, etc. (used in calculation for open-up absolute positioning) * Add stories and tests for new prop
react-dates · Jul 29, 2017 · 20e3da6 · 20e3da6
1 parent 83d55bf
commit 20e3da6
Show file tree

Hide file tree

Showing 19 changed files with 206 additions and 20 deletions.
diff --git a/constants.js b/constants.js
@@ -13,6 +13,9 @@ module.exports = {
   ANCHOR_LEFT: 'left',
   ANCHOR_RIGHT: 'right',
 
+  OPEN_DOWN: 'down',
+  OPEN_UP: 'up',
+
   DAY_SIZE: 39,
   BLOCKED_MODIFIER: 'blocked',
   WEEKDAYS: [0, 1, 2, 3, 4, 5, 6],

diff --git a/css/DateInput.scss b/css/DateInput.scss
@@ -1,13 +1,15 @@
-$caret-top: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-arrow / 2;
+$input-height: $react-dates-input-line-height + $react-dates-input-padding * 2 + $react-dates-input-displaytext-padding-vertical * 2;
+$caret-top-down: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-arrow / 2;
+$caret-top-up: $input-height - $react-dates-spacing-vertical-picker;
 
 .DateInput {
   // font
   font-weight: 200;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: $react-dates-input-font-size;
+  line-height: $react-dates-input-line-height;
   color: $react-dates-color-placeholder-text;
   margin: 0;
-  padding: 8px;
+  padding: $react-dates-input-padding;
 
   background: $react-dates-color-white;
   position: relative;
@@ -23,21 +25,40 @@ $caret-top: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-ar
   position: absolute;
   bottom: auto;
   border: $react-dates-width-tooltip-arrow / 2 solid transparent;
-  border-top: 0;
   left: 22px;
   z-index: $react-dates-z-index + 2;
 }
 
-.DateInput--with-caret::before {
-  top: $caret-top;
+.DateInput--open-down.DateInput--with-caret::before,
+.DateInput--open-down.DateInput--with-caret::after {
+  border-top: 0;
+}
+
+.DateInput--open-down.DateInput--with-caret::before {
+  top: $caret-top-down;
   border-bottom-color: rgba(0, 0, 0, 0.1);
 }
 
-.DateInput--with-caret::after {
-  top: $caret-top + 1;
+.DateInput--open-down.DateInput--with-caret::after {
+  top: $caret-top-down + 1;
   border-bottom-color: $react-dates-color-white;
 }
 
+.DateInput--open-up.DateInput--with-caret::before,
+.DateInput--open-up.DateInput--with-caret::after {
+  border-bottom: 0;
+}
+
+.DateInput--open-up.DateInput--with-caret::before {
+  top: $caret-top-up;
+  border-top-color: rgba(0, 0, 0, 0.1);
+}
+
+.DateInput--open-up.DateInput--with-caret::after {
+  top: $caret-top-up - 1;
+  border-top-color: $react-dates-color-white;
+}
+
 .DateInput--disabled {
   background: $react-dates-color-gray-lighter;
 }
@@ -60,7 +81,7 @@ $caret-top: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-ar
 }
 
 .DateInput__display-text {
-  padding: 4px 8px;
+  padding: $react-dates-input-displaytext-padding-vertical $react-dates-input-displaytext-padding-horizontal;
   white-space: nowrap;
   overflow: hidden;
 }

diff --git a/css/DateRangePicker.scss b/css/DateRangePicker.scss
@@ -20,10 +20,9 @@
   z-index: $react-dates-z-index + 1;
   background-color: $react-dates-color-white;
   position: absolute;
-  top: $react-dates-spacing-vertical-picker;
 }
 
-.DateRangePicker__picker--rtl {    
+.DateRangePicker__picker--rtl {
   direction: rtl;
 }
 
@@ -35,6 +34,14 @@
   right: 0;
 }
 
+.DateRangePicker__picker--open-down {
+  top: $react-dates-spacing-vertical-picker;
+}
+
+.DateRangePicker__picker--open-up {
+  bottom: $react-dates-spacing-vertical-picker;
+}
+
 .DateRangePicker__picker--portal {
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;

diff --git a/css/SingleDatePicker.scss b/css/SingleDatePicker.scss
@@ -9,7 +9,6 @@
   z-index: $react-dates-z-index + 1;
   background-color: $react-dates-color-white;
   position: absolute;
-  top: $react-dates-spacing-vertical-picker;
 }
 
 .SingleDatePicker__picker--rtl {
@@ -24,6 +23,14 @@
   right: 0;
 }
 
+.SingleDatePicker__picker--open-down {
+  top: $react-dates-spacing-vertical-picker;
+}
+
+.SingleDatePicker__picker--open-up {
+  bottom: $react-dates-spacing-vertical-picker;
+}
+
 .SingleDatePicker__picker--portal {
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;

diff --git a/css/variables.scss b/css/variables.scss
@@ -26,3 +26,9 @@ $react-dates-color-text-focus: #007a87 !default;
 $react-dates-color-focus: #99ede6 !default;
 
 $react-dates-z-index: 0 !default;
+
+$react-dates-input-font-size: 18px !default;
+$react-dates-input-line-height: 24px !default;
+$react-dates-input-padding: 8px !default;
+$react-dates-input-displaytext-padding-horizontal: 8px !default;
+$react-dates-input-displaytext-padding-vertical: 4px !default;
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
@@ -5,6 +5,9 @@ import cx from 'classnames';
 import throttle from 'lodash/throttle';
 import isTouchDevice from 'is-touch-device';
 
+import openDirectionShape from '../shapes/OpenDirectionShape';
+import { OPEN_DOWN, OPEN_UP } from '../../constants';
+
 const propTypes = forbidExtraProps({
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string, // also used as label
@@ -15,6 +18,7 @@ const propTypes = forbidExtraProps({
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
   showCaret: PropTypes.bool,
 
   onChange: PropTypes.func,
@@ -38,6 +42,7 @@ const defaultProps = {
   disabled: false,
   required: false,
   readOnly: null,
+  openDirection: OPEN_DOWN,
   showCaret: false,
 
   onChange() {},
@@ -145,6 +150,7 @@ export default class DateInput extends React.Component {
       disabled,
       required,
       readOnly,
+      openDirection,
     } = this.props;
 
     const displayText = displayValue || inputValue || dateString || placeholder || '';
@@ -156,6 +162,8 @@ export default class DateInput extends React.Component {
         className={cx('DateInput', {
           'DateInput--with-caret': showCaret && focused,
           'DateInput--disabled': disabled,
+          'DateInput--open-down': openDirection === OPEN_DOWN,
+          'DateInput--open-up': openDirection === OPEN_UP,
         })}
       >
         <input

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
@@ -29,6 +29,8 @@ import {
   VERTICAL_ORIENTATION,
   ANCHOR_LEFT,
   ANCHOR_RIGHT,
+  OPEN_DOWN,
+  OPEN_UP,
   DAY_SIZE,
 } from '../../constants';
 
@@ -59,6 +61,7 @@ const defaultProps = {
   renderMonth: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
+  openDirection: OPEN_DOWN,
   horizontalMargin: 0,
   withPortal: false,
   withFullScreenPortal: false,
@@ -203,12 +206,15 @@ export default class DateRangePicker extends React.Component {
       withPortal,
       withFullScreenPortal,
       anchorDirection,
+      openDirection,
       isRTL,
     } = this.props;
 
     const dayPickerClassName = cx('DateRangePicker__picker', {
       'DateRangePicker__picker--direction-left': anchorDirection === ANCHOR_LEFT,
       'DateRangePicker__picker--direction-right': anchorDirection === ANCHOR_RIGHT,
+      'DateRangePicker__picker--open-down': openDirection === OPEN_DOWN,
+      'DateRangePicker__picker--open-up': openDirection === OPEN_UP,
       'DateRangePicker__picker--horizontal': orientation === HORIZONTAL_ORIENTATION,
       'DateRangePicker__picker--vertical': orientation === VERTICAL_ORIENTATION,
       'DateRangePicker__picker--portal': withPortal || withFullScreenPortal,
@@ -401,6 +407,7 @@ export default class DateRangePicker extends React.Component {
       disabled,
       required,
       readOnly,
+      openDirection,
       phrases,
       isOutsideRange,
       minimumNights,
@@ -440,6 +447,7 @@ export default class DateRangePicker extends React.Component {
             disabled={disabled}
             required={required}
             readOnly={readOnly}
+            openDirection={openDirection}
             reopenPickerOnClearDates={reopenPickerOnClearDates}
             keepOpenOnDateSelect={keepOpenOnDateSelect}
             isOutsideRange={isOutsideRange}

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
@@ -5,14 +5,15 @@ import cx from 'classnames';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+import openDirectionShape from '../shapes/OpenDirectionShape';
 
 import DateInput from './DateInput';
 import RightArrow from '../svg/arrow-right.svg';
 import LeftArrow from '../svg/arrow-left.svg';
 import CloseButton from '../svg/close.svg';
 import CalendarIcon from '../svg/calendar.svg';
 
-import { START_DATE, END_DATE } from '../../constants';
+import { START_DATE, END_DATE, OPEN_DOWN } from '../../constants';
 
 const propTypes = forbidExtraProps({
   startDateId: PropTypes.string,
@@ -43,6 +44,7 @@ const propTypes = forbidExtraProps({
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
   showCaret: PropTypes.bool,
   showDefaultInputIcon: PropTypes.bool,
   customInputIcon: PropTypes.node,
@@ -85,6 +87,7 @@ const defaultProps = {
   disabled: false,
   required: false,
   readOnly: false,
+  openDirection: OPEN_DOWN,
   showCaret: false,
   showDefaultInputIcon: false,
   customInputIcon: null,
@@ -150,6 +153,7 @@ export default class DateRangePickerInput extends React.Component {
       disabled,
       required,
       readOnly,
+      openDirection,
       showCaret,
       showDefaultInputIcon,
       customInputIcon,
@@ -195,6 +199,7 @@ export default class DateRangePickerInput extends React.Component {
           disabled={disabled}
           required={required}
           readOnly={readOnly}
+          openDirection={openDirection}
           showCaret={showCaret}
 
           onChange={onStartDateChange}
@@ -223,6 +228,7 @@ export default class DateRangePickerInput extends React.Component {
           disabled={disabled}
           required={required}
           readOnly={readOnly}
+          openDirection={openDirection}
           showCaret={showCaret}
 
           onChange={onEndDateChange}

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
@@ -4,6 +4,7 @@ import moment from 'moment';
 
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
+import openDirectionShape from '../shapes/OpenDirectionShape';
 
 import { DateRangePickerInputPhrases } from '../defaultPhrases';
 import getPhrasePropTypes from '../utils/getPhrasePropTypes';
@@ -17,7 +18,7 @@ import toISODateString from '../utils/toISODateString';
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
 import isBeforeDay from '../utils/isBeforeDay';
 
-import { START_DATE, END_DATE } from '../../constants';
+import { START_DATE, END_DATE, OPEN_DOWN } from '../../constants';
 
 const propTypes = forbidExtraProps({
   startDate: momentPropTypes.momentObj,
@@ -37,6 +38,7 @@ const propTypes = forbidExtraProps({
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
+  openDirection: openDirectionShape,
 
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
@@ -82,6 +84,7 @@ const defaultProps = {
   disabled: false,
   required: false,
   readOnly: false,
+  openDirection: OPEN_DOWN,
 
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
@@ -233,6 +236,7 @@ export default class DateRangePickerInputController extends React.Component {
       disabled,
       required,
       readOnly,
+      openDirection,
       isFocused,
       phrases,
       onArrowDown,
@@ -261,6 +265,7 @@ export default class DateRangePickerInputController extends React.Component {
         disabled={disabled}
         required={required}
         readOnly={readOnly}
+        openDirection={openDirection}
         showCaret={showCaret}
         showDefaultInputIcon={showDefaultInputIcon}
         customInputIcon={customInputIcon}

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -28,6 +28,8 @@ import {
   VERTICAL_ORIENTATION,
   ANCHOR_LEFT,
   ANCHOR_RIGHT,
+  OPEN_DOWN,
+  OPEN_UP,
   DAY_SIZE,
 } from '../../constants';
 
@@ -53,6 +55,7 @@ const defaultProps = {
   // calendar presentation and interaction related props
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
+  openDirection: OPEN_DOWN,
   horizontalMargin: 0,
   withPortal: false,
   withFullScreenPortal: false,
@@ -216,11 +219,20 @@ export default class SingleDatePicker extends React.Component {
   }
 
   getDayPickerContainerClasses() {
-    const { orientation, withPortal, withFullScreenPortal, anchorDirection, isRTL } = this.props;
+    const {
+      orientation,
+      withPortal,
+      withFullScreenPortal,
+      anchorDirection,
+      openDirection,
+      isRTL,
+    } = this.props;
 
     const dayPickerClassName = cx('SingleDatePicker__picker', {
       'SingleDatePicker__picker--direction-left': anchorDirection === ANCHOR_LEFT,
       'SingleDatePicker__picker--direction-right': anchorDirection === ANCHOR_RIGHT,
+      'SingleDatePicker__picker--open-down': openDirection === OPEN_DOWN,
+      'SingleDatePicker__picker--open-up': openDirection === OPEN_UP,
       'SingleDatePicker__picker--horizontal': orientation === HORIZONTAL_ORIENTATION,
       'SingleDatePicker__picker--vertical': orientation === VERTICAL_ORIENTATION,
       'SingleDatePicker__picker--portal': withPortal || withFullScreenPortal,
@@ -389,6 +401,7 @@ export default class SingleDatePicker extends React.Component {
       focused,
       required,
       readOnly,
+      openDirection,
       showClearDate,
       showDefaultInputIcon,
       customInputIcon,
@@ -418,6 +431,7 @@ export default class SingleDatePicker extends React.Component {
             disabled={disabled}
             required={required}
             readOnly={readOnly}
+            openDirection={openDirection}
             showCaret={!withPortal && !withFullScreenPortal}
             onClearDate={this.clearDate}
             showClearDate={showClearDate}