Upgrade to React 16 (#508)

Author: Marc-Andre-Rivet

.circleci/config.yml

@@ -27,7 +27,7 @@ jobs:
                 name: Install dependencies (dash)
                 command: |
                     git clone [email protected]:plotly/dash.git
-                    git clone [email protected]:plotly/dash-renderer.git
+                    git clone -b react-16 [email protected]:plotly/dash-renderer.git
                     git clone [email protected]:plotly/dash-html-components.git
                     git clone [email protected]:plotly/dash-table.git
                     . venv/bin/activate

CHANGELOG.md

@@ -6,6 +6,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - `extendData` prop for `Graph` component. This feeds `Plotly.extendTraces` for incremental data updates. [#461](https://github.com/plotly/dash-core-components/pull/461)
 
+### Changed
+[#508](https://github.com/plotly/dash-core-components/pull/508)
+- Upgrade from React 15.4.2 to 16.8.6
+- Upgrade from react-date 12.3.0 to 20.1.0
+
 ### Fixed
 - Fix unnecessary `loading_state` prop for `Input` component. [#498](https://github.com/plotly/dash-core-components/issues/498)
 - Ensure `DatePickerSingle` callbacks fire with cleared dates. [#511](https://github.com/plotly/dash-core-components/pull/511)

dev-requirements.txt

@@ -1,6 +1,5 @@
 percy
 selenium
 pandas
-dash_table_experiments
 xlrd
 flake8

package.json

@@ -41,7 +41,7 @@
     "ramda": "^0.24.1",
     "rc-slider": "^8.3.1",
     "react-addons-shallow-compare": "^15.6.0",
-    "react-dates": "^12.3.0",
+    "react-dates": "^20.1.0",
     "react-docgen": "^2.21.0",
     "react-dropzone": "^4.1.2",
     "react-markdown": "^4.0.6",
@@ -70,17 +70,16 @@
     "jest": "^24.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.14.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
-    "react-dot-fragment": "^0.2.8",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-serve": "^2.0.3"
   },
   "peerDependencies": {
-    "react": "^15.6.0 || ^16.0.0",
-    "react-dom": "^15.6.0 || ^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   }
 }

src/components/DatePickerRange.react.js

@@ -1,6 +1,6 @@
+import 'react-dates/initialize';
 import {DateRangePicker} from 'react-dates';
 import PropTypes from 'prop-types';
-import R from 'ramda';
 import React, {Component} from 'react';
 
 import convertToMoment from '../utils/convertToMoment';
@@ -51,18 +51,19 @@ export default class DatePickerRange extends Component {
     }
     onDatesChange({startDate: start_date, endDate: end_date}) {
         const {setProps, updatemode} = this.props;
+
         const old_start_date = this.state.start_date;
         const old_end_date = this.state.end_date;
-        const newState = {};
-        if (setProps && start_date !== null && start_date !== old_start_date) {
+
+        this.setState({start_date, end_date});
+
+        if (start_date && !start_date.isSame(old_start_date)) {
             if (updatemode === 'singledate') {
                 setProps({start_date: start_date.format('YYYY-MM-DD')});
             }
         }
 
-        newState.start_date = start_date;
-
-        if (setProps && end_date !== null && end_date !== old_end_date) {
+        if (end_date && !end_date.isSame(old_end_date)) {
             if (updatemode === 'singledate') {
                 setProps({end_date: end_date.format('YYYY-MM-DD')});
             } else if (updatemode === 'bothdates') {
@@ -72,22 +73,14 @@ export default class DatePickerRange extends Component {
                 });
             }
         }
-        newState.end_date = end_date;
-
-        this.setState(newState);
     }
 
     isOutsideRange(date) {
         const {min_date_allowed, max_date_allowed} = this.state;
-        const notUndefined = R.complement(
-            R.pipe(
-                R.type,
-                R.equals('Undefined')
-            )
-        );
+
         return (
-            (notUndefined(min_date_allowed) && date < min_date_allowed) ||
-            (notUndefined(max_date_allowed) && date >= max_date_allowed)
+            (min_date_allowed && date.isBefore(min_date_allowed)) ||
+            (max_date_allowed && date.isAfter(max_date_allowed))
         );
     }
 
@@ -121,6 +114,8 @@ export default class DatePickerRange extends Component {
             id,
             style,
             className,
+            start_date_id,
+            end_date_id,
         } = this.props;
 
         const verticalFlag = calendar_orientation !== 'vertical';
@@ -178,6 +173,8 @@ export default class DatePickerRange extends Component {
                         with_full_screen_portal && verticalFlag
                     }
                     withPortal={with_portal && verticalFlag}
+                    startDateId={start_date_id}
+                    endDateId={end_date_id}
                 />
             </div>
         );
@@ -194,6 +191,9 @@ DatePickerRange.propTypes = {
      */
     start_date: PropTypes.string,
 
+    start_date_id: PropTypes.string,
+    end_date_id: PropTypes.string,
+
     /**
      * Specifies the ending date for the component.
      * Accepts datetime.datetime objects or strings

src/components/DatePickerSingle.react.js

@@ -1,7 +1,8 @@
+import 'react-dates/initialize';
+
 import {SingleDatePicker} from 'react-dates';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import R from 'ramda';
 import React, {Component} from 'react';
 
 import convertToMoment from '../utils/convertToMoment';
@@ -53,25 +54,18 @@ export default class DatePickerSingle extends Component {
 
     isOutsideRange(date) {
         const {min_date_allowed, max_date_allowed} = this.state;
-        const notUndefined = R.complement(
-            R.pipe(
-                R.type,
-                R.equals('Undefined')
-            )
-        );
+
         return (
-            (notUndefined(min_date_allowed) && date < min_date_allowed) ||
-            (notUndefined(max_date_allowed) && date >= max_date_allowed)
+            (min_date_allowed && date.isBefore(min_date_allowed)) ||
+            (max_date_allowed && date.isAfter(max_date_allowed))
         );
     }
 
     onDateChange(date) {
         const {setProps} = this.props;
-        if (setProps) {
-            setProps({date: date ? date.format('YYYY-MM-DD') : null});
-        } else {
-            this.setState({date});
-        }
+
+        this.setState({date});
+        setProps({date: date ? date.format('YYYY-MM-DD') : null});
     }
 
     render() {

src/components/Tab.react.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
-import Fragment from 'react-dot-fragment';
 
 const Tab = ({children}) => <Fragment>{children}</Fragment>;