React 16.13 (#713)

Marc-Andre-Rivet · web-flow · commit 44003c62a548 · 2020-03-10T12:02:53.000-04:00
diff --git a/.flake8 b/.flake8
@@ -1,5 +1,5 @@
 [flake8]
-ignore = E203, E266, E501, E731, W503
+ignore = C901, E203, E266, E501, E731, W503
 max-line-length = 88
 max-complexity = 18
 select = B,C,E,F,W,T4
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Changed
+- [#713](https://github.com/plotly/dash-table/pull/713) Update from React 16.8.6 to 16.13.0
+
 ## [4.6.1] - 2020-02-27
 ### Added
 - [#711](https://github.com/plotly/dash-table/pull/711) Added R examples to package help
diff --git a/demo/index.html b/demo/index.html
@@ -5,8 +5,8 @@
     </head>
     <body>
         <div id='root'></div>
-        <script src='https://unpkg.com/react@16.8.6/umd/react.production.min.js'></script>
-        <script src='https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js'></script>
+        <script src='https://unpkg.com/react@16.13.0/umd/react.production.min.js'></script>
+        <script src='https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js'></script>
 
         <script src="./demo.js"></script>
     </body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "private::build:py": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json --r-prefix 'dash'",
     "private::host_js": "http-server ./dash_table -c-1 --silent",
     "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
-    "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table && black --check --exclude dash_table .",
+    "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table tests && black --check --exclude dash_table .",
     "private::wait_js": "wait-on http://localhost:8080",
     "private::opentests": "cypress open",
     "private::test.python": "python -m unittest tests/unit/format_test.py",
@@ -86,9 +86,9 @@
     "papaparse": "^5.1.1",
     "ramda": "^0.26.1",
     "raw-loader": "^3.1.0",
-    "react": "16.9.0",
+    "react": "16.13.0",
     "react-docgen": "^4.1.1",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.0",
     "react-select": "^1.3.0",
     "remarkable": "^2.0.0",
     "sheetclip": "^0.3.0",
diff --git a/src/core/components/IsolatedInput/index.tsx b/src/core/components/IsolatedInput/index.tsx
@@ -40,7 +40,7 @@ export default class IsolatedInput extends PureComponent<IProps, IState> {
         return this.props as PropsWithDefaults;
     }
 
-    componentWillReceiveProps(nextProps: IProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: IProps) {
         const { value } = this.props;
         const { value: nextValue } = nextProps;
 
diff --git a/src/dash-table/components/CellInput/index.tsx b/src/dash-table/components/CellInput/index.tsx
@@ -97,7 +97,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
         this.propagateChange();
     }
 
-    componentWillReceiveProps(nextProps: ICellProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: ICellProps) {
         const { value: nextValue } = nextProps;
 
         if (this.state.value !== nextValue) {
diff --git a/src/dash-table/components/ControlledTable/index.tsx b/src/dash-table/components/ControlledTable/index.tsx
@@ -115,6 +115,12 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
     }
 
     componentDidMount() {
+        // Fallback method for paste handling in Chrome
+        // when no input element has focused inside the table
+        window.addEventListener('resize', this.forceHandleResize);
+        document.addEventListener('mousedown', this.handleClick);
+        document.addEventListener('paste', this.handlePaste);
+
         const {
             active_cell,
             selected_cells,
@@ -132,25 +138,14 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
         this.handleResize();
     }
 
-    componentWillMount() {
-        // Fallback method for paste handling in Chrome
-        // when no input element has focused inside the table
-        window.addEventListener('resize', this.forceHandleResize);
-        document.addEventListener('mousedown', this.handleClick);
-        document.addEventListener('paste', this.handlePaste);
-    }
-
     componentWillUnmount() {
         window.removeEventListener('resize', this.forceHandleResize);
         document.removeEventListener('mousedown', this.handleClick);
         document.removeEventListener('paste', this.handlePaste);
     }
 
-    componentWillUpdate() {
-        this.updateStylesheet();
-    }
-
     componentDidUpdate() {
+        this.updateStylesheet();
         this.applyStyle();
         this.handleResize();
         this.handleDropdown();
diff --git a/src/dash-table/components/Table/index.tsx b/src/dash-table/components/Table/index.tsx
@@ -49,7 +49,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
         };
     }
 
-    componentWillReceiveProps(nextProps: SanitizedAndDerivedProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: SanitizedAndDerivedProps) {
         this.setState(state => {
             const { applyFocus: currentApplyFocus, workFilter: { map: currentMap, value } } = state;
 
diff --git a/src/dash-table/components/Tooltip/index.tsx b/src/dash-table/components/Tooltip/index.tsx
@@ -41,7 +41,7 @@ export default class Tooltip extends PureComponent<ITooltipProps, ITooltipState>
         };
     }
 
-    componentWillReceiveProps(nextProps: ITooltipProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: ITooltipProps) {
         const { delay, duration } = nextProps.tooltip;
 
         if (isEqual(
diff --git a/tests/integration/review_app/test_app_df_backend_paging.py b/tests/integration/review_app/test_app_df_backend_paging.py
@@ -204,9 +204,9 @@ def section_title(title):
 
     @app.callback(
         Output(IDS["table"], "data"),
-        [Input(IDS["table"], "page_current"), Input(IDS["table"], "page_size"),],
+        [Input(IDS["table"], "page_current"), Input(IDS["table"], "page_size")],
     )
-    def update_graph(page_current, page_size):
+    def update_data(page_current, page_size):
         return df.iloc[
             page_current * page_size : (page_current + 1) * page_size
         ].to_dict("rows")
@@ -243,7 +243,7 @@ def update_graph(page_current, page_size, sort_by):
             Input(IDS["table-multi-sorting"], "sort_by"),
         ],
     )
-    def update_graph(page_current, page_size, sort_by):
+    def update_multi_data(page_current, page_size, sort_by):
         # print(sort_by)
         if len(sort_by):
             dff = df.sort_values(
@@ -267,7 +267,7 @@ def update_graph(page_current, page_size, sort_by):
             Input(IDS["table-filtering"], "filter_query"),
         ],
     )
-    def update_graph(page_current, page_size, filter_query):
+    def updat_filtering_data(page_current, page_size, filter_query):
         # print(filter_query)
         filtering_expressions = filter_query.split(" && ")
         dff = df
@@ -298,7 +298,7 @@ def update_graph(page_current, page_size, filter_query):
             Input(IDS["table-sorting-filtering"], "filter_query"),
         ],
     )
-    def update_graph(page_current, page_size, sort_by, filter_query):
+    def update_sorting_filtering_data(page_current, page_size, sort_by, filter_query):
         filtering_expressions = filter_query.split(" && ")
         dff = df
         for filter_query in filtering_expressions:
@@ -367,7 +367,7 @@ def update_table(page_current, page_size, sort_by, filter_query):
         Output(IDS["table-paging-with-graph-container"], "children"),
         [Input(IDS["table-paging-with-graph"], "data")],
     )
-    def update_graph(rows):
+    def update_children(rows):
         dff = pd.DataFrame(rows)
         return html.Div(
             [
diff --git a/tests/integration/review_app/test_app_df_graph.py b/tests/integration/review_app/test_app_df_graph.py
@@ -10,6 +10,7 @@
 
 ID_PREFIX = "app_data_updating_graph"
 IDS = {"table": ID_PREFIX, "container": "{}-container".format(ID_PREFIX)}
+_TIMEOUT = 10
 
 
 def test_rapp002_df_graph(dash_duo):
@@ -149,4 +150,7 @@ def update_graph(rows, selected_rows):
 
     dash_duo.start_server(app)
     dash_duo.wait_for_element("#waitfor")
+
+    dash_duo.wait_for_element("#{}".format(IDS["table"]))
+
     dash_duo.percy_snapshot("rapp002 - loaded")
diff --git a/tests/selenium/test_markdown_copy_paste.py b/tests/selenium/test_markdown_copy_paste.py
@@ -22,7 +22,7 @@ def get_app():
         id="table",
         data=df[0:250],
         columns=[
-            {"id": "Complaint ID", "name": "Complaint ID", "presentation": "markdown",},
+            {"id": "Complaint ID", "name": "Complaint ID", "presentation": "markdown"},
             {"id": "Product", "name": "Product", "presentation": "markdown"},
             {"id": "Sub-product", "name": "Sub-product"},
             {"id": "Issue", "name": "Issue", "presentation": "markdown"},
diff --git a/tests/selenium/test_pagination.py b/tests/selenium/test_pagination.py
@@ -1,14 +1,11 @@
 import dash
-from dash.dependencies import Input, Output, State
+from dash.dependencies import Input, Output
 from dash.exceptions import PreventUpdate
 
-import dash_core_components as dcc
-import dash_html_components as html
 from dash_table import DataTable
 
 import pytest
 from selenium.webdriver.common.keys import Keys
-from selenium.webdriver.common.action_chains import ActionChains
 
 import math
 import pandas as pd
@@ -148,8 +145,6 @@ def test_tpag006_ops_input_invalid_with_enter(test, value, expected_value):
 
     target = test.table("table")
 
-    text00 = target.cell(0, 0).get_text()
-
     assert target.paging.current.get_value() == "1"
 
     target.paging.current.click()
@@ -166,8 +161,6 @@ def test_tpag007_ops_input_invalid_with_unfocus(test, value, expected_value):
 
     target = test.table("table")
 
-    text00 = target.cell(0, 0).get_text()
-
     assert target.paging.current.get_value() == "1"
 
     target.paging.current.click()
diff --git a/tests/unit/format_test.py b/tests/unit/format_test.py
@@ -223,16 +223,16 @@ def test_invalid_trim_type(self):
     def test_valid_decimal_delimiter(self):
         Format().decimal_delimiter("x")
 
-    def test_valid_decimal_delimiter(self):
+    def test_valid_decimal_delimiter_multi_char(self):
         self.assertRaises(ValueError, Format().decimal_delimiter, "xyz")
 
     def test_invalid_decimal_delimiter(self):
         self.assertRaises(TypeError, Format().decimal_delimiter, 7)
 
-    def test_valid_group_delimiator(self):
+    def test_valid_group_delimitator(self):
         Format().group_delimiter("y")
 
-    def test_valid_group_delimiator(self):
+    def test_valid_group_delimitator_multi_char(self):
         self.assertRaises(ValueError, Format().group_delimiter, "xyz")
 
     def test_invalid_group_delimiter(self):

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export default class IsolatedInput extends PureComponent<IProps, IState> {`
`40`	`40`	`return this.props as PropsWithDefaults;`
`41`	`41`	`}`
`42`	`42`
`43`		`- componentWillReceiveProps(nextProps: IProps) {`
	`43`	`+ UNSAFE_componentWillReceiveProps(nextProps: IProps) {`
`44`	`44`	`const { value } = this.props;`
`45`	`45`	`const { value: nextValue } = nextProps;`
`46`	`46`
Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {`
`97`	`97`	`this.propagateChange();`
`98`	`98`	`}`
`99`	`99`
`100`		`- componentWillReceiveProps(nextProps: ICellProps) {`
	`100`	`+ UNSAFE_componentWillReceiveProps(nextProps: ICellProps) {`
`101`	`101`	`const { value: nextValue } = nextProps;`
`102`	`102`
`103`	`103`	`if (this.state.value !== nextValue) {`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon`
`49`	`49`	`};`
`50`	`50`	`}`
`51`	`51`
`52`		`- componentWillReceiveProps(nextProps: SanitizedAndDerivedProps) {`
	`52`	`+ UNSAFE_componentWillReceiveProps(nextProps: SanitizedAndDerivedProps) {`
`53`	`53`	`this.setState(state => {`
`54`	`54`	`const { applyFocus: currentApplyFocus, workFilter: { map: currentMap, value } } = state;`
`55`	`55`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export default class Tooltip extends PureComponent<ITooltipProps, ITooltipState>`
`41`	`41`	`};`
`42`	`42`	`}`
`43`	`43`
`44`		`- componentWillReceiveProps(nextProps: ITooltipProps) {`
	`44`	`+ UNSAFE_componentWillReceiveProps(nextProps: ITooltipProps) {`
`45`	`45`	`const { delay, duration } = nextProps.tooltip;`
`46`	`46`
`47`	`47`	`if (isEqual(`