From c9a3c6f00fbd7ee8b8f9889888b3efa0843fa1db Mon Sep 17 00:00:00 2001 From: Nicole Kinser Date: Mon, 13 Jan 2020 17:24:40 -0800 Subject: [PATCH 1/2] Fix logic for apply default navigation button styling --- src/components/DayPickerNavigation.jsx | 4 +- stories/DayPickerRangeController.js | 62 ++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 2 deletions(-) diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx index 0cbb1ce13e..df1f28b30c 100644 --- 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) { 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; diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js index e89e2d77c4..7d5f2def3c 100644 --- 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 ( + + ); +} + +function renderNavNextButtonForVerticalScrollable(buttonProps) { + const { + ariaLabel, + disabled, + onClick, + onKeyUp, + onMouseUp, + } = buttonProps; + + return ( + + ); +} + function renderKeyboardShortcutsButton(buttonProps) { const { ref, onClick, ariaLabel } = buttonProps; @@ -462,6 +510,20 @@ storiesOf('DayPickerRangeController', module) /> ))) + .add('vertical scrollable with custom rendered month navigation', withInfo()(() => ( +
+ +
+ ))) .add('with custom month navigation icons', withInfo()(() => ( Date: Tue, 14 Jan 2020 12:15:38 -0800 Subject: [PATCH 2/2] regression tests --- src/components/DayPickerNavigation.jsx | 4 +- stories/DayPickerRangeController.js | 4 +- test/components/DayPickerNavigation_spec.jsx | 62 ++++++++++++++++++++ 3 files changed, 66 insertions(+), 4 deletions(-) diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx index df1f28b30c..f7fb91f65b 100644 --- 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 && !renderNavPrevButton) { + 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 && !renderNavNextButton) { + if (!navNextIcon && !renderNavNextButton && showNavNextButton) { navNextTabIndex = { tabIndex: '0' }; isDefaultNavNext = true; let Icon = isVertical ? ChevronDown : RightArrow; diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js index 7d5f2def3c..80f8497029 100644 --- a/stories/DayPickerRangeController.js +++ b/stories/DayPickerRangeController.js @@ -152,7 +152,7 @@ function renderNavNextButton(buttonProps) { style={{ position: 'absolute', top: 23, right: 22 }} type="button" > - Next › + Next ); } @@ -176,7 +176,7 @@ function renderNavPrevButtonForVerticalScrollable(buttonProps) { style={{ width: '100%', textAlign: 'center' }} type="button" > - ‹ Prev + Prev ); } diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx index f15f358c75..489b0754ab 100644 --- 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(); + const renderNavNextButtonStub = sinon.stub().returns(); + const wrapper = shallow( + , + ).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(); + const wrapper = shallow( + , + ).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(); + const wrapper = shallow( + , + ).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( + , + ).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', () => {