Migrated to react 16.0.0 (Hacker0x01#1047)

* Migrated to react 16.0.0 * Fix tests, configure Adapter for enzyme * fix linter errors * Fixed 'should track the currently hovered day' test * upgrade enzyme version * Moved enzyme adapter configuration to test/index.js * change simulate('click') to click() in tests based on refs * move moment and prop-types to peerDependency * Add missing installation of peerDependencies in CI * Updated readme * update travis.yml to install peerDependencies * Install peer dependencies before_script * Update enzyme and install peers in install step on travis * merge diff of Hacker0x01#1047 * fix some failing tests by looking up elements with .find rather than .ref * fix failing tests where Enzyme 3 requires calls to update() * remove yarn install in travis * Trigger yarn install in travis * Update npm before yarn install * Update npm in before_install * Add missing yarn install * updated dependencies * downgrade chai * Update dependencies * Installed missing dependencies * eslint fixes * Updated yarn.lock * eslint fix
avinet · Nov 12, 2017 · dc89f5b · dc89f5b
1 parent 3e0b061
commit dc89f5b
Show file tree

Hide file tree

Showing 74 changed files with 13,877 additions and 22,370 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,7 +1,7 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
+    "es6": true
   },
 
   "plugins": [
@@ -14,8 +14,8 @@
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
-      "jsx": true,
-    },
+      "jsx": true
+    }
   },
 
   "parser": "babel-eslint",
@@ -28,7 +28,7 @@
     "react/jsx-boolean-value": 2,
     "react/jsx-closing-bracket-location": [2, 'after-props'],
     "react/jsx-curly-spacing": [2, "never"],
-    "react/jsx-indent-props": 2,
+    "react/jsx-indent-props": [2, 2],
     "react/jsx-key": 2,
     "react/jsx-max-props-per-line": [2, { "maximum": 4 }],
     "react/jsx-no-duplicate-props": 2,
@@ -52,6 +52,6 @@
     "react/react-in-jsx-scope": 2,
     "react/self-closing-comp": 2,
     "react/sort-comp": 2,
-    "react/wrap-multilines": 0,
+    "react/wrap-multilines": 0
   }
 }
diff --git a/.travis.yml b/.travis.yml
@@ -11,9 +11,11 @@ addons:
     packages:
       - g++-4.8
 before_install:
+  - npm i -g npm@latest
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
-  - npm i -g npm@latest
+install:
+  - yarn install
 script:
   - yarn lint
   - yarn test

diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ The package can be installed via NPM:
 npm install react-datepicker --save
 ```
 
-You’ll need to install React and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example on how to use the Datepicker in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
+You’ll need to install React, PropTypes and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example on how to use the Datepicker in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
 
 ```js
 import React from 'react';

diff --git a/docs-site/bundle.js b/docs-site/bundle.js
diff --git a/docs-site/src/examples/children.jsx b/docs-site/src/examples/children.jsx
@@ -33,8 +33,8 @@ export default class Children extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}>
+          selected={this.state.startDate}
+          onChange={this.handleChange}>
           <div style={{color: 'red'}}>
             Don't forget to check the weather!
           </div>

