Fix logic for apply default navigation button styling

react-dates · Jan 14, 2020 · 4c67f2b · 4c67f2b
1 parent 48f7cd3
commit 4c67f2b
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
@@ -97,7 +97,7 @@ function DayPickerNavigation({
   let navPrevTabIndex = {};
   let navNextTabIndex = {};
 
-  if (!navPrevIcon) {
+  if (!navPrevIcon && !renderNavPrevButton) {
     navPrevTabIndex = { tabIndex: '0' };
     isDefaultNavPrev = true;
     let Icon = isVertical ? ChevronUp : LeftArrow;
@@ -115,7 +115,7 @@ function DayPickerNavigation({
     );
   }
 
-  if (!navNextIcon) {
+  if (!navNextIcon && !renderNavNextButton) {
     navNextTabIndex = { tabIndex: '0' };
     isDefaultNavNext = true;
     let Icon = isVertical ? ChevronDown : RightArrow;

diff --git a/stories/DayPickerRangeController.js b/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')}