From a10e1424d780638f4786e2b2bdada0adc71660fc Mon Sep 17 00:00:00 2001 From: casey_klimkowsky Date: Mon, 16 Sep 2019 13:40:52 -0700 Subject: [PATCH 1/7] Add support for positioning month navigation under the calendar --- src/components/DateRangePicker.jsx | 2 + src/components/DayPicker.jsx | 12 ++- src/components/DayPickerNavigation.jsx | 25 ++++++ src/components/DayPickerRangeController.jsx | 6 ++ .../DayPickerSingleDateController.jsx | 6 ++ src/components/SingleDatePicker.jsx | 4 + src/constants.js | 3 + src/shapes/DateRangePickerShape.js | 2 + src/shapes/NavPositionShape.js | 8 ++ src/shapes/SingleDatePickerShape.js | 2 + stories/DayPickerRangeController.js | 79 +++++++++++++++---- 11 files changed, 132 insertions(+), 17 deletions(-) create mode 100644 src/shapes/NavPositionShape.js diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx index f76ea5463c..25ab572983 100644 --- a/src/components/DateRangePicker.jsx +++ b/src/components/DateRangePicker.jsx @@ -35,6 +35,7 @@ import { INFO_POSITION_BOTTOM, FANG_HEIGHT_PX, DEFAULT_VERTICAL_SPACING, + NAV_POSITION_TOP, } from '../constants'; const propTypes = forbidExtraProps({ @@ -98,6 +99,7 @@ const defaultProps = { horizontalMonthPadding: undefined, // navigation related props + navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx index df2777d14a..888cd39b87 100644 --- a/src/components/DayPicker.jsx +++ b/src/components/DayPicker.jsx @@ -27,6 +27,7 @@ import getActiveElement from '../utils/getActiveElement'; import isDayVisible from '../utils/isDayVisible'; import ModifiersShape from '../shapes/ModifiersShape'; +import NavPositionShape from '../shapes/NavPositionShape'; import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape'; import DayOfWeekShape from '../shapes/DayOfWeekShape'; import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape'; @@ -41,6 +42,8 @@ import { INFO_POSITION_BEFORE, INFO_POSITION_AFTER, MODIFIER_KEY_NAMES, + NAV_POSITION_TOP, + NAV_POSITION_BOTTOM, } from '../constants'; const MONTH_PADDING = 23; @@ -77,6 +80,7 @@ const propTypes = forbidExtraProps({ // navigation props disablePrev: PropTypes.bool, disableNext: PropTypes.bool, + navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, noNavButtons: PropTypes.bool, @@ -140,6 +144,7 @@ export const defaultProps = { // navigation props disablePrev: false, disableNext: false, + navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, noNavButtons: false, @@ -835,6 +840,7 @@ class DayPicker extends React.PureComponent { const { disablePrev, disableNext, + navPosition, navPrev, navNext, noNavButtons, @@ -857,6 +863,7 @@ class DayPicker extends React.PureComponent { disableNext={disableNext} onPrevMonthClick={this.onPrevMonthClick} onNextMonthClick={onNextMonthClick} + navPosition={navPosition} navPrev={navPrev} navNext={navNext} orientation={orientation} @@ -968,6 +975,7 @@ class DayPicker extends React.PureComponent { transitionDuration, verticalBorderSpacing, horizontalMonthPadding, + navPosition, } = this.props; const { reactDates: { spacing: { dayPickerHorizontalPadding } } } = theme; @@ -1088,7 +1096,7 @@ class DayPicker extends React.PureComponent { aria-roledescription={phrases.roleDescription} aria-label={phrases.calendarLabel} > - {!verticalScrollable && this.renderNavigation()} + {!verticalScrollable && navPosition === NAV_POSITION_TOP && this.renderNavigation()}
+ {!verticalScrollable && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()} + {!isTouch && !hideKeyboardShortcutsPanel && ( ({ zIndex: zIndex + 2, }, + DayPickerNavigation__bottom: { + display: 'flex', + justifyContent: 'space-between', + height: 'auto', + }, + DayPickerNavigation__horizontal: { height: 0, }, @@ -292,6 +309,14 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({ padding: '6px 9px', }, + DayPickerNavigation_bottomButton__horizontalDefault: { + position: 'static', + marginLeft: 22, + marginRight: 22, + marginBottom: 30, + marginTop: -10, + }, + DayPickerNavigation_leftButton__horizontalDefault: { left: noflip(22), }, diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx index 483358c6dd..2c01721365 100644 --- a/src/components/DayPickerRangeController.jsx +++ b/src/components/DayPickerRangeController.jsx @@ -28,6 +28,7 @@ import FocusedInputShape from '../shapes/FocusedInputShape'; import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape'; import DayOfWeekShape from '../shapes/DayOfWeekShape'; import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape'; +import NavPositionShape from '../shapes/NavPositionShape'; import { START_DATE, @@ -36,6 +37,7 @@ import { VERTICAL_SCROLLABLE, DAY_SIZE, INFO_POSITION_BOTTOM, + NAV_POSITION_TOP, } from '../constants'; import DayPicker from './DayPicker'; @@ -77,6 +79,7 @@ const propTypes = forbidExtraProps({ verticalBorderSpacing: nonNegativeInteger, horizontalMonthPadding: nonNegativeInteger, + navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, noNavButtons: PropTypes.bool, @@ -142,6 +145,7 @@ const defaultProps = { initialVisibleMonth: null, daySize: DAY_SIZE, + navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, noNavButtons: false, @@ -1136,6 +1140,7 @@ export default class DayPickerRangeController extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, + navPosition, navPrev, navNext, noNavButtons, @@ -1202,6 +1207,7 @@ export default class DayPickerRangeController extends React.PureComponent { onOutsideClick={onOutsideClick} disablePrev={disablePrev} disableNext={disableNext} + navPosition={navPosition} navPrev={navPrev} navNext={navNext} noNavButtons={noNavButtons} diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx index 8d7f6b2c0c..2fae39a0f1 100644 --- a/src/components/DayPickerSingleDateController.jsx +++ b/src/components/DayPickerSingleDateController.jsx @@ -20,12 +20,14 @@ import { addModifier, deleteModifier } from '../utils/modifiers'; import ScrollableOrientationShape from '../shapes/ScrollableOrientationShape'; import DayOfWeekShape from '../shapes/DayOfWeekShape'; import CalendarInfoPositionShape from '../shapes/CalendarInfoPositionShape'; +import NavPositionShape from '../shapes/NavPositionShape'; import { HORIZONTAL_ORIENTATION, VERTICAL_SCROLLABLE, DAY_SIZE, INFO_POSITION_BOTTOM, + NAV_POSITION_TOP, } from '../constants'; import DayPicker from './DayPicker'; @@ -62,6 +64,7 @@ const propTypes = forbidExtraProps({ transitionDuration: nonNegativeInteger, horizontalMonthPadding: nonNegativeInteger, + navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, @@ -119,6 +122,7 @@ const defaultProps = { transitionDuration: undefined, horizontalMonthPadding: 13, + navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -573,6 +577,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, + navPosition, navPrev, navNext, onOutsideClick, @@ -626,6 +631,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { initialVisibleMonth={() => currentMonth} firstDayOfWeek={firstDayOfWeek} onOutsideClick={onOutsideClick} + navPosition={navPosition} navPrev={navPrev} navNext={navNext} renderMonthText={renderMonthText} diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx index 6de560edb4..8fc0c346d4 100644 --- a/src/components/SingleDatePicker.jsx +++ b/src/components/SingleDatePicker.jsx @@ -33,6 +33,7 @@ import { INFO_POSITION_BOTTOM, FANG_HEIGHT_PX, DEFAULT_VERTICAL_SPACING, + NAV_POSITION_TOP, } from '../constants'; const propTypes = forbidExtraProps({ @@ -89,6 +90,7 @@ const defaultProps = { horizontalMonthPadding: 13, // navigation related props + navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -395,6 +397,7 @@ class SingleDatePicker extends React.PureComponent { numberOfMonths, orientation, monthFormat, + navPosition, navPrev, navNext, onPrevMonthClick, @@ -476,6 +479,7 @@ class SingleDatePicker extends React.PureComponent { keepOpenOnDateSelect={keepOpenOnDateSelect} hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel} initialVisibleMonth={initialVisibleMonth} + navPosition={navPosition} navPrev={navPrev} navNext={navNext} onPrevMonthClick={onPrevMonthClick} diff --git a/src/constants.js b/src/constants.js index 31eec9a200..f79893b6b2 100644 --- a/src/constants.js +++ b/src/constants.js @@ -9,6 +9,9 @@ export const HORIZONTAL_ORIENTATION = 'horizontal'; export const VERTICAL_ORIENTATION = 'vertical'; export const VERTICAL_SCROLLABLE = 'verticalScrollable'; +export const NAV_POSITION_BOTTOM = 'navPositionBottom'; +export const NAV_POSITION_TOP = 'navPositionTop'; + export const ICON_BEFORE_POSITION = 'before'; export const ICON_AFTER_POSITION = 'after'; diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js index 69eb5ad780..666cf7148b 100644 --- a/src/shapes/DateRangePickerShape.js +++ b/src/shapes/DateRangePickerShape.js @@ -13,6 +13,7 @@ import anchorDirectionShape from './AnchorDirectionShape'; import openDirectionShape from './OpenDirectionShape'; import DayOfWeekShape from './DayOfWeekShape'; import CalendarInfoPositionShape from './CalendarInfoPositionShape'; +import NavPositionShape from './NavPositionShape'; export default { // required props for a functional interactive DateRangePicker @@ -78,6 +79,7 @@ export default { horizontalMonthPadding: nonNegativeInteger, // navigation related props + navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, onPrevMonthClick: PropTypes.func, diff --git a/src/shapes/NavPositionShape.js b/src/shapes/NavPositionShape.js new file mode 100644 index 0000000000..6596cd94c7 --- /dev/null +++ b/src/shapes/NavPositionShape.js @@ -0,0 +1,8 @@ +import PropTypes from 'prop-types'; + +import { + NAV_POSITION_BOTTOM, + NAV_POSITION_TOP, +} from '../constants'; + +export default PropTypes.oneOf([NAV_POSITION_BOTTOM, NAV_POSITION_TOP]); diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js index 181f56b301..d2e296d1d4 100644 --- a/src/shapes/SingleDatePickerShape.js +++ b/src/shapes/SingleDatePickerShape.js @@ -11,6 +11,7 @@ import anchorDirectionShape from './AnchorDirectionShape'; import openDirectionShape from './OpenDirectionShape'; import DayOfWeekShape from './DayOfWeekShape'; import CalendarInfoPositionShape from './CalendarInfoPositionShape'; +import NavPositionShape from './NavPositionShape'; export default { // required props for a functional interactive SingleDatePicker @@ -67,6 +68,7 @@ export default { horizontalMonthPadding: nonNegativeInteger, // navigation related props + navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js index 7f61e84d34..34f3a7fd02 100644 --- a/stories/DayPickerRangeController.js +++ b/stories/DayPickerRangeController.js @@ -12,7 +12,7 @@ import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay'; import CloseButton from '../src/components/CloseButton'; import KeyboardShortcutRow from '../src/components/KeyboardShortcutRow'; -import { VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants'; +import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants'; import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper'; @@ -67,6 +67,36 @@ const TestNextIcon = () => (
); +const TestBottomPrevIcon = () => ( +
+ Prev +
+); + +const TestBottomNextIcon = () => ( +
+ Next +
+); + const TestCustomInfoPanel = () => (
day.subtract(3, 'days')} - endDateOffset={day => day.add(3, 'days')} + startDateOffset={(day) => day.subtract(3, 'days')} + endDateOffset={(day) => day.add(3, 'days')} /> ))) .add('with 45 days range selection', withInfo()(() => ( @@ -230,8 +260,8 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - startDateOffset={day => day.subtract(22, 'days')} - endDateOffset={day => day.add(22, 'days')} + startDateOffset={(day) => day.subtract(22, 'days')} + endDateOffset={(day) => day.add(22, 'days')} /> ))) .add('with 4 days after today range selection', withInfo()(() => ( @@ -239,7 +269,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - endDateOffset={day => day.add(4, 'days')} + endDateOffset={(day) => day.add(4, 'days')} /> ))) .add('with current week range selection', withInfo()(() => ( @@ -247,8 +277,8 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - startDateOffset={day => day.startOf('week')} - endDateOffset={day => day.endOf('week')} + startDateOffset={(day) => day.startOf('week')} + endDateOffset={(day) => day.endOf('week')} /> ))) .add('with custom inputs', withInfo()(() => ( @@ -367,6 +397,24 @@ storiesOf('DayPickerRangeController', module) />
))) + .add('with month navigation positioned at the bottom', withInfo()(() => ( + + ))) + .add('with custom month navigation positioned at the bottom', withInfo()(() => ( + } + navNext={} + /> + ))) .add('with custom month navigation', withInfo()(() => ( !isInclusivelyAfterDay(day, moment()) - || isInclusivelyAfterDay(day, moment().add(2, 'weeks')) - } + isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment()) + || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))} /> ))) .add('with some blocked dates', withInfo()(() => ( @@ -447,7 +494,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))} + isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))} /> ))) .add('with some highlighted dates', withInfo()(() => ( @@ -455,7 +502,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))} + isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))} /> ))) .add('blocks fridays', withInfo()(() => ( @@ -463,7 +510,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'} + isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'} /> ))) .add('with navigation blocked (minDate and maxDate)', withInfo()(() => ( @@ -480,7 +527,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - renderDayContents={day => day.format('ddd')} + renderDayContents={(day) => day.format('ddd')} /> ))) .add('with info panel', withInfo()(() => ( @@ -542,7 +589,7 @@ storiesOf('DayPickerRangeController', module) onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} getMinNightsForHoverDate={() => 2} - isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))} + isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))} /> ))) .add('with custom keyboard shortcuts button', withInfo()(() => ( From 544ff7415a792eb4e89856154a3f881ee813f5d0 Mon Sep 17 00:00:00 2001 From: casey_klimkowsky Date: Mon, 16 Sep 2019 16:39:31 -0700 Subject: [PATCH 2/7] Fix lint errors --- .vscode/settings.json | 2 + stories/DayPickerRangeController.js | 61 +++++++++++++++-------------- 2 files changed, 33 insertions(+), 30 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..7a73a41bfd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js index 34f3a7fd02..0fa1185237 100644 --- a/stories/DayPickerRangeController.js +++ b/stories/DayPickerRangeController.js @@ -44,7 +44,7 @@ const TestPrevIcon = () => ( position: 'absolute', top: '20px', }} - tabIndex="0" + tabindex="0" > Prev @@ -61,7 +61,7 @@ const TestNextIcon = () => ( right: '22px', top: '20px', }} - tabIndex="0" + tabindex="0" > Next @@ -251,8 +251,8 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - startDateOffset={(day) => day.subtract(3, 'days')} - endDateOffset={(day) => day.add(3, 'days')} + startDateOffset={day => day.subtract(3, 'days')} + endDateOffset={day => day.add(3, 'days')} /> ))) .add('with 45 days range selection', withInfo()(() => ( @@ -260,8 +260,8 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - startDateOffset={(day) => day.subtract(22, 'days')} - endDateOffset={(day) => day.add(22, 'days')} + startDateOffset={day => day.subtract(22, 'days')} + endDateOffset={day => day.add(22, 'days')} /> ))) .add('with 4 days after today range selection', withInfo()(() => ( @@ -269,7 +269,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - endDateOffset={(day) => day.add(4, 'days')} + endDateOffset={day => day.add(4, 'days')} /> ))) .add('with current week range selection', withInfo()(() => ( @@ -277,8 +277,8 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - startDateOffset={(day) => day.startOf('week')} - endDateOffset={(day) => day.endOf('week')} + startDateOffset={day => day.startOf('week')} + endDateOffset={day => day.endOf('week')} /> ))) .add('with custom inputs', withInfo()(() => ( @@ -397,42 +397,42 @@ storiesOf('DayPickerRangeController', module) /> ))) - .add('with month navigation positioned at the bottom', withInfo()(() => ( + .add('with custom month navigation', withInfo()(() => ( } + navNext={} /> ))) - .add('with custom month navigation positioned at the bottom', withInfo()(() => ( + .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => ( } - navNext={} + navPrev={} + navNext={} /> ))) - .add('with custom month navigation', withInfo()(() => ( + .add('with month navigation positioned at the bottom', withInfo()(() => ( } - navNext={} /> ))) - .add('with custom month navigation and blocked navigation (minDate and maxDate)', withInfo()(() => ( + .add('with custom month navigation positioned at the bottom', withInfo()(() => ( } - navNext={} + navPrev={} + navNext={} /> ))) .add('with outside days enabled', withInfo()(() => ( @@ -485,8 +485,9 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment()) - || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))} + isOutsideRange={day => !isInclusivelyAfterDay(day, moment()) + || isInclusivelyAfterDay(day, moment().add(2, 'weeks')) + } /> ))) .add('with some blocked dates', withInfo()(() => ( @@ -494,7 +495,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))} + isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))} /> ))) .add('with some highlighted dates', withInfo()(() => ( @@ -502,7 +503,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isDayHighlighted={(day1) => datesList.some((day2) => isSameDay(day1, day2))} + isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))} /> ))) .add('blocks fridays', withInfo()(() => ( @@ -510,7 +511,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - isDayBlocked={(day) => moment.weekdays(day.weekday()) === 'Friday'} + isDayBlocked={day => moment.weekdays(day.weekday()) === 'Friday'} /> ))) .add('with navigation blocked (minDate and maxDate)', withInfo()(() => ( @@ -527,7 +528,7 @@ storiesOf('DayPickerRangeController', module) onOutsideClick={action('DayPickerRangeController::onOutsideClick')} onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} - renderDayContents={(day) => day.format('ddd')} + renderDayContents={day => day.format('ddd')} /> ))) .add('with info panel', withInfo()(() => ( @@ -589,7 +590,7 @@ storiesOf('DayPickerRangeController', module) onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')} onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} getMinNightsForHoverDate={() => 2} - isDayBlocked={(day1) => datesList.some((day2) => isSameDay(day1, day2))} + isDayBlocked={day1 => datesList.some(day2 => isSameDay(day1, day2))} /> ))) .add('with custom keyboard shortcuts button', withInfo()(() => ( From 85ca643d5bec08a5b702665280362f7057441e37 Mon Sep 17 00:00:00 2001 From: casey_klimkowsky Date: Mon, 16 Sep 2019 16:43:44 -0700 Subject: [PATCH 3/7] Remove .vscode/settings.json --- .vscode/settings.json | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 7a73a41bfd..0000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,2 +0,0 @@ -{ -} \ No newline at end of file From 43b1c05a87cc924168650390fde69be0911f7d63 Mon Sep 17 00:00:00 2001 From: casey_klimkowsky Date: Tue, 17 Sep 2019 09:51:40 -0700 Subject: [PATCH 4/7] Fix lint error and add more Storybook variations --- examples/DateRangePickerWrapper.jsx | 9 ++++++++- src/components/DateRangePicker.jsx | 2 ++ src/components/DayPicker.jsx | 3 ++- stories/DateRangePicker_calendar.js | 9 ++++++++- stories/DayPickerSingleDateController.js | 10 +++++++++- 5 files changed, 29 insertions(+), 4 deletions(-) diff --git a/examples/DateRangePickerWrapper.jsx b/examples/DateRangePickerWrapper.jsx index ce78bb9bee..620a286cdd 100644 --- a/examples/DateRangePickerWrapper.jsx +++ b/examples/DateRangePickerWrapper.jsx @@ -8,7 +8,13 @@ import DateRangePicker from '../src/components/DateRangePicker'; import { DateRangePickerPhrases } from '../src/defaultPhrases'; import DateRangePickerShape from '../src/shapes/DateRangePickerShape'; -import { START_DATE, END_DATE, HORIZONTAL_ORIENTATION, ANCHOR_LEFT } from '../src/constants'; +import { + START_DATE, + END_DATE, + HORIZONTAL_ORIENTATION, + ANCHOR_LEFT, + NAV_POSITION_TOP, +} from '../src/constants'; import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay'; const propTypes = { @@ -66,6 +72,7 @@ const defaultProps = { isRTL: false, // navigation related props + navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, onPrevMonthClick() {}, diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx index 25ab572983..138783a29a 100644 --- a/src/components/DateRangePicker.jsx +++ b/src/components/DateRangePicker.jsx @@ -407,6 +407,7 @@ class DateRangePicker extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, + navPosition, navPrev, navNext, onPrevMonthClick, @@ -512,6 +513,7 @@ class DateRangePicker extends React.PureComponent { daySize={daySize} initialVisibleMonth={initialVisibleMonthThunk} hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel} + navPosition={navPosition} navPrev={navPrev} navNext={navNext} minimumNights={minimumNights} diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx index 888cd39b87..b6236e6d50 100644 --- a/src/components/DayPicker.jsx +++ b/src/components/DayPicker.jsx @@ -1143,7 +1143,8 @@ class DayPicker extends React.PureComponent { {verticalScrollable && this.renderNavigation()} - {!verticalScrollable && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()} + {!verticalScrollable + && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()} {!isTouch && !hideKeyboardShortcutsPanel && ( ))) + .add('with month navigation positioned at the bottom', withInfo()(() => ( + + ))) .add('with outside days enabled', withInfo()(() => ( } /> ))) + .add('with month navigation positioned at the bottom', withInfo()(() => ( + + ))) .add('with outside days enabled', withInfo()(() => ( Date: Tue, 17 Sep 2019 11:23:31 -0700 Subject: [PATCH 5/7] Add unit tests and add support for customDayPickerNavigationStyles --- src/components/DateRangePicker.jsx | 3 +++ src/components/DayPicker.jsx | 7 ++++- src/components/DayPickerNavigation.jsx | 26 +++++++++++++----- src/components/DayPickerRangeController.jsx | 4 +++ .../DayPickerSingleDateController.jsx | 4 +++ src/components/SingleDatePicker.jsx | 3 +++ src/shapes/DateRangePickerShape.js | 1 + src/shapes/SingleDatePickerShape.js | 1 + stories/DayPickerRangeController.js | 4 +++ test/components/DayPicker_spec.jsx | 27 +++++++++++++++++++ 10 files changed, 72 insertions(+), 8 deletions(-) diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx index 138783a29a..36e43648b2 100644 --- a/src/components/DateRangePicker.jsx +++ b/src/components/DateRangePicker.jsx @@ -99,6 +99,7 @@ const defaultProps = { horizontalMonthPadding: undefined, // navigation related props + customDayPickerNavigationStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -407,6 +408,7 @@ class DateRangePicker extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, + customDayPickerNavigationStyles, navPosition, navPrev, navNext, @@ -513,6 +515,7 @@ class DateRangePicker extends React.PureComponent { daySize={daySize} initialVisibleMonth={initialVisibleMonthThunk} hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel} + customDayPickerNavigationStyles={customDayPickerNavigationStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx index b6236e6d50..c58c698fec 100644 --- a/src/components/DayPicker.jsx +++ b/src/components/DayPicker.jsx @@ -78,6 +78,7 @@ const propTypes = forbidExtraProps({ renderKeyboardShortcutsPanel: PropTypes.func, // navigation props + customDayPickerNavigationStyles: PropTypes.object, disablePrev: PropTypes.bool, disableNext: PropTypes.bool, navPosition: NavPositionShape, @@ -142,6 +143,7 @@ export const defaultProps = { renderKeyboardShortcutsPanel: undefined, // navigation props + customDayPickerNavigationStyles: null, disablePrev: false, disableNext: false, navPosition: NAV_POSITION_TOP, @@ -838,6 +840,7 @@ class DayPicker extends React.PureComponent { renderNavigation() { const { + customDayPickerNavigationStyles, disablePrev, disableNext, navPosition, @@ -859,6 +862,7 @@ class DayPicker extends React.PureComponent { return ( {!verticalScrollable - && navPosition === NAV_POSITION_BOTTOM && this.renderNavigation()} + && navPosition === NAV_POSITION_BOTTOM + && this.renderNavigation()} {!isTouch && !hideKeyboardShortcutsPanel && ( {!isVerticalScrollable && ( @@ -230,12 +239,6 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({ zIndex: zIndex + 2, }, - DayPickerNavigation__bottom: { - display: 'flex', - justifyContent: 'space-between', - height: 'auto', - }, - DayPickerNavigation__horizontal: { height: 0, }, @@ -255,6 +258,15 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({ position: 'relative', }, + DayPickerNavigation__bottom: { + height: 'auto', + }, + + DayPickerNavigation__bottomDefault: { + display: 'flex', + justifyContent: 'space-between', + }, + DayPickerNavigation_button: { cursor: 'pointer', userSelect: 'none', diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx index 2c01721365..ff845d8b20 100644 --- a/src/components/DayPickerRangeController.jsx +++ b/src/components/DayPickerRangeController.jsx @@ -79,6 +79,7 @@ const propTypes = forbidExtraProps({ verticalBorderSpacing: nonNegativeInteger, horizontalMonthPadding: nonNegativeInteger, + customDayPickerNavigationStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, @@ -145,6 +146,7 @@ const defaultProps = { initialVisibleMonth: null, daySize: DAY_SIZE, + customDayPickerNavigationStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -1140,6 +1142,7 @@ export default class DayPickerRangeController extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, + customDayPickerNavigationStyles, navPosition, navPrev, navNext, @@ -1207,6 +1210,7 @@ export default class DayPickerRangeController extends React.PureComponent { onOutsideClick={onOutsideClick} disablePrev={disablePrev} disableNext={disableNext} + customDayPickerNavigationStyles={customDayPickerNavigationStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx index 2fae39a0f1..7699df0327 100644 --- a/src/components/DayPickerSingleDateController.jsx +++ b/src/components/DayPickerSingleDateController.jsx @@ -64,6 +64,7 @@ const propTypes = forbidExtraProps({ transitionDuration: nonNegativeInteger, horizontalMonthPadding: nonNegativeInteger, + customDayPickerNavigationStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, @@ -122,6 +123,7 @@ const defaultProps = { transitionDuration: undefined, horizontalMonthPadding: 13, + customDayPickerNavigationStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -577,6 +579,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, + customDayPickerNavigationStyles, navPosition, navPrev, navNext, @@ -631,6 +634,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { initialVisibleMonth={() => currentMonth} firstDayOfWeek={firstDayOfWeek} onOutsideClick={onOutsideClick} + customDayPickerNavigationStyles={customDayPickerNavigationStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx index 8fc0c346d4..abb3c5686f 100644 --- a/src/components/SingleDatePicker.jsx +++ b/src/components/SingleDatePicker.jsx @@ -90,6 +90,7 @@ const defaultProps = { horizontalMonthPadding: 13, // navigation related props + customDayPickerNavigationStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -397,6 +398,7 @@ class SingleDatePicker extends React.PureComponent { numberOfMonths, orientation, monthFormat, + customDayPickerNavigationStyles, navPosition, navPrev, navNext, @@ -479,6 +481,7 @@ class SingleDatePicker extends React.PureComponent { keepOpenOnDateSelect={keepOpenOnDateSelect} hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel} initialVisibleMonth={initialVisibleMonth} + customDayPickerNavigationStyles={customDayPickerNavigationStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js index 666cf7148b..f83dabaca7 100644 --- a/src/shapes/DateRangePickerShape.js +++ b/src/shapes/DateRangePickerShape.js @@ -79,6 +79,7 @@ export default { horizontalMonthPadding: nonNegativeInteger, // navigation related props + customDayPickerNavigationStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js index d2e296d1d4..7144edc661 100644 --- a/src/shapes/SingleDatePickerShape.js +++ b/src/shapes/SingleDatePickerShape.js @@ -68,6 +68,7 @@ export default { horizontalMonthPadding: nonNegativeInteger, // navigation related props + customDayPickerNavigationStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js index 0fa1185237..f1b01abdb7 100644 --- a/stories/DayPickerRangeController.js +++ b/stories/DayPickerRangeController.js @@ -433,6 +433,10 @@ storiesOf('DayPickerRangeController', module) onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} navPrev={} navNext={} + customDayPickerNavigationStyles={{ + display: 'flex', + justifyContent: 'space-between', + }} /> ))) .add('with outside days enabled', withInfo()(() => ( diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx index 2a2b670ac7..63fb8e506c 100644 --- a/test/components/DayPicker_spec.jsx +++ b/test/components/DayPicker_spec.jsx @@ -14,6 +14,7 @@ import { HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE, + NAV_POSITION_BOTTOM, } from '../../src/constants'; @@ -106,6 +107,32 @@ describe('DayPicker', () => { }); }); + describe('DayPickerNavigation', () => { + it('is rendered before CalendarMonthGrid in DayPicker_focusRegion', () => { + const wrapper = shallow().dive(); + expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1); + expect( + wrapper + .find('[className^="DayPicker_focusRegion"]') + .childAt(0) + .type(), + ).to.equal(DayPickerNavigation); + }); + + describe('navPosition === NAV_POSITION_BOTTOM', () => { + it('is rendered after CalendarMonthGrid in DayPicker_focusRegion', () => { + const wrapper = shallow().dive(); + expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1); + expect( + wrapper + .find('[className^="DayPicker_focusRegion"]') + .childAt(1) + .type(), + ).to.equal(DayPickerNavigation); + }); + }); + }); + describe('DayPickerKeyboardShortcuts', () => { it('component exists if state.isTouchDevice is false and hideKeyboardShortcutsPanel is false', () => { const wrapper = shallow().dive(); From e986d8ab80dee785c6e8df348c8ef147b0d2834a Mon Sep 17 00:00:00 2001 From: casey_klimkowsky Date: Thu, 19 Sep 2019 14:01:36 -0700 Subject: [PATCH 6/7] Rename customStyles to inlineStyles --- src/components/DateRangePicker.jsx | 6 +++--- src/components/DayPicker.jsx | 8 ++++---- src/components/DayPickerNavigation.jsx | 10 +++++----- src/components/DayPickerRangeController.jsx | 8 ++++---- src/components/DayPickerSingleDateController.jsx | 8 ++++---- src/components/SingleDatePicker.jsx | 6 +++--- src/shapes/DateRangePickerShape.js | 2 +- src/shapes/SingleDatePickerShape.js | 2 +- stories/DayPickerRangeController.js | 6 +++--- 9 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx index 36e43648b2..e30827306e 100644 --- a/src/components/DateRangePicker.jsx +++ b/src/components/DateRangePicker.jsx @@ -99,7 +99,7 @@ const defaultProps = { horizontalMonthPadding: undefined, // navigation related props - customDayPickerNavigationStyles: null, + dayPickerNavigationInlineStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -408,7 +408,7 @@ class DateRangePicker extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, - customDayPickerNavigationStyles, + dayPickerNavigationInlineStyles, navPosition, navPrev, navNext, @@ -515,7 +515,7 @@ class DateRangePicker extends React.PureComponent { daySize={daySize} initialVisibleMonth={initialVisibleMonthThunk} hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel} - customDayPickerNavigationStyles={customDayPickerNavigationStyles} + dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx index c58c698fec..4c0b1f9543 100644 --- a/src/components/DayPicker.jsx +++ b/src/components/DayPicker.jsx @@ -78,7 +78,7 @@ const propTypes = forbidExtraProps({ renderKeyboardShortcutsPanel: PropTypes.func, // navigation props - customDayPickerNavigationStyles: PropTypes.object, + dayPickerNavigationInlineStyles: PropTypes.object, disablePrev: PropTypes.bool, disableNext: PropTypes.bool, navPosition: NavPositionShape, @@ -143,7 +143,7 @@ export const defaultProps = { renderKeyboardShortcutsPanel: undefined, // navigation props - customDayPickerNavigationStyles: null, + dayPickerNavigationInlineStyles: null, disablePrev: false, disableNext: false, navPosition: NAV_POSITION_TOP, @@ -840,7 +840,7 @@ class DayPicker extends React.PureComponent { renderNavigation() { const { - customDayPickerNavigationStyles, + dayPickerNavigationInlineStyles, disablePrev, disableNext, navPosition, @@ -862,9 +862,9 @@ class DayPicker extends React.PureComponent { return ( {!isVerticalScrollable && ( diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx index ff845d8b20..b96230f127 100644 --- a/src/components/DayPickerRangeController.jsx +++ b/src/components/DayPickerRangeController.jsx @@ -79,7 +79,7 @@ const propTypes = forbidExtraProps({ verticalBorderSpacing: nonNegativeInteger, horizontalMonthPadding: nonNegativeInteger, - customDayPickerNavigationStyles: PropTypes.object, + dayPickerNavigationInlineStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, @@ -146,7 +146,7 @@ const defaultProps = { initialVisibleMonth: null, daySize: DAY_SIZE, - customDayPickerNavigationStyles: null, + dayPickerNavigationInlineStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -1142,7 +1142,7 @@ export default class DayPickerRangeController extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, - customDayPickerNavigationStyles, + dayPickerNavigationInlineStyles, navPosition, navPrev, navNext, @@ -1210,7 +1210,7 @@ export default class DayPickerRangeController extends React.PureComponent { onOutsideClick={onOutsideClick} disablePrev={disablePrev} disableNext={disableNext} - customDayPickerNavigationStyles={customDayPickerNavigationStyles} + dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx index 7699df0327..f9b9e1be4e 100644 --- a/src/components/DayPickerSingleDateController.jsx +++ b/src/components/DayPickerSingleDateController.jsx @@ -64,7 +64,7 @@ const propTypes = forbidExtraProps({ transitionDuration: nonNegativeInteger, horizontalMonthPadding: nonNegativeInteger, - customDayPickerNavigationStyles: PropTypes.object, + dayPickerNavigationInlineStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, @@ -123,7 +123,7 @@ const defaultProps = { transitionDuration: undefined, horizontalMonthPadding: 13, - customDayPickerNavigationStyles: null, + dayPickerNavigationInlineStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -579,7 +579,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { monthFormat, renderMonthText, renderWeekHeaderElement, - customDayPickerNavigationStyles, + dayPickerNavigationInlineStyles, navPosition, navPrev, navNext, @@ -634,7 +634,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { initialVisibleMonth={() => currentMonth} firstDayOfWeek={firstDayOfWeek} onOutsideClick={onOutsideClick} - customDayPickerNavigationStyles={customDayPickerNavigationStyles} + dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx index abb3c5686f..bbdb9d0127 100644 --- a/src/components/SingleDatePicker.jsx +++ b/src/components/SingleDatePicker.jsx @@ -90,7 +90,7 @@ const defaultProps = { horizontalMonthPadding: 13, // navigation related props - customDayPickerNavigationStyles: null, + dayPickerNavigationInlineStyles: null, navPosition: NAV_POSITION_TOP, navPrev: null, navNext: null, @@ -398,7 +398,7 @@ class SingleDatePicker extends React.PureComponent { numberOfMonths, orientation, monthFormat, - customDayPickerNavigationStyles, + dayPickerNavigationInlineStyles, navPosition, navPrev, navNext, @@ -481,7 +481,7 @@ class SingleDatePicker extends React.PureComponent { keepOpenOnDateSelect={keepOpenOnDateSelect} hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel} initialVisibleMonth={initialVisibleMonth} - customDayPickerNavigationStyles={customDayPickerNavigationStyles} + dayPickerNavigationInlineStyles={dayPickerNavigationInlineStyles} navPosition={navPosition} navPrev={navPrev} navNext={navNext} diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js index f83dabaca7..24efb386b3 100644 --- a/src/shapes/DateRangePickerShape.js +++ b/src/shapes/DateRangePickerShape.js @@ -79,7 +79,7 @@ export default { horizontalMonthPadding: nonNegativeInteger, // navigation related props - customDayPickerNavigationStyles: PropTypes.object, + dayPickerNavigationInlineStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js index 7144edc661..b477375ccb 100644 --- a/src/shapes/SingleDatePickerShape.js +++ b/src/shapes/SingleDatePickerShape.js @@ -68,7 +68,7 @@ export default { horizontalMonthPadding: nonNegativeInteger, // navigation related props - customDayPickerNavigationStyles: PropTypes.object, + dayPickerNavigationInlineStyles: PropTypes.object, navPosition: NavPositionShape, navPrev: PropTypes.node, navNext: PropTypes.node, diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js index f1b01abdb7..cc2de68c20 100644 --- a/stories/DayPickerRangeController.js +++ b/stories/DayPickerRangeController.js @@ -44,7 +44,7 @@ const TestPrevIcon = () => ( position: 'absolute', top: '20px', }} - tabindex="0" + tabIndex="0" > Prev @@ -61,7 +61,7 @@ const TestNextIcon = () => ( right: '22px', top: '20px', }} - tabindex="0" + tabIndex="0" > Next @@ -433,7 +433,7 @@ storiesOf('DayPickerRangeController', module) onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')} navPrev={} navNext={} - customDayPickerNavigationStyles={{ + dayPickerNavigationInlineStyles={{ display: 'flex', justifyContent: 'space-between', }} From c82f9b06e5b721f7057d22f9d0e04ee8faae5bf0 Mon Sep 17 00:00:00 2001 From: casey_klimkowsky Date: Thu, 26 Sep 2019 09:41:19 -0700 Subject: [PATCH 7/7] Add more test coverage --- test/components/DayPickerNavigation_spec.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx index f3ad841b95..8698161c84 100644 --- a/test/components/DayPickerNavigation_spec.jsx +++ b/test/components/DayPickerNavigation_spec.jsx @@ -5,6 +5,8 @@ import { shallow } from 'enzyme'; import DayPickerNavigation from '../../src/components/DayPickerNavigation'; import { VERTICAL_SCROLLABLE } from '../../src/constants'; +import RightArrow from '../../src/components/RightArrow'; +import LeftArrow from '../../src/components/LeftArrow'; describe('DayPickerNavigation', () => { describe('#render', () => { @@ -46,6 +48,16 @@ describe('DayPickerNavigation', () => { expect(prevMonthButton.prop('tabIndex')).to.equal('0'); expect(nextMonthButton.prop('tabIndex')).to.equal('0'); }); + + it('uses RightArrow as the default prev icon for RTL', () => { + const wrapper = shallow().dive(); + expect(wrapper.childAt(0).find(RightArrow)).to.have.lengthOf(1); + }); + + it('uses LeftArrow as the default next icon for RTL', () => { + const wrapper = shallow().dive(); + expect(wrapper.childAt(1).find(LeftArrow)).to.have.lengthOf(1); + }); }); describe('interactions', () => {