diff --git a/docs-site/src/examples/clear_input.jsx b/docs-site/src/examples/clear_input.jsx
@@ -30,10 +30,10 @@ export default class ClearInput extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            isClearable
-            placeholderText="I have been cleared!" />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          isClearable
+          placeholderText="I have been cleared!" />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/configurePopper.jsx b/docs-site/src/examples/configurePopper.jsx
@@ -42,21 +42,21 @@ export default class ConfigurePopper extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            popperClassName="some-custom-class"
-            popperPlacement="top-end"
-            popperModifiers={{
-              offset: {
-                enabled: true,
-                offset: '5px, 10px'
-              },
-              preventOverflow: {
-                enabled: true,
-                escapeWithReference: false,
-                boundariesElement: 'viewport'
-              }
-            }}/>
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          popperClassName="some-custom-class"
+          popperPlacement="top-end"
+          popperModifiers={{
+            offset: {
+              enabled: true,
+              offset: '5px, 10px'
+            },
+            preventOverflow: {
+              enabled: true,
+              escapeWithReference: false,
+              boundariesElement: 'viewport'
+            }
+          }}/>
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/custom_calendar_class_name.jsx b/docs-site/src/examples/custom_calendar_class_name.jsx
@@ -29,9 +29,9 @@ export default class CustomCalendarClassName extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            calendarClassName="rasta-stripes"/>
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          calendarClassName="rasta-stripes"/>
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/custom_class_name.jsx b/docs-site/src/examples/custom_class_name.jsx
@@ -30,9 +30,9 @@ export default class CustomClassName extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            className="red-border" />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          className="red-border" />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/custom_date_format.jsx b/docs-site/src/examples/custom_date_format.jsx
@@ -21,16 +21,16 @@ export default class CustomDateFormat extends React.Component {
       <pre className="column example__code">
         <code className="jsx">
           {'<DatePicker'}<br />
-              <strong>{'dateFormat="YYYY/MM/DD"'}</strong><br />
-              {'selected={this.state.startDate}'}<br />
-              {'onChange={this.handleChange} />'}
+          <strong>{'dateFormat="YYYY/MM/DD"'}</strong><br />
+          {'selected={this.state.startDate}'}<br />
+          {'onChange={this.handleChange} />'}
         </code>
       </pre>
       <div className="column">
         <DatePicker
-            dateFormat="YYYY/MM/DD"
-            selected={this.state.startDate}
-            onChange={this.handleChange} />
+          dateFormat="YYYY/MM/DD"
+          selected={this.state.startDate}
+          onChange={this.handleChange} />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/custom_day_class_names.jsx b/docs-site/src/examples/custom_day_class_names.jsx
@@ -30,9 +30,9 @@ export default class CustomDayClassNames extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            dayClassName={date => date.date() < Math.random() * 31 ? 'random' : undefined} />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          dayClassName={date => date.date() < Math.random() * 31 ? 'random' : undefined} />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/custom_input.jsx b/docs-site/src/examples/custom_input.jsx
@@ -13,9 +13,9 @@ class ExampleCustomInput extends React.Component {
   render () {
     return (
       <button
-          className="example-custom-input"
-          onClick={this.props.onClick}>
-          {this.props.value}
+        className="example-custom-input"
+        onClick={this.props.onClick}>
+        {this.props.value}
       </button>
     )
   }
@@ -68,9 +68,9 @@ ExampleCustomInput.propTypes = {
       </pre>
       <div className="column">
         <DatePicker
-            customInput={<ExampleCustomInput />}
-            selected={this.state.startDate}
-            onChange={this.handleChange} />
+          customInput={<ExampleCustomInput />}
+          selected={this.state.startDate}
+          onChange={this.handleChange} />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/date_range.jsx b/docs-site/src/examples/date_range.jsx
@@ -52,17 +52,17 @@ export default class DateRange extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            selectsStart
-            startDate={this.state.startDate}
-            endDate={this.state.endDate}
-            onChange={this.handleChangeStart} />
+          selected={this.state.startDate}
+          selectsStart
+          startDate={this.state.startDate}
+          endDate={this.state.endDate}
+          onChange={this.handleChangeStart} />
         <DatePicker
-            selected={this.state.endDate}
-            selectsEnd
-            startDate={this.state.startDate}
-            endDate={this.state.endDate}
-            onChange={this.handleChangeEnd} />
+          selected={this.state.endDate}
+          selectsEnd
+          startDate={this.state.startDate}
+          endDate={this.state.endDate}
+          onChange={this.handleChangeEnd} />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/default.jsx b/docs-site/src/examples/default.jsx
@@ -29,8 +29,8 @@ export default class Default extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange} />
+          selected={this.state.startDate}
+          onChange={this.handleChange} />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/disabled.jsx b/docs-site/src/examples/disabled.jsx
@@ -19,19 +19,19 @@ export default class Disabled extends React.Component {
     return <div className="row">
       <pre className="column example__code">
         <code className="jsx">
-        {'<DatePicker'}<br />
-        {'  selected={this.state.startDate}'}<br />
-        {'  onChange={this.handleChange}'}<br />
-<strong>{'  disabled={true}'}</strong><br />
-        {'  placeholderText="This is disabled"'} />
+          {'<DatePicker'}<br />
+          {'  selected={this.state.startDate}'}<br />
+          {'  onChange={this.handleChange}'}<br />
+          <strong>{'  disabled={true}'}</strong><br />
+          {'  placeholderText="This is disabled"'} />
         </code>
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            disabled
-            placeholderText="This is disabled" />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          disabled
+          placeholderText="This is disabled" />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/disabled_keyboard_navigation.jsx b/docs-site/src/examples/disabled_keyboard_navigation.jsx
@@ -21,18 +21,18 @@ export default class DisabledKeyboardNavigation extends React.Component {
       <pre className="column example__code">
         <code className="jsx">
           {'<DatePicker'}<br />
-              {'selected={this.state.startDate}'}<br />
-              {'onChange={this.handleChange}'}<br />
-              <strong>{'disabledKeyboardNavigation'}</strong><br />
-              {'placeholderText="This has disabled keyboard navigation" />'}
+          {'selected={this.state.startDate}'}<br />
+          {'onChange={this.handleChange}'}<br />
+          <strong>{'disabledKeyboardNavigation'}</strong><br />
+          {'placeholderText="This has disabled keyboard navigation" />'}
         </code>
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            disabledKeyboardNavigation
-            placeholderText="This has disabled keyboard navigation" />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          disabledKeyboardNavigation
+          placeholderText="This has disabled keyboard navigation" />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/dont_close_onSelect.jsx b/docs-site/src/examples/dont_close_onSelect.jsx
@@ -30,9 +30,9 @@ export default class DontCloseOnSelect extends React.Component {
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            shouldCloseOnSelect={false} />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          shouldCloseOnSelect={false} />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/exclude_dates.jsx b/docs-site/src/examples/exclude_dates.jsx
@@ -17,19 +17,19 @@ export default class ExcludeDates extends React.Component {
     return <div className="row">
       <pre className="column example__code">
         <code className="jsx">
-        {'<DatePicker'}<br />
-        {'  selected={this.state.startDate}'}<br />
-        {'  onChange={this.handleChange}'}<br />
-<strong>{'  excludeDates={[moment(), moment().subtract(1, "days")]}'}</strong><br />
-        {'  placeholderText="Select a date other than today or yesterday" />'}
+          {'<DatePicker'}<br />
+          {'  selected={this.state.startDate}'}<br />
+          {'  onChange={this.handleChange}'}<br />
+          <strong>{'  excludeDates={[moment(), moment().subtract(1, "days")]}'}</strong><br />
+          {'  placeholderText="Select a date other than today or yesterday" />'}
         </code>
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            excludeDates={[moment(), moment().subtract(1, 'days')]}
-            placeholderText="Select a date other than today or yesterday" />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          excludeDates={[moment(), moment().subtract(1, 'days')]}
+          placeholderText="Select a date other than today or yesterday" />
       </div>
     </div>
   }

diff --git a/docs-site/src/examples/exclude_time_period.jsx b/docs-site/src/examples/exclude_time_period.jsx
@@ -17,24 +17,24 @@ export default class ExcludeTimePeriod extends React.Component {
     return <div className="row">
       <pre className="column example__code">
         <code className="jsx">
-        {'<DatePicker'}<br />
-        {'  selected={this.state.startDate}'}<br />
-        {'  onChange={this.handleChange}'}<br />
-        <strong>{'  showTimeSelect'}<br />
-        {'  minTime={moment().hours(17).minutes(0)}'}<br />
-        {'  maxTime={moment().hours(20).minutes(30)}'}<br />
-        {'  dateFormat="LLL"'}</strong><br />
-        {'/>'}
+          {'<DatePicker'}<br />
+          {'  selected={this.state.startDate}'}<br />
+          {'  onChange={this.handleChange}'}<br />
+          <strong>{'  showTimeSelect'}<br />
+            {'  minTime={moment().hours(17).minutes(0)}'}<br />
+            {'  maxTime={moment().hours(20).minutes(30)}'}<br />
+            {'  dateFormat="LLL"'}</strong><br />
+          {'/>'}
         </code>
       </pre>
       <div className="column">
         <DatePicker
-            selected={this.state.startDate}
-            onChange={this.handleChange}
-            showTimeSelect
-            minTime={moment().hours(17).minutes(0)}
-            maxTime={moment().hours(20).minutes(30)}
-            dateFormat="LLL" />
+          selected={this.state.startDate}
+          onChange={this.handleChange}
+          showTimeSelect
+          minTime={moment().hours(17).minutes(0)}
+          maxTime={moment().hours(20).minutes(30)}
+          dateFormat="LLL" />
       </div>
     </div>
   }