Repository: gpbl/react-day-picker
Pull request #398 (2017-06-13 12:20:20)

Ability to show or hide disabled navButtons when fromMonth and/or toM…
By default, navButtons are hidden when fromMonth and/or toMonth.
Even if fromMonth and/or toMonth are defined, I've **added navButtons and made'em disabled**. We can also be **able override default styling by our own style to show disabled navButtons**(by default it's hidden) as follows,

```
.DayPicker-NavButton--interactionDisabled { 
    display: inline-block;
    opacity: .5;
}
```

Accordingly, **made the changes in the test cases** as well.
Related to issue #367.


Patch:
diff --git a/src/Navbar.js b/src/Navbar.js
index b72f3d209..9f377b0bd 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -35,27 +35,35 @@ export default class Navbar extends Component {
     const previousClickHandler = dir === 'rtl' ? onNextClick : onPreviousClick;
     const nextClickHandler = dir === 'rtl' ? onPreviousClick : onNextClick;
 
-    const previousButton =
-      showPreviousButton &&
+    const previousButton = (
       <span
         tabIndex="0"
         role="button"
         aria-label={labels.previousMonth}
         key="previous"
-        className={classNames.navButtonPrev}
-        onClick={() => previousClickHandler()}
-      />;
+        className={
+          showPreviousButton
+            ? classNames.navButtonPrev
+            : `${classNames.navButtonPrev} ${classNames.navButtonInteractionDisabled}`
+        }
+        onClick={showPreviousButton ? () => previousClickHandler() : undefined}
+      />
+    );
 
-    const nextButton =
-      showNextButton &&
+    const nextButton = (
       <span
         tabIndex="0"
         role="button"
         aria-label={labels.nextMonth}
         key="right"
-        className={classNames.navButtonNext}
-        onClick={() => nextClickHandler()}
-      />;
+        className={
+          showNextButton
+            ? classNames.navButtonNext
+            : `${classNames.navButtonNext} ${classNames.navButtonInteractionDisabled}`
+        }
+        onClick={showNextButton ? () => nextClickHandler() : undefined}
+      />
+    );
 
     return (
       <div className={className || classNames.navBar}>
diff --git a/src/classNames.js b/src/classNames.js
index f6c9fc67a..b165705a9 100644
--- a/src/classNames.js
+++ b/src/classNames.js
@@ -17,6 +17,7 @@ export default {
   day: 'DayPicker-Day',
   footer: 'DayPicker-Footer',
   todayButton: 'DayPicker-TodayButton',
+  navButtonInteractionDisabled: 'DayPicker-NavButton--interactionDisabled',
 
   // default modifiers
   today: 'today',
diff --git a/src/style.css b/src/style.css
index 787368f1f..44e1b6f3e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -46,6 +46,7 @@
       background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDI2IDUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5uZXh0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Im5leHQiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuOTUxNDUxLCAwLjAwMDAwMCkiIGZpbGw9IiM1NjVBNUMiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCw0OS4xMjM3MzMxIEwwLDQ1LjM2NzQzNDUgTDIwLjEzMTg0NTksMjQuNzIzMDYxMiBMMCw0LjIzMTM4MzE0IEwwLDAuNDc1MDg0NDU5IEwyNSwyNC43MjMwNjEyIEwwLDQ5LjEyMzczMzEgTDAsNDkuMTIzNzMzMSBaIiBpZD0icmlnaHQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=");
     }
 
+    .DayPicker-NavButton--interactionDisabled { display: none; }
 
   .DayPicker-Caption {
     display: table-caption;


Test patch:
diff --git a/test/Navbar.js b/test/Navbar.js
index 99ef900ae..712e4f9dd 100644
--- a/test/Navbar.js
+++ b/test/Navbar.js
@@ -61,13 +61,13 @@ describe('<Navbar />', () => {
       'DayPicker-NavButton--prev'
     );
   });
-  it('should not render the previous button', () => {
+  it('should disable interaction with the previous button', () => {
     const wrapper = shallow(<Navbar showPreviousButton={false} />);
-    expect(wrapper.find('.DayPicker-NavButton--prev')).toHaveLength(0);
+    expect(wrapper.find('.DayPicker-NavButton--prev')).toHaveLength(1);
   });
-  it('should not render the next button', () => {
+  it('should disable interaction with the next button', () => {
     const wrapper = shallow(<Navbar showNextButton={false} />);
-    expect(wrapper.find('.DayPicker-NavButton--next')).toHaveLength(0);
+    expect(wrapper.find('.DayPicker-NavButton--next')).toHaveLength(1);
   });
   it('should call `onNextClick` when clicking the next button', () => {
     const handleNextClick = jest.fn();