Upgrade react-day-picker to v7 (#2055)

* Upgrade react-day-picker to v7 * Fix all types and imports for react-day-picker * Fix types, imports and props in tests ✅ * Whitelist submodule imports and fix linting errors * Fix showOutsideDays spec by moving it above the spread of passed dayPickerProps * Add class to hide arrows on single month and update spec ✅ * Fix the spec verifying the previous arrow is hidden * Fix default import and remove useless asserts in specs
palantir · Feb 1, 2018 · dde2d32 · dde2d32 · blueprint-bot · Feb 1, 2018
1 parent a45b9ed
commit dde2d32
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 59 deletions.
diff --git a/packages/datetime/package.json b/packages/datetime/package.json
@@ -33,7 +33,7 @@
     "@blueprintjs/core": "^2.0.0-beta.3",
     "classnames": "^2.2",
     "moment": "^2.14.1",
-    "react-day-picker": "^5.3.0",
+    "react-day-picker": "^7.0.7",
     "tslib": "^1.5.0"
   },
   "devDependencies": {

diff --git a/packages/datetime/src/_daterangepicker.scss b/packages/datetime/src/_daterangepicker.scss
@@ -14,6 +14,10 @@
     margin-right: $pt-grid-size;
   }
 
+  .DayPicker-NavButton--interactionDisabled {
+    display: none;
+  }
+
   .pt-daterangepicker-shortcuts + .DayPicker {
     border-left: 1px solid $pt-divider-black;
     min-width: $datepicker-min-width + $pt-grid-size;

diff --git a/packages/datetime/src/dateInput.tsx b/packages/datetime/src/dateInput.tsx
@@ -7,7 +7,7 @@
 import * as classNames from "classnames";
 import * as moment from "moment";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { DayPickerProps } from "react-day-picker/types/props";
 
 import {
     AbstractPureComponent,
@@ -60,7 +60,7 @@ export interface IDateInputProps extends IDatePickerBaseProps, IProps {
      * `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
      * `initialMonth`), `toMonth` (use `maxDate`).
      */
-    dayPickerProps?: ReactDayPicker.Props;
+    dayPickerProps?: DayPickerProps;
 
     /**
      * Whether the date input is non-interactive.

diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
@@ -7,7 +7,9 @@
 import { AbstractPureComponent, Button, IProps, Utils } from "@blueprintjs/core";
 import * as classNames from "classnames";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import ReactDayPicker from "react-day-picker";
+import { DayModifiers } from "react-day-picker/types/common";
+import { CaptionElementProps, DayPickerProps } from "react-day-picker/types/props";
 
 import * as Classes from "./common/classes";
 import * as DateUtils from "./common/dateUtils";
@@ -31,7 +33,7 @@ export interface IDatePickerProps extends IDatePickerBaseProps, IProps {
      * `canChangeMonth`, `captionElement`, `fromMonth` (use `minDate`), `month` (use
      * `initialMonth`), `toMonth` (use `maxDate`).
      */
-    dayPickerProps?: ReactDayPicker.Props;
+    dayPickerProps?: DayPickerProps;
 
     /**
      * Initial day the calendar will display as selected.
@@ -132,7 +134,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         return (
             <div className={classNames(Classes.DATEPICKER, className)}>
                 <ReactDayPicker
-                    enableOutsideDays={true}
+                    showOutsideDays={true}
                     locale={locale}
                     localeUtils={localeUtils}
                     modifiers={modifiers}
@@ -198,7 +200,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         return Array.isArray(disabledDays) ? [this.disabledDays, ...disabledDays] : [this.disabledDays, disabledDays];
     };
 
-    private renderCaption = (props: ReactDayPicker.CaptionElementProps) => (
+    private renderCaption = (props: CaptionElementProps) => (
         <DatePickerCaption
             {...props}
             maxDate={this.props.maxDate}
@@ -226,11 +228,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         );
     }
 
-    private handleDayClick = (
-        day: Date,
-        modifiers: ReactDayPicker.DayModifiers,
-        e: React.MouseEvent<HTMLDivElement>,
-    ) => {
+    private handleDayClick = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {
         Utils.safeInvoke(this.props.dayPickerProps.onDayClick, day, modifiers, e);
 
         let newValue = day;

diff --git a/packages/datetime/src/datePickerCaption.tsx b/packages/datetime/src/datePickerCaption.tsx
@@ -6,12 +6,12 @@
 
 import { Icon, Utils as BlueprintUtils } from "@blueprintjs/core";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { CaptionElementProps } from "react-day-picker/types/props";
 
 import * as Classes from "./common/classes";
 import * as Utils from "./common/utils";
 
-export interface IDatePickerCaptionProps extends ReactDayPicker.CaptionElementProps {
+export interface IDatePickerCaptionProps extends CaptionElementProps {
     maxDate: Date;
     minDate: Date;
     onMonthChange?: (month: number) => void;

diff --git a/packages/datetime/src/datePickerCore.tsx b/packages/datetime/src/datePickerCore.tsx
@@ -4,7 +4,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { LocaleUtils } from "react-day-picker";
+import { LocaleUtils } from "react-day-picker/types/utils";
 import { Months } from "./common/months";
 
 // DatePicker supports a simpler set of modifiers (for now).

diff --git a/packages/datetime/src/dateRangeInput.tsx b/packages/datetime/src/dateRangeInput.tsx
@@ -7,7 +7,7 @@
 import * as classNames from "classnames";
 import * as moment from "moment";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import { DayPickerProps } from "react-day-picker/types/props";
 
 import {
     AbstractPureComponent,
@@ -71,7 +71,7 @@ export interface IDateRangeInputProps extends IDatePickerBaseProps, IProps {
      * `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use
      * `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
      */
-    dayPickerProps?: ReactDayPicker.Props;
+    dayPickerProps?: DayPickerProps;
 
     /**
      * The default date range to be used in the component when uncontrolled.

diff --git a/packages/datetime/src/dateRangePicker.tsx b/packages/datetime/src/dateRangePicker.tsx
@@ -7,7 +7,9 @@
 import { AbstractPureComponent, Classes, IProps, Menu, MenuItem, Utils } from "@blueprintjs/core";
 import * as classNames from "classnames";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import ReactDayPicker from "react-day-picker";
+import { DayModifiers } from "react-day-picker/types/common";
+import { CaptionElementProps, DayPickerProps } from "react-day-picker/types/props";
 
 import * as DateClasses from "./common/classes";
 import * as DateUtils from "./common/dateUtils";
@@ -65,7 +67,7 @@ export interface IDateRangePickerProps extends IDatePickerBaseProps, IProps {
      * `canChangeMonth`, `captionElement`, `numberOfMonths`, `fromMonth` (use
      * `minDate`), `month` (use `initialMonth`), `toMonth` (use `maxDate`).
      */
-    dayPickerProps?: ReactDayPicker.Props;
+    dayPickerProps?: DayPickerProps;
 
     /**
      * Initial `DateRange` the calendar will display as selected.
@@ -225,11 +227,11 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         const { leftView, rightView } = this.state;
         const disabledDays = this.getDisabledDaysModifier();
 
-        const dayPickerBaseProps: ReactDayPicker.Props = {
-            enableOutsideDays: true,
+        const dayPickerBaseProps: DayPickerProps = {
             locale,
             localeUtils,
             modifiers,
+            showOutsideDays: true,
             ...dayPickerProps,
             disabledDays,
             onDayClick: this.handleDayClick,
@@ -243,6 +245,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
                 [DateClasses.DATERANGEPICKER_CONTIGUOUS]: contiguousCalendarMonths,
                 [DateClasses.DATERANGEPICKER_SINGLE_MONTH]: isShowingOneMonth,
             });
+
             // use the left DayPicker when we only need one
             return (
                 <div className={classes}>
@@ -363,7 +366,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         return <Menu className={DateClasses.DATERANGEPICKER_SHORTCUTS}>{shortcutElements}</Menu>;
     }
 
-    private renderSingleCaption = (captionProps: ReactDayPicker.CaptionElementProps) => (
+    private renderSingleCaption = (captionProps: CaptionElementProps) => (
         <DatePickerCaption
             {...captionProps}
             maxDate={this.props.maxDate}
@@ -374,7 +377,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         />
     );
 
-    private renderLeftCaption = (captionProps: ReactDayPicker.CaptionElementProps) => (
+    private renderLeftCaption = (captionProps: CaptionElementProps) => (
         <DatePickerCaption
             {...captionProps}
             maxDate={DateUtils.getDatePreviousMonth(this.props.maxDate)}
@@ -385,7 +388,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         />
     );
 
-    private renderRightCaption = (captionProps: ReactDayPicker.CaptionElementProps) => (
+    private renderRightCaption = (captionProps: CaptionElementProps) => (
         <DatePickerCaption
             {...captionProps}
             maxDate={this.props.maxDate}
@@ -396,11 +399,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         />
     );
 
-    private handleDayMouseEnter = (
-        day: Date,
-        modifiers: ReactDayPicker.DayModifiers,
-        e: React.MouseEvent<HTMLDivElement>,
-    ) => {
+    private handleDayMouseEnter = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {
         Utils.safeInvoke(this.props.dayPickerProps.onDayMouseEnter, day, modifiers, e);
 
         if (modifiers.disabled) {
@@ -416,11 +415,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         Utils.safeInvoke(this.props.onHoverChange, dateRange, day, boundary);
     };
 
-    private handleDayMouseLeave = (
-        day: Date,
-        modifiers: ReactDayPicker.DayModifiers,
-        e: React.MouseEvent<HTMLDivElement>,
-    ) => {
+    private handleDayMouseLeave = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {
         Utils.safeInvoke(this.props.dayPickerProps.onDayMouseLeave, day, modifiers, e);
         if (modifiers.disabled) {
             return;
@@ -429,11 +424,7 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         Utils.safeInvoke(this.props.onHoverChange, undefined, day, undefined);
     };
 
-    private handleDayClick = (
-        day: Date,
-        modifiers: ReactDayPicker.DayModifiers,
-        e: React.MouseEvent<HTMLDivElement>,
-    ) => {
+    private handleDayClick = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {
         Utils.safeInvoke(this.props.dayPickerProps.onDayClick, day, modifiers, e);
 
         if (modifiers.disabled) {

diff --git a/packages/datetime/src/index.ts b/packages/datetime/src/index.ts
@@ -7,7 +7,9 @@
 import * as classes from "./common/classes";
 
 // re-exporting these symbols to preserve compatility
-import { DayModifiers as IDatePickerDayModifiers, LocaleUtils as IDatePickerLocaleUtils } from "react-day-picker";
+import { DayModifiers as IDatePickerDayModifiers } from "react-day-picker/types/common";
+import { LocaleUtils as IDatePickerLocaleUtils } from "react-day-picker/types/utils";
+
 export { IDatePickerLocaleUtils, IDatePickerDayModifiers };
 
 export const Classes = classes;

diff --git a/packages/datetime/test/datePickerCaptionTests.tsx b/packages/datetime/test/datePickerCaptionTests.tsx
@@ -9,7 +9,7 @@ import { mount } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 
-import { ClassNames } from "react-day-picker";
+import { ClassNames } from "react-day-picker/types/common";
 import { DatePickerCaption, IDatePickerCaptionProps } from "../src/datePickerCaption";
 import { Classes, IDatePickerLocaleUtils } from "../src/index";
 

diff --git a/packages/datetime/test/datePickerTests.tsx b/packages/datetime/test/datePickerTests.tsx
@@ -7,7 +7,7 @@
 import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
-import { LocaleUtils } from "react-day-picker";
+import ReactDayPicker from "react-day-picker";
 import * as sinon from "sinon";
 
 import { Button } from "@blueprintjs/core";
@@ -49,7 +49,7 @@ describe("<DatePicker>", () => {
         it("doesn't show outside days if enableOutsideDays=false", () => {
             const defaultValue = new Date(2017, Months.SEPTEMBER, 1, 12);
             const wrapper = mount(
-                <DatePicker defaultValue={defaultValue} dayPickerProps={{ enableOutsideDays: false }} />,
+                <DatePicker defaultValue={defaultValue} dayPickerProps={{ showOutsideDays: false }} />,
             );
             const days = wrapper.find("Day");
 
@@ -101,7 +101,7 @@ describe("<DatePicker>", () => {
                 blueprint: () => true,
             };
             const blueprintLocaleUtils = {
-                ...LocaleUtils,
+                ...ReactDayPicker.LocaleUtils,
                 formatDay: () => "b",
             };
             const blueprintProps: IDatePickerProps = {
@@ -114,7 +114,7 @@ describe("<DatePicker>", () => {
                 dayPicker: () => true,
             };
             const dayPickerLocaleUtils = {
-                ...LocaleUtils,
+                ...ReactDayPicker.LocaleUtils,
                 formatDay: () => "d",
             };
             const dayPickerProps: IDatePickerProps = {

diff --git a/packages/datetime/test/dateRangePickerTests.tsx b/packages/datetime/test/dateRangePickerTests.tsx
@@ -8,7 +8,7 @@ import { Classes } from "@blueprintjs/core";
 import { assert } from "chai";
 import { mount, ReactWrapper } from "enzyme";
 import * as React from "react";
-import * as ReactDayPicker from "react-day-picker";
+import ReactDayPicker from "react-day-picker";
 import * as ReactDOM from "react-dom";
 import * as TestUtils from "react-dom/test-utils";
 import * as sinon from "sinon";
@@ -79,10 +79,10 @@ describe("<DateRangePicker>", () => {
             assertDatesEqual(new Date(firstDay.prop("day")), firstDayInView);
         });
 
-        it("doesn't show outside days if enableOutsideDays=false", () => {
+        it("doesn't show outside days if showOutsideDays=false", () => {
             const defaultValue = [new Date(2017, Months.SEPTEMBER, 1, 12), null] as DateRange;
             const { leftView, rightView } = wrap(
-                <DateRangePicker defaultValue={defaultValue} dayPickerProps={{ enableOutsideDays: false }} />,
+                <DateRangePicker defaultValue={defaultValue} dayPickerProps={{ showOutsideDays: false }} />,
             );
             const leftDays = leftView.find("Day");
             const rightDays = rightView.find("Day");
@@ -406,8 +406,8 @@ describe("<DateRangePicker>", () => {
 
             renderDateRangePicker({ contiguousCalendarMonths, maxDate, minDate });
             assert.lengthOf(document.getElementsByClassName("DayPicker"), 1);
-            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--prev"), 0);
-            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--next"), 0);
+            // react-day-picker still renders the navigation but with a interaction disabled class
+            assert.lengthOf(document.getElementsByClassName("DayPicker-NavButton--interactionDisabled"), 2);
         });
 
         it("left calendar is bound between minDate and (maxDate - 1 month)", () => {
@@ -638,13 +638,11 @@ describe("<DateRangePicker>", () => {
             const initialMonth = new Date(2015, Months.FEBRUARY, 5);
             renderDateRangePicker({ initialMonth, minDate });
             assert.strictEqual(dateRangePicker.state.leftView.getMonth(), Months.FEBRUARY);
-            let prevBtn = document.querySelectorAll(".DayPicker-NavButton--prev");
-            assert.lengthOf(prevBtn, 1);
+            assert.lengthOf(document.querySelectorAll(".DayPicker-NavButton--interactionDisabled"), 0);
 
-            TestUtils.Simulate.click(prevBtn[0]);
+            TestUtils.Simulate.click(document.querySelectorAll(".DayPicker-NavButton--prev")[0]);
             assert.strictEqual(dateRangePicker.state.leftView.getMonth(), Months.JANUARY);
-            prevBtn = document.querySelectorAll(".DayPicker-NavButton--prev");
-            assert.lengthOf(prevBtn, 0);
+            assert.lengthOf(document.querySelectorAll(".DayPicker-NavButton--interactionDisabled"), 1);
         });
 
         it("disables shortcuts that begin earlier than minDate", () => {

diff --git a/packages/tslint-config/index.js b/packages/tslint-config/index.js
@@ -52,6 +52,7 @@ module.exports = {
                 "react-dom",
                 "@blueprintjs/table/src",
                 "@blueprintjs/test-commons/bootstrap",
+                "react-day-picker/types"
             ]
         },
         "no-unnecessary-callback-wrapper": true,

diff --git a/yarn.lock b/yarn.lock
@@ -6528,11 +6528,12 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-day-picker@^5.3.0:
-  version "5.5.3"
-  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-5.5.3.tgz#d6a03bb0b15c6bb58629d749d8a7489cf6cfa52b"
+react-day-picker@^7.0.7:
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.0.7.tgz#4af30404ebb19125ff5f9f2d62e6204b4e68f119"
   dependencies:
-    prop-types "^15.5.10"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 react-dom@^16.2.0:
   version "16.2.0"