Repository: gpbl/react-day-picker
Pull request #471 (2017-07-27 08:31:35)

Navbar - fix for disabled interaction in RTL
The RTL support in Navbar lacks symmetry when dealing with disabled interaction with the previous and next buttons.

The fix swaps the values of the showPreviousButton and showNextButton props on RTL.


Patch:
diff --git a/src/Navbar.js b/src/Navbar.js
index 966b904f2..2a7b3d899 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -37,6 +37,7 @@ export default class Navbar extends Component {
   shouldComponentUpdate(nextProps) {
     return (
       nextProps.labels !== this.props.labels ||
+      nextProps.dir !== this.props.dir ||
       this.props.showPreviousButton !== nextProps.showPreviousButton ||
       this.props.showNextButton !== nextProps.showNextButton
     );
@@ -84,24 +85,30 @@ export default class Navbar extends Component {
     let nextClickHandler;
     let previousKeyDownHandler;
     let nextKeyDownHandler;
+    let shouldShowPrevious;
+    let shouldShowNext;
 
     if (dir === 'rtl') {
       previousClickHandler = this.handleNextClick;
       nextClickHandler = this.handlePreviousClick;
       previousKeyDownHandler = this.handleNextKeyDown;
       nextKeyDownHandler = this.handlePreviousKeyDown;
+      shouldShowNext = showPreviousButton;
+      shouldShowPrevious = showNextButton;
     } else {
       previousClickHandler = this.handlePreviousClick;
       nextClickHandler = this.handleNextClick;
       previousKeyDownHandler = this.handlePreviousKeyDown;
       nextKeyDownHandler = this.handleNextKeyDown;
+      shouldShowNext = showNextButton;
+      shouldShowPrevious = showPreviousButton;
     }
 
-    const previousClassName = showPreviousButton
+    const previousClassName = shouldShowPrevious
       ? classNames.navButtonPrev
       : `${classNames.navButtonPrev} ${classNames.navButtonInteractionDisabled}`;
 
-    const nextClassName = showNextButton
+    const nextClassName = shouldShowNext
       ? classNames.navButtonNext
       : `${classNames.navButtonNext} ${classNames.navButtonInteractionDisabled}`;
 
@@ -112,8 +119,8 @@ export default class Navbar extends Component {
         aria-label={labels.previousMonth}
         key="previous"
         className={previousClassName}
-        onKeyDown={showPreviousButton ? previousKeyDownHandler : undefined}
-        onClick={showPreviousButton ? previousClickHandler : undefined}
+        onKeyDown={shouldShowPrevious ? previousKeyDownHandler : undefined}
+        onClick={shouldShowPrevious ? previousClickHandler : undefined}
       />
     );
 
@@ -124,8 +131,8 @@ export default class Navbar extends Component {
         aria-label={labels.nextMonth}
         key="right"
         className={nextClassName}
-        onKeyDown={showNextButton ? nextKeyDownHandler : undefined}
-        onClick={showNextButton ? nextClickHandler : undefined}
+        onKeyDown={shouldShowNext ? nextKeyDownHandler : undefined}
+        onClick={shouldShowNext ? nextClickHandler : undefined}
       />
     );
 


Test patch:
diff --git a/test/Navbar.js b/test/Navbar.js
index d2c12d7dd..59c01a3fa 100644
--- a/test/Navbar.js
+++ b/test/Navbar.js
@@ -74,6 +74,18 @@ describe('<Navbar />', () => {
       '.DayPicker-NavButton--interactionDisabled'
     );
   });
+  it('should disable interaction with the previous button for RTL', () => {
+    const wrapper = shallow(<Navbar dir="rtl" showNextButton={false} />);
+    expect(wrapper.find('.DayPicker-NavButton--prev')).toHaveClassName(
+      '.DayPicker-NavButton--interactionDisabled'
+    );
+  });
+  it('should disable interaction with the next button for RTL', () => {
+    const wrapper = shallow(<Navbar dir="rtl" showPreviousButton={false} />);
+    expect(wrapper.find('.DayPicker-NavButton--next')).toHaveClassName(
+      '.DayPicker-NavButton--interactionDisabled'
+    );
+  });
   it('should call `onNextClick` when clicking the next button', () => {
     const handleNextClick = jest.fn();
     const wrapper = shallow(<Navbar onNextClick={handleNextClick} />);