Merge pull request #1898 from nkinser/nk--fix-nav-default-styles

Fix logic for applying default navigation button styling
react-dates · Jan 15, 2020 · 5a24a0b · 5a24a0b
2 parents 71b4e5d + 1057719
commit 5a24a0b
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 2 deletions.
diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
@@ -104,7 +104,7 @@ class DayPickerNavigation extends React.PureComponent {
     let navPrevTabIndex = {};
     let navNextTabIndex = {};
 
-    if (!navPrevIcon) {
+    if (!navPrevIcon && !renderNavPrevButton && showNavPrevButton) {
       navPrevTabIndex = { tabIndex: '0' };
       isDefaultNavPrev = true;
       let Icon = isVertical ? ChevronUp : LeftArrow;
@@ -122,7 +122,7 @@ class DayPickerNavigation extends React.PureComponent {
       );
     }
 
-    if (!navNextIcon) {
+    if (!navNextIcon && !renderNavNextButton && showNavNextButton) {
       navNextTabIndex = { tabIndex: '0' };
       isDefaultNavNext = true;
       let Icon = isVertical ? ChevronDown : RightArrow;

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
@@ -151,6 +151,54 @@ function renderNavNextButton(buttonProps) {
       onMouseUp={onMouseUp}
       style={{ position: 'absolute', top: 23, right: 22 }}
       type="button"
+    >
+      Next
+    </button>
+  );
+}
+
+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"
+    >
+      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>
@@ -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')}

diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
@@ -6,6 +6,7 @@ import { shallow } from 'enzyme';
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import RightArrow from '../../src/components/RightArrow';
 import LeftArrow from '../../src/components/LeftArrow';
+import { VERTICAL_ORIENTATION } from '../../src/constants';
 
 describe('DayPickerNavigation', () => {
   describe('#render', () => {
@@ -91,6 +92,67 @@ describe('DayPickerNavigation', () => {
       expect(wrapper.childAt(1).find('div[role="button"]')).to.have.lengthOf(0);
       expect(renderNavNextButtonStub).to.have.property('callCount', 1);
     });
+
+    it('does not render default styles when custom navigation is used', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const renderNavNextButtonStub = sinon.stub().returns(<button type="button">Next</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavNextButton={renderNavNextButtonStub}
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(0);
+    });
+
+    it('does render default styles when custom navigation is used for only one nav button', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(1);
+    });
+
+    it('does not render default styles when custom navigation is used for only button but the other nav button is not shown', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          showNavNextButton={false}
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(0);
+    });
+
+    it('renders default styles when default navigation is used', () => {
+      const wrapper = shallow(
+        <DayPickerNavigation
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(1);
+    });
   });
 
   describe('interactions', () => {