Merge pull request #1160 from airbnb/amh-make-nav-optional

make nav buttons optional
react-dates · May 14, 2018 · dce2fc4 · dce2fc4
2 parents 4e2db9d + e6c7872
commit dce2fc4
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 2 deletions.
diff --git a/examples/DayPickerRangeControllerWrapper.jsx b/examples/DayPickerRangeControllerWrapper.jsx
@@ -130,7 +130,7 @@ class DayPickerRangeControllerWrapper extends React.Component {
     const endDateString = endDate && endDate.format('YYYY-MM-DD');
 
     return (
-      <div>
+      <div style={{ height: '100%' }}>
         {showInputs &&
           <div style={{ marginBottom: 16 }}>
             <input type="text" name="start date" value={startDateString} readOnly />

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -71,6 +71,7 @@ const propTypes = forbidExtraProps({
   // navigation props
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  noNavButtons: PropTypes.bool,
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
   onMultiplyScrollableMonths: PropTypes.func, // VERTICAL_SCROLLABLE daypickers only
@@ -122,6 +123,7 @@ export const defaultProps = {
   // navigation props
   navPrev: null,
   navNext: null,
+  noNavButtons: false,
   onPrevMonthClick() {},
   onNextMonthClick() {},
   onMultiplyScrollableMonths() {},
@@ -639,11 +641,16 @@ class DayPicker extends React.Component {
     const {
       navPrev,
       navNext,
+      noNavButtons,
       orientation,
       phrases,
       isRTL,
     } = this.props;
 
+    if (noNavButtons) {
+      return null;
+    }
+
     let onNextMonthClick;
     if (orientation === VERTICAL_SCROLLABLE) {
       onNextMonthClick = this.multiplyScrollableMonths;

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
@@ -72,6 +72,7 @@ const propTypes = forbidExtraProps({
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
+  noNavButtons: PropTypes.bool,
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
@@ -128,6 +129,7 @@ const defaultProps = {
 
   navPrev: null,
   navNext: null,
+  noNavButtons: false,
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
@@ -990,6 +992,7 @@ export default class DayPickerRangeController extends React.Component {
       renderMonth,
       navPrev,
       navNext,
+      noNavButtons,
       onOutsideClick,
       withPortal,
       enableOutsideDays,
@@ -1037,6 +1040,7 @@ export default class DayPickerRangeController extends React.Component {
         onOutsideClick={onOutsideClick}
         navPrev={navPrev}
         navNext={navNext}
+        noNavButtons={noNavButtons}
         renderCalendarDay={renderCalendarDay}
         renderDayContents={renderDayContents}
         renderCalendarInfo={renderCalendarInfo}

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
@@ -7,7 +7,7 @@ import InfoPanelDecorator, { monospace } from './InfoPanelDecorator';
 import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 
-import { VERTICAL_ORIENTATION } from '../src/constants';
+import { VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
 
 import DayPickerRangeControllerWrapper from '../examples/DayPickerRangeControllerWrapper';
 
@@ -164,6 +164,18 @@ storiesOf('DayPickerRangeController', module)
       orientation={VERTICAL_ORIENTATION}
     />
   ))
+  .addWithInfo('vertical scrollable', () => (
+    <div style={{ height: 300 }}>
+      <DayPickerRangeControllerWrapper
+        onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+        onPrevMonthClick={action('DayPickerRangeController::onPrevMonthClick')}
+        onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
+        orientation={VERTICAL_SCROLLABLE}
+        numberOfMonths={6}
+        verticalHeight={800}
+      />
+    </div>
+  ))
   .addWithInfo('with custom month navigation', () => (
     <DayPickerRangeControllerWrapper
       onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
@@ -286,4 +298,10 @@ storiesOf('DayPickerRangeController', module)
       onNextMonthClick={action('DayPickerRangeController::onNextMonthClick')}
       verticalBorderSpacing={16}
     />
+  ))
+  .addWithInfo('with no nav buttons', () => (
+    <DayPickerRangeControllerWrapper
+      onOutsideClick={action('DayPickerRangeController::onOutsideClick')}
+      noNavButtons
+    />
   ));
diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx
@@ -7,6 +7,7 @@ import { shallow } from 'enzyme';
 import DayPickerRangeController from '../../src/components/DayPickerRangeController';
 
 import DayPicker from '../../src/components/DayPicker';
+import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 
 import toISODateString from '../../src/utils/toISODateString';
 import toISOMonthString from '../../src/utils/toISOMonthString';
@@ -3215,5 +3216,17 @@ describe('DayPickerRangeController', () => {
         expect(wrapper.instance().isLastDayOfWeek(moment().startOf('week').add(1, 'day'))).to.equal(false);
       });
     });
+
+    describe('noNavButtons prop', () => {
+      it('renders navigation button', () => {
+        const wrapper = shallow(<DayPickerRangeController />).dive().dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(1);
+      });
+
+      it('does not render navigation button when noNavButtons prop applied', () => {
+        const wrapper = shallow(<DayPickerRangeController noNavButtons />).dive().dive();
+        expect(wrapper.find(DayPickerNavigation)).to.have.lengthOf(0);
+      });
+    });
   });
 });