Fix logic for apply default navigation button styling

Author: nkinser

src/components/DayPickerNavigation.jsx

@@ -104,7 +104,7 @@ class DayPickerNavigation extends React.PureComponent {
     let navPrevTabIndex = {};
     let navNextTabIndex = {};
 
-    if (!navPrevIcon) {
+    if (!navPrevIcon && !renderNavPrevButton) {
       navPrevTabIndex = { tabIndex: '0' };
       isDefaultNavPrev = true;
       let Icon = isVertical ? ChevronUp : LeftArrow;
@@ -122,7 +122,7 @@ class DayPickerNavigation extends React.PureComponent {
       );
     }
 
-    if (!navNextIcon) {
+    if (!navNextIcon && !renderNavNextButton) {
       navNextTabIndex = { tabIndex: '0' };
       isDefaultNavNext = true;
       let Icon = isVertical ? ChevronDown : RightArrow;

stories/DayPickerRangeController.js

@@ -157,6 +157,54 @@ function renderNavNextButton(buttonProps) {
   );
 }
 
+function renderNavPrevButtonForVerticalScrollable(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ width: '100%', textAlign: 'center' }}
+      type="button"
+    >
+      &lsaquo; Prev
+    </button>
+  );
+}
+
+function renderNavNextButtonForVerticalScrollable(buttonProps) {
+  const {
+    ariaLabel,
+    disabled,
+    onClick,
+    onKeyUp,
+    onMouseUp,
+  } = buttonProps;
+
+  return (
+    <button
+      aria-label={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyUp={onKeyUp}
+      onMouseUp={onMouseUp}
+      style={{ width: '100%', textAlign: 'center' }}
+      type="button"
+    >
+      Next &rsaquo;
+    </button>
+  );
+}
+
 function renderKeyboardShortcutsButton(buttonProps) {
   const { ref, onClick, ariaLabel } = buttonProps;
 
@@ -462,6 +510,20 @@ storiesOf('DayPickerRangeController', module)
       />
     </div>
   )))
+  .add('vertical scrollable with custom rendered month navigation', withInfo()(() => (
+    <div style={{ height: 500 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={3}
+        verticalHeight={300}
+        renderNavPrevButton={renderNavPrevButtonForVerticalScrollable}
+        renderNavNextButton={renderNavNextButtonForVerticalScrollable}
+      />
+    </div>
+  )))
   .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}