plotly · Marc-Andre-Rivet · Mar 10, 2020 · Dec 19, 2019 · Mar 2, 2020 · Mar 2, 2020
@@ -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
@@ -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

@@ -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>

@@ -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",

@@ -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;
 

@@ -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) {

@@ -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();

@@ -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;
 

@@ -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(

@@ -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(
             [

@@ -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")
@@ -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"},

@@ -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()

@@ -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):