changes for single date picker

react-dates · Jan 13, 2020 · 4ca51e0 · 4ca51e0
1 parent 0718c79
commit 4ca51e0
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 54 deletions.
diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -679,6 +679,29 @@ class DayPicker extends React.PureComponent {
     this.transitionContainer = ref;
   }
 
+  getNextScrollableMonths(e) {
+    const { onGetNextScrollableMonths } = this.props;
+    if (e) e.preventDefault();
+
+    if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
+
+    this.setState(({ scrollableMonthMultiple }) => ({
+      scrollableMonthMultiple: scrollableMonthMultiple + 1,
+    }));
+  }
+
+  getPrevScrollableMonths(e) {
+    const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
+    if (e) e.preventDefault();
+
+    if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
+
+    this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
+      currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
+      scrollableMonthMultiple: scrollableMonthMultiple + 1,
+    }));
+  }
+
   maybeTransitionNextMonth(newFocusedDate) {
     const { numberOfMonths } = this.props;
     const { currentMonth, focusedDate } = this.state;
@@ -709,29 +732,6 @@ class DayPicker extends React.PureComponent {
     return false;
   }
 
-  getNextScrollableMonths(e) {
-    const { onGetNextScrollableMonths } = this.props;
-    if (e) e.preventDefault();
-
-    if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
-
-    this.setState(({ scrollableMonthMultiple }) => ({
-      scrollableMonthMultiple: scrollableMonthMultiple + 1,
-    }));
-  }
-
-  getPrevScrollableMonths(e) {
-    const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
-    if (e) e.preventDefault();
-
-    if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
-
-    this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
-      currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
-      scrollableMonthMultiple: scrollableMonthMultiple + 1,
-    }));
-  }
-
   isHorizontal() {
     const { orientation } = this.props;
     return orientation === HORIZONTAL_ORIENTATION;
@@ -879,15 +879,13 @@ class DayPicker extends React.PureComponent {
       return null;
     }
 
-    const onPrevMonthClick =
-      orientation === VERTICAL_SCROLLABLE
-        ? this.getPrevScrollableMonths
-        : this.onPrevMonthClick;
+    const onPrevMonthClick = orientation === VERTICAL_SCROLLABLE
+      ? this.getPrevScrollableMonths
+      : this.onPrevMonthClick;
 
-    const onNextMonthClick =
-      orientation === VERTICAL_SCROLLABLE
-        ? this.getNextScrollableMonths
-        : this.onNextMonthClick;
+    const onNextMonthClick = orientation === VERTICAL_SCROLLABLE
+      ? this.getNextScrollableMonths
+      : this.onNextMonthClick;
 
     return (
       <DayPickerNavigation

diff --git a/src/components/DayPickerNavigation.jsx b/src/components/DayPickerNavigation.jsx
@@ -133,9 +133,7 @@ function DayPickerNavigation({
     );
   }
 
-  const isDefaultNav = isVerticalScrollable
-    ? isDefaultNavNext
-    : (isDefaultNavNext || isDefaultNavPrev);
+  const isDefaultNav = isDefaultNavNext || isDefaultNavPrev;
 
   return (
     <div
@@ -157,8 +155,8 @@ function DayPickerNavigation({
         hasInlineStyles && inlineStyles,
       )}
     >
-      {showNavPrevButton &&
-        (renderNavPrevButton ? (
+      {showNavPrevButton
+        && (renderNavPrevButton ? (
           renderNavPrevButton({
             ariaLabel: phrases.jumpToPrevMonth,
             disabled: disablePrev,
@@ -195,7 +193,8 @@ function DayPickerNavigation({
                 ...(isDefaultNavPrev ? [
                   styles.DayPickerNavigation_button__verticalDefault,
                   styles.DayPickerNavigation_prevButton__verticalDefault,
-                  isVerticalScrollable && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
+                  isVerticalScrollable
+                    && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
                 ] : []),
               ] : []),
             )}
@@ -216,25 +215,25 @@ function DayPickerNavigation({
           </div>
         ))}
 
-      {showNavNextButton &&
-        (renderNavNextButton ? (
+      {showNavNextButton
+        && (renderNavNextButton ? (
           renderNavNextButton({
             ariaLabel: phrases.jumpToNextMonth,
             disabled: disableNext,
             onClick: disableNext ? undefined : onNextMonthClick,
             onKeyUp: disableNext ? undefined : (e) => {
               const { key } = e;
               if (key === 'Enter' || key === ' ') {
-                onNextMonthClick(e)
-              };
+                onNextMonthClick(e);
+              }
             },
             onMouseUp: disableNext ? undefined : (e) => {
               e.currentTarget.blur();
             },
           })
         ) : (
           <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-            role='button'
+            role="button"
             {...navNextTabIndex}
             {...css(
               styles.DayPickerNavigation_button,
@@ -254,15 +253,15 @@ function DayPickerNavigation({
                 ...(isDefaultNavNext ? [
                   styles.DayPickerNavigation_button__verticalDefault,
                   styles.DayPickerNavigation_nextButton__verticalDefault,
-                  isVerticalScrollable &&
-                    styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
+                  isVerticalScrollable
+                    && styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
                 ] : []),
               ] : []),
             )}
             aria-disabled={disableNext ? true : undefined}
             aria-label={phrases.jumpToNextMonth}
             onClick={disableNext ? undefined : onNextMonthClick}
-            onKeyUp={ disableNext ? undefined : (e) => {
+            onKeyUp={disableNext ? undefined : (e) => {
               const { key } = e;
               if (key === 'Enter' || key === ' ') {
                 onNextMonthClick(e);

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
@@ -1011,7 +1011,9 @@ export default class DayPickerRangeController extends React.PureComponent {
     const { currentMonth, visibleDays } = this.state;
 
     const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
-    const newVisibleDays = getVisibleDays(firstPreviousMonth, numberOfMonths, enableOutsideDays, true);
+    const newVisibleDays = getVisibleDays(
+      firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
+    );
 
     this.setState({
       currentMonth: firstPreviousMonth.clone(),

diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx
@@ -194,7 +194,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     this.onNextMonthClick = this.onNextMonthClick.bind(this);
     this.onMonthChange = this.onMonthChange.bind(this);
     this.onYearChange = this.onYearChange.bind(this);
-    this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
+    this.onGetNextScrollableMonths = this.onGetNextScrollableMonths.bind(this);
+    this.onGetPrevScrollableMonths = this.onGetPrevScrollableMonths.bind(this);
     this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
   }
 
@@ -461,7 +462,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     });
   }
 
-  onMultiplyScrollableMonths() {
+  onGetNextScrollableMonths() {
     const { numberOfMonths, enableOutsideDays } = this.props;
     const { currentMonth, visibleDays } = this.state;
 
@@ -477,6 +478,24 @@ export default class DayPickerSingleDateController extends React.PureComponent {
     });
   }
 
+  onGetPrevScrollableMonths() {
+    const { numberOfMonths, enableOutsideDays } = this.props;
+    const { currentMonth, visibleDays } = this.state;
+
+    const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
+    const newVisibleDays = getVisibleDays(
+      firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
+    );
+
+    this.setState({
+      currentMonth: firstPreviousMonth.clone(),
+      visibleDays: {
+        ...visibleDays,
+        ...this.getModifiers(newVisibleDays),
+      },
+    });
+  }
+
   getFirstFocusableDay(newMonth) {
     const { date, numberOfMonths } = this.props;
 
@@ -632,7 +651,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
         onNextMonthClick={this.onNextMonthClick}
         onMonthChange={this.onMonthChange}
         onYearChange={this.onYearChange}
-        onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
+        onGetNextScrollableMonths={this.onGetNextScrollableMonths}
+        onGetPrevScrollableMonths={this.onGetPrevScrollableMonths}
         monthFormat={monthFormat}
         withPortal={withPortal}
         hidden={!focused}

diff --git a/stories/DayPickerRangeController.js b/stories/DayPickerRangeController.js
@@ -442,6 +442,23 @@ storiesOf('DayPickerRangeController', module)
             </span>
           </div>
         )}
+        navPrev={(
+          <div style={{ position: 'relative' }}>
+            <span
+              style={{
+                position: 'absolute',
+                top: 20,
+                left: 50,
+                fontSize: 24,
+                border: '1px solid gray',
+                width: 200,
+                padding: 10,
+              }}
+            >
+              Show More Months
+            </span>
+          </div>
+        )}
       />
     </div>
   )))

diff --git a/stories/DayPickerSingleDateController.js b/stories/DayPickerSingleDateController.js
@@ -10,7 +10,7 @@ import isSameDay from '../src/utils/isSameDay';
 import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
 import CustomizableCalendarDay, { defaultStyles, selectedStyles } from '../src/components/CustomizableCalendarDay';
 
-import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION } from '../src/constants';
+import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
 
 import DayPickerSingleDateControllerWrapper from '../examples/DayPickerSingleDateControllerWrapper';
 
@@ -220,6 +220,15 @@ storiesOf('DayPickerSingleDateController', module)
       orientation={VERTICAL_ORIENTATION}
     />
   )))
+  .add('verticalScrollable', withInfo()(() => (
+    <DayPickerSingleDateControllerWrapper
+      numberOfMonths={3}
+      onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
+      onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
+      onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
+      orientation={VERTICAL_SCROLLABLE}
+    />
+  )))
   .add('with custom month navigation icons', withInfo()(() => (
     <DayPickerSingleDateControllerWrapper
       onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}

diff --git a/test/components/DayPickerNavigation_spec.jsx b/test/components/DayPickerNavigation_spec.jsx
@@ -192,5 +192,39 @@ describe('DayPickerNavigation', () => {
       nextMonthButton.simulate('click');
       expect(onNextMonthStub).to.have.property('callCount', 0);
     });
+
+    it('props.onPrevMonthClick is triggered by custom prev month button key up', () => {
+      const onPrevMonthStub = sinon.stub();
+      const renderNavPrevButtonStub = sinon.stub().onCall(0).callsFake(({ onKeyUp }) => <button onKeyUp={onKeyUp} type="button">Prev</button>);
+      const prevMonthButton = shallow(<DayPickerNavigation
+        onPrevMonthClick={onPrevMonthStub}
+        renderNavNextButton={renderNavPrevButtonStub}
+      />).dive().find('button').at(0);
+      prevMonthButton.simulate('keyup', { key: 'Enter' });
+      expect(onPrevMonthStub).to.have.property('callCount', 1);
+      prevMonthButton.simulate('keyup', { key: ' ' });
+      expect(onPrevMonthStub).to.have.property('callCount', 2);
+    });
+
+    it('props.onNextMonthClick is triggered by custom next month button key up', () => {
+      const onNextMonthStub = sinon.stub();
+      const renderNavNextButtonStub = sinon.stub().onCall(0).callsFake(({ onClick, onKeyUp }) => <button onClick={onClick} onKeyUp={onKeyUp} type="button">Next</button>);
+      const nextMonthButton = shallow(<DayPickerNavigation
+        onNextMonthClick={onNextMonthStub}
+        renderNavNextButton={renderNavNextButtonStub}
+      />).dive().find('button').at(0);
+      nextMonthButton.simulate('click');
+      expect(onNextMonthStub).to.have.property('callCount', 1);
+      // const onNextMonthStub = sinon.stub();
+      // const renderNavNextButtonStub = sinon.stub().onCall(0).callsFake(({ onClick }) => <button onClick={onClick} type="button">Next</button>);
+      // const nextMonthButton = shallow(<DayPickerNavigation
+      //   onNextMonthClick={onNextMonthStub}
+      //   renderNavNextButton={renderNavNextButtonStub}
+      // />).dive().find('button').at(0);
+      nextMonthButton.simulate('keyup', { key: 'Enter' });
+      expect(onNextMonthStub).to.have.property('callCount', 2);
+      // nextMonthButton.simulate('keyup', { key: ' ' });
+      // expect(onNextMonthStub).to.have.property('callCount', 2);
+    });
   });
 });
diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx
@@ -1178,7 +1178,7 @@ describe('DayPickerSingleDateController', () => {
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
     });
 
-    it('return value now has modifier arg for day after multiplying number of months', () => {
+    it('return value now has modifier arg for day after getting next scrollable months', () => {
       const modifierToAdd = 'foo';
       const numberOfMonths = 2;
       const nextMonth = today.clone().add(numberOfMonths, 'month');
@@ -1197,10 +1197,34 @@ describe('DayPickerSingleDateController', () => {
       )).instance();
       let modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.not.contain(modifierToAdd);
-      wrapper.onMultiplyScrollableMonths();
+      wrapper.onGetNextScrollableMonths();
       modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
       expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
     });
+
+    it('return value now has modifier arg for day after getting previous scrollable months', () => {
+      const modifierToAdd = 'foo';
+      const numberOfMonths = 2;
+      const pastDateAfterMultiply = today.clone().subtract(numberOfMonths, 'months');
+      const monthISO = toISOMonthString(pastDateAfterMultiply);
+      const dayISO = toISODateString(pastDateAfterMultiply);
+      const updatedDays = {
+        [monthISO]: { [dayISO]: new Set(['bar', 'baz']) },
+      };
+      const wrapper = shallow((
+        <DayPickerSingleDateController
+          onDatesChange={sinon.stub()}
+          onFocusChange={sinon.stub()}
+          numberOfMonths={numberOfMonths}
+          orientation={VERTICAL_SCROLLABLE}
+        />
+      )).instance();
+      let modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
+      expect(Array.from(modifiers[monthISO][dayISO])).to.not.contain(modifierToAdd);
+      wrapper.onGetPrevScrollableMonths();
+      modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
+      expect(Array.from(modifiers[monthISO][dayISO])).to.contain(modifierToAdd);
+    });
   });
 
   describe('#deleteModifier', () => {

diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx
@@ -224,7 +224,6 @@ describe('DayPicker', () => {
       ).dive();
       expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
       const nav = wrapper.find(DayPickerNavigation).get(1);
-      console.log(nav);
       expect(nav.props.onNextMonthClick).to.equal(wrapper.instance().getNextScrollableMonths);
     });
 
@@ -235,7 +234,6 @@ describe('DayPicker', () => {
       ).dive();
       expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
       const nav = wrapper.find(DayPickerNavigation).get(0);
-      console.log(nav);
       expect(nav.props.onPrevMonthClick).to.equal(wrapper.instance().getPrevScrollableMonths);
     });
   